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.

/*====> Prevent Text selection for any element <====*/
.class-name {
@extend %no-select;
}
/*====> Set [SVG] Arrow icon as Background for Select Controler <====*/
.class-name {
@extend %select-arrow;
}
/*====> Create an Overlay Layer from the Element :before pseudo <====*/
.class-name {
@extend %overlay;
}
/*====> Create Support for Nigiative z-index, Flip Effects <====*/
.class-name {
@extend %backface-visibility;
}

Cheat Sheet

a sheet table of all Sass selectors available in phenix.

Selector	Description	Markup
%reset-space	remove margin and padding	<any>
%reset-list	remove margin, padding, and list bullets	<ul, ol, dl>
%reset-control	remove padding, border, and focus outline for form controls	<input/>
%select-reset	remove the select control arrow button	<select>
%inline-block	set display:inline-block that behaves correctly to line-height	<any>
%flexbox	set display: flex with wrapped flow	<any>
%nowrap	creating ellipsis overflowing text	<any>
%clear-after	fix the float side effect by clearing after the elements	<any-wrapper>
%fast-motion	set Fast: 300ms Transition	<any>
%smooth-motion	set Smooth: 500ms Transition	<any>
%slow-motion	set Slow: 1000ms Transition	<any>
%position-default	reset transform: translate to 0	<any>
%position-center	fix position: absolute, percentage position X, Y	<any>
%position-center-y	fix position: absolute, percentage position Vertically [Y]	<any>
%position-center-x	fix position: absolute, percentage position Horizontally [X]	<any>
%no-select	prevent Text selection for any element	<any>
%select-arrow	set <svg> arrow icon as background for select controller	<select>
%overlay	create an overlay layer from the: before element pseudo	<any>
%backface-visibility	create support for negative z-index, flip effects	<any>