Blocks

Primary, secondary and tertiary colors

This theme comes with three colour variables that are used across the site for various parts of the display. They act as a base colour palette that can be used to control link color, heading color etc.

Primary

The colours are calculated using the following formula:

  • @primary: the base colour selected in the variables.less
  • @primary2: darken(@primary, 10%)
  • @primary3: lighten(@primary,10%)

Primary

Primary

Primary

Secondary

The colours are calculated using the following formula:

  • @secondary: the base colour selected in the variables.less
  • @secondary: darken(@secondary, 10%)
  • @secondary: lighten(@secondary,10%)

Secondary

Secondary2

Secondary3

Tertiary

The colours are calculated using the following formula:

  • @tertiary: the base colour selected in the variables.less
  • @tertiary: darken(@tertiary, 10%)
  • @tertiary: lighten(@tertiary,10%)

Tertiary

Tertiary2

Tertiary3

The primary1 and secondary2 colours are defined in the template theme settings, while the primary2, primary3 and secondary2, secondary3 colours are calculated using LESS to deliver shades slightly darker and slightly lighter than the original..  The code used to create the blocks below are as follows:

Blocks of colour

These blocks are generated based on the markup below. The block class is used to determine the type of display whereas primary1 etc is used to determine it'as appearance.

Code example

<div class="block primary1"><br>
<p><strong>Primary1</strong></p><br>
<p&gt;Morbi tincidunt lectus nec sapien tempus at faucibus ante
fermentum.</p><br>
</div>

Examples

Primary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Tertiary

Morbi tincidunt lectus nec sapien.

Tertiary2

Morbi tincidunt lectus nec sapien.

Tertiary3

Morbi tincidunt lectus nec sapien.

Less Variables

Blocks are made using the .make-block(@bg, @color, @link) mixin.
  • padding: @block-padding;
  • margin-bottom: block-gutter;
  • background: @gray; // Default background

Borders

These blocks are generated based on the markup below.

Code example

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Examples

Primary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Tertiary

Morbi tincidunt lectus nec sapien.

Tertiary2

Morbi tincidunt lectus nec sapien.

Tertiary3

Morbi tincidunt lectus nec sapien.

Less Variables

  • padding: @block-padding;
  • margin-bottom: block-gutter;
  • border: @border-width @border-style @border-color;

Rounded

The following items have a class " rounded" added to them to create the subtle rounded edge.

Code example

<div class="block primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Examples

Primary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Tertiary

Morbi tincidunt lectus nec sapien.

Tertiary2

Morbi tincidunt lectus nec sapien.

Tertiary3

Morbi tincidunt lectus nec sapien.

Less Variables

  • padding: @block-padding;
  • margin-bottom: block-gutter;
  • border-radius: @border-radius-base

Other styles and effects

Code example

<div class="block shadow">
<p><strong>Shadow </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Examples

Shadow

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Shadow2

Morbi tincidunt lectus nec sapien tempus at faucibu.

Border

Aliquam condimentum volutpat odio lacinia vehicula.

An assortment of css3 styling that is suited to displaying numbers.

Anvil styling

Code example

<div class="anvil primary1">1</div>

Examples

1
2
3
4
5
6

Rounded-big styling

Code example

<div class="rounded-big primary1">1</div>

Examples

1
2
3
4
5
6