primer-layout2.0.0 • Public • Published
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
The container applies
width: 980px; and uses horizontal
margins to center it.
How it works
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:
- Add a
.containerto encapsulate everything and provide ample horizontal gutter space.
- Create your outer row to clear the floated columns with
- Add your columns with individual
- Add your fractional width classes to set the width of the columns (e.g.,
In practice, your columns will look like the example below.
Columns can be centered by adding
.centered to the