Start creating Bulma template with our Boilerplate

After a lot of time to create templates (for the marketplace or for clients) based on Bulma we’ve decided to create our own boilerplate to get ready faster and always get the same structure in our template. So creating a template for Bulma was never be easier.


It’s now time for us to share it with the great Bulma’s community.


Our boilerplate is available on GitHub and is free to use (we even encourage you to use it if you plan to distribute your template through our marketplace). It is based ongulp as build processor and Jekyll to provide a demo site for your template


The boilerplate structure is quite simple:

|-- boilerplate
    |-- .babelrc
    |-- .eslintrc.json
    |-- README.md
    |-- _config.yml
    |-- dependencies-injector.js
    |-- gulpfile.js
    |-- package.json
    |-- src
        |-- demo
        |-- js
        |-- sass
            |-- app.sass
            |-- bulma-custom
            |-- theme-sass
                |-- _all.sass
                |-- _functions.sass
                |-- _helpers.sass
                |-- _mixins.sass
                |-- _variables.sass
                |-- components
                |-- elements
                |-- variables
Now focus on the src/sass folder:
|-- boilerplate
    |-- src
        |-- sass
            |-- app.sass
            |-- bulma-custom
            |-- theme-sass
                |-- _all.sass
                |-- _functions.sass
                |-- _helpers.sass
                |-- _mixins.sass
                |-- _variables.sass
                |-- components
                |-- elements
                |-- variables
This folder contains all Sass files required to create your template.
  • app.sass : Entry point of your template in which you can import external Sass libraries (e.g. bulma-extensions)
  • _helper.sass : provides some useful Sass helpers
  • _mixins.sass : provides some useful Sass mixins
  • _functions.sass : provides some useful Sass functions
  • bulma-custom : folder reproduce the core bulma structure and contains all core Bulma modifications (like variables customization).
  • themes-sass : contains all other rules like Colors, Typography and new elements/components which are not standard in Bulma.

Let’s see how to create your own template using this boilerplate


Step 1 : Prepare your environment

First of all it requires you to have an installation of nodejs with npm. It also requires you to have git and gulp.

If gulp is not yet install use the command below to install it.

npm install -g gulp@next
Create a new directory and enter into it
mkdir myTemplate
cd myTemplate
Clone the repository to get the last version of the boilerplate
git clone https://github.com/CreativeBulma/Boilerplate.git .
Install dependencies through nam
npm install

Your environment is now ready to start creating your template.

Step 2 : Configure your template

Open your favorite editor (ours is the wonderful Visual Studio Code) and start by editing some files to setup your template.
  1. Open package.json file and update properties:
  • name: Your template name (lowercase and one word, and may contain hyphens and underscores.)
  • version: Your template version (must be in the form x.x.x and follow the semantic versioning guidelines)
  • author: Your author name and email
  • description: A short description of your template
  • browsers: Change it with babel values only if you want to target specific browsers (see Babel documentation)
  • main: re-enter your name template here (keep .min.js suffix)
  • style: re-enter your name template here (keep .min.css suffix)
  • keywords: Enter a set of keywords relevant with your template
  1. Open _config.yml and update following properties:
  • name: Your template name (same as the one set into package.json)
  • title: Your template title
  • description: A short description of your template

Step 3 : Create your template

Step 3.1 Typography customization

Edit file src/sass/theme-sass/variables/_typography.sass to specify your own font and customize global typography bulma’s variables.

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,500,600,700);
$family-sans-serif: 'Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

$family-primary: $family-sans-serif
$body-line-height: 2rem


Step 3.2 Custom Colors

Edit file src/sass/theme-sass/variables/_colors.sass to modify your template color scheme.

Do not delete code under comment

/* ----------------------------------------------------------
	[_] MERGE CUSTOM COLORS AND BULMA COLORS
 ---------------------------------------------------------- */


Step 3.3 Add your own elements / components

Add your own Sass elements and components into respective folders.


Step 4 : Build and test your template

It's time to build your template and see it in action.

Run the build Gulp task

gulp build
or
gulp
To only build CSS sources use following command
gulp build:styles
To only build JavaScript sources use
gulp build:scripts

To test your template run the following command.
gulp demo
It will execute Jekyll to serve your demo and uses BrowserSync to take any change into account in real time. Once your template is at your taste you can build the final version using the following command
gulp dist
This will build your template and copy all distribution files into the dist directory.

Congratulations! Your first template is now ready.

Now, all you have to do is to create the documentation and you’re ready to distribute your work on our marketplace.