--- layout: documentation doc-tab: overview doc-subtab: start --- {% include subnav-overview.html %}

3 ways to start

You only need 1 CSS file to use Bulma


1

Use NPM (recommended):

{% highlight bash %} npm install bulma {% endhighlight %}

Font Awesome icons

If you want to use icons with Bulma, don't forget to include Font Awesome:

{% highlight html %} {% endhighlight %}

Customizing with Sass

If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:

2

Set your variables:
{% highlight sass %} // Override initial variables here // You can add new ones or update existing ones: $blue: #72d0eb // Update blue $pink: #ffb3b3 // Add pink $family-serif: "Georgia", serif // Add a serif family // Override generated variables here // For example, by default, the $danger color is $red and the font is sans-serif // You can change these values: $danger: $orange // Use the existing orange $family-primary: $family-serif // Use the new serif family {% endhighlight %}

3

Import Bulma after having set your variables:
{% highlight sass %} // Override initial variables here // You can add new ones or update existing ones: $blue: #72d0eb // Update blue $pink: #ffb3b3 // Add pink $family-serif: "Georgia", serif // Add a serif family // Override generated variables here // For example, by default, the $danger color is $red and the font is sans-serif // You can change these values: $danger: $orange // Use the existing orange $family-primary: $family-serif // Use the new serif family @import "bulma" {% endhighlight %}