Webnomad for Bulma

Template to build your own website using Webnomad styled in Bulma.

For more information about the software components:

• https://dyne.org/software/webnomad
• http://bulma.io

Install

Make sure you have a recent version of NodeJS, NPM and Yarn installed on your system, as well Zsh and Pandoc.

Once it is all in place, do:

make install

What's included

The dependencies included in package.json are:

• bulma
• node-sass to compile your own Sass file
• postcss-cli and autoprefixer to add support for older browsers
• babel-cli, babel-preset-env and babel-preset-es2015-ie for compiling ES6 JavaScript files
• markdown-inline-tag to render XML markdown tags inside HTML pages

Apart from package.json, the following files are included:

• .babelrc configuration file for Babel
• .gitignore common Git ignored files
• index.html this HTML5 file
• _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css
• _javascript/main.js an ES6 JavaScript that compiles to lib/main.js

Get your feet wet

This package is meant to provide a good starting point for working with WebNomad and Bulma.

Read here to understand how to use this repository as a template for your own website.

Use it as a GitHub template and start editing:

• .html files in views/
• .css files in _sass
• .js files in _javascript

Beware that stylesheets are processed through the libSass pre-processor.

To build your project:

make build

To preview your project:

make preview

As long as the preview is running it will watch your changes. You can edit _sass/main.scss and _javascript/main.js and views/index.html at will. Changes are immediately compiled to their destinations, where index.html will pick them up upon reload in your browser (you must reload by hand!).

Some controlling output is written to the make preview console in that process, along with rendering errors.

To deploy your project setup Github pages to pick it from the docs/ directory and eventually setup a CNAME to use your own domain.

Styling

If you want to learn how to use Bulma for the layout design of your website, follow these links: Bulma homepage and Documentation.

Copyright and license

Copyright (C) 2017 by Jeremy Thomas.

Copyright (C) 2018-2020 by the Dyne.org foundation.

Code released under the MIT license.