Bulma MD - Overview

   
   
 bulma  css  
 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

This article series is successor of previous bulma article series.

Goal: A Bulma Material Design Experiment.

After using Bulma for a while, I decide to add custom classes for my tailor made flat theme.

Previous Article

This Bulma MD article series start from Step-04. Step-01 until step-03 contain Bulma preparation. You can read those article here:

In fact, you should read this first, before you continue with step-04 and after.

Repository

Tools

Opening Example in Browser

You can open the html file artefact directly from your file manager, or alternatively setup simple web server example such as browsersync, and enjoy the localhost:3000.

Table of Content

The table content is available as header on each tutorial. There, I present a Bootstrap Tutorial, step by step, for beginners.

Begin The Guidance

Material Design start from Step-04. Step-01 until step-03 contain Bulma preparation.

Step 01

Adding Bulma CSS

  • Without Bulma

  • Using CDN

  • Using Local

screenshot

Step 02

Using Bulma CSS: Navigation Bar

  • Simple

  • Full Featured

  • With jQuery

  • With Vue JS

  • Adding Font Awesome

screenshot

Step 03

Bulma Custom SASS

  • Custom maximum width class

  • Responsive gap using custom sass

screenshot

Step 04

Material Design

  • Material Color Demo

  • Spacing Helper Demo

screenshot

Step 05

HTML Box using Material Design

  • Main Blog and Aside Widget

screenshot

Step 06

Finishing

  • Blog Post Example

screenshot

Repository

Have fun, and enjoy coding.

Bulma Material Design

Thank you for cloning the repository.

Begin The Guidance

Let’s get the tutorial started.

Consider continue reading [ Bulma MD - Helper ].

Thank you for reading.