https://github.com/reklino/ghost-grid

Summon your grid from the bowels of CSS hell.
https://github.com/reklino/ghost-grid

Last synced: about 1 month ago
JSON representation

Summon your grid from the bowels of CSS hell.

• Host: GitHub
• URL: https://github.com/reklino/ghost-grid
• Owner: Reklino
• Created: 2015-05-02T15:32:15.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-10T16:46:15.000Z (about 9 years ago)
• Last Synced: 2023-08-23T01:12:18.274Z (about 1 year ago)
• Language: CSS
• Homepage: http://reklino.github.io/ghost-grid/demo/
• Size: 3.6 MB
• Stars: 7
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#Ghost Grid

Summon your fluid grids from the bowels of CSS hell. [Read More here...](http://reklino.github.io/ghost-grid/demo/)

##What?

Ghost Grid is a design/development tool for folks like me who love designing with code, but miss having a visual grid.

##Why?

Designing in the browser is becoming more and more common, and so are fluid grid systems. My goal with this project was to create a simple way to visualize any fluid grid.

##Usage

**Install**

```

bower install ghost-grid

```

```

npm install ghost-grid --save-dev

```

or download `ghost-grid.min.js` and `ghost-grid.min.css`

**Load**

Load the css file into the head of your document like so

```

```

Load the javascript file before your closing `` tag like so

```

```

**Configure**

```

	var ghost = new Ghost();

	ghost.align = 'center',

	ghost.opacity = 0.65,

	ghost.containingElement = document.body,

	ghost.breaks = [

		{

	        point: "(min-width: 300px)",

	        containerWidth: 450,

	        columns: 3,

	        gutters: 1/4,

	        baseLineHeight: (30/18) + 'em'

	    },

	    {

	        point: "(min-width: 700px)",

	        containerWidth: 750,

	        columns: 6,

	        gutters: 1/4,

	        baseLineHeight: (30/18) + 'em'

	    },

	    {

	        point: "(min-width: 1100px)",

	        containerWidth: 960,

	        columns: 9,

	        gutters: 1/4,

	        baseLineHeight: (30/18) + 'em'

	    },

	    {

	        point: "(min-width: 1600px)",

	        containerWidth: 1200,

	        columns: 12,

	        gutters: 1/4,

	        baseLineHeight: (30/18) + 'em'

	    }	    

	];

	ghost.summon();

```

##Options

Option | Default | Description

--- | --- | ---

containingElement | document.body | Ghost Grid will append all grid elements to the containingElement object. This option makes it easy to deploy Ghosts to individual layouts. It defaults to the body element.

align | 'center' | Ghosts can be aligned `'left'`, `'center'`, or `'right'` in relation to their parent element.

opacity | 0.75 | Determines the opacity of the Ghost.

breaks | see below | Contains an array of break point objects. See next section below for details...

####Break Point Options

Option | Default | Description

--- | --- | ---

point | false | CSS breakpoint at which to configure the grid to these settings (eg. `'(min-width: 300px)'`)

containerWidth | false | The width of the container for your fluid grid (eg. `'600px'`)

columns | 12 | The number of columns for this break point.

gutters | 1/4 | The size of the gutters between each column. Gutters are relative to the size of columns.

baseLineHeight | undefined | Determines the interval of the baseline grid. If undefined, there will be no baseline grid.

##Summon

Once you've configured the grid, summon it from hell `ghost.summon();`

##Credits

Inspired by the golden grid system and the configuration built into the sass plugin 'susy'.