mirror_php/patternlab-php
1
0
Fork 0
mirror of https://github.com/pattern-lab/patternlab-php.git synced 2025-01-17 14:18:30 +01:00
Code Issues Releases Wiki Activity

Added buttons, media, forms and other atoms

Browse Source
This commit is contained in:
Brad Frost 2013-06-23 17:51:28 -04:00
parent d44d0de65e
commit 50cfbb81ce
10 changed files with 156 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/patterns/a-buttons/a-buttons.mustache Normal file
View File

@ -0,0 +1,4 @@
<p><a href="#" class="btn">Button</a></p>
<p><a href="#" class="btn alt">Alternate Button</a></p>
<p><a href="#" class="btn disabled">Disabled Button</a></p>
<p><a href="#" class="text-btn">Text Button</a></p>

10
source/patterns/a-form-checkbox/a-form-checkbox.mustache Normal file
View File

@ -0,0 +1,10 @@
<form action="#">
<fieldset class="options">
<legend>Checkbox <abbr title="Required">*</abbr></legend>
<ul>
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
</form>

10
source/patterns/a-form-html5-inputs/a-form-html5-inputs.mustache Normal file
View File

@ -0,0 +1,10 @@
<fieldset>
<div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
<div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
<div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
<div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
<div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
<div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
<div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
<div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>

10
source/patterns/a-form-radio-buttons/a-form-radio-buttons.mustache Normal file
View File

@ -0,0 +1,10 @@
<form action="#">
<fieldset class="options">
<legend>Radio</legend>
<ul>
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
</form>

12
source/patterns/a-form-select-menu/a-form-select-menu.mustache Normal file
View File

@ -0,0 +1,12 @@
<fieldset>
<div class="field-container">
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</div>
</fieldset>

38
source/patterns/a-form-text-fields/a-form-text-fields.mustache Normal file
View File

@ -0,0 +1,38 @@
<fieldset>
<div class="field-container">
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">
</div>
<div class="field-container">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password">
</div>
<div class="field-container">
<label for="password">Web Address</label>
<input id="password" type="url" placeholder="http://yoursite.com">
</div>
<div class="field-container">
<label for="password">Email Address</label>
<input id="password" type="email" placeholder="name@email.com">
</div>
<div class="field-container">
<label for="search">Search</label>
<input id="search" type="search" placeholder="Enter Search Term">
</div>
<div class="field-container">
<label for="text">Number Input <abbr title="Required">*</abbr></label>
<input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</div>
<div class="field-container">
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
<div class="field-container">
<label class="error">Error Input</label>
<input class="is-error" type="text" placeholder="Text Input">
</div>
<div class="field-container">
<label class="valid">Valid</label>
<input class="is-valid" type="text" placeholder="Text Input">
</div>
</fieldset>

12
source/patterns/a-images-icons/a-images-icons.mustache Normal file
View File

@ -0,0 +1,12 @@
<ul class="icons inline-list">
<li class="icon-twitter"></li>
<li class="icon-facebook"></li>
<li class="icon-stumbleupon"></li>
<li class="icon-linkedin"></li>
<li class="icon-pinterest"></li>
<li class="icon-google-plus"></li>
<li class="icon-youtube"></li>
<li class="icon-feed"></li>
<li class="icon-search"></li>
<li class="icon-play"></li>
</ul>

4
source/patterns/a-media-audio/a-media-audio.mustache Normal file
View File

@ -0,0 +1,4 @@
<audio controls="controls">
<source src="#" />
<source src="#" />
</audio>

6
source/patterns/a-media-video/a-media-video.mustache Normal file
View File

@ -0,0 +1,6 @@
<video width="640" height="360" controls="">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
<img src="" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download">
</video>

50
source/patterns/a-table/a-table.mustache Normal file
View File

@ -0,0 +1,50 @@
<table>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>