bulma/docs/documentation/overview/start.html

---
layout: documentation
doc-tab: overview
doc-subtab: start
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title"><strong>3</strong> ways to start</h1>
    <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>

    <hr>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">1</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          Use <strong>NPM</strong> <em>(recommended)</em>:
        </p>
{% highlight bash %}
npm install bulma
{% endhighlight %}
      </div>
    </article>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">2</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
          <br>
          <a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
        </p>
      </div>
    </article>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">3</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          Download from the <strong>repository</strong>
          <br>
          <a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
        </p>
      </div>
    </article>

    <hr>

    <div class="message is-info">
      <div class="message-header">
        Font Awesome icons
      </div>
      <div class="message-body">
        <p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
{% highlight html %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
{% endhighlight %}
      </div>
    </div>

    <hr>

    <h3 class="title">Customizing with Sass</h3>

    <div class="content">
      <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
    </div>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">1</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          <strong>Download</strong> the source files:
        </p>
{% highlight bash %}
npm install bulma
{% endhighlight %}
        <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
      </div>
    </article>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">2</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          <strong>Set</strong> your variables
        </p>
        <p class="subtitle is-6">
          Add your own colors, set new fonts, override Bulma styles...
        </p>
{% highlight sass %}
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink
$pink: #ffb3b3
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"
{% endhighlight %}
        </p>
      </div>
    </article>

    <article class="media is-large">
      <div class="media-left">
        <p class="title is-5">3</p>
      </div>
      <div class="media-content">
        <p class="title is-5">
          See the <strong>result</strong>: before and after
        </p>
        <p class="subtitle is-6">
          Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
        </p>
        <figure>
          <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
          <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
        </figure>
      </div>
    </article>
  </div>
</section>