|
|
|
|
@@ -423,18 +423,18 @@
|
|
|
|
|
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><form></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><fieldset></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><legend></span>Simple form<span class="highlight-a"></legend></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div></span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-6"</span><span class="highlight-a">></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"password"</span><span class="highlight-a">></span>Password<span class="highlight-a"></label></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"password"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Password"</span><span class="highlight-a">/></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
|
|
|
|
<span class="code-line"> <span class="highlight-a"></fieldset></span></span>
|
|
|
|
|
<span class="code-line"><span class="highlight-a"></form></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> Form inputs are inline by defaut, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div>
|
|
|
|
|
<span class="code-line"><span class="highlight-a"></form></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> Form inputs are inline by default, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div>
|
|
|
|
|
<div class="section double-padded"><h3>Notes</h3><ul><li>Using the <code><fieldset></code> and <code><legend></code> elements is highly recommended, as it improves semantic markup and accessibility.</li><li>Some input elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.</li></ul></div>
|
|
|
|
|
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.</li><li>Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.</li><li>Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.</li><li>Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.</li><li>Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.</li><li>Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.</li><li>Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
|
|
|
|
</div><br/><div id="buttons" class="card fluid">
|
|
|
|
|
|
Angelos Chalaris