bulma start 0.04

.babelrc

+{
+  "presets": ["es2015-ie"]
+}

.gitignore

+# Files
+
+.DS_Store
+.ruby-version
+npm-debug.log
+
+# Folders
+
+.idea/
+.jekyll-cache/
+.sass-cache
+_gh_pages
+_site
+node_modules" " 
+" " 
+" " 
+" " 

LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2017 Jeremy Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

+# Start package for [Bulma](http://bulma.io)
+
+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
+
+```sh
+npm install bulma-start
+```
+_or_
+
+```sh
+yarn add bulma-start
+```
+
+## What's included
+
+The `npm` dependencies included in `package.json` are:
+
+* <code>[bulma](https://github.com/jgthms/bulma)</code>
+* <code>[node-sass](https://github.com/sass/node-sass)</code> to compile your own Sass file
+* <code>[postcss-cli](https://github.com/postcss/postcss-cli)</code> and <code>[autoprefixer](https://github.com/postcss/autoprefixer)</code> to add support for older browsers
+* <code>[babel-cli](https://babeljs.io/docs/usage/cli/)</code>, <code>[babel-preset-env](https://github.com/babel/babel-preset-env)</code> and <code>[babel-preset-es2015-ie](https://github.com/jmcriffey/babel-preset-es2015-ie)</code> for compiling ES6 JavaScript files
+
+Apart from `package.json`, the following files are included:
+
+* `.babelrc` configuration file for [Babel](https://babeljs.io/)
+* `.gitignore` common [Git](https://git-scm.com/) 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:
+
+```sh
+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.
+
+```sh
+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:
+
+```sh
+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:
+
+```sh
+_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:
+
+```sh
+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](http://bulma.io) and [Documentation](http://bulma.io/documentation/overview/start/).
+
+
+## Copyright and license
+
+Code copyright 2017 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma-start/blob/master/LICENSE).

_javascript/main.js

+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Hello Bulma!');
+});

_sass/main.scss

+@charset "utf-8";
+
+// Customization
+
+// You can easily customize Bulma with your own variables.
+// Just uncomment the following block to see the result.
+
+/*
+// 1. Import the initial variables
+@import "../node_modules/bulma/sass/utilities/initial-variables";
+
+// 2. Set your own initial variables
+// Update the blue shade, used for links
+$blue: #06bcef;
+// Add pink and its invert
+$pink: #ff8080;
+$pink-invert: #fff;
+// Update the sans-serif font family
+$family-sans-serif: "Helvetica", "Arial", sans-serif;
+
+// 3. Set the derived variables
+// Use the new pink as the primary color
+$primary: $pink;
+$primary-invert: $pink-invert;
+
+// 4. Import the rest of Bulma
+*/
+
+@import "../node_modules/bulma/bulma";

index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>My first Bulma website</title>
+    <link rel="stylesheet" href="css/main.css">
+  </head>
+  <body>
+    <section class="hero is-medium is-primary">
+      <div class="hero-body">
+        <div class="container">
+          <div class="columns">
+            <div class="column is-8-desktop is-offset-2-desktop">
+              <h1 class="title is-2 is-spaced">
+                Hello Bulma!
+              </h1>
+              <h2 class="subtitle is-4">
+                  Congratulations! You're running the <strong>Bulma start</strong> project.
+                  <br>
+                  It includes everything you need to <strong>build your own website</strong> with Bulma.
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-8-desktop is-offset-2-desktop">
+            <div class="content">
+              <h3>What's included</h3>
+              <p>
+                The <code>npm</code> dependencies included in <code>package.json</code> are:
+              </p>
+              <ul>
+                <li>
+                  <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
+                </li>
+                <li>
+                  <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
+                </li>
+                <li>
+                  <code><a href="https://github.com/postcss/postcss-cli">postcss-cli</a></code> and <code><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></code> to add support for older browsers
+                </li>
+                <li>
+                  <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
+                  <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
+                  and
+                  <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
+                  for compiling ES6 JavaScript files
+                </li>
+              </ul>
+              <p>
+                Apart from <code>package.json</code>, the following files are included:
+              </p>
+              <ul>
+                <li>
+                  <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
+                </li>
+                <li>
+                  <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
+                </li>
+                <li>
+                  <code>index.html</code> this HTML5 file
+                </li>
+                <li>
+                  <code>_sass/main.scss</code> a basic SCSS file that <strong>imports Bulma</strong> and explains how to <strong>customize</strong> your styles, and compiles to <code>css/main.css</code>
+                </li>
+                <li>
+                  <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
+                </li>
+              </ul>
+              <h3>Try it out!</h3>
+              <p>
+                To see if your setup works, follow these steps:
+              </p>
+              <ol>
+                <li>
+                  <p>
+                    <strong>Move</strong> to this directory:
+                    <br>
+                    <pre><code>cd bulma-start</code></pre>
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    <strong>Install</strong> all dependencies:
+                    <br>
+                    <pre><code>npm install</code></pre>
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    <strong>Start</strong> the CSS and JS watchers:
+                    <br>
+                    <pre><code>npm start</code></pre>
+                  </p>
+                </li>
+                <li>
+                  <p>
+                    <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
+                    <br>
+                    <pre><span style="color: #22863a;">html</span> {
+  <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
+}</pre>
+                  </p>
+                </li>
+              </ol>
+              <p>
+                The page background should turn <strong class="has-text-success">green</strong>!
+              </p>
+              <h3>Get started</h3>
+              <p>
+                You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
+                <br>
+                For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
+              </p>
+            </div>
+            <table class="table is-bordered is-fullwidth">
+              <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>CSS class</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>Columns</th>
+                  <td>
+                    <code><a href="http://bulma.io/documentation/columns/basics">columns</a></code>
+                    <code><a href="http://bulma.io/documentation/columns/basics">column</a></code>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Layout</th>
+                  <td>
+                    <code><a href="http://bulma.io/documentation/layout/section">section</a></code>
+                    <code><a href="http://bulma.io/documentation/layout/container">container</a></code>
+                    <code><a href="http://bulma.io/documentation/layout/footer">footer</a></code>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Elements</th>
+                  <td>
+                    <code><a href="http://bulma.io/documentation/elements/button">button</a></code>
+                    <code><a href="http://bulma.io/documentation/elements/content">content</a></code>
+                    <code><a href="http://bulma.io/documentation/elements/title">title</a></code>
+                    <code><a href="http://bulma.io/documentation/elements/title">subtitle</a></code>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Form</th>
+                  <td>
+                    <code><a href="http://bulma.io/documentation/form/general">field</a></code>
+                    <code><a href="http://bulma.io/documentation/form/general">control</a></code>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Helpers</th>
+                  <td>
+                    <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-centered</a></code>
+                    <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-semibold</a></code>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="content">
+              <p>
+                If you want to <strong>learn more</strong>, follow these links:
+              </p>
+            </div>
+            <div class="field is-grouped">
+              <p class="control">
+                <a class="button is-medium is-primary" href="http://bulma.io">
+                  <strong class="has-text-weight-semibold">Bulma homepage</strong>
+                </a>
+              </p>
+              <p class="control">
+                <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
+                  <strong class="has-text-weight-semibold">Documentation</strong>
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer class="footer has-text-centered">
+      <div class="container">
+         <div class="columns">
+          <div class="column is-8-desktop is-offset-2-desktop">
+            <p>
+              <strong class="has-text-weight-semibold">
+                <a href="https://www.npmjs.com/package/bulma-start">bulma-start@0.0.4</a>
+              </strong>
+            </p>
+            <p>
+              <small>
+                Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
+              </small>
+            </p>
+            <p style="margin-top: 1rem;">
+              <a href="http://bulma.io">
+                <img src="made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+    <script type="text/javascript" src="lib/main.js"></script>
+  </body>
+</html>

lib/main.js

+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  console.log('Hello Bulma!');
+});
\ No newline at end of file

package.json

+{
+  "_from": "bulma-start@0.0.4",
+  "_id": "bulma-start@0.0.4",
+  "_inBundle": false,
+  "_integrity": "sha512-/PbhZBs1tIqnU75eh1SVWKC2DeW+xtQaaKITRksvmlCSTp8BH88JJk+gML3XCGE2LhSWyHTT+AIh6mwtUyjlxQ==",
+  "_location": "/bulma-start",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "bulma-start@0.0.4",
+    "name": "bulma-start",
+    "escapedName": "bulma-start",
+    "rawSpec": "0.0.4",
+    "saveSpec": null,
+    "fetchSpec": "0.0.4"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/bulma-start/-/bulma-start-0.0.4.tgz",
+  "_shasum": "19a0783cd8f55d8f5b3d771c984ab56f72e75cb7",
+  "_spec": "bulma-start@0.0.4",
+  "_where": "/Users/jthomas/Desktop",
+  "author": {
+    "name": "Jeremy Thomas",
+    "email": "bbxdesign@gmail.com",
+    "url": "http://jgthms.com"
+  },
+  "bugs": {
+    "url": "https://github.com/jgthms/bulma-start/issues"
+  },
+  "bundleDependencies": false,
+  "deprecated": false,
+  "description": "Start package for Bulma",
+  "devDependencies": {
+    "autoprefixer": "^9.7.6",
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015-ie": "^6.7.0",
+    "bulma": "^0.8.2",
+    "node-sass": "^4.13.1",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^7.1.0"
+  },
+  "homepage": "https://github.com/jgthms/bulma-start#readme",
+  "keywords": [
+    "sass",
+    "bulma",
+    "css",
+    "start"
+  ],
+  "license": "MIT",
+  "name": "bulma-start",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jgthms/bulma-start.git"
+  },
+  "scripts": {
+    "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",
+    "start": "npm-run-all --parallel css-watch js-watch"
+  },
+  "version": "0.0.4"
+}