Fork me on GitHub
wolf, very cool grid system

wolf

Very Cool Responsive SASS Grid System

Features

Cleaner HTML Syntax

In traditional CSS Framework, Almost all styled in classes. More classes make your HTML dirty. Don't make your HTML look like rubbish.

Completely Custom Grid

In traditional CSS Framework, grid cannot be customized. Customize wolf with your own ratio, gutter and many more.

Awesome ratio

You can use float decimal or fraction, but dont use percentage.

Simple Adaptive Breakpoint

Responsive, for different screen size. This can be customized too.

Install

  1. 1. Make sure you have SASS
  2. 2. Download code here, and copy at your project
  3. 3. Import in your code.@import 'wolf-master/index'

Usage

Create HTML

In common CSS framework, HTML look like shit. full of unnecessary classes. but in wolf, create your own semantic html with cleaner syntax and make it readable.

here, section is a container and div is item from container. Lets make grid with 3 column.

<section>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</section>

Row and Col

Give section a row() mixin and div a col() mixin.

section {
  @include row()
  > div {
    @include col(1/3, $break-at: 3)
  }
}

row() can be customized. You can set the value of max-width and padding or deciding the element are centered or not

This is row() mixin with its default value

row($max-width: 1200px, $padding: 30px, $center: true)

col() are very cool. Its has ratio?. ratio are how many width of the element, relative to parent element. Its accept fraction (like 1/3) and decimal (like 0.25) but not percentage. Beetween one col() and another col() are divided by gutter.

But how if you have 9 col() and want to make it 1/3 fraction but don't want to specify a row every 3 col?. Here is break-at. Its make col() break smoothly at N.

Last parameter are offset. it make col() offseting in ratio value. Its also can accept decimal and fraction, just same with ratio

Here is col() mixin with its default value

col($ratio: 1, $gutter : 1.2 , $break-at: 0, $offset: 0)

clearfix

This is Nicholas Gallagher's clearfix. This can used for replacing row. This is like row() without parameter.

clearfix()

Breakpoint

This is for Responsive Design purpose. This use @media screen css.

screen-min($min)
screen-max($max)
screen-between($min, $max)

example

// just variable
$mobile-breakpoint : 768px;

section {
  @include row()
  > div {
    @include screen-min($mobile-breakpoint){
      @include col(1/3, $break-at: 3)
    }
    @include screen-max($mobile-breakpoint){
      @include col(1)
    }
  }
}

Edit Mode

This make all element has clear view. by adding thin red transparent color to all element.

edit-mode()