Layout Classes

Requirements:

Table of content:

What are Layout Classes?

Layout classes are global classes which you can use for consistency in your repeating layout elements. You can apply predefined paddings, margins and positions in different sizes. You can also add a direction or use it as negative value. On top of that you can choose a viewport size.

Different viewport, different sizes
What is unique for layout classes is that you can define an amount of space-units for each viewport. This way you can optimize your components quickly for each viewport.

The classes name exist out of the following parameters:
.[viewport]-[name*]-[type*]-[direction]-[negative]

You can use classes like:

  • .site-padding
  • .section-margin-vertical
  • .medium-block-margin-left-negative

Example

site-padding
Padding Example element
<div class="site-padding">content</div>

Tip

Resize your window smaller and larger to see how the padding of the component changes from 2 space-units, 4 space-units to 6 space-units.

Name

  • Classname format: [name*]-[type*]
    * = required

Each class starts with the given [name] in the layout-presets. Like [name]. You always need to define the [type] as well.

Type required

The [type] is required for a layout class. The [name] and the [type] together are the base of a layout class. Go to Types

[name] parameters

  • site
  • section
  • block
  • your custom name block

By combining the [name] together with a [type] you can use classes such as:

Example output classes

  • .site-[type]
  • .section-[type]
  • .block-[type]

Type

  • Classname format: [name*]-[type*]
    * = required

There are 3 different types you can use by default for [type] in [name]-[type]

[type] parameters

  • padding
  • margin
  • position

Example output classes

  • .section-margin
  • .section-padding
  • .section-position

Example .[name]-margin

content
Margin Example element
<div class="section-margin">content</div>

Example .[name]-padding

content
Padding Example element
<div class="section-padding">content</div>

Example .[name]-position

content
Position Example element
<div class="position-relative">
	<div class="section-position position-absolute">content</div>
</div>

Direction

  • Classname format: .[name*]-[type*]-[direction]
    * = required

Add a [direction] to your classname if you want to use a specific direction for your padding or margin.

[direction] parameters

  • top
  • right
  • bottom
  • left
  • vertical
  • horizontal

Example output classes

  • .site-padding-top
  • .section-margin-horizontal
  • .block-position-right

Example .[name]-[type]-top

content
Margin Example element
	<div class="section-margin-top">content</div>

Example .[name]-[type]-right

content
Margin Example element
	<div class="section-margin-right">content</div>

Example .[name]-[type]-bottom

content
Margin Example element
	<div class="section-margin-bottom">content</div>

Example .[name]-[type]-left

content
Margin Example element
	<div class="section-margin-left">content</div>

Example .[name]-[type]-vertical

content
Margin Example element
	<div class="section-margin-vertical">content</div>

Example .[name]-[type]-horizontal

content
Margin Example element
	<div class="section-margin-horizontal">content</div>

Viewport

Classname format: .[viewport]-[name*]-[type*]-[direction]
* = required

Add a [viewport] before your class for responsive use.

[viewport] parameters

  • small-only
  • medium
  • medium-only
  • large
  • large-only

Example output classes

  • .small-only-block-padding
  • .medium-section-padding-top
  • .large-section-margin-vertical

Tip

The following examples are influenced by your window width. Up and downscale them to see how they work.

Example .small-only-[name]-[type]

content
Padding Example element
	<div class="small-only-block-padding">content</div>

Example .medium-[name]-[type]-[direction]

content
Padding Example element
	<div class="medium-section-padding-top">content</div>

Example .large-[name]-[type]-[direction]

content
Margin Example element
	<div class="large-section-margin-vertical">content</div>

Negative

Classname format: .[viewport]-[name*]-[type*]-[direction]-[negative]
* = required

Negative cannot be used for the [type] padding .

[negative] parameters

  • negative

Example output classes

  • .site-margin-left-negative
  • .medium-section-margin-top-negative
  • .large-only-section-margin-vertical-negative

Example .[name]-[type]-[direction]-negative

content
Margin Example element
	<div class="section-padding">
		<div class="section-margin-left-negative">content</div>
	</div>