Design and develop with a visible grid
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
demo
src
.gitignore
Cakefile
README.md
bower.json
nodemon.json
package-lock.json
package.json

README.md

visible-grid

visible-grid makes it easier to develop and design beautiful web applications by making your grid system visible while you work. See the demo.

How to use it

The easiest way to use it is via the bookmarklet available here.

Download the source files from the build directory, or use Bower.

$ bower install visible-grid

Add the JS to your page. It's all packaged in there.

<script src="visual-grid.js" type="text/javascript">

Then you can create a new instance on your page.

var myGrid = new Grid();

Tell me more

Configure as many grids as you want. They are saved to localStorage, so you can use them on any page your working on. Resizing is taken care of automatically, so if you have a responsive set-up simply resize to see the grid at that width.

Quickly toggle the UI and grid with the “u” and “g” hot-keys.

You can reset your storage...

myGrid.reset();

...add a new grid...

myGrid.add({
  name: "Example Grid",
  color: "black",
  columns: 12,
  size: 1200,
  gutter: 20,
  baseline: 20
})

...and remove a grid.

myGrid.remove("Example Grid")
myGrid.remove(4)

Developing and testing

There is a Cakefile for building, watching and linting. All these commands can be run with cake.

$ cake build    # Build the library
$ cake watch    # Watch for changes
$ cake lint     # Lint the compiled javascript.

Feel free to submit issues or make pull requests.