Brick

A brick is a horizontal section of a website, many website designs are using horizontal stacked background to separate content vertically from each other.

This component is merely a css-class that can be applied to any html element to divide up a page visually in to bricks.

// brick.scss

.brick {
  display: block;
  width: 100%;
  position: relative;
}

.brick__inner {
  margin: 0 auto;
  max-width: 100%;
  width: 980px;
  padding: 50px 20px;
  .brick--no-horizontal-padding > & {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.brick--gray {
  background: #333;
  color: #FFF;
}

You can either decide to use the standalone brick class, or use it in combination with the brick__inner class.  

Standalone

Add the brick class to any HTML-element and add the library:

...

{% if page.footer %}
  {{ attach_library("compony/brick") }}
  <div class="brick">
    {{ page.footer }}
  </div>
{% endif %}

...

Center the content inside the brick

...

{% if page.footer %}
  {{ attach_library("compony/brick") }}
  <div class="brick brick--grey">
    <div class="brick__inner">
      {{ page.footer }}
    </div>
  </div>
{% endif %}

...

Machine name

brick

Perks

Secured by Compony
Using Sass
Responsive
Accessible

Building blocks

CSS

Inspired by

Flat design

Stats

Public component
22 downloads
2 commits
No open issue

Contributors