bulma-start.html

---
title: 'Bulma start'
fulltitle: 'Bulma start: a tiny npm package to get started with Bulma'
layout: default
route: bulma-start
version: 0.0.5
download_url: https://github.com/jgthms/bulma-start/releases/download/0.0.5/bulma-start-0.0.5.zip
github_url: https://github.com/jgthms/bulma-start
npm_url: https://www.npmjs.com/package/bulma-start
breadcrumb:
  - home
  - more
  - bulma-start
---

{% include global/navbar.html id="MadeWithBulma" %}

{%
  include components/hero.html
  color="success"
  icon="fas fa-rocket"
  title="The `bulma-start` package"
  subtitle="A tiny npm package to get started with Bulma"
%}

<section class="section bd-content">
  <div class="container">
    <div class="columns">
      <div class="column is-5-widescreen">
        <p class="title is-4">
          <code><a target="_blank" href="{{ page.npm_url }}">bulma-start</a></code>
          is a tiny npm package that includes the <code>npm</code>
          <strong>dependencies</strong> you need to
          <strong>build your own website</strong> with Bulma.
        </p>

        <div class="buttons">
          <a
            class="button bd-fat-button is-medium is-success"
            target="_blank"
            href="{{ page.download_url }}"
          >
            <span class="icon">
              <i class="fas fa-download"></i>
            </span>
            <span><strong>Download v{{ page.version }}</strong></span>
          </a>
        </div>

        <div class="buttons">
          <a
            class="button is-small is-light"
            target="_blank"
            href="{{ page.github_url }}"
          >
            <span><strong>GitHub</strong> page</span>
          </a>

          <a
            class="button is-small is-light is-danger"
            target="_blank"
            href="{{ page.npm_url }}"
          >
            <span><strong>npm</strong> page</span>
          </a>
        </div>
      </div>

      <div class="column is-narrow">
        <p>
          <a href="{{ page.npm_url }}">
            <img
              src="{{ site.url }}/images/bulma-start.png"
              alt="Bulma: a Flexbox CSS framework"
              style="max-width: 100%;"
              width="438"
              height="200"
            />
          </a>
        </p>
      </div>
    </div>

    {% include elements/anchor.html name="Install" %}

    <div class="content">
      <p>
        <a href="{{ page.download_url }}" rel="nofollow noopener"
          ><strong>Download bulma-start {{ page.version }} (.zip)</strong></a
        >, rename to your project's name (i.e. <code>my-new-bulma-site</code>) and:
      </p>
    </div>

    {% highlight bash %} cd my-new-bulma-site && npm install && npm start {% endhighlight
    %} For more, visit
    <a href="https://github.com/jgthms/bulma-start#get-your-feet-wet"
      >bulma-start README on Github.</a
    >

    {% include elements/anchor.html name="What’s included" %}

    <div class="content">
      <p>
        The <code>npm</code> dependencies included in <code>package.json</code> are:
      </p>

      <ul>
        <li>
          <code
            ><a href="https://github.com/jgthms/bulma" target="_blank"
              >bulma</a
            ></code
          >
        </li>
        <li>
          <code
            ><a href="https://github.com/sass/sass" target="_blank"
              >sass</a
            ></code
          >
          to compile your own Sass file
        </li>
        <li>
          <code
            ><a href="https://github.com/postcss/postcss-cli" target="_blank"
              >postcss-cli</a
            ></code
          >
          and
          <code
            ><a href="https://github.com/postcss/autoprefixer" target="_blank"
              >autoprefixer</a
            ></code
          >
          to add support for older browsers
        </li>
        <li>
          <code
            ><a href="https://babeljs.io/docs/usage/cli/" target="_blank"
              >babel-cli</a
            ></code
          >,
          <code
            ><a href="https://github.com/babel/babel-preset-env" target="_blank"
              >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>
    </div>
  </div>
</section>