Nuclear Powered Macros


    0.1.3 • Public • Published


    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



    bower install --save flex-attr


    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


    • 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


    npm i flex-attr

    DownloadsWeekly Downloads






    Last publish


    • keenondrums
    • aigoncharov