Skip to content

Commit

Permalink
Add form HTML
Browse files Browse the repository at this point in the history
  • Loading branch information
Tom Sabin committed Jun 19, 2015
1 parent cd5eab9 commit 1c6b435
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 1 deletion.
0 app/assets/images/dining-out.jpg → app/assets/images/proposition.jpg
View file
File renamed without changes
171 changes: 170 additions & 1 deletion app/views/pages/style_guide.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@
Proposition image (2000x1000px)
</div>
<div class="pattern-body">
<%= image_tag "dining-out.jpg" %>
<%= image_tag "proposition.jpg" %>
</div>
</div>

Expand Down Expand Up @@ -266,5 +266,174 @@
</ul>
</div>
</div>

<div class="atoms-favicon">
<div class="pattern-header">
Favicon
</div>
<div class="pattern-body">
<img src="/favicon-16.ico" alt="" width="16px" height="16px">
<img src="/favicon-32.ico" alt="" width="32px" height="32px">
</div>
</div>

<div class="atoms-text-fields">
<div class="pattern-header">
Text fields
</div>
<div class="pattern-body">
<div class="input-field required">
<label class="required">Text Input <abbr title="Required">*</abbr></label>
<input class="string required" type="text" placeholder="Text Input">
</div>

<div class="input-field optional">
<label class="password optional">Password</label>
<input class="password optional" type="password" placeholder="Type your password">
</div>

<div class="input-field optional">
<label class="url optional">Web Address</label>
<input class="url optional" type="url" placeholder="http://example.com">
</div>

<div class="input-field optional">
<label class="email optional">Email Address</label>
<input class="email optional" type="email" placeholder="[email protected]">
</div>

<div class="input-field optional">
<label class="search optional">Search</label>
<input class="search optional" type="search" placeholder="Enter Search Term">
</div>

<div class="input-field required">
<label class="required">Number Input <abbr title="Required">*</abbr></label>
<input class="number required" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</div>

<div class="input-field optional">
<label class="text optional">Textarea</label>
<textarea class="text optional" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
</div>
</div>

<div class="atoms-html5-input">
<div class="pattern-header">
HTML5 input
</div>
<div class="pattern-body">
<div class="input-field required">
<label class="required">Number input <abbr title="Required">*</abbr></label>
<input class="number required" type="number" min="0" max="5" value="3">
</div>

<div class="input-field datetime required event_date">
<label class="datetime required">
<abbr title="required">*</abbr> Datetime</label>
<input type="datetime-local" class="datetime required" placeholder="YYYY-MM-DD HH:MM">
</div>

<div class="input-field date optional event_title">
<label class="date optional">Date</label>
<input class="date optional" type="date">
</div>

<div class="input-field time optional event_title">
<label class="time optional">Time</label>
<input class="time optional" type="time">
</div>
</div>
</div>

<div class="atoms-input-error">
<div class="pattern-header">
Input field (error state)
</div>
<div class="pattern-body">
<div class="error_notification">Please review the following errors</div>

<div class="input-field optional field_with_errors">
<label class="error optional">Error Input</label>
<input class="text optional" type="text" placeholder="Text Input">
<span class="error">can't be blank</span>
</div>
</div>
</div>

<div class="atoms-file-input">
<div class="pattern-header">
File input
</div>
<div class="pattern-body">
<div class="input-field file optional ">
<label class="file optional">File input</label>
<input accept="image/*" class="file optional" type="file">
</div>
</div>
</div>

<div class="atoms-select-menu">
<div class="pattern-header">
Select menu
</div>
<div class="pattern-body">
<div class="input-field select optional">
<label class="select optional">Select</label>
<select class="select optional">
<option></option>
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
</div>

<div class="atoms-checkbox">
<div class="pattern-header">
Checkbox
</div>
<div class="pattern-body">
<div class="input-field check_boxes optional">
<label class="check_boxes optional">Checkbox</label>
<span class="checkbox">
<label for="checkbox-a">
<input class="check_boxes optional" type="checkbox" id="checkbox-a">Choice A</label>
</span>
<span class="checkbox">
<label for="checkbox-b">
<input class="check_boxes optional" readonly="readonly" type="checkbox" id="checkbox-b">Choice B</label>
</span>
<span class="checkbox">
<label for="checkbox-c">
<input class="check_boxes optional" readonly="readonly" type="checkbox" id="checkbox-c">Choice C</label>
</span>
</div>
</div>
</div>

<div class="atoms-radio-buttons">
<div class="pattern-header">
Radio buttons
</div>
<div class="pattern-body">
<div class="input-field radio_buttons optional ">
<label class="radio_buttons optional">Radio buttons</label>
<span class="radio">
<label for="radio-a">
<input class="radio_buttons optional" type="radio" id="radio-a">Choice A</label>
</span>
<span class="radio">
<label for="radio-b">
<input class="radio_buttons optional" readonly="readonly" type="radio" id="radio-b">Choice B</label>
</span>
<span class="radio">
<label for="radio-c">
<input class="radio_buttons optional" readonly="readonly" type="radio" id="radio-c">Choice C</label>
</span>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 1c6b435

Please sign in to comment.