Login Register

Kayzen

Sections

assets/modules/objects/sections

Files

  • _sections.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/sections

Module Overview

Sections are used to group objects in a page layout.

  • Name: section
  • Modifiers: primary, secondary, mini, panel, full-screen, overlay[deep, dark, alt], dot-map, banner, flush, sink, block
  • Components: block, graphic

Examples

The section classes provide subtle but essential styles for your page's layout. They wouldn't typically be contained within wells like the below examples, this is just to demonstrate what each modifier does.

Primary Section

<section class="section-primary">
    ...
</section>
This is a primary section. It has a lot of top/bottom padding.

Secondary Section

<section class="section-secondary">
    ...
</section>
This is a secondary section. It has a colorful background!

Mini Section

<section class="section-mini">
    ...
</section>
This is a mini section. It has a bit less padding.

Panel Section

<section class="section-mini-panel">
    ...
</section>
This is a mini panel section. It has a top border.

Full-Screen Section

<section class="section-full-screen">
    ...
</section>
This is full-screen section. It's height should be as tall as your browser.

Overlay Section

Your content must be contained within a container class if you are using the overlay modifier. This is to bring the content above the overlay, which is contained within the :before pseudo element.

<section class="section-secondary-overlay" style="background-image: url(../../../../images/billboard-1.jpg)">
   <div class="container">...</div>
</section>

The image used below is black and has a colored overlay.

This is a secondary section with a background overlay.

Deep Overlay Section

<section class="section-secondary-overlay-deep" style="background-image: url(../../../../images/billboard-1.jpg)">
   <div class="container">...</div>
</section>

The overlay saturation & opacity is stronger when using the deep modifier in conjunction with the overlay modifier.

This is a secondary section with a background overlay.

Dark Overlay Section

<section class="section-primary-overlay-dark" style="background-image: url(../../../../images/stock-demo.jpg)">
   <div class="container">...</div>
</section>
This is a primary section with a background overlay.

Alt Overlay Section

<section class="section-primary-overlay-alt" style="background-image: url(../../../../images/stock-demo.jpg)">
   <div class="container">...</div>
</section>
This is a primary section with a background overlay.

Dot-Map Section

<section class="section-dot-map">
   ...
</section>
This is a primary section with a dotted map at the bottom.

Banner Section

<section class="section-banner">
   ...
</section>
This is a banner section. It has slightly different padding to primary and secondary sections.

Flush Section

<section class="section-primary-flush">
   ...
</section>
This is a flushed section. It has no top padding.

Sink Section

<section class="section-primary-sink">
   ...
</section>
This is a sinked section. It has no bottom padding.

Block Section

<section class="section-mini-block">
   ...
</section>
<section class="section-mini-block">
   ...
</section>
I am a block section. My adjacent siblings will have a top border to separate us.
See, told you.

Customizing

The Sections module can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
heading-group-color typography('colors', 'heading') Set whether the billboard should be full-screen without any modifiers.
padding 6em 0 Set whether the billboard should be full-screen without any modifiers.
padding-mini 4em 0 Set whether the billboard should be full-screen without any modifiers.
banner-padding 5em 0 Set whether the billboard should be full-screen without any modifiers.
block-padding 7% Set whether the billboard should be full-screen without any modifiers.
panel-background color('greyscale', 'white') Set whether the billboard should be full-screen without any modifiers.
secondary-background color('brand', 'primary') Set whether the billboard should be full-screen without any modifiers.
secondary-color color('greyscale', 'white') Set whether the billboard should be full-screen without any modifiers.
overlay-color color('greyscale', 'white') Set whether the billboard should be full-screen without any modifiers.
overlay-background rgba(color('brand', 'primary'), 0.4) Set whether the billboard should be full-screen without any modifiers.
overlay-deep-background rgba(color('brand', 'primary'), 0.75) Set whether the billboard should be full-screen without any modifiers.
overlay-dark-background rgba(color('greyscale', 'grey-5'), 0.75) Set whether the billboard should be full-screen without any modifiers.
overlay-alt-background rgba(color('greyscale', 'grey-5'), 0.5) Set whether the billboard should be full-screen without any modifiers.

To change one of the above values, pass your new value(s) to the sections() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include sections((
    'padding'      : 8em 0,
    'padding-mini' : 2em 0    
));