Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 11:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Move docs to bulma repo (#299)

Browse Source 
* Add package files whitelist

* Add flex shrink

* Add flex shrink

* Add docs config

* Fix flex shrink

* Fix hero pages

* Add docs folder
This commit is contained in:
Jeremy Thomas
2016-09-11 12:00:49 +01:00
committed by GitHub
parent 1d9f6318a5
commit 9094eff30a
127 changed files with 21908 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
docs/documentation/elements/title.html Normal file
View File

@@ -0,0 +1,112 @@
---
layout: documentation
doc-tab: elements
doc-subtab: title
---
{% include subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Titles</h1>
<h2 class="subtitle">
Simple <strong>headings</strong> to add depth to your page
</h2>
<hr>
<div class="columns">
<div class="column">
<p>There are <strong>2 types</strong> of heading:</p>
</div>
<div class="column">
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</div>
<div class="column">
{% highlight html %}
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<p>There are <strong>6 sizes</strong> available:</p>
</div>
<div class="column">
<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3 (default size)</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>
</div>
<div class="column">
{% highlight html %}
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column"></div>
<div class="column">
<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5 (default size)</p>
<p class="subtitle is-6">Subtitle 6</p>
</div>
<div class="column">
{% highlight html %}
<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
{% endhighlight %}
</div>
</div>
</div>
</section>