2016-09-11 11:00:49 +00:00
---
2017-07-29 12:02:00 +00:00
title: Get started with Bulma
2016-09-11 11:00:49 +00:00
layout: documentation
doc-tab: overview
doc-subtab: start
---
2018-03-26 13:46:39 +00:00
{% include subnav/subnav-overview.html %}
2016-09-11 11:00:49 +00:00
< section class = "section" >
< div class = "container" >
2017-07-29 14:47:33 +00:00
< h1 class = "title" > Getting started< / h1 >
2016-09-11 11:00:49 +00:00
< h2 class = "subtitle" > You only need < strong > 1 CSS file< / strong > to use Bulma< / h2 >
< hr >
2017-07-29 14:47:33 +00:00
< div class = "content" >
< p >
There are several ways to < strong > get started< / strong > with Bulma. You can either:
< / p >
< ol >
< li >
use < strong > npm< / strong > to install the Bulma package
< / li >
< li >
use the cdnjs < strong > CDN< / strong > to link to the Bulma stylesheet
< / li >
< li >
use the < strong > GitHub repository< / strong > to get the latest development version
< / li >
< / ol >
< / div >
2016-09-11 11:00:49 +00:00
< article class = "media is-large" >
2016-12-22 18:17:26 +00:00
< div class = "media-left" >
< p class = "title is-5" > 1< / p >
< / div >
2016-09-11 11:00:49 +00:00
< div class = "media-content" >
< p class = "title is-5" >
Use < strong > NPM< / strong > < em > (recommended)< / em > :
< / p >
2017-07-29 14:47:33 +00:00
{% highlight bash %}npm install bulma{% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / article >
< article class = "media is-large" >
2016-12-22 18:17:26 +00:00
< div class = "media-left" >
< p class = "title is-5" > 2< / p >
< / div >
2016-09-11 11:00:49 +00:00
< 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" >
2016-12-22 18:17:26 +00:00
< div class = "media-left" >
< p class = "title is-5" > 3< / p >
< / div >
2016-09-11 11:00:49 +00:00
< 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" >
2018-01-18 15:43:10 +00:00
< p > If you want to use icons with Bulma, don't forget to include < a href = "https://fontawesome.com" > Font Awesome 5< / a > :< / p >
{% highlight html %}< script defer src = "{{ site.data.icons.fontawesome5 }}" > < / script > {% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2017-07-29 14:47:33 +00:00
2017-11-05 19:35:23 +00:00
{% include anchor.html name="Code requirements" %}
< div class = "content" >
< p >
For Bulma to work correctly, you need to make your webpage < strong > responsive< / 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" >
Use the < strong > HTML5 doctype< / strong >
< / p >
{% highlight html %}<!DOCTYPE html> {% 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" >
Add the responsive < strong > viewport< / strong > meta tag
< / p >
{% highlight html %}< meta name = "viewport" content = "width=device-width, initial-scale=1" > {% endhighlight %}
< / div >
< / article >
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Starter template" %}
2017-07-29 14:47:33 +00:00
< div class = "content" >
< p >
If you want to get started < strong > right away< / strong > , you can use this < strong > HTML starter template< / strong > . Just copy/paste this code in a file and save it on your computer.
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example highlight-full" >
2017-07-29 14:47:33 +00:00
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
< / div >
2018-01-18 15:43:10 +00:00
{% include anchor.html name="bulma-start" %}
< div class = "content" >
< p >
< code > < a href = "/bulma-start/" > bulma-start< / a > < / code > is a tiny npm package that includes the < code > npm< / code > dependencies you need to build your own website with Bulma.
< / p >
< p >
< a class = "button is-link" href = "/bulma-start/" > Check it out< / a >
< / p >
< / div >
2016-09-11 11:00:49 +00:00
< / div >
< / section >
