@borngroup/born-flexgrid

    3.0.6 • Public • Published

    BORN Flexbox Grid

    Enhances the useful flex-grid to provide extra features, such as multi-base grids.

    Includes SASS and LESS options, as well as a built CSS and minified file.

    Usage

    SASS

    Recommended: use the node-sass|libSass includePaths option to reference your node folder.

    You can setup custom values for your grid. Follow instructions here for a how to.

    Additionally, you can set $fg-columns as a list to generate a grid with multiple bases:

    $fg-columns: 10, 12, 16;
    

    You can also set different spacing per breakpoint using $fg-gutter. Note: You can skip a breakpoint if you want.

    $fg-gutter: (xs: 0.5rem, md: 1rem, lg: 1.5rem);
    

    Set $fg-use-off-half to true to generate -off margin positioning using half a column's width.

    $fg-use-off-half: true;
    

    Finally, import the grid into your file:

    @import 'path/to/node_modules/born-flexgrid/src/flex-grid.scss';
    

    LESS

    Recommended: use the lessc --include-path option to reference your node folder.

    Usage is similar to the SASS setup. The only differences are:

    1. Import the .less variant:

       @import 'path/to/node_modules/born-flexgrid/src/flex-grid.less';
      
    2. LESS doesn't support maps, so you must setup your breakpoint variables as a list of lists:

       @fg-breakpoints: xs, sm 768px, md 992px, lg 1200px;
      

      Unlike the SASS version, @fg-gutter must have the same order as @fg-breakpoints, and must have values for each breakpoint:

       @fg-gutter: xs 0.5rem, sm 0.75rem, md 1rem, lg 1.5rem;
      

    Install

    npm i @borngroup/born-flexgrid

    DownloadsWeekly Downloads

    77

    Version

    3.0.6

    License

    ISC

    Unpacked Size

    38.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • jason.wolf0708
    • marcgreenfield-born
    • gabriel-freiberg
    • thdoan