Skip to content

Commit a87e20b

Browse files
jgthmsjgthms
committed
Improve form documentation
1 parent e539036 commit a87e20b

File tree

5 files changed

+210
-79
lines changed

5 files changed

+210
-79
lines changed

‎docs/documentation/form/file.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -568,31 +568,31 @@
568568

569569
<div class="content">
570570
<p>
571-
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:
571+
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:
572572
</p>
573573
<ul>
574574
<li>
575-
<code>.file</code> the main <strong>container</strong>
575+
<code>file</code> the main <strong>container</strong>
576576
<ul>
577577
<li>
578-
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
578+
<code>file-label</code> the actual <strong>interactive</strong> and clickable part of the element
579579
<ul>
580580
<li>
581-
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
581+
<code>file-input</code> the <strong>native</strong> file input, hidden for styling purposes
582582
</li>
583583
<li>
584-
<code>.file-cta</code> the upload <strong>call-to-action</strong>
584+
<code>file-cta</code> the upload <strong>call-to-action</strong>
585585
<ul>
586586
<li>
587-
<code>.file-icon</code> an optional <strong>upload</strong> icon
587+
<code>file-icon</code> an optional <strong>upload</strong> icon
588588
</li>
589589
<li>
590-
<code>.file-label</code> the "Choose a file…" text
590+
<code>file-label</code> the "Choose a file…" text
591591
</li>
592592
</ul>
593593
</li>
594594
<li>
595-
<code>.file-name</code> a container for the <strong>chosen file</strong> name
595+
<code>file-name</code> a container for the <strong>chosen file</strong> name
596596
</li>
597597
</ul>
598598
</li>
@@ -609,7 +609,7 @@
609609
<div class="column">
610610
<div class="content">
611611
<p>
612-
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.
612+
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.
613613
</p>
614614
</div>
615615
<div class="bd-example">
@@ -625,7 +625,7 @@
625625
<div class="column">
626626
<div class="content">
627627
<p>
628-
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
628+
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
629629
</p>
630630
</div>
631631
<div class="bd-example">
@@ -641,7 +641,7 @@
641641
<div class="column">
642642
<div class="content">
643643
<p>
644-
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
644+
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
645645
</p>
646646
</div>
647647
<div class="bd-example">
@@ -657,7 +657,7 @@
657657
<div class="column">
658658
<div class="content">
659659
<p>
660-
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
660+
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
661661
</p>
662662
</div>
663663
<div class="bd-example">
@@ -673,7 +673,7 @@
673673
<div class="column">
674674
<div class="content">
675675
<p>
676-
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
676+
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
677677
</p>
678678
</div>
679679
<div class="bd-example">
@@ -710,13 +710,13 @@
710710
</p>
711711
<ul>
712712
<li>
713-
<code>.is-small</code>
713+
<code>is-small</code>
714714
</li>
715715
<li>
716-
<code>.is-medium</code>
716+
<code>is-medium</code>
717717
</li>
718718
<li>
719-
<code>.is-large</code>
719+
<code>is-large</code>
720720
</li>
721721
</ul>
722722
</div>

‎docs/documentation/form/general.html‎

Lines changed: 65 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,12 @@
106106
</div>
107107
{% endcapture %}
108108

109+
{% capture control_example %}
110+
<div class="control">
111+
<input class="input" type="text" placeholder="Text input">
112+
</div>
113+
{% endcapture %}
114+
109115
{% capture field_example %}
110116
<div class="field">
111117
<label class="label">Label</label>
@@ -807,23 +813,66 @@
807813
{% endcapture %}
808814

