Layout

pixss defines the most necessary classes to construct the simple layout with the common used classes easily:

• .topbar
• .main
• .container
• .footer

.topbar

define the Topbar with fixed position in page header. By using utility class space-between the child nodes can be displayed like the following example: the logo element will be positioned on the left, and the navigation elements will be showed on the right side.

  <div class='.topbar'>
    <div class="container space-between">
        <div>logo</div>
        <div>navigation</div>
    </div>
  </div>

.main

class .main defines the main container for the essential page content.

<main class="main"></main>

.footer

class .footer defines the footer section, that has fixed position on the bottom of the page.

<footer class="footer"></footer>

.container

class .container is the placeholder for the page content, that has predefined position, margin and padding values.

<div class="container"></div>

.hero

class .hero is used always for the definition of showcase page block. It can be highlighted by using the classes, such as .is-primary, .is-secondary, .is-info, .is-warning, .is-success, .is-danger.

<div class="hero is-primary"></div>