Skip to content

Commit

Permalink
Improve form documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgthms
jgthms committed Oct 18, 2019
1 parent e539036 commit a87e20b
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 79 deletions.
32 changes: 16 additions & 16 deletions docs/documentation/form/file.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,31 +568,31 @@

<div class="content">
<p>
The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
</p>
<ul>
<li>
<code>.file</code> the main <strong>container</strong>
<code>file</code> the main <strong>container</strong>
<ul>
<li>
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
<code>file-label</code> the actual <strong>interactive</strong> and clickable part of the element
<ul>
<li>
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
<code>file-input</code> the <strong>native</strong> file input, hidden for styling purposes
</li>
<li>
<code>.file-cta</code> the upload <strong>call-to-action</strong>
<code>file-cta</code> the upload <strong>call-to-action</strong>
<ul>
<li>
<code>.file-icon</code> an optional <strong>upload</strong> icon
<code>file-icon</code> an optional <strong>upload</strong> icon
</li>
<li>
<code>.file-label</code> the "Choose a file…" text
<code>file-label</code> the "Choose a file…" text
</li>
</ul>
</li>
<li>
<code>.file-name</code> a container for the <strong>chosen file</strong> name
<code>file-name</code> a container for the <strong>chosen file</strong> name
</li>
</ul>
</li>
Expand All @@ -609,7 +609,7 @@
<div class="column">
<div class="content">
<p>
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
With the <code>has-name</code> modifier combined with the <code>file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
</p>
</div>
<div class="bd-example">
Expand All @@ -625,7 +625,7 @@
<div class="column">
<div class="content">
<p>
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
</p>
</div>
<div class="bd-example">
Expand All @@ -641,7 +641,7 @@
<div class="column">
<div class="content">
<p>
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
</p>
</div>
<div class="bd-example">
Expand All @@ -657,7 +657,7 @@
<div class="column">
<div class="content">
<p>
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
</p>
</div>
<div class="bd-example">
Expand All @@ -673,7 +673,7 @@
<div class="column">
<div class="content">
<p>
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
</p>
</div>
<div class="bd-example">
Expand Down Expand Up @@ -710,13 +710,13 @@
</p>
<ul>
<li>
<code>.is-small</code>
<code>is-small</code>
</li>
<li>
<code>.is-medium</code>
<code>is-medium</code>
</li>
<li>
<code>.is-large</code>
<code>is-large</code>
</li>
</ul>
</div>
Expand Down
81 changes: 65 additions & 16 deletions docs/documentation/form/general.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,12 @@
</div>
{% endcapture %}

{% capture control_example %}
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
{% endcapture %}

{% capture field_example %}
<div class="field">
<label class="label">Label</label>
Expand Down Expand Up @@ -807,23 +813,66 @@
{% endcapture %}

<div class="content">
<p>The following form controls <strong>classes</strong> are supported:</p>
<p>
Bulma supports the following native <strong>HTML form elements</strong>: <code>&lt;form&gt;</code> <code>&lt;button&gt;</code> <code>&lt;input&gt;</code> <code>&lt;textarea&gt;</code> and <code>&lt;label&gt;</code>.
</p>
<p>
The following CSS <strong>classes</strong> are supported:
</p>
<ul>
<li><code>.label</code></li>
<li><code>.input</code></li>
<li><code>.textarea</code></li>
<li><code>.select</code></li>
<li><code>.checkbox</code></li>
<li><code>.radio</code></li>
<li><code>.button</code></li>
<li><code>.help</code></li>
<li><code>label</code></li>
<li><code>input</code></li>
<li><code>textarea</code></li>
<li><code>select</code></li>
<li><code>checkbox</code></li>
<li><code>radio</code></li>
<li><code>button</code></li>
<li><code>help</code></li>
</ul>
<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>

<div class="content">
<p>
To maintain the design evenly balanced, Bulma provides a very useful <code>control</code> container with which you can <strong>wrap</strong> the form controls.
<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>

{% include elements/anchor.html name="Complete form example" %}

{% include elements/snippet.html content=example more=true %}

{% include elements/anchor.html name="Form control" %}

<div class="content">
<p>
The <code>control</code> element is a wrapper for form controls. It gives the possibility to:
</p>
<ul>
<li>
resize form controls
</li>
<li>
combine form controls into a group
</li>
<li>
combine form controls into a list
</li>
<li>
append and prepend icons to a form control
</li>
</ul>
</div>

{% include elements/snippet.html content=control_example %}

<div class="content">
<p>
For the best results using Bulma, it's recommended to use the <code>control</code> element as often as possible.
</p>
</div>

{% include elements/anchor.html name="Form field" %}

<div class="content">
Expand Down Expand Up @@ -1015,20 +1064,20 @@

<div class="content">
<p>
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>field-label</code> comes with <strong>4 size modifiers</strong>:
</p>
<ul>
<li>
<code>.is-small</code>
<code>is-small</code>
</li>
<li>
<code>.is-normal</code> for any <code>.input</code> or <code>.button</code>
<code>is-normal</code> for any <code>input</code> or <code>button</code>
</li>
<li>
<code>.is-medium</code>
<code>is-medium</code>
</li>
<li>
<code>.is-large</code>
<code>is-large</code>
</li>
</ul>
</div>
Expand Down
18 changes: 11 additions & 7 deletions docs/documentation/form/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,19 +249,23 @@
{% endcapture %}

<div class="content">
<p>The following <strong>modifiers</strong> are supported:</p>
<ul>
<li>the <strong><a href="#colors">color</a></strong></li>
<li>the <strong><a href="#sizes">size</a></strong></li>
<li>the <strong><a href="#states">state</a></strong></li>
</ul>
<p>The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:</p>
<p>
The Bulma <code>input</code> CSS class is meant for <code>&lt;input"&gt;</code> HTML elements. The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:
</p>
<ul>
<li><code>type="text"</code></li>
<li><code>type="password"</code></li>
<li><code>type="email"</code></li>
<li><code>type="tel"</code></li>
</ul>
<p>
Several <strong>modifiers</strong> are supported which affect:
</p>
<ul>
<li>the <strong><a href="#colors">color</a></strong></li>
<li>the <strong><a href="#sizes">size</a></strong></li>
<li>the <strong><a href="#states">state</a></strong></li>
</ul>
</div>

<div class="columns">
Expand Down

0 comments on commit a87e20b

Please sign in to comment.