https://github.com/callumacrae/960

Very simple 960 grid system library
https://github.com/callumacrae/960

Last synced: 20 days ago
JSON representation

Very simple 960 grid system library

• Host: GitHub
• URL: https://github.com/callumacrae/960
• Owner: callumacrae
• Created: 2012-04-14T13:00:35.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-04-14T17:51:45.000Z (over 12 years ago)
• Last Synced: 2024-12-17T05:29:21.006Z (23 days ago)
• Homepage:
• Size: 113 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# callumacrae/960 #

callumacrae/960 is a very simple implementation of the 960 grid system, seen in the Bootstrap and 960.gs frameworks, in LESS.

## Importing it into your project ##

Simple either include the compiled CSS file, or add the following line to your LESS file:

```css

@import "960.less";

```

## Usage ##

Each "row" (marked by a div with that id) is 12 columns wide. You then specify how wide you want your columns to be using data attributes:

```html



	


		This div is 8 columns wide.

	

	


		This div is 4 columns wide.

	



```


`data-cols` can be any number between 1 and 12.

At the top of 960.less, there are two variables:

```less

@gridColWidth: 60px;

@gridGutterWidth: 20px;

```

`@gridColWidth` is the width of each column, and `@gridGutterWidth` is the width of the gutter - the space between columns. Adjusting these will adjust the overall width of the row.

## Dependencies ##

This project has no dependencies (not even jQuery).

## Author ##

This project was written by Callum Macrae.