Need help with bulma-start?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jgthms
260 Stars 72 Forks MIT License 7 Commits 19 Opened issues

Description

Start package for Bulma

Services available

!
?

Need anything else?

Contributors list

# 259
WordPre...
HTML
jekyll-...
Sass
6 commits
# 178,256
webfram...
python-...
python-...
encrypt...
1 commit

Start package for Bulma

Tiny npm package that includes the

npm
dependencies you need to build your own website with Bulma.

Bulma: a Flexbox CSS framework

Install

npm install bulma-start

or

yarn add bulma-start

What's included

The

npm
dependencies included in
package.json
are:

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 Bulma.

When installing this package with the commands above, it landed in

$HOME/node_packages/bulma-start
. In order to use it as a template for your project, you might consider copying it to a better suited location:
cd $HOME/projects
cp -a $HOME/node_modules/bulma-start my-bulma-project

Alternatively, you could do something similar with a GitHub clone as well.

cd $HOME/projects
git clone https://github.com/jgthms/bulma-start
mv bulma-start my-bulma-project
rm -rf my-bulma-project/.git     # cut its roots

Now, that you prepared the groundwork for your project, set up Bulma and run the watchers:

cd my-bulma-project
npm install
npm start

As long as

npm start
is running, it will watch your changes. You can edit
_sass/main.scss
and
_javascript/main.js
at will. Changes are immediately compiled to their destinations, where
index.html
will pick them up upon reload in your browser.

Some controlling output is written to the

npm start
console in that process:
_javascript/main.js -> lib/main.js

=> changed: $HOME/projects/start-with-bulma/_sass/main.scss Rendering Complete, saving .css file... Wrote CSS to $HOME/projects/start-with-bulma/css/main.css

Use

npm run
to show all available commands:
Lifecycle scripts included in bulma-start:
  start
    npm-run-all --parallel css-watch js-watch

available via npm run-script: css-build node-sass _sass/main.scss css/main.css css-deploy npm run css-build && npm run css-postcss css-postcss postcss --use autoprefixer --output css/main.css css/main.css css-watch npm run css-build -- --watch deploy npm run css-deploy && npm run js-build js-build babel _javascript --out-dir lib js-watch npm run js-build -- --watch

If you want to learn more, follow these links: Bulma homepage and Documentation.

Copyright and license

Code copyright 2017 Jeremy Thomas. Code released under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.