Awesome
Start package for Bulma
Tiny npm package that includes the npm
dependencies you need to build your own website with Bulma.
<a href="http://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma-start/master/bulma-start.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
Install
npm install bulma-start
or
yarn add bulma-start
What's included
The npm
dependencies included in package.json
are:
- <code>bulma</code>
- <code>node-sass</code> to compile your own Sass file
- <code>postcss-cli</code> and <code>autoprefixer</code> to add support for older browsers
- <code>babel-cli</code>, <code>babel-preset-env</code> and <code>babel-preset-es2015-ie</code> for compiling ES6 JavaScript files
Apart from package.json
, the following files are included:
.babelrc
configuration file for Babel.gitignore
common Git ignored filesindex.html
this HTML5 file_sass/main.scss
a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles tocss/main.css
_javascript/main.js
an ES6 JavaScript that compiles tolib/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.