Skip to content
A Viewport based CSS grid system that brings Modern Design to Modern Browsers. Just like Müller-Brockman wanted.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
lib
site/source
.gitignore
CHANGELOG.md
Gruntfile.js
README.md
bower.json
package.json

README.md

Viewport Width Grid System

Use

There are several ways to use the viewport grid in your project:

CSS

If you'd like to use the viewport grid as a standalone css file, just copy dist/viewport-grid.css into your site, and add a link to it in your head:

<link rel="stylesheet" href="path/to/viewport-grid.css">

SASS

If you'd like to use the viewport grid as a sass library, you'll find it inside of lib. Customize your grid by editing the values in _config.scss.

NPM

To install viewport-grid via npm, you can simply run:

npm install esripdx/viewport-grid

The main Sass file will be in node_modules/viewport-grid/lib/viewport-grid.scss.

Bower

Assuming you have already installed bower, just type bower install viewport-grid --save.

Then import it as a library in your main styles.scss file like this:

@import "../bower_components/viewport-grid/lib/viewport-grid.scss";

Note, this will import everything, including the static classes. A separate file called _imports.scss contains just the classes and mixins. So if you have a main stylesheet that gets loaded on every page, you can load the full library into that, but if you just want access to the mixins without adding any generated css to your page, you can do:

@import "../bower_components/viewport-grid/lib/_imports.scss";

Contributing

Pull requests are welcome. In lieu of a formal styleguide, we ask that you simply try to maintain the formatting that is already in place.

To set up a local development environment you must have node and grunt installed on your system. Then simply clone the project, npm install, and grunt to run a dev server.

License

ISC

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.