Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 

Preface

Goal: A Bulma Material Design Experiment.

Repository

Experimental

This repository might change from time to time.

To do

Porting some materialize javascript.


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


Farewell

Have fun, and enjoy coding.

Bulma Material Design

Thank you for cloning the repository.