https://github.com/charliewilco/twelve.scss

Simple Twelve Column Grid
https://github.com/charliewilco/twelve.scss

Last synced: about 1 month ago
JSON representation

Simple Twelve Column Grid

• Host: GitHub
• URL: https://github.com/charliewilco/twelve.scss
• Owner: charliewilco
• Created: 2014-01-01T14:09:28.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2016-09-06T13:30:15.000Z (about 8 years ago)
• Last Synced: 2024-10-10T22:38:15.022Z (about 1 month ago)
• Language: CSS
• Homepage: http://charlespeters.net/twelve.scss/
• Size: 984 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Twelve



  



Really Simple Sass Mixins & Extends to Create a Grid Layout

## Extends Method

I have a for loop running to create `%partials` to generate classes like `%column-3-12` & `%grid-container` to get a nice list of partials to extend into your project.

### How it Works

You may write some Sass like this:

```

.page-wrap {

  max-width: 70rem;

  margin: 0 auto;

  section {

    width: 74%;

    margin-right: 2%;

    float: left;

  }

  aside {

    width: 26%;

    float: right;

  }

  &::after {

    content: "";

    clear: both;

    display: block;

  }

}

```

Using Twelve you can write it a simpler:

```

.page-wrap {

  @extend %grid-container;

  section { @extend %column-8-12; }

  aside { @extend %column-4-12; }

}

```

## Includes Method

Start by declaring `@include grid--container($container);` on your outer container/page-wrap/whatever you want to call it. You can pass it a `max-width` of whatever you'd like.

and for the columns of your grid

```

@include column-width($span-of-columns, $context, $margin);

```

`$span` is a number of columns across and `$context` is total columns in your grid.

### Media Queries

### Contributing

Uhhh Please do?

### Licensing

MIT or GPL or WTFLP or Something

### To Do

0. Finish README.md

1. Work On Media Queries