2024-03-21 16:11:54 +00:00
|
|
|
---
|
|
|
|
|
title: Overview of Bulma
|
|
|
|
|
layout: docs
|
|
|
|
|
theme: start
|
|
|
|
|
doc-tab: start
|
|
|
|
|
doc-subtab: overview
|
|
|
|
|
breadcrumb:
|
|
|
|
|
- home
|
|
|
|
|
- documentation
|
|
|
|
|
- start
|
|
|
|
|
- start-overview
|
|
|
|
|
---
|
|
|
|
|
<div class="content">
|
|
|
|
|
<p>Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.</p>
|
|
|
|
|
<p>To use Bulma, you can either:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>use one of the pre-compiled <code>.css</code> files</li>
|
|
|
|
|
<li>or install the <code>.scss</code> files so you can customize Bulma to your needs</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% include docs/elements/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>
|
2024-06-24 02:25:58 +00:00
|
|
|
{%- highlight html -%}
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
{%- endhighlight -%}
|
2024-03-21 16:11:54 +00:00
|
|
|
</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 docs/elements/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 bd-highlight-full">
|
|
|
|
|
{% highlight html -%}
|
|
|
|
|
{%- include docs/snippets/getting-started.html -%}
|
|
|
|
|
{%- endhighlight %}
|
|
|
|
|
</div>
|
