• Stars
    star
    273
  • Rank 144,683 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 6 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Start package for Bulma

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.

More Repositories

1

bulma

Modern CSS framework based on Flexbox
CSS
47,555
star
2

css-reference

CSS Reference: a free visual guide to the most popular CSS properties
HTML
4,826
star
3

web-design-in-4-minutes

Learn the basics of web design in 4 minutes
HTML
4,322
star
4

minireset.css

A tiny modern CSS reset
JavaScript
2,715
star
5

marksheet

Free tutorial to learn HTML and CSS
JavaScript
1,008
star
6

html-reference

HTML Reference: a free guide to all HTML5 elements and attributes
HTML
956
star
7

lavalamp.js

A replacement for infinite scrolling.
CSS
885
star
8

wysiwyg.css

A tiny CSS for generated HTML or Markdown content
Sass
710
star
9

javascript-in-14-minutes

Learn the basics of JavaScript in 14 minutes
CSS
548
star
10

juketube

A YouTube jukebox built with AngularJS
JavaScript
278
star
11

bulma-website

[DEPRECATED] Website for the Bulma CSS framework
CSS
40
star
12

hacker-news-dark-mode

Hacker News Dark Mode
HTML
18
star
13

bulma-versions

Bulma Versions
HTML
8
star
14

euro-2016-calendar

Simple mobile-friendly Euro 2016 calendar
CSS
6
star
15

how-css-works

CSS
5
star
16

social-media-assets

A simple repository of colors & logos from popular social websites.
CSS
5
star
17

monokai-extended-colors

Monokai Extended Colors in HTML
HTML
3
star
18

amp

AMP (Accelerated Mobile Pages) test
CSS
3
star
19

css-art-science

Un parcours initiatique à l'intégration Web
CSS
3
star
20

theme-generator

CSS
2
star
21

bbxdesign

WordPress Theme for my blog and portfolio
CSS
2
star
22

buttonizer

Something something
JavaScript
2
star
23

bbxworld

First ever bbx website
HTML
1
star
24

amp-homepage

CSS
1
star
25

toast

Ghost Theme
CSS
1
star
26

grumpy-cat

Grumpy Cat
HTML
1
star
27

barn-dor

The Barn d'Or Award
CSS
1
star
28

grandourse

Discourse Theme
CSS
1
star
29

sochi-2014-calendar

A simple calendar for the Sochi 2014 Olympics
JavaScript
1
star