https://github.com/levibeach/grid

A SASS layout library
https://github.com/levibeach/grid

css grid layout mixin sass

Last synced: 2 days ago
JSON representation

A SASS layout library

• Host: GitHub
• URL: https://github.com/levibeach/grid
• Owner: levibeach
• Archived: true
• Created: 2015-12-17T20:49:39.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-08-24T15:00:18.000Z (about 2 years ago)
• Last Synced: 2024-09-20T18:23:16.013Z (8 days ago)
• Topics: css, grid, layout, mixin, sass
• Language: HTML
• Homepage: http://levibeach.github.io/grid
• Size: 36.1 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
```

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

░░░░░░░░░░░░░░▓▓▓▓▓▓░░░▓▓▓▓▓▓░░░▓▓▓▓▓▓░░▓▓▓▓▓▓░░░░░░░░░░░░░░░░

░░░░░░░░░░░░▓▓░░░░░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░

░░░░░░░░░░░░▓▓░░▓▓▓▓░░▓▓▓▓▓▓░░░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░

░░░░░░░░░░░░▓▓░░░░▓▓░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░▓▓░░░░░░░░░░░░░░

░░░░░░░░░░░░░░▓▓▓▓▓▓░░▓▓░░░░▓▓░░▓▓▓▓▓▓░░▓▓▓▓▓▓░░░░░░░░░░░░░░░░

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

```

Grid is a collection of mixins and variables to create your own css layout framework quickly. It relies on [`calc()`](http://caniuse.com/#search=calc) and [advanced CSS selectors](http://caniuse.com/#feat=css-sel3).

---

## Setup

1. Clone the repo or `npm install @levibeach/grid`

2. Include the `_grid.scss` file in your Sass

## Usage

```

.grid-container-element {

  $grid-children: '.grid-column-element' !global;

  @include grid-container();

  @include grid(1, 2, 4, 5);

}

.grid-column-element {

  ...

}

```

The above styles will result in a `.grid-container-element` which has 4 columns and the layout will be something like this:

```

| 1 |  2  |    4    |     5     |

```

Or you can also just do one-off columns like this:

```

.grid-column-element {

  @include grid-col(6);

}

```

## Variables

###### $grid-gutters `10px`

Sets the width of the gutters between the columns.

###### $grid-columns `12`

Sets the number of columns to run the column/gutter calculations against.

###### $grid-children `div`

Sets the element that will be used when running the `grid()` mixin.

## Demo

You can see it in action [here](https://levibeach.github.io/grid).