flex-attr

0.1.3 • Public • Published

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

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

Package Sidebar

Install

npm i flex-attr

Weekly Downloads

3

Version

0.1.3

License

MIT

Last publish

Collaborators

  • keenondrums
  • aigoncharov