mirror of
https://github.com/primer/css.git
synced 2024-12-25 15:14:59 +03:00
2.1 KiB
2.1 KiB
layout | title |
---|---|
page | Layout |
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 _layout.scss
.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Container
Center your page's contents with a .container
.
{% highlight html %}
The container applies width: 980px;
and uses horizontal margin
s to center it.
Grid
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
.container
to encapsulate everything and provide ample horizontal gutter space. - Create your outer row to clear the floated columns with
<div class="columns">
. - Add your columns with individual
<div class="column">
s. - Add your fractional width classes to set the width of the columns (e.g.,
.one-fourth
).
Demo
In practice, your columns will look like the example below.
{% example html %}
.one-fifth
.four-fifths
.one-fourth
.three-fourths
.one-third
.two-thirds
.one-half
.one-half
Centered
Columns can be centered by adding .centered
to the .column
class.
{% example html %}
.one-half