fx-framework
v1.0.1
Published
Pure CSS Flex-Layout based on angular/flex-layout
Downloads
30
Maintainers
Readme
FxFrameWork
Pure CSS Flex-Layout based on javascript Angular Flex-Layout. Idea is to use pure CSS solution in Angular application where is not needed to use JavaScript version of Angular Flex-Layout or in place with big data to improve performance.
Demo
Example of all available CSS Classes and how to use them, you can find on this demo website.
Install
npm i fx-framework --save
Usage
SCSS
If you are not using already package sass-mq, then add to your .scss
file:
@import 'path_to_your_node_modules/fx-framework/src/fx-framework'
If you already using package sass-mq, then use FxFramework directly:
@import 'path_to_your_node_modules/fx-framework/src/core/fx-framework
CSS
For already compiled CSS you can find it in:
path_to_your_node_modules/fx-framework/dist/fx-framework.css
;
Setup
Breakpoints
Default breakpoints are defined as:
$fx-breakpoints: (
xs: 0,
sm: 600px,
md: 960px,
lg: 1280px,
xl: 1920px
) !default;
For override it, just redefine $fx-breakpoints
variable with your own map of breakpoints before you imported fx-framework
in your scss
file.
Media-Queries
Fx-Framework using dependency of sass-mq. For setup it, check documentation on their GitHub repository.
Changelog
For more information check CHANGELOG.md on this repository.
Contributing
There are not any major rules how to be an contributor. If you think that your feature/bug fix/contribution might be worthwhile, describe what you did and don't hesitate to create Pull Request.
Generate CSS File
After you did some changes on scss
files, please, don't forget to re-generate CSS File. For that you can run simply Gulp task in your project path:
gulp --production
License
MIT