Bulma SASS - Widget

   
   
 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: Custom sass for each part of the layout.

Especially the panel.

1: Main Page

Sure, we have to start from content page container. Decorate the blog post first, before junmp into the panel. This is not a Bulma part, but more like a custom SASS. We need to make it a little bit pretty before continue.

The Document: Example Code

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

    <main role="main" 
          class="column is-two-thirds blog-column box-deco has-background-white">
      <article class="blog-post">
        <h4 class="title is-4">Letters to my Bulma</h4>
        <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>
      </article>
    </main>

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

The Sylesheet: Example Class

Most of this style I grab from Bootstrap example.

/* stylelint-disable selector-list-comma-newline-after */

h1, h2, h3, h4, h5, h6
  font-family: "Playfair Display", Georgia, "Times New Roman", serif

/*
 * Blog posts
 */

.blog-post
  margin-bottom: 4rem

.blog-post-title
  margin-bottom: .25rem
  font-size: 2.5rem

.blog-post-meta
  margin-bottom: 1.25rem
  color: #999

.blog-sidebar, .blog-post
  margin-left: 20px
  margin-right: 20px

.blog-post-meta
  margin-bottom: 5px

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

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

The Preview

Bulma SASS: Blog Element

If you want you can add this font that I took from Bootstrap example.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900">

2: Side Panel

I also use a modified version of, Bulma’s message.sass class to enhance my panel.

Bulma Original Message Class

Consider have a look at this original Bulma box:

.message
  @extend %block
  background-color: $message-background-color
  ...

.message-header
  align-items: center
  background-color: $message-header-background-color
  ...

.message-body
  border-color: $message-body-border-color
  border-radius: $message-body-radius
  ...

Custom Box Class

Consider have a look at this altered Bulma message, that I turned into panel class:

.panel
  //@extend %block
  background-color: $panel-background-color
  font-size: $size-normal
  ...

.panel-header
  align-items: center
  background-color: $panel-header-background-color
  ...

.panel-body
  color: $panel-body-color
  padding: $panel-body-padding
 ...

The Main Stylesheet

And consider make the main sass a line longer.

...

@import "blog"
@import "panel"

Always recompile the CSS.

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

The Document: Example Code

Now execute the panel stylesheet in respective hypertext markup language.

    <aside class="sidebar column is-one-thirds is-paddingless">
      <section class="panel is-light">
        <div class="panel-header">
          <p>Isle of Friends</p>
          <span class="fa fa-child"></span>
        </div>
        <div class="panel-body has-background-white">
          Side Menu
        </div>
      </section>
    </aside>

The Preview

And voila!. The white magic happened.

Bulma SASS: Blog Panel

3: List

With the same method, we can make a lot of panel in right side. But we still need to adjust to make it prettier.

The Stylesheet: Altered Class

// -- -- -- -- --
// _list.scss

ul.panel-list li:hover
    background: lighten($yellow, 15%)

ul.panel-list
  padding: 0px

ul.panel-list
  padding-left: 0
  list-style: none
  font-size: 13px
  margin-left: 20px

ul.panel-list li:before
  font-family: "Font Awesome 5 Free"
  //font-weight: 900
  content: '\f054'
  color: $gray
  margin: 0 5px 0 -12px

ul.panel-list li:hover:before
  color: $yellow

What is this $gray and $yellow anyway? It is time to add _initial-variables.

// Initial Variables

$brand-red:  #802020
$brand-gray: #404040

$gray:   #7b8a8b
$yellow: #f7d316
$blue:   #2980b9

$dark:   $brand-red

$navbar-breakpoint: 769px

The Main Stylesheet

And consider make the main sass a line longe, again.

...

@import "blog"
@import "panel"
@import "list"

The Document: Example Code

    <aside class="sidebar column is-one-thirds is-paddingless">
      <section class="panel is-light">
        <div class="panel-header">
          <p>Isle of Friends</p>
          <span class="fa fa-child"></span>
        </div>
        <div class="panel-body has-background-white">
          <ul class="panel-list">
            <li><a href="http://epsi-rns.github.io/">Linux/BSD Desktop Customization</a></li>
            <li><a href="http://epsi-rns.gitlab.io/">Web Development Blog</a></li>
            <li><a href="http://oto-spies.info/">Car Painting and Body Repair.</a></li>
          </ul>
        </div>
      </section>
    </aside>

The Preview

This is not magic. Just an ordinary regular styleheet.

Bulma SASS: Panel: List

4: Tags

Multi Panel Sidebar Example

This one example is easier, instead of making new class, we can utilize Bulma built in class. Just go straight to HTML without any custom stylesheet.

The Document: Example Code

    <aside class="sidebar column is-one-thirds is-paddingless">
      <section class="panel is-light">
        <div class="panel-header">
          <p>Categories</p>
         <span class="fa fa-folder"></span>
        </div>
        <div class="panel-body has-background-white">    
          <a class="tag is-small is-info" href="#">
            love&nbsp;<span class="fa fa-folder"></span>
          </a>&nbsp;
    
          <a class="tag is-small is-info" href="#">
            lyric&nbsp;<span class="fa fa-folder"></span>
          </a>&nbsp;
        </div>
      </section>

      <section class="panel is-light">
        <div class="panel-header">
          <p>Tags</p>
         <span class="fa fa-tag"></span>
        </div>
        <div class="panel-body has-background-white">
          <a class="tag is-small is-light has-background-white"
             href="#">
            <span class="fa fa-folder"></span>&nbsp;indie
          </a>&nbsp;

          <a class="tag is-small is-light has-background-white"
             href="#">
            <span class="fa fa-folder"></span>&nbsp;pop
          </a>&nbsp;

          <a class="tag is-small is-light has-background-white"
             href="#">
            <span class="fa fa-folder"></span>&nbsp;rock
          </a>&nbsp;
        </div>
      </section>
    </aside>

Well, a lot of font awesome involved.

The Preview

It is just pretty code. No Magic.

Bulma SASS: Panel: Tags and Categories

What is Next ?

More SASS customization is our next topic. This is going to be more interesting. Consider continue reading [ Bulma SASS - Post ].

Thank you for reading.