flex-attr
v0.1.3
Published
Power of flexbox with easy to use attribute selectors for LESS, SASS and vanilla CSS
Downloads
12
Readme
flex-attr
Flex Atrr is a set of CSS rules, which brings the power of flexbox into your project without you writing a single line of CSS yourself. Works with LESS, SASS and vanilla CSS. It's basically a fork of Angular Material without some attributes, which were found not useful, and couple features added.. For a comprehensive guide check original Angular Material documentaion
Install
Bower
bower install --save flex-attr
NPM
npm install --save flex-attr
Comparison to Angular Material
- Added port for LESS
- Added ability to generate CSS for a custom list of screen breakpoints
- Changed show and hide attributes override rules
- Deprecated layout-padding attribute
- Deprecated layout-margin attribute
Custom breakpoints
By default the preprocessor will generate CSS for the following screen size postfixes:
- xs: 600px
- sm: 960px
- md: 1280px
- lg: 1920px
You can easily override it by providing your list in your sass in a format of ': postfix screen-size' (in order to make this work adjust your build script to pick up .less or .scss file instead of .css):
$layout-breakpoints: xxs 480px, xs 600px, sm 960px, md 1280px, lg 1920px;
The same is valid for less:
@layout-breakpoints: xxs 480px, xs 600px, sm 960px, md 1280px, lg 1920px;
Visibility attributes override rules
- Rules without 'gt' postfix override ones with the postfix
- Show rules override Hide rules
- Print rules override regular rules
- All print rules are provided without 'gt' postfix
Example:
- hide show-md - hidden everywhere but md screens
- hide-gt-xs show-gt-sm hide-gt-lg - visible on xs screens, hidden on sm screens, visible on md and lg screens, hidden on screens greater than lg
- hide show-gt-xs hide-lg - hidden on xs screens, visible on sm, md screens, hidden on lg screens, visible on screens greater than lg