npm install flxgrid.cssMakes grid classes for given number of columns (default: 12) and breakpoints (default: xs, sm, md, lg).
``html`
...
...
...
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
}
`
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;
}
``