Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.
This repository is a module of the full primer repository.
$ npm install --save primer-layout
The source files included are written in Sass (
scss) You can simply point your sass
include-path at your
node_modules directory and import it like this.
You can also import specific portions of the module by importing those partials from the
/lib/ folder. Make sure you import any requirements along with the modules.
For a compiled css version of this module, a npm script is included that will output a css version to
build/build.css The built css file is also included in the npm package.
$ npm run build
Primer's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
You can find all the below styles in
Center your page's contents with a
<div class="container"><!-- contents here --></div>
The container applies
width: 980px; and uses horizontal
margins to center it.
The grid is pretty standard—you create rows with
.columns and individual columns with a column class and fraction class. Here's how it works:
.containerto encapsulate everything and provide ample horizontal gutter space.
In practice, your columns will look like the example below.
Columns can be centered by adding
.centered to the