Skip to content

05 The layout & parallax

Jump to bottom
Yegor Borisenco edited this page Jan 24, 2017 · 1 revision

The theme is based on block layout. Or block grid, you can call it whatever you like. The fact is, it gives the page this smooth, measured look, unlike masonry grid, which might look a bit messy sometimes. To create these blocks you must follow a defined structure.

First of all, you need to use Materialize's grid to define the width of your block. Usually you'd start with a row and use a div with col s12 l6 class in order to make it full width on small devices and half width for medium and large screens.

Then include a div with a corresponding class (rectangle, rectangle-50 or square), which will have an image stretch to its whole size (via background-size: cover) and finally a div containing your content. The whole thing would look like this:

<div class="row">
  <div class="col s12 l6">
    <div class="rectangle" style="background-image: url(path/to/image)">
      <div class="content">
        Your awesome content
      </div>
    </div>
  </div>
</div>

Extending the layout

You can extend those classes and create your own shapes, say a vertical rectangle. All you need to do is define it in your styles, like this:

.vertical-rectangle {
  padding-bottom: 200%; /* will create a rectangle with height = width * 2 */
}

There's no need to specify height of those shapes, since padding will do the trick and size them dynamically, depending on the width. Think of it as of a proportion: padding-bottom: 100% will give you a 1:1 square, padding-bottom: 50% will give you a 2:1 rectangle.

Parallax

To activate parallax, simply add .rellax-on class to <body>. Learn more about the Rellax.js.

Clone this wiki locally