mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +02:00
Code Issues Releases Wiki Activity

Building and testing form module

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-26 17:29:59 +03:00
parent b3ad255007
commit 6365aa0a0f
5 changed files with 80 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/v2/DEVLOG.md
View File

@@ -202,3 +202,10 @@
- Added a list of `TODO`s in the `form` module, tried some base styling just to make sure everything works.
- Moved style links at the very top of the `<head>` of the page.
- Updated live demo with latest stylesheet (again).
## 20161026
- Added `textarea` and `select` to the `form` `input` styling.
- Added rule for `:not([type="hidden"])`.
- Added `form` element styling (hardcoded still).
- Added demo forms for inline and aligned.

52
docs/v2/index.html
View File

@@ -272,18 +272,48 @@
<input type="submit" value="Large submit button" class="large">
<label disabled class="button small primary">Small primary disabled label button</label><br>
<h3>Forms</h3>
<p>Forms are pre-styled as well and they offer consistency across all inputs. There are options for normal forms (unaligned) or inline forms (horizontal), as well as aligned forms, that utilise the grid system to present their content. Below are some examples:</p>
<p>Forms are inline by default and the input elements have been customized to offer consistency across all inputs. You can make elements take up as much as space as you want (e.g. using <code>width=&quot;100%&quot;</code>) and utilize the grid system to make forms aligned. Below are some examples:</p>
<form>
<input type="text" value="text">
<input type="color">
<input type="email" value="mail@mail.com">
<input type="hidden" value="hidden">
<input type="number" value="4">
<input type="password" value="password">
<input type="range" value="4">
<input type="search">
<input type="url" value="data.google.com">
<input value="normal">
<strong>Inline form (default style):</strong><br>
<label for="username">Username</label> <input type="text" value="" id="username" placeholder="Username">&nbsp;
<label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">&nbsp;
<label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"><br><br>
<strong>Aligned form (using <code>width</code> and grid):</strong><br>
<div class="container">
<div class="row">
<div class="col-sm-2" style="text-align:right;">
<label for="website" style="vertical-align: text-top;">Website</label>
</div>
<div class="col-sm">
<input type="text" value="" id="website" placeholder="Website" style="width:85%;">
</div>
</div>
<div class="row">
<div class="col-sm-2" style="text-align:right;">
<label for="weburl" style="vertical-align: text-top;">URL</label>
</div>
<div class="col-sm">
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
</div>
</div>
<div class="row">
<div class="col-sm-2" style="text-align:right;">
<label for="desc" style="vertical-align: text-top;">Description</label>
</div>
<div class="col-sm-10 col-sm-offset-2">
<textarea type="url" value="" id="desc" placeholder="Description" style="width:85%;"></textarea>
</div>
</div>
</div><br>
<input type="color">
<input type="hidden" value="hidden">
<input type="number" value="4">
<input type="range" value="4">
<input type="search">
<select>
<option>Test</option>
<option>Demo</option>
</select>
</form>
</div>
</div>