mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Update overview
This commit is contained in:
Jeremy Thomas
@@ -1,140 +1,134 @@
|
||||
---
|
||||
title: Get started with Bulma
|
||||
title: Getting started with Bulma
|
||||
subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-start
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<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>
|
||||
</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://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
|
||||
{% include anchor.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="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<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://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
|
||||
{% include anchor.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="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
|
||||
Reference in New Issue
Block a user