Nuclear Powered Macros

    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

    Install

    npm i flex-attr

    DownloadsWeekly Downloads

    3

    Version

    0.1.3

    License

    MIT

    Last publish

    Collaborators

    • keenondrums
    • aigoncharov