Data grid
Flexbox based grid that uses a JSON like attribute for options
The grid is for page layout, it provides different column sizes at each of the configured breakpoints.
On the smallest size the grid columns will span 100%. The grid is setup using two attributes, data-grid="" for the parent grid container and data-grid-item="" for each grid column. The grid uses a script to set position classes, which are used for rule placement since the grid and reflow at different breakpoints.
Options
| Option | Value | Description/Example |
|---|---|---|
| columns | 12 |
Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids. |
| justify | (center|end) |
Allows you to justify the columns (horizontal alignment). The defualt is start (left aligned) |
| align | (center|start|end|stretch-end|stretch-center) |
Allows you to align the columns (vertical alignment within row). The defualt is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center. |
| gutters | false |
You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default. |
| gutters-row | (true|top|bottom|fit) |
If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows. |
| gutter-scale | [scale key] |
No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid. |
| rules-row | (top|bottom|between) |
Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom. |
| rules-row-style | [style key] |
If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS. |
| rules-row-align | (gutter) |
The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge. |
| rules-row-persist | true |
If set the rules between rows will persist when the grid is no longer in use (ie. mobile, smallest breakpoint before columns start to show. Useful to retain divider between rows on mobile. |
| rules-row-stacked-only | true |
Same as persist adds rules to row before grid is being used (ie. mobile/small), except there will only be rules during this smallest breakpoint (mobile). Useful for when dividers don't make sense when the grid is displaying in columns but do make sense when columns are stacked on mobile. |
| rules-column | (left|right) |
Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column |
| rules-column-style | [style key] |
If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS. |
| rules-column-ends | true |
Specify that the rules should not be removed at the beginning or end of rows. Which happens by default depending on if the rules are on the left or right of the element. |
| rules-column-align | true |
Sets rules (dividers) between columns |
| Option | Value | Description/Example |
|---|---|---|
| width | [# of columns] |
Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids. |
| width-[breakpoint] | [# of columns] |
Sets the width at a given breakpoint. Breakpoints are configured when initializing the grid in SCSS. Note this can be combined or used independently with the 'width' setting (above). For example if you only wanted the grid to start at the medium breakpoint you would just set 'width-medium' |
| offset | [# of columns] |
Offsets the column by a certain number of columns |
| offset-[breakpoint] | [# of columns] |
Same as width-[breakpoint] except for offset instead of width |
| sticky | [top, bottom] |
Set's a column to be sticky |
Examples
- Dotted Line is the container holding the data-grid
- Solid Line is the individual cells including gutters
- Purple Background is the cell's content
- Solid Black Line is the grid's rules
Default Grid
default (test sticky column)
Justify Content
Allows you to justify the columns (horizontal alignment). The default is start (left aligned)
default (justify start)
justify: center
justify: end
Align
Allows you to align the columns (vertical alignment within row). The default is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center.
Default (stretch start)
align: center
gutters
You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default.
default
gutters: false
gutters-row
If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows.
gutters-row: true
gutters-row: top
gutters-row: bottom
gutters-row: fit
gutter-scale
No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid.
rules-row
Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom.
For demo purposes, the rules are set to 2px to aid in the visualization. Default is 1px
rules-row: top
rules-row: bottom
rules-row: between
rules-row-align
The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge.
rules-row-align: gutter
rules-column
Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column
rules-column: right
rules-column: between align to gutter
item width
Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow multiple grids. All examples specify the item's width
item offset
Offsets the column by a certain number of columns