Giter VIP home page Giter VIP logo

compass-960-plugin's Introduction

960 Grid System - Compass Plugin

  • Port of Version 1.0
  • 2008-03-24

Created by Nathan Smith. See the official site for more info: http://960.gs/


This plugin adds the 960 Grid System framework to Compass.

Install

gem install compass-960-plugin

Create a 960-based Compass Project

compass create -r ninesixty my_project --using 960

Or, If you prefer to use Sass's indentation based syntax:

compass create -r ninesixty my_project --using 960 --syntax sass

Then edit your grid.sass and text.sass files accordingly. A reset is added into grid.sass automatically.

Customizing your Grid System

To create a grid system with other number of columns use the +grid-system mixin to generate the corresponding classes.

Example:

#wrap
  +grid-system(24)

Making Semantic Grids

  • Use the +grid-container mixin to declare your container element.
  • Use the +grid mixin to declare a grid element.
  • Use the +alpha and +omega mixins to declare the first and last grid elements for a row.
  • User the +grid-prefix and +grid-suffix mixins to add grid columns before or after a grid element.

Example:

#wrap
  +grid-container
  #left-nav
    +alpha
    +grid(5,16)
  #main-content
    +grid-prefix(1,16)
    +grid(10, 16)
    +omega

compass-960-plugin's People

Contributors

chriseppstein avatar elliottcable avatar nextmat avatar gabrielmansour avatar kronuz avatar jlecour avatar rmm5t avatar

Stargazers

Olof avatar

Watchers

James Cloos avatar Olof avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.