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

Improve components documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 19:20:44 +01:00
parent d4c7731792
commit e5390369a9
13 changed files with 100 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/documentation/components/breadcrumb.html
View File

@@ -164,8 +164,9 @@ meta:
{% endcapture %}
<div class="content">
<p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
<p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
<p>
The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
</p>
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
</div>
@@ -175,7 +176,7 @@ meta:
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>breadcrumb</code> container.</p>
</div>
{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}

17
docs/documentation/components/menu.html
View File

@@ -51,6 +51,23 @@ meta:
</aside>
{% endcapture %}
<div class="content">
<p>
The Bulma <code>menu</code> is a vertical navigation component that comprises:
</p>
<ul>
<li>
the <code>menu</code> container
</li>
<li>
informative <code>menu-label</code> labels
</li>
<li>
interactive <code>menu-list</code> lists that can be nested up to 2 levels
</li>
</ul>
</div>
{% include elements/snippet.html content=menu_example size="one-third" %}
{% include elements/variables.html type='component' %}

33
docs/documentation/components/message.html
View File

@@ -117,22 +117,53 @@ meta:
{% endfor %}
{% endcapture %}
<div class="content">
<p>
The Bulma <code>message</code> is a multi-part component:
</p>
<ul>
<li>
the <code>message</code> container
</li>
<li>
the optional <code>message-header</code> that can hold a title and a <code>delete</code> element
</li>
<li>
the <code>message-body</code> for the longer body of the message
</li>
</ul>
</div>
{% include elements/snippet.html content=message_example %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
The message component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html content=message_colors_example %}
{% include elements/anchor.html name="Message body only" %}
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
<p>
You can remove the <code>message-header</code> if you don't need it, which will add a left border to the <code>message-body</code>:
</p>
</div>
{% include elements/snippet.html content=message_body_example %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>
You can add one of <strong>3 size modifiers</strong> to the <code>message</code> component:
</p>
</div>
{% include elements/snippet.html content=message_small %}
{% include elements/snippet.html content=message_normal %}

22
docs/documentation/components/tabs.html
View File

@@ -354,8 +354,26 @@ meta:
{% endcapture %}
<div class="content">
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
The <strong>default</strong> tabs style has a single border at the bottom.</p>
<p>
The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
</p>
<ul>
<li>
a <code>tabs</code> container
</li>
<li>
a <code>&lt;ul&gt;</code> HTML element
</li>
<li>
a list of <code>&lt;li&gt;</code> HTML element
</li>
<li>
<code>&lt;a&gt;</code> HTML anchor elements for each link
</li>
</ul>
<p>
The <strong>default</strong> tabs style has a single border at the bottom.
</p>
</div>
{% include elements/snippet.html content=tabs_example horizontal=true %}