Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dimorphic/grid-generator
WTGrid - SASS mixin for responsive CSS grids
https://github.com/dimorphic/grid-generator
Last synced: about 20 hours ago
JSON representation
WTGrid - SASS mixin for responsive CSS grids
- Host: GitHub
- URL: https://github.com/dimorphic/grid-generator
- Owner: dimorphic
- Created: 2015-03-27T13:30:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-03-27T13:30:33.000Z (over 9 years ago)
- Last Synced: 2024-04-14T07:29:20.046Z (6 months ago)
- Language: CSS
- Homepage:
- Size: 137 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
WTGrid
==============
With the help of WTGrid you will be able to generate whatever CSS grid you need. Unlike all CSS frameworks out there WTGrid creates only the needed styles without polluting the source code with unneeded code.
WTGrid is not an actual framework. Its a @mixin that can be integrated anywhere and it only takes care of grids.
It makes use of the $map property in SASS v3.3 to define the configs of desired grid.
WTGrid is full responsive and compatible with IE9+
It has few configs and its very easy to use.
Why WTGrid?
==============
It will generate styles only for your configs. No extra classes no extra styles are added to your CSS.
WTGrid is not dependent on box-sizing. It works fine with both content-box and border-box.
The gutter is implemented making use of calc() and margin and so it does not touch the integrity of the container. Backgrounds ca be safely used on grid columns.
Instalation
==============
In order to use WTGrid you will need to have SASS v3.3 minimum
```
$ gem install sass
$ sass -v
-> Sass 3.3 minimum
```
Then you will have to clone the repository and compile SASS. You can do this with:
```
$ git clone [email protected]:mihnutzen/Grid-Generator.git
$ cd project-name
```
```$ sass scss/style.scss css/style.css```
Or
```$ compass watch``` If you like compass
Or you can include ```_responsive_mixins``` and ```_wtgrid``` in your project and add them to your main SCSS
```
@import "responsive_mixins";
@import "wtgrid";
```
Usage
==============
Grids can be generated by defining the following configs:
```columnCount``` - is used to define the number of columns
```gutter``` - for adding space between columns. both px and % can be used
```columnVariations``` - is used for creating custom column sizes. It is set in the to form of XoY where X is the size of the column and Y is the numbers of columns to which it calculates the width.
The configs are passed to the mixing in the form of an object:
```
$gridSetup: (
columnCount: 3,
columnVariations: "2o3",
gutter: 10px
);
@include generateGrid($gridSetup);
```
The ```@mixin``` will take care of generating the class names and the styles
Styles and classes for specific breakpoints can be created by configuring ```s / m / l / xl```.
```s / m / l / xl``` - receive same options as a normal grid
```
$gridSetup: (
s: (
columnCount: 2
)
);
@include generateGrid($gridSetup);
```
Examples
==============
Creating a grid with 2 columns:
```
$gridSetup1: (
columnCount: 2
);
@include generateGrid($gridSetup1);
```
Creating a grid with 4 columns and 10px gutter:
```
$gridSetup2: (
columnCount: 4,
gutter: 10px
);
@include generateGrid($gridSetup2);
```
Creating a grid with 5 columns and 1 custom size:
```
$gridSetup3: (
columnCount: 5,
columnVariations: "4o5"
);
@include generateGrid($gridSetup3);
```
Arrays can be used to declare multiple grid types:
```
$gridSetup4: (
columnCount: 3 4,
columnVariations: "1o4" "3o4",
gutter: 10px
);
@include generateGrid($gridSetup4);
```
Creating a responsive grid with different column size only for small screens:
```
$gridSetup5: (
columnCount: 2,
s: (
columnCount: 1 2,
gutter: 20px
)
);
@include generateGrid($gridSetup5);
```
Creating a responsive grid with different columns sizes for each breakpoint:
```
$gridSetup7: (
s: (
columnCount: 3,
gutter: 20px
),
m: (
columnCount: 4,
columnVariations: "1o4" "3o4",
gutter: 10px
),
l: (
columnCount: 2 4,
gutter: 20px
),
xl: (
columnCount: 1 5,
gutter: 10px
)
);
@include generateGrid($gridSetup7);
```
Grid configs can become as complex as you want.
```
$gridSetupX: (
columnCount: 3 4 6 12,
columnVariations: "2o6" "4o6" "7o12" "3o12" "2o12",
gutter: 10px,
s: (
columnCount: 2 3 4,
columnVariations: "1o3" "2o3",
gutter: 10px
),
m: (
columnCount: 1 4 6,
columnVariations: "4o6" "2o6" "1o6" "5o6",
gutter: 20px
),
l: (
columnCount: 1 3 4,
columnVariations: "1o4" "3o4"
),
xl: (
columnCount: 1 9,
columnVariations: "6o12"
)
);
.big-grid {
@include generateGrid($gridSetupX);
}
```