Grids - Patterns - Superfeedr

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

A more abstract pattern type, grids are the foundation of the site: felt, but not seen.

The foundation of the grid, mostly an archetype that’s only occasionally used on its own.

<div class="container">

</div>

A version of the container that constrains its content to a width used in non-app pages (i.e. on all pages of the marketing, blog, and documentation sites). Often nested within components for those pages.

Toggle pattern display width

<div class="container  container--front">

</div>

The contents of our grid! Must be within a .container (as shown) to function properly. (Defaults to single column on small displays.)

Toggle pattern display width

<div class="container">
	<div class="column  column--primary">
		{1/2, always left}
	</div>
	<div class="column  column--secondary">
		{1/2, always right}
	</div>
</div>

<div class="container">
	<div class="column  column--quarter">
		{1/4}
	</div>
	<div class="column  column--quarter">
		{1/4}
	</div>
	<div class="column  column--quarter">
		{1/4}
	</div>
	<div class="column  column--quarter">
		{1/4}
	</div>
</div>

<div class="container">
	<div class="column  column--quarter">
		{1/4}
	</div>
	<div class="column  column--half">
		{1/2}
	</div>
	<div class="column  column--quarter">
		{1/4}
	</div>
</div>

<div class="container">
	<div class="column  column--three-quarters">
		{3/4}
	</div>
	<div class="column  column--quarter">
		{1/4}
	</div>
</div>

A centred column, with a max-width to constrain its text. Of note here is that we don’t use a .container, rather a .body-content, as the wrapper.

Toggle pattern display width

<div class="body-content">
	<section class="column  column--centred-text  body-content-text">
		{A centred column, with a max-width to constrain its text.}
	</section>
</div>

Superfeedr Patterns › Grids

Container

Front container

Columns

Centred text column