NgxFiFxFlex
Responsive flex css framework, inspired by Angular FlexLayout
Installation
npm i ngx-fi-fx-flex --save
How to use
Registration
Consider using one of the below approaches
- In
angular.json
Under styles register flex.min.css or flex.scss
- In
styles.scss
;or;
- In
index.html
Expose flex.min.css in a public location and add to your index.html
- Using some other mechanism that will load the css / scss file in your solution
Customizations
Feel free to customize as needed per your respective use case
-
The solution consists of the following
flex.scss
: bootstraps the frameworkbreakpoints.scss
: responsive breakpointsvars.scss
: varsmixins.scss
: mixins
-
mixins.scss
flex
: produces the entire framework using mixins belowfxBoxSizing
: produces the generic selector that sets box sizing for every element prefixed using the defined prefixfxBreakpoints
: uses fxStyling mixin to produce styles based on defined breakpointsfxStyling($prefixValue)
: produces styling- a blank prefix value would result to something like
.fx-dir-row
- a prefix value like xs would result to something like
.fx-xs-dir-row
- a blank prefix value would result to something like
-
breakpoints.scss
;
vars.scss
;;;;;;;;;;
Classes
Please check flex.css
for the complete listing of all available classes