A small flexbox based grid system.
- grid mode (classical grid calculator, read the Quick Start)
- experimental mode (caution: safety not guaranteed - supports relative, fix & flexible item widths)
- "fancy" arguments
- nested grids
- variable flow directions
- scalable number of gird columns
- scalable gutter margins (vertical & horizontal)
bower install flx-grid-scss
# or
npm install flx-grid-scss
- Sass 3.4 +
- flexbox support
- calc() support
- 12 columns per container
- 10px margin between each column
Include the flx-container
mixin to your container element.
Notice that, because of the nature of flexbox, every element that shall contain grid-elements, requires flx-container
.
.container {
@include flx-container;
}
Compiled CSS:
.container {
box-sizing: border-box;
direction: ltr;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Add flx-item
to any element to define the number of columns it should span.
.item {
@include flx-item(3);
}
Compiled CSS:
.item {
flex-basis: calc(25% - 7.5px);
margin: 0px;
margin-right: 10px;
margin-bottom: 10px;
}
The last item in each row needs flx-last
to reset the spacing margin.
.item.last {
@include flx-last;
}
Compiled CSS:
.item.last {
margin-right: 0;
}
- values
- methodical
- flx-mode
- flx-direction
- mathematic
- flx-units
- flx-width
- flx-margin
- flx-margin-b
- flx-last
- methodical
- mixins
- flx-container
- flx-item
- flx-last
- the fancy arguments concept
- seperation
- prefixes
type: keyword
default: grid
grid - classical grid calculator
experimental - supports relative, fix & flexible item widths, but might be buggy
type: keyword
default: row
Defines the direction and axis of the grid flow. Is equal to the flex-direction property (- fixed to ltr).
type: number
default: 12
Defines the number of columns (or rows) within the grid.
type: number, length & percentage or keyword
default: undefined (have to be defined as argument)
Defines the number of columns a item spans.
grid mode: only numbers are valid
experimental mode: number, length & percentage or „flex“ as keyword works. „Flex“ set an item to a self sizing flexbox. Notice that in experimental mode the flx-width must be the first argument given (to a flx-item mixin).
type: length & percentage
default: 10px
Defines the margin between two grid items, in direction of grid flow (direction). All valid margin values works.
Notice that in „column“ and „column-reverse“ percentages break the grid
type: length & percentage
default: undefined ( - equals flx-margin if undefined)
Defines the margin between two grid items, parallel to direction of grid flow (direction). All valid margin values works.
type: number & keyword
default: undefined
Can be given to set a :nth-child() pseudo-class to the flx-last mixin. All valid :nth-child() values works.
@include flx-container();
wrapper mixin - needs to be include in any wrapper that contain grid elements
possible arguments:
-
flx-units
-
flx-direction
-
flx-mode
-
flx-margin
-
flx-margin-b
@include flx-item();
grid element mixin - declare a element as a grid item and defines the number of columns it should span.
required arguments:
- flx-width
possible arguments:
-
flx-units
-
flx-margin
-
flx-margin-b
@include flx-last();
“end of line“ reset mixin - resets the margin of the item it’s given to. In flx-mode: grid
needs to be included to the last item of each row.
possible arguments:
-
flx-last
This means the order in wich the arguments have to be given to the mixin only depends on the order of values with the same type and that arguments can be left out if they needn’t to be adjust.
Examples:
@include flx-container(14 column 20px);
// 14 = flx-units, column = flx-direction, 20px = flx-margin
@include flx-container(20px column 12 experimental);
// 20px = flx-margin, column = flx-direction, 12 = flx-units, experimental = flx-mode
// (both perfectly valid)
@include flx-item(20px 1 14);
// 20px = flx-margin, 1 = flx-width, 14 = flx-units
// (valid)
@include flx-item(14 1);
// 14 = flx-width, 1 = flx-units
// (breaks because 14 becomes fix-width)
Because of the fancy arguments concept arguments may not be separated with a comma.
Example:
@include flx-container(14 column);
// (valid)
@include flx-container(12, experimental);
// (invalid)
flx-gird-scss dosen’t provides prefixes (e.g. -ms-
or -webkit-
) as it’s developed with modern sass/front-end workflows (using something like autoprefixer) in mind.