Neanderthal Pudding Mix

    bulma-start

    0.0.5 • Public • Published

    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.

    Install

    npm i bulma-start

    DownloadsWeekly Downloads

    69

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    781 kB

    Total Files

    11

    Last publish

    Collaborators

    • jgthms