Preface

Goal: Separate Page Layout using Bulma.


1: General Preview

This below is general preview of, what responsive page that we want to achieve. Just keep in mind that, responsive design is based on consideration. So different website might have different preview.

Bulma SASS: General Preview of Responsive Page Design

Source image is available in inkscape SVG format, so you can modify, and make your own preview quickly.


2: 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


3: 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.