Layouts

Download

You can fetch Trowel Layouts with npm, yarn or bower.

# With bower
$ bower install --save trowel-layouts

# With npm
$ npm install --save trowel-layouts

# With yarn
$ yarn add trowel-layouts

You can also download a zip archive right here.

Installation

SCSS

The main scss file to include to your main .scss file is located at the ./src/scss/Layouts.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Layouts
@import './path/to/dependencies/trowel-layouts/src/scss/layouts';

Usage

Containers

Use the .container class to contain your content in a fixed width.

<div class="container">
  ...
</div>

With the $container--width you can control the width of the container, and for example do fluid containers by setting up 100% as designed by default on the flag -fluid.

<div class="container container--fluid">
  ...
</div>

Grids

You can layout your content as grid, by first creating a .grid DOM element, then for each column a .grid__col and then specify the size of the column depending of the viewport width configured in the $trowel-config variable like .grid__col--xs-2.

<div class="grid">
  <div class="grid__col grid__col--xs-2 grid__col--sm-10"></div>
  <div class="grid__col grid__col--xs-4 grid__col--sm-2"></div>
  <div class="grid__col grid__col--xs-6 grid__col--sm-4"></div>
  <div class="grid__col grid__col--xs-12 grid__col--sm-8"></div>
</div>

Flex grids

You can also create a grid with flexbox. Wrap your columns with a .flex-grid DOM element. Then for each col use the .flex-grid__col class.

You will be able to custom the behavior of your flex-grid through *Trowel variables* but by default a `.flex-grid__col--grow-1` element-modifier class is available to make a column fill all the remaining space available.

<div class="flex-grid">
  <div class="flex-grid__col">
    <div class="grid-showoff">col</div>
  </div>

  <div class="flex-grid__col flex-grid__col--grow-1">
    <div class="grid-showoff">col</div>
  </div>

  <div class="flex-grid__col">
    <div class="grid-showoff">col</div>
  </div>

  <div class="flex-grid__col">
    <div class="grid-showoff">col</div>
  </div>
</div>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Enables

You can avoid the generation of some css with the following variables

Component variables

Container

Grid

Flex-grid