https://github.com/farhadg/grid
A lean, customizable and semantic CSS grid builder using Stylus
https://github.com/farhadg/grid
css-grid-layout grid stylus
Last synced: about 1 month ago
JSON representation
A lean, customizable and semantic CSS grid builder using Stylus
- Host: GitHub
- URL: https://github.com/farhadg/grid
- Owner: FarhadG
- Created: 2015-04-19T23:03:45.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-06-01T18:34:28.000Z (almost 10 years ago)
- Last Synced: 2025-02-02T18:24:55.096Z (3 months ago)
- Topics: css-grid-layout, grid, stylus
- Language: JavaScript
- Homepage:
- Size: 141 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Grid
====
A lean, customizable and semantic CSS grid builder using Stylus.
## Installation
You can simply fork or clone (download); then follow the given commands.
```
$ git clone https://github.com/FarhadG/grid.git
$ npm install
$ npm run start
```
## Usage
Once you've installed all of the dependencies, run `npm run start`, which provides you with live reloading and compiling of the assets from the `src` directory to `dist`. If you prefer just the build, you can run `npm run build`.
You can configure the builder by editing `config.styl` inside the `src` directory.
You can configure the following options:
- Number of columns
- Fixed container width
- Fluid container width
- Column gutters (margins)
- The number of breakpoints (media queries), followed by naming them and setting their points.
```javascript
/**
* Grid configuration
*/
$col-count = 12
$max-wrapper-width = 1200px
$fluid-wrapper-width = 100%
$col-gutters = 10px
/**
* Break point names and values
*/
$break-point-names = 'xs' 'sm' 'md' 'lg' 'xl'
$break-point-values = 0 768 992 1200 1400
```