Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristiegiles/fraction-grid
Sass mixins to generate a custom mobile-first grid system
https://github.com/kristiegiles/fraction-grid
grid-system grids sass-mixins
Last synced: about 1 month ago
JSON representation
Sass mixins to generate a custom mobile-first grid system
- Host: GitHub
- URL: https://github.com/kristiegiles/fraction-grid
- Owner: kristiegiles
- License: mit
- Created: 2017-02-10T06:18:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-10T09:54:12.000Z (almost 8 years ago)
- Last Synced: 2024-10-20T07:13:02.737Z (2 months ago)
- Topics: grid-system, grids, sass-mixins
- Language: CSS
- Homepage:
- Size: 26.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fraction-grid
Grid systems that use class names like `col-md-3` don't give you the ability to change the number of columns in your grid without refactoring your whole codebase.
This is a Sass partial you can customize to generate your own easy-to-use and infinitely scalable grid system. It uses [BEM syntax](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
and enforces a mobile-first approach.
##Configuring the Grid##
Update the variables at the top of the _grid.scss file to configure your grid system.
**`$columnsList`** A list of the column sizes you'd like. If you just want to start with a 12-column grid, you'd use a value of
`'12'`. To add a 5-column option, you'd change it to `$columnsList: '12, 5'`.
**`$vr-border-style`** Style to use for vertical rules.
**`$gutter-size`** Space between grid items.
**`$breakpointsList`** Namespaces for your breakpoints.
####Breakpoint Sizes####
You can change the pixel values on these. If you choose to add or remove breakpoints, you must update the `$breakpointsList` to match.
```
$breakpoint-sm
$breakpoint-md
$breakpoint-lg
$breakpoint-xl
```
To build the CSS using this repo, `cd` into the fraction-grid directory and run `npm install` and then `grunt`.
##Using the Grid##
###Grids###
The `grid` class should be used for groups of grid items. It's similar to a row in a traditional grid, but your grid items can span multiple rows.
###Grid Items###
The `grid__item` class should be used for individual grid items (a.k.a. columns). Grid items must be direct decendants of a grid.
###Width Utilities###
Grid items are 100% width by default. Sizing should be done with the `{columns}/{totalColumns}@{breakpoint}` utility classes – for example, `1/2@md 1/3@lg 1/4@xl` (or for a 12-column-only grid, you'd use `6/12@md 4/12@lg 3/12@xl`). These classes enforce a mobile-first approach and will affect viewports at the defined size and greater.
```
```
For columns that are the same sizes at all breakpoints, just leave off the `@{breakpoint}` part.
```
```
###Vertical Rules###
To add a vertical rule, use the `vr-right` or `vr-left` classes on a grid item. To add a vertical rule only at a specified breakpoint and larger, use `vr-right@{breakpoint}` or `vr-left@{breakpoint}`. The vertical rule will be the height of the tallest grid item in the row.
```
```
###Spacing Utilities###
You may often want bottom margins that match the gutter width of your grid items. You can add these with the `spacing-bottom` / `spacing-bottom@{breakpoint}` utilities.
```
```
###Offset Utilities###
The `offset-{columns}/{totalColumns}@{breakpoint}` can be used to give a grid item a left margin of the specified size.
---
Rated for IE10+
Inspired by [Inuit CSS](https://github.com/csswizardry/inuit.css/)