SASS Selectors

Learn how to work around with Phenix Sass Selectors to build and customize different components with a specific set of properties that fix side effects or apply some UI effects

Overview

phenix uses a set of sass selectors as extendable helpers to build components and UI Elements with a specific set of properties that fix side effects or support some effect like centering a positioned element or clearing a floating effect etc.

and you will come across some of these selectors when you get to use Components, Utilities, Forms and maybe it will come in handy to save time and merge your custom CSS which will maintain a small size CSS files.

💼-your-project[phenix]
    📂-src/sass
        📁-assets
           📁-mixin
           📄_reset.scss
           📄_selectors.scss
           📄_functions.scss

UI Resets

the reset selectors are a collection of selectors that holds properties to reset the default CSS on different types of HTML elements like reset space margin/padding with %reset-space and %reset-list for ul/ol/dl elements, you can use them like the example below.

/*====> Reset Margin and Padding <====*/
.class-name {
    @extend %reset-space;
}

/*====> Reset Margin, Padding and Remove list bulits <====*/
ul.class-name {
    @extend %reset-list;
}

/*====> Reset Padding, Border and Focus outline for Form Controls  <====*/
input.class-name {
    @extend %reset-control;
}

/*====> Remove Select control arrow button <====*/
select.class-name {
    @extend %select-reset;
}

Layouts & Typography

in layout and typography selectors you will find a collection that helps you do some tricks to approach a correct behavior like setting display prefixed properties for flex and creating inline-block elements that align correctly inside the line-height-based element, etc. you can use them like the example below.

/*====> Set display:inline-block that behave currectly to line-height <====*/
.class-name {
    @extend %inline-block;
}

/*====> Set display:flex with wraped flow <====*/
.class-name {
    @extend %flexbox;
}

/*====> Creating ellipsis overflowating text <====*/
.class-name {
    @extend %nowrap;
}

/*====> fix float side effect by clearing after the floated element <====*/
.floated-elements-wraper {
    @extend %clear-after;
}

Transition

in transition selectors, there are three selectors to make transition effect with 3 levels of timing fast:300ms, smooth:500ms, and slow:1s and you can use it when you need to make an animated hover effect or any animated transition changes on any element, and you can use them like the example below.

/*====> Set Fast:300ms Transtion <====*/
.class-name {
    @extend %fast-motion;
}

/*====> Set Smooth:500ms Transtion <====*/
.class-name {
    @extend %smooth-motion;
}

/*====> Set Slow:1000ms Transtion <====*/
.class-name {
    @extend %slow-motion;
}

Position Fixes

position fixing selectors are side effect fixers when you position an element with a percentage instead of px, rem, etc.. to make the element start point self-center instead of the start edge.

/*====> Fix position:absolute, percentage position Horizontally [X] <====*/
.class-name {
    @extend %position-center-x;
}

/*====> Fix position:absolute, percentage position Vertically [Y] <====*/
.class-name {
    @extend %position-center-y;
}

/*====> Fix position:absolute, percentage position X, Y <====*/
.class-name {
    @extend %position-center;
}

/*====> Reset transform:translate to 0 <====*/
.class-name {
    @extend %position-default;
}

UI Helpers

UI helper selectors are a collection of selectors that help you do different stuff like preventing text selection, creating an overlay layer, or creating support for flipping effects, etc., and each selector has an example in the code below.