Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


Preface

Goal: Separate Page Layout using Bulma.

Table of Content

  • Preface: Table of Content

  • 1: Page Skeleton

  • 2: Responsive Spacing

  • What is Next ?


Page Skeleton

So far we have these three elements:

  • Header part: Navigation Bar.

  • Main part: Content

  • Footer part.

Layout

The internal layout for this show case can be summarized as below:

<html>
<head>
  <!--head section -->
</head>
<body>

  <!-- header -->
  <nav role="navigation">
       ...
  </nav>

  <!-- main -->
  <div class="columns">

    <main role="main">
        <!-- content -->
    </main>

    <aside>
      <!-- aside -->
    </aside>
  </div>

  <!-- footer -->
  <footer>
    ...
  </footer>

  <!-- JavaScript -->
  <!-- Placed at the end of the document -->
  ...
</body>
</html>

Of course you can make your own skeleton to suit your needs.

The Columns

Now we can have this two elements inside main parts.

  • main element: page content or blog post content

  • aside element: side panel

We would like to apply a simple responsive design for this two elements.

  <!-- main -->
  <div class="columns is-8 ">

    <main role="main" class="column is-two-thirds">
      <!-- page content -->
    </main>

    <aside class="column is-one-thirds">
      <!-- side panel -->
    </aside>
  </div>

What is this is-8 class? With Bulma, you can have eight column or any other number, instead hardcoded twelve columns.

Bulma has handle this good with this two class

  • column is-two-thirds

  • column is-one-thirds

Example Layout Page

Now we require real example page, as usual.

  <!-- main -->
  <div class="columns is-8 layout-base maxwidth">

    <main role="main" 
          class="column is-two-thirds box-deco has-background-white">
      Page Content
    </main>

    <aside class="column is-one-thirds box-deco has-background-white">
      <div class="blog-sidebar">
        Side Menu
      </div>
    </aside>
  </div>

Issue

The issue is spacing between this two column in responsive manners, as shown in this example below:

Bulma SASS: No Spacing


Responsive Spacing

The Sylesheet: Additional Class

What is this blog-column class anyway? Well, this is actually just a custom class.

+mobile
  .blog-column
    margin-bottom: 20px

+tablet
  .blog-column
    margin-right: 20px

If you are curious about what this +mobile and +tablet is all about, they are all defined ib Bulma’s mixins.sass.

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

More on official documentation:

The Sylesheet: Packed All

Do not forget to add this _blog.sass artefact ito main.sass, to update the main.css assets. I know it is getting longer each step.

// dart-sass --watch -I sass sass/css-51:css/ --style=compressed --source-map

@import "initial-variables"
@import "vendors/bulma/utilities/initial-variables"
@import "vendors/bulma/utilities/functions"
@import "vendors/bulma/utilities/derived-variables"

@import "vendors/bulma/utilities/mixins"
@import "layout"
@import "decoration"
@import "box-decoration"
@import "blog"

And compile

$ dart-sass --watch -I sass sass/css-51:css/
Compiled sass/css-51/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

Example Layout Page

Put this blog-column class in main element.

    <main role="main" 
          class="column is-two-thirds blog-column box-deco has-background-white">
      Page Content
    </main>

Consider test this simple trick spacing in different screen, Tablet and Mobile.

Mobile Screenshot Preview

The result of

+mobile
  .blog-column
    margin-bottom: 20px

Bulma SASS: Layout Mobile

Tablet Screenshot Preview

The result of

+mobile
  .blog-column
    margin-bottom: 20px

+tablet
  .blog-column
    margin-right: 20px

Bulma SASS: Layout Tablet


What is Next ?

While we design the layout skeleton in this article, now we need to fill of each layout such as blog post and side panel. Consider continue reading [ Bulma SASS - Panels ].

Thank you for reading.