809815
<div class="content">
810-
<p>The following form controls <strong>classes</strong> are supported:</p>
816+
<p>
817+
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>.
818+
</p>
819+
<p>
820+
The following CSS <strong>classes</strong> are supported:
821+
</p>
811822
<ul>
812-
<li><code>.label</code></li>
813-
<li><code>.input</code></li>
814-
<li><code>.textarea</code></li>
815-
<li><code>.select</code></li>
816-
<li><code>.checkbox</code></li>
817-
<li><code>.radio</code></li>
818-
<li><code>.button</code></li>
819-
<li><code>.help</code></li>
823+
<li><code>label</code></li>
824+
<li><code>input</code></li>
825+
<li><code>textarea</code></li>
826+
<li><code>select</code></li>
827+
<li><code>checkbox</code></li>
828+
<li><code>radio</code></li>
829+
<li><code>button</code></li>
830+
<li><code>help</code></li>
820831
</ul>
821-
<p>Each of them should be wrapped in a <code>.control</code> container.<br>
822-
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>
823832
</div>
824833

834+
<div class="content">
835+
<p>
836+
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.
837+
<br>
838+
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.
839+
</p>
840+
</div>
841+
842+
{% include elements/anchor.html name="Complete form example" %}
843+
825844
{% include elements/snippet.html content=example more=true %}
826845

846+
{% include elements/anchor.html name="Form control" %}
847+
848+
<div class="content">
849+
<p>
850+
The <code>control</code> element is a wrapper for form controls. It gives the possibility to:
851+
</p>
852+
<ul>
853+
<li>
854+
resize form controls
855+
</li>
856+
<li>
857+
combine form controls into a group
858+
</li>
859+
<li>
860+
combine form controls into a list
861+
</li>
862+
<li>
863+
append and prepend icons to a form control
864+
</li>
865+
</ul>
866+
</div>
867+
868+
{% include elements/snippet.html content=control_example %}
869+
870+
<div class="content">
871+
<p>
872+
For the best results using Bulma, it's recommended to use the <code>control</code> element as often as possible.
873+
</p>
874+
</div>
875+
827876
{% include elements/anchor.html name="Form field" %}
828877

829878
<div class="content">
@@ -1015,20 +1064,20 @@
10151064

10161065
<div class="content">
10171066
<p>
1018-
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>:
1067+
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>:
10191068
</p>
10201069
<ul>
10211070
<li>
1022-
<code>.is-small</code>
1071+
<code>is-small</code>
10231072
</li>
10241073
<li>
1025-
<code>.is-normal</code> for any <code>.input</code> or <code>.button</code>
1074+
<code>is-normal</code> for any <code>input</code> or <code>button</code>
10261075
</li>
10271076
<li>
1028-
<code>.is-medium</code>
1077+
<code>is-medium</code>
10291078
</li>
10301079
<li>
1031-
<code>.is-large</code>
1080+
<code>is-large</code>
10321081
</li>
10331082
</ul>
10341083
</div>

‎docs/documentation/form/input.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -249,19 +249,23 @@
249249
{% endcapture %}
250250

251251
<div class="content">
252-
<p>The following <strong>modifiers</strong> are supported:</p>
253-
<ul>
254-
<li>the <strong><a href="#colors">color</a></strong></li>
255-
<li>the <strong><a href="#sizes">size</a></strong></li>
256-
<li>the <strong><a href="#states">state</a></strong></li>
257-
</ul>
258-
<p>The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:</p>
252+
<p>
253+
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:
254+
</p>
259255
<ul>
260256
<li><code>type="text"</code></li>
261257
<li><code>type="password"</code></li>
262258
<li><code>type="email"</code></li>
263259
<li><code>type="tel"</code></li>
264260
</ul>
261+
<p>
262+
Several <strong>modifiers</strong> are supported which affect:
263+
</p>
264+
<ul>
265+
<li>the <strong><a href="#colors">color</a></strong></li>
266+
<li>the <strong><a href="#sizes">size</a></strong></li>
267+
<li>the <strong><a href="#states">state</a></strong></li>
268+
</ul>
265269
</div>
266270

267271
<div class="columns">

0 commit comments

Comments
 (0)