https://github.com/juiceboxes/juice-grid
Lightweight, simple, grid system using CSS Grid OR Flexbox
https://github.com/juiceboxes/juice-grid
css cssgrid flexbox flexbox-grid grid grid-layout grid-system sass scss
Last synced: 11 months ago
JSON representation
Lightweight, simple, grid system using CSS Grid OR Flexbox
- Host: GitHub
- URL: https://github.com/juiceboxes/juice-grid
- Owner: juiceboxes
- License: mit
- Created: 2018-07-05T14:06:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-01T15:02:05.000Z (over 7 years ago)
- Last Synced: 2025-04-27T19:14:44.161Z (11 months ago)
- Topics: css, cssgrid, flexbox, flexbox-grid, grid, grid-layout, grid-system, sass, scss
- Language: HTML
- Homepage:
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Juiceboxes/juice-grid
A lightweight, simple, grid system using CSS Grid OR flexbox
This is not a complete grid, but, like other juicebox repos, is a lightweight product used for rapid prototyping.
## Installing
`npm install @juiceboxes/juice-grid`
### Imports
Regular CSS: `@import 'node_modules/@juiceboxes/juice-grid/juice-grid.css'`
Minified CSS: `@import 'node_modules/@juiceboxes/juice-grid/juice-grid.min.css'`
SCSS with Variable declarations: `@import 'node_modules/@juiceboxes/juice-grid/juice-grid.scss'`
## Useage
You have two different grid formats to use, both of which span 12 columns
### 1. Grid, uses CSS Grid for formatting and specified content widths
#### Basic
``` html
4 Columns
8 Columns
```
#### With Gutters
Before your import of the `.scss` file, declare your `$grid-gutter` variable. Otherwise, the default is `15px`.
``` html
.
.
.
```
#### Offsetting Columns
``` html
4 Column span starting at column 9 (spans col 9, 10 ,11 ,12)
```
### 2. Flex Grid, uses flexbox for formatting and no specified content widths
#### Basic
``` html
6
6
4
4
4
```
#### With Gutters
Before your import of the `.scss` file, declare your `$grid-gutter` variable. Otherwise, the default is `15px`.
``` html
.
.
.
```
## Development
`npm run start` will build and watch the `index.pug` and `src/juice-grid.scss` files