Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
docs/documentation/start/overview.html Normal file
View File

@@ -0,0 +1,64 @@
---
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>
{% 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 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>