https://github.com/briangonzalez/gridss
A CSS Grid microlib.
https://github.com/briangonzalez/gridss
css grid
Last synced: 11 months ago
JSON representation
A CSS Grid microlib.
- Host: GitHub
- URL: https://github.com/briangonzalez/gridss
- Owner: briangonzalez
- Created: 2017-12-26T13:47:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-07T21:02:26.000Z (over 8 years ago)
- Last Synced: 2025-04-12T16:47:04.130Z (about 1 year ago)
- Topics: css, grid
- Language: HTML
- Homepage: https://codepen.io/briangonzalez/pen/jYyOOw?editors=1100
- Size: 125 KB
- Stars: 15
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/gridss)
### Description
gridss provides a mobile-first 12-column grid applied using object oriented css. It weights in at **~2kb**.
**[Demo →](https://codepen.io/briangonzalez/pen/jYyOOw?editors=1100)**
### Installation & Usage
```
npm install --save gridss
```
```html
```
### Docs
The source code is quite explanatory, but here are the general classes you can apply:
**Container**
```
.gridss
```
**Span Columns**
```
.col-{1..12}
.col-s-{1...12}
.col-m-{1...12}
.col-l-{1...12}
.col-xl-{1...12}
```
**Start-End Columns**
```
.col-s-{1...12}-{1-12}
.col-m-{1...12}-{1-12}
.col-l-{1...12}-{1-12}
.col-xl-{1...12}-{1-12}
```
For example:
```html
12 columns mobile
10 columns x-small and above
8 columns medium and above
6 columns large and above
4 columns x-large and above
```
```html
```
### What do you mean by mobile first?
It means that the sized-based grid classes function on _that size and larger._
**mobile first grid (like gridss)**: `col-l-6` applied to widths at or above "large"
**non-mobile first grid**: `col-l-6` applied to width at or below "large"
## License
MIT