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

Add spaced title

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-14 22:38:45 +00:00
parent c98dbb77f2
commit 1dc6ef2c76
6 changed files with 57 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/bsa.html
View File

@@ -5,7 +5,7 @@
<div class="columns is-vcentered">
<div class="column is-4">
<p class="title">Bulma <strong>Partners</strong></p>
<p class="subtitle">Keeping the project alive!</p>
<p class="subtitle">Check out their products!</p>
</div>
<div class="column is-8">

6
docs/css/bulma-docs.css
View File

@@ -2540,8 +2540,8 @@ input[type="submit"].button {
margin-top: -0.75rem;
}
.title + .subtitle {
margin-top: -1.25rem;
.title:not(.is-spaced) + .subtitle {
margin-top: -1.5rem;
}
.title.is-1 {
@@ -2579,7 +2579,7 @@ input[type="submit"].button {
color: #363636;
}
.subtitle + .title {
.subtitle:not(.is-spaced) + .title {
margin-top: -1.5rem;
}

3
docs/documentation/elements/form.html
View File

@@ -27,7 +27,8 @@ doc-subtab: form
<li><code>.button</code></li>
<li><code>.help</code></li>
</ul>
<p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
<p>Each of them should be wrapped in a <code>.control</code> container.<br>
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
</div>
{% capture form_example %}

46
docs/documentation/elements/title.html
View File

@@ -12,7 +12,9 @@ doc-subtab: title
<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>
@@ -28,7 +30,9 @@ doc-subtab: title
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<p>There are <strong>6 sizes</strong> available:</p>
@@ -52,6 +56,7 @@ doc-subtab: title
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column"></div>
<div class="column">
@@ -73,7 +78,9 @@ doc-subtab: title
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
@@ -105,6 +112,45 @@ doc-subtab: title
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
{% endhighlight %}
</div>
</div>

3
docs/documentation/overview/responsiveness.html
View File

@@ -36,7 +36,7 @@ doc-subtab: responsiveness
<li><code>tablet</code>: from <code>769px</code></li>
<li><code>desktop</code>: from <code>1000px</code></li>
<li><code>widescreen</code>: from <code>1192px</code></li>
<li><code>fullhd</code>: from <code>1384px</code></li>
<li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1384px</code></li>
</ul>
<p>Bulma uses 9 responsive mixins:</p>
<ul>
@@ -73,6 +73,7 @@ doc-subtab: responsiveness
from <code>1192px</code> and until <code>1383px</code>
</li>
<li>
<span class="tag is-success">New!</span>
<code>=fullhd</code><br>
from <code>1384px</code>
</li>