6 Layout

Sets of classe to manage layout and organize components on the page.

6.1 Grid

Description

Colette provides predefined classes to built responsive / 12-columns-based layout. Grid classes are set according to:

a targeted breakpoint (among those defined in the $breakpoints collection),
a width, which must correspond to a number of columns (out of 12 from the grid).

Breakpoint		sm	md	lg
Media query	default	min-width: 420px	min-width: 768px	min-width: 960px
Class name	.g-col-[n]	.g-col-sm-[n]	.g-col-md-[n]	.g-col-lg-[n]
CSS declaration	{ width: ([n] / 12) * 100 }

Usage Columns should come within a <div class="g"> container.

Default styling

Example 1 - Columns simple use responsiveless:

Example 2 - 6 columns above medium breakpoint:

Example 3 - 3 columns above small breakpoint:

Example 4 - Col1 & Col2 are on 2 columns grid above small breakpoint, & they all pass on 3 columns above medium breakpoint:

Modifiers

.g-withgutters

add gutters

Example 1 - Columns simple use responsiveless:

Example 2 - 6 columns above medium breakpoint:

Example 3 - 3 columns above small breakpoint:

Example 4 - Col1 & Col2 are on 2 columns grid above small breakpoint, & they all pass on 3 columns above medium breakpoint:

Markup

Compiled HTML
Template

<p><b>Example 1</b> - Columns simple use responsiveless:</p>
<div class="co_grid-demo g ">
    <div class="g-col-6"></div>
    <div class="g-col-6"></div>
</div>
<p><b>Example 2</b> - 6 columns above medium breakpoint:</p>
<div class="co_grid-demo g ">
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
</div>
<p><b>Example 3</b> - 3 columns above small breakpoint:</p>
<div class="co_grid-demo g ">
    <div class="g-col-sm-4"></div>
    <div class="g-col-sm-4"></div>
    <div class="g-col-sm-4"></div>
</div>
<p><b>Example 4</b> - Col1 & Col2 are on 2 columns grid above small breakpoint, & they all pass on 3 columns above medium breakpoint: </p>
<div class="co_grid-demo g ">
    <div class="g-col-md-8 g ">
        <div class="g-col-sm-6"></div>
        <div class="g-col-sm-6"></div>
    </div>
    <div class="g-col-md-4"></div>
</div>

{# `co_grid-demo` is only for the demo's style. It's not a part of colette #}
<p><b>Example 1</b> - Columns simple use responsiveless:</p>
<div class="co_grid-demo g {{ modifier_class }}">
    <div class="g-col-6"></div>
    <div class="g-col-6"></div>
</div>
<p><b>Example 2</b> - 6 columns above medium breakpoint:</p>
<div class="co_grid-demo g {{ modifier_class }}">
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
    <div class="g-col-md-2"></div>
</div>
<p><b>Example 3</b> - 3 columns above small breakpoint:</p>
<div class="co_grid-demo g {{ modifier_class }}">
    <div class="g-col-sm-4"></div>
    <div class="g-col-sm-4"></div>
    <div class="g-col-sm-4"></div>
</div>
<p><b>Example 4</b> - Col1 & Col2 are on 2 columns grid above small breakpoint, & they all pass on 3 columns above medium breakpoint: </p>
<div class="co_grid-demo g {{ modifier_class }}">
    <div class="g-col-md-8 g {{ modifier_class }}">
        <div class="g-col-sm-6"></div>
        <div class="g-col-sm-6"></div>
    </div>
    <div class="g-col-md-4"></div>
</div>

Source: src/styl/_layouts/_grid.styl, line 1

6.2 List

Description

Colette provides the possibility to create a list of items, with the adequate gutters. You'll be able to set the number of columns you need, also, the responsive aspect can be managed

.list should be in a overflow: hidden block to avoid overflow margin

Usage List should have the adequate class list

Breakpoint		sm	md	lg
Media query	default	min-width: 420px	min-width: 768px	min-width: 960px
Class name	.list-by[n]	.list-sm-by[n]	.list-md-by[n]	.list-lg-by[n]
CSS declaration	{ width: ([n] / 12) * 100 }

Example

Example 1 - Simple column list:

Example 2 - Responsiveless list on 2 columns:

Example 3 - List on 2 columns above medium breakpoint:

Example 4 - Responsiveless list on 3 columns:

Example 5 - List on 3 columns above small breakpoint:

Example 6 - Responsiveless list on 4 columns:

Example 7 - Simple column that converts to 2 columns above small breakpoint, then on 4 columns above wide breakpoint:

Markup

Compiled HTML
Template

<p><b>Example 1</b> - Simple column list:</p>
<div class="list co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 2</b> - Responsiveless list on 2 columns:</p>
<div class="list list-by2 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 3</b> - List on 2 columns above medium breakpoint:</p>
<div class="list list-md-by2 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 4</b> - Responsiveless list on 3 columns:</p>
<div class="list list-by3 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 5</b> - List on 3 columns above small breakpoint:</p>
<div class="list list-sm-by3 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 6</b> - Responsiveless list on 4 columns:</p>
<div class="list list-by4 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 7</b> - Simple column that converts to 2 columns above small breakpoint, then on 4 columns above wide breakpoint: </p>
<div class="list list-sm-by2 list-md-by2 list-lg-by4 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>

{# `co_list-demo` & `co_list-demo-item is only for the demo's style. It's not a part of colette #}
<p><b>Example 1</b> - Simple column list:</p>
<div class="list co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 2</b> - Responsiveless list on 2 columns:</p>
<div class="list list-by2 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 3</b> - List on 2 columns above medium breakpoint:</p>
<div class="list list-md-by2 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 4</b> - Responsiveless list on 3 columns:</p>
<div class="list list-by3 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 5</b> - List on 3 columns above small breakpoint:</p>
<div class="list list-sm-by3 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 6</b> - Responsiveless list on 4 columns:</p>
<div class="list list-by4 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>
<p><b>Example 7</b> - Simple column that converts to 2 columns above small breakpoint, then on 4 columns above wide breakpoint: </p>
<div class="list list-sm-by2 list-md-by2 list-lg-by4 co_list-demo">
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
    <div class="list-item co_list-demo-item"></div>
</div>

Source: src/styl/_layouts/_list.styl, line 1