Bulma SASS - Introduction

   
   
 bulma  sass  
 frontend  
Article Series

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using Bulma SASS for the first time

Understanding SASS is a must for theme maker.

Reading

If you do not have any idea about SASS you should read this first:

1: Overview

First thing first.

Directory Preparation

Add SASS to your current working directory.

And add vendors directory.

Bulma SASS: Directory Preparation

We are going to need them for the rest of this chapter.

Download Bulma SASS

Add Bulma to your vendors directory.

$ tree -d tutor-03/sass 
tutor-03/sass
└── vendors
    └── bulma
        ├── base
        ├── components
        ├── elements
        ├── grid
        ├── layout
        └── utilities

8 directories

Now you should see inside Bulma. A tidy modular SASS.

Bulma SASS: Inside Bulma

Custom SASS

Now, it is about the right time to create custom SASS. Let’s say we create this

@import "vendors/bulma"

SASS Tools

You may compile with any SASS compiler that you need.

I made a bash shortcut to my dart sass binary.

alias dart-sass='/media/Works/bin/dart-sass/sass'

Windows user can use chocolatey to install sass.

Compile SASS

Consider compile to css directory.

$ cd tutor-03
$ dart-sass -I sass sass/css-30:css/

or better

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

Bulma SASS: Compile

Now you should see generated CSS.

Bulma SASS: Generated CSS

This should be the same as regular official Bulma.

2: Example

The Sylesheet: Altering Bulma

Altering standard Bulma is simple. Consider change the behaviour by setting initial variable.

@import "initial-variables"
@import "vendors/bulma"
@import "derived-variables"
// Initial Variables

$pink:  #e83e8c !default
$primary:  lighten($pink, 20%)

$navbar-breakpoint: 769px
// Derived Variables

The Sylesheet: Additional SASS

.layout-base
  padding-top: 2rem
  padding-bottom: 5rem
$ dart-sass --watch -I sass sass/css-30:css/ 
Compiled sass/css-31/bulma.sass to css/bulma.css.
Compiled sass/css-31/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

Bulma SASS: Compile

You should see the result of the compilation in

  • tutor-03/css/main.css
.layout-base {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

/*# sourceMappingURL=main.css.map */

The Document: Example Page.

What good is it SASS compilation without example page? Here we are, I represent a page, complete with header (Navigation Bar), main content and footer.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Letters to my Bulma</title>

    <link rel="stylesheet" type="text/css" href="css/bulma.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="js/vue.min.js"></script>
</head>
<body class="has-navbar-fixed-top">

  <!-- header -->
  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-primary maxwidth"
       id="navbar-vue-app">
    <div class="navbar-brand">
      <a class="navbar-item">
        Home
      </a>

      <a role="button" class="navbar-burger burger" 
         aria-label="menu" aria-expanded="false" data-target="navbarBulma"
         @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu"
         v-bind:class="{'is-active': isOpen}">
      <div class="navbar-start">
      </div>
      <div class="navbar-end">
        <form class="is-marginless" action="/pages/search/" method="get">
        <div class="navbar-item">
          <input class="" type="text" name="q"
            placeholder="Search..." aria-label="Search">
          &nbsp;
          <button class="button is-light" 
            type="submit">Search</button>
        </div>
        </form>
      </div>
    </div>
  </nav>

  <!-- main -->
  <div class="layout-base maxwidth">
    <main role="main" class="container">
      <div class="box">
        <p>There are so many things to say
        to Bulma, Chici, and that Android 18.
        I don't want to live in regrets.
        So I wrote this for my love.</p>
      </div>
    </main>
  </div>

  <!-- footer -->
  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          is-primary has-text-centered is-vcentered">
      <div class="column">
        &copy; 2019.
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <!-- Placed at the end of the document -->
  <script src="js/bulma-burger-vue.js"></script>
</body>
</html>

You can have a look at the expected result in image below:

Bulma SASS: Example: Navigation Bar

What is Next ?

There is, a topic about Theme in Bulma. From using ready to use theme, and adapt Bulma class into your own. Consider continue reading [ Bulma SASS - Theme ].

Thank you for reading.