https://github.com/nickrigby/silc-grid
Flexbox-based grid for the silc framework
https://github.com/nickrigby/silc-grid
flexbox grid silc-framework
Last synced: 2 months ago
JSON representation
Flexbox-based grid for the silc framework
- Host: GitHub
- URL: https://github.com/nickrigby/silc-grid
- Owner: nickrigby
- License: mit
- Created: 2017-03-31T03:59:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T12:53:11.000Z (over 2 years ago)
- Last Synced: 2025-01-11T02:12:42.764Z (4 months ago)
- Topics: flexbox, grid, silc-framework
- Language: HTML
- Homepage: https://silc.io
- Size: 53.7 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# silc grid [](https://badge.fury.io/js/silc-grid)
The grid module is a lightweight, flexbox-based grid system for the [silc framework](https://github.com/nickrigby/silc). The grid uses responsive classes, that can be generated from any number of custom breakpoints.
## HTML
```html
6
6
4
4
4
3
3
3
3
```
## Class modifiers
### Column widths
Column widths can be changed on a per-breakpoint basis using the `silc-grid__col--{columns}-{breakpoint}` modifier class.
```html
...
...
...
...
```
#### Auto column width
A column width can also be set to "auto", where it's width is not explicitly set. Auto widths can be applied across all breakpoints using `silc-grid__col--auto` or at specific breakpoints using `silc-grid__col--auto-{breakpoint}`.
### No gutters
By default, silc grids have gutters, which are specified using the `$silc-grid--gutter` variable. However, using the `silc-grid--no-gutters` modifier class, you can specify individual grids to have no gutters.
```html
...
```
#### Collapse
It is also possible to remove the bottom margin from grid columns using the `silc-grid--collapse` modifier.
```html
...
```
__Note:__ To set all grids to have no gutters by default, simply set the `$silc-grid--gutter` variable to `0`.
### Justify content
Justify the alignment of grid columns using the `silc-grid--justify-{alignment}` modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using `silc-grid--justify-{alignment}-{breakpoint}`.
#### Justify left (default)
```html
...
...
```
#### Justify right
```html
...
...
```
#### Justify center
```html
...
...
```
#### Justify between
Uses flexbox `space-between` to justify content. Great for two column rows where one row is flush left, and the other is flush right.
```html
...
...
```
### Align content
Vertically align columns in the grid using the `silc-grid--align-{alignment}` modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using `silc-grid--align-{alignment}-{breakpoint}`.
#### Align top (default)
```html
...
...
```
#### Align bottom
```html
...
...
```
#### Align center
```html
...
...
```
### Reverse columns
Reverse the order of columns using the `silc-grid--reverse` modifier class. This can be specified globally (for all breakpoints), or on a per-breakpoint case using `silc-grid--reverse-{breakpoint}`.
```html
...
...
```
## Variables
A number of variables are available for modifiying the default structure of the grid. [View full list of variables](src/scss/_variables.scss). Override the default variables by declaring them in your own SASS import file, which should be included after the silc-grid import.