|
|
@@ -9,11 +9,28 @@ doc-subtab: start
|
|
|
|
|
|
<section class="section">
|
|
|
<div class="container">
|
|
|
- <h1 class="title"><strong>3</strong> ways to start</h1>
|
|
|
+ <h1 class="title">Getting started</h1>
|
|
|
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
+ <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>
|
|
|
+
|
|
|
<article class="media is-large">
|
|
|
<div class="media-left">
|
|
|
<p class="title is-5">1</p>
|
|
|
@@ -22,9 +39,7 @@ doc-subtab: start
|
|
|
<p class="title is-5">
|
|
|
Use <strong>NPM</strong> <em>(recommended)</em>:
|
|
|
</p>
|
|
|
-{% highlight bash %}
|
|
|
-npm install bulma
|
|
|
-{% endhighlight %}
|
|
|
+ {% highlight bash %}npm install bulma{% endhighlight %}
|
|
|
</div>
|
|
|
</article>
|
|
|
|
|
|
@@ -62,10 +77,21 @@ npm install bulma
|
|
|
</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 %}
|
|
|
+ {% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ {% include heading.html name="Starter template" %}
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <div class="example highlight-full">
|
|
|
+ {% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</section>
|
Jeremy Thomas