Bulma SASS - Inside a Theme

   
   
 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: Miscellanous knowledge before you make your custom theme.

This article is integral part of previous article. You should read previous article before continue.

1: Swatch

Working with theme is fun.

Bulma SASS: Bulmaswatch Animation

The Sylesheet: Original Code

There is a ready to used Bulma theme, port from Bootstrap Swatch.

Or the source code, if you prefer:

Consider have a look at the original code, at cerulean/bulmaswatch.scss.

/*! bulmaswatch v0.7.2 | MIT License */
@import "variables";
@import "bulma";
@import "overrides";

The Sylesheet: Adapted Code

Now for use with our project, adapt with our directory structure.

@import "variables";
@import "vendors/bulma";
@import "overrides";

Consider compile

$ dart-sass --watch -I sass sass/bulmaswatch:css/swatch --style=compressed --no-source-map

Bulma SASS: Compile Bulmaswatch

The Document: Example

Consider using our last example, except change the bulma.css to any selected bulmaswatch.css theme.

    <link rel="stylesheet" type="text/css" href="css/swatch/cerulean/bulmaswatch.css">

And open the html artefact using file manager.

Bulma SASS: Bulmaswatch Theme

2: Modular SASS

You can add as many additional custom SASS in your theme.

The Sylesheet: Some Sources

For example this:

html
  height: 100%

body
  min-height: 100%
  
.maxwidth
  margin-right: 10px
  margin-left: 10px

+desktop
  .maxwidth
    margin-right: auto
    margin-left: auto
    max-width: 1346px   // 1366 - 10 -10

.layout-base
  padding-top: 5rem

footer.site-footer
  padding-top: 5rem

I put a nice background, using subtle pattern.

body
  background-image: url("../images/funky-lines.png")

And put that sass artefact in main css.

@import "vendors/bulma/utilities/mixins"
@import "layout"
@import "decoration"

The Sylesheet: CSS Result

Consider compile as:

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

And the result would be:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.maxwidth {
  margin-right: 10px;
  margin-left: 10px;
}

@media screen and (min-width: 1088px) {
  .maxwidth {
    margin-right: auto;
    margin-left: auto;
    max-width: 1346px;
  }
}
.layout-base {
  padding-top: 5rem;
}

footer.site-footer {
  padding-top: 5rem;
}

body {
  background-image: url("../images/funky-lines.png");
}

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

Maxwidth

And, what is this maxwidth anyway ?

I have a smartphone, tablet, sometimes medium screen, and mostly I’m working with large screen. What is good for my regular screen, looks ugly in large screen. My solution is to create maxwidth, so my content would not be stretched horizontally.

Bulma SASS: Maximum Width

3: FontAwesome

There are possibility that you need third party SASS in your theme, such as FontAwesome or BulmaHelpers.

Download Source

Download FontAwesome SASS and put it on respective directory.

Bulma SASS: Assets

The Sylesheet: Custom SASS

I intentionally using .scss format. So you know that sass works with both format .sass and .scss withut an issue.

$fa-font-path:        "https://use.fontawesome.com/releases/v5.2.0/webfonts";

// Import partials from `sass_dir` (defaults to `_sass`)
@import "vendors/font-awesome-5/fontawesome";
@import "vendors/font-awesome-5/solid";
@import "vendors/font-awesome-5/brands";

As you can see, I still use CDN for webfonts. But local css.

The Document: Example HTML

All you need to do is, to include stylesheed, in the <head> element of the html artefact.

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

4: Summary

While the complete code is below:

<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/fontawesome.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-light maxwidth"
       id="navbar-vue-app">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="images/logo-gear.png" alt="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 class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            Archives
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              <span class="fa fa-tags"></span>&nbsp;By Tags
            </a>
            <a class="navbar-item">
              <span class="fa fa-folder"></span>&nbsp;By Category
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              <span class="fa fa-calendar"></span>&nbsp;By Date
            </a>
          </div>
        </div>

        <a class="navbar-item">
          About
        </a>
      </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="column is-full has-background-white">
        <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>
    </main>
  </div>

  <!-- footer -->
  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          is-light 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>

The respective result screenshot would be as figure below:

Bulma SASS: Light Color

Not pretty yet! We are going to make the color elegant in the next guidance.

What is Next ?

More SASS customization is our next topic. Just a few example, but diverse. This is going to be more interesting. Consider continue reading [ Bulma SASS - Custom ].

Thank you for reading.