https://github.com/jdormit/responsive-grid
A minimal 12-column mobile-first responsive grid
https://github.com/jdormit/responsive-grid
Last synced: about 1 year ago
JSON representation
A minimal 12-column mobile-first responsive grid
- Host: GitHub
- URL: https://github.com/jdormit/responsive-grid
- Owner: jdormit
- Created: 2016-10-03T04:29:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-03T18:53:30.000Z (over 9 years ago)
- Last Synced: 2025-01-22T02:45:54.913Z (over 1 year ago)
- Language: CSS
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsive Grid
Responsive grid is a minimal implementation of a 12-column mobile-first responsive grid. It is based on code from the [w3schools.com Responsive Web Design tutorial](http://www.w3schools.com/css/css_rwd_intro.asp).
# Usage
Simply include `grid.css` in your HTML document. To define the number of columns you want an element to take up, give it the `col-[x]` class, where `x` is a number from 1 to 12. You can also specify different widths for different screen sizes. `col-2` will take up 2 columns on desktop screens, and all 12 columns on smaller screens. `col-m-2` will take up 2 columns on desktop and tablet screens, and all 12 columns on mobile screens. `col-s-2` will take up 2 columns on all screen sizes mobile and larger. These can be combined - `col-4 col-m-6 col-s-8` will take up 4 columns on desktop screens, 6 columns on tablet screens, and 8 columns on mobile screens.
You can push elements to the right a certain number of columns using the `push-[x]` classes, where `x` is the number of columns to push the content. These are also separated by size, so `push-2` will push the content 2 columns to the right on desktop screens, `push-m-2` will do the same on desktop and tablet screens, and `push-s-2` will do the same on mobile screens and larger. These can be combined, so, for instance, `push-2 push-m-3 push-s-4` will push the content over 2 columns on desktop screens, 3 columns on tablet screens, and 4 columns on modile screens.
## Example
```html
This text will take up the whole row on all screen sizes.
This text will take up a whole row on screen sizes < 768px,
but only half a row on larger screens.
This text will take up a whole row on screen sizes < 414px,
half a row on screen sizes between 415px and 768px,
and a quarter of a row
on larger screens.
This text will take up the middle 4 columns on all screens.
This text will be 2 columns wide separated by 2 empty columns on large screens,
3 columns wide separated by 1 empty column on medium screens,
and 4 columns wide with no separation on small screens.
```
This example is reproduced in `example.html`, which is hosted [here](https://jdormit.github.io/responsive-grid/example.html).
If you want to play around with it yourself, check out the [JSFiddle](https://jsfiddle.net/hfndm0cf/).
# Installation
`grid.css` is served on Github pages. To include it in your html file, use:
```html
```
To download the file (in terminal):
`wget https://jdormit.github.io/responsize-grid/grid.css`
Or simply download from here.