Where to Discuss?

Local Group

Preface

Goal: Using Helper from Materialize CSS and Custom Spacing Class.

Once, I would like to use pure CSS without framework at all. But It is going to be long hard article for beginner. So I use Bulma as a starter, and pick some goodies from other CSS framework, as helper.

  1. Color Classes: taken verbatim copy from Materialize CSS.

  2. Spacing Classes: inspired from Bootstrap.

This custom theme is based on this helper.

  1. Sass - Loop - Spacing Class

  2. Less - Conditional - Color Class


1: Prepare

We should change start from the big picture. It is how we arrange the helper.scss.

Directory Structure

It is good time to organize SASS folder.

❯ tree sass/css-41
sass/css-41
├── bulma
│   ├── _derived-variables.sass
│   └── _initial-variables.sass
├── bulma.sass
├── fontawesome.scss
├── helper
│   └── _spacing.sass
├── helper.scss
├── main
│   ├── _decoration.sass
│   └── _layout-page.sass
├── main.sass
└── materialize
    ├── _color-classes.scss
    ├── _color-variables.scss
    └── _shadow.scss

4 directories, 12 files
  • .

Bulma MD: Restructure SASS Directory

Stylesheet: Helper

The helper is as simple as importing these four artefacts.

@charset "UTF-8";

// Padding and Margin
@import "helper/spacing";

// Global
@import "materialize/shadow";

// Color
@import "materialize/color-variables";
@import "materialize/color-classes";

Stylesheet: Main

And also, begin to give access to bulma variables.

@import 
  // variables
  "../bootstrap/functions",
  "variables",
  "../bootstrap/variables",
  "../bootstrap/mixins/breakpoints",

  // custom
  "main/layout-page",
  "main/layout-content",
  "main/logo",
  "main/decoration",
  "main/sticky-footer"
;

Now we can access bulma variable and mixin. We will use this variable in a few places for example:

+widescreen
  .maxwidth
    max-width: $widescreen

2: Materialize Shadow

A verbatim copy from materialize CSS.

// Z-levels
.z-depth-0 {
  box-shadow: none !important;
}

...

Consider apply z-depth class into a page.

  <!-- header -->
  <nav role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top maxwidth
              white z-depth-3 hoverable">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="images/logo-gear.png" alt="Home" />
      </a>
      <a class="navbar-item">
        Blog
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
      <div class="navbar-start">
      </div>
      <div class="navbar-end">
      </div>
    </div>
  </nav>
  <!-- footer -->
  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          has-text-centered is-vcentered
          white z-depth-3 hoverable">
      <div class="column">
        &copy; 2019.
      </div>
    </div>
  </footer>

Preview

Bulma MD: Header and Footer


4: Materialize Color

Also a verbatim copy from materialize CSS.

...

$red: (
  "base":       #F44336,
  ...
  "accent-4":    #D50000
);

$pink: (
  "base":       #e91e63,
  ...
  "accent-4":    #c51162
);

...
// Color Classes

@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    ...
  }
}

...

Alternatively you can use Open Colors, that I use for my bootstrap OC project.


5: Spacing Classes

I have already made special article, to create this bootstrap like spacing class from scratch.

Official Spacing Helpers

Update

This article was made in June 2019 with Bulma 0.7.

In June 2020, Bulma 0.9 comes out. And Bulma 0.9 is equipped with spacing helpers.

We won’t be using custom spacing helper anymore.

Expected Class Result

.m-0 {
  margin: 0px !important;
}

.m-t-0 {
  margin-top: 0px !important;
}

.m-b-0 {
  margin-bottom: 0px !important;
}

SCSS: output

Source Code

I started the loop from zero, to enable reset margin or padding.

// variable initialization
$loop-begin:  0 !default
$loop-end:   25 !default
$interval:    5 !default

// sub-property: abbreviation
$sides:  (top: t, bottom: b, left: l, right: r)
$sidesy: (top, bottom)
$sidesx: (left, right)
$properties: (margin: m, padding: p)

// loop
$cursor: $loop-begin

@while $cursor <= $loop-end
  @each $prop, $name in $properties
    .#{$name}-#{$cursor}
      #{$prop}: #{$cursor}px !important

    @each $side, $subname in $sides
      .#{$name}-#{$subname}-#{$cursor}
        #{$prop}-#{$side}: #{$cursor}px !important

    .#{$name}-y-#{$cursor}
      @each $side in $sidesy
        #{$prop}-#{$side}: #{$cursor}px !important

    .#{$name}-x-#{$cursor}
      @each $side in $sidesx
        #{$prop}-#{$side}: #{$cursor}px !important

  $cursor: $cursor + $interval

SCSS: output


6: Color Gradient Example

Consider apply the color class into a page, along with shadow class.

  <!-- main -->
  <main class="layout-base maxwidth section">

    <div role="main" 
          class="column is-full mb-1
                 blue darken-4 blue-text text-lighten-3
                 z-depth-3 hoverable">
        <h4 class="title is-4 has-text-light">Your Mission</h4>
    </div>

    <div role="main" 
          class="column is-full mb-1
                 blue darken-2 z-depth-3 hoverable">
        <p>To have, to hold, to love,
        cherish, honor, and protect?</p>
    </div>

    <div role="main" 
          class="column is-full mb-1
                 blue lighten-1 z-depth-3 hoverable">
        <p>To shield from terrors known and unknown?
        To lie, to deceive?</p>
    </div>

    <div role="main" 
          class="column is-full mb-1
                 blue lighten-3 z-depth-3 hoverable">
        <p>To live a double life,
        to fail to prevent her abduction,
        erase her identity, 
        force her into hiding,
        take away all she has known.</p>
    </div>
    
    <div role="main" 
          class="column is-full mb-1
                 blue lighten-5 z-depth-3 hoverable">
        <blockquote>
        As always, should you be caught or killed,
        any knowledge of your actions will be disavowed
        </blockquote>
    </div>

  </main>

Preview

Bulma MD: Gradient Colors


7: Landing Page Example

Once again, try this color for landing page.

  <!-- main -->
  <div class="layout-base maxwidth">
    <main role="main" 
          class="column is-full has-text-centered
                 white z-depth-3 hoverable">
      <article class="blog-post my-5">
        <p>
          <a class="button is-dark blue-grey darken-2 hoverable mb-1"
             href="#">Articles Sorted by Month</a>
          <a class="button is-dark blue-grey darken-1 hoverable mb-1"
             href="#">Articles Sorted by Tag</a>
        </p>

        <br/>

        <p>As always,
        should you be caught or killed,
        any knowledge of your actions will be disavowed.</p>
      </article>
    </main>
  </div>

Preview

Bulma MD: Landing Page

The looks of the page increase significantly with the right colors.


What is Next ?

It is going to be fun to apply those helpers to wdiget. Consider continue reading [ Bulma MD - Widget ].