https://github.com/paulradzkov/flxgrid.css

Configurable flexbox grid build on LESS
https://github.com/paulradzkov/flxgrid.css

css flexbox grid less npm

Last synced: 26 days ago
JSON representation

Configurable flexbox grid build on LESS

• Host: GitHub
• URL: https://github.com/paulradzkov/flxgrid.css
• Owner: paulradzkov
• Created: 2016-03-20T09:13:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-04-24T09:23:10.000Z (over 4 years ago)
• Last Synced: 2024-10-08T07:54:15.115Z (30 days ago)
• Topics: css, flexbox, grid, less, npm
• Language: HTML
• Homepage: https://paulradzkov.github.io/flxgrid.css
• Size: 5.61 MB
• Stars: 14
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.json
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# flxgrid.css — flexbox grid system

[![npm version](https://badge.fury.io/js/flxgrid.css.svg)](http://badge.fury.io/js/flxgrid.css)

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fpaulradzkov%2Fflxgrid.css.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fpaulradzkov%2Fflxgrid.css?ref=badge_shield)

Makes grid classes for given number of columns (default: 12) and breakpoints (default: xs, sm, md, lg).

## Usage in HTML

```html



    


        ...

    

    


        ...

    

    


        ...

    



```


## Default parameters

Component has global mixin with settings named `.grid-settings();` and global variable `grid-render` which contains all code.

Default settings:

```less

.grid-settings() {

    // settings

    @grid-columns: 12;   // number of columns

    @gutter-width: 30px; // gap between columns

    @outer-margin: 60px; // padding left and right for fluid container

    // media breakpoints (default: as on bootstrap)

    @breakpoints:

        ~"(min-width: 768px)",

        ~"(min-width: 992px)",

        ~"(min-width: 1200px)";

    // max-width of containers according breakpoints

    @container-maw:

        750px,

        970px,

        1170px;

    // names for breakpoint suffixes

    @suffixes: xs, sm, md, lg;

    // IMPORTANT: suffixes count should be bigger than breakpoints count by 1

    // suffixes-count = breakpoints-count + 1

}

```

## Usage in LESS

Running with default parameters:

```less

@import (less) "pathto/flxgrid.less";

```

Redefining gutter-width and breakpoints:

```less

@import (less) "pathto/flxgrid.less";

.grid-settings() {

    @gutter-width: 60px;

    // media breakpoints

    @breakpoints:

        ~"(min-width: 480px)",

        ~"(min-width: 768px)",

        ~"(min-width: 992px)",

        ~"(min-width: 1200px)",

        ~"(min-width: 1600px)";

    // max-width of containers according breakpoints

    @container-maw:

        100%,

        750px,

        970px,

        1170px,

        1540px;

    // names for breakpoint suffixes

    @suffixes: xxs, xs, sm, md, lg, xlg;

}

```

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fpaulradzkov%2Fflxgrid.css.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fpaulradzkov%2Fflxgrid.css?ref=badge_large)