SpaceFramework v1.2

# Layout Presets

Within layout presets you define the global spacings of a layout. A good design uses only several different spacing types. Those are spacings between and inside sections, elements, blocks etc. The size of spacings may be different on different viewports. All of those settings can be defined within layout-presets. Layout-presets will generate Layout Classes which you can use to apply the spacings on your elements.

Using layout presets for your global spacing will result in faster development and a better user-experience.

Table of content

# Configuration

Copy spaceframework/scss/1.settings/_layouts-presets.scss to your scss project. Then remove !default at the end of the file.

You can also create a new file named _layout-presets.scss:

$layout-presets: (
	// add your settings here
);

# 1. Adding a new layout preset

You can add a layout preset such as section. Then add viewport sizes. For each viewport size you can define the offset of a section written in space-units.


 
 
 
 
 
 
 


$layout-presets: (
	section:(
		viewports:(
			small:(2),
			medium:(3),
			large:(4),
		)
	),
);

# 2. Generation of classes

Well done now, you can now use layout classes.

Please note: When you used 'advanced setup' to setup your project you have to actually call @include layout-classes(); to generate layout-classes

# Advanced support

You can toggle advanced support by copying spaceframework/scss/1.settings/layouts-presets-support.scss to your local folder scss project.

This can be used to minimize the generation of classes.

# Types


 
 
 
 
 



$layout-presets-support: (
	types:(
		padding,
		margin,
		position
	)
	//...
)

# Directions



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



$layout-presets-support: (
	//...
	directions:(
		top:(
			top
		),
		right:(
			right
		),
		bottom:(
			bottom
		),
		left: (
			left
		),
		vertical: (
			top,
			bottom
		),
		horizontal: (
			right,
			left
		)
	)
	//...
)

# Negative



 



$layout-presets-support: (
	//...
	negative: true
	//...
);

# Responsive



 


$layout-presets-support: (
	//...
	responsive: true
)

# Exceptions

Each of the settings (types, directions, negative, responsive) within layout-presets-support can be overwritten for a specific layout-preset.

In the example below we added the setting negative: false to the section preset to avoid generation of negative layout classes.








 



$layout-presets: (
	section:(
		viewports:(
			small:(2),
			medium:(3),
			large:(4),
		)
		negative: false
	),
);

# Layout Classes

# 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

WARNING

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>

← Font Presets →