PAT Style Guide

Single Field Form

These basic forms are for simple queries like search, or single field inputs. This markup supports text inputs, select menus, and a maximum of three checkboxes.

Example
Error message here.
Markup 

<form>
    <div>
        <label>Field Name</label>
        <input type="text">
        <button type="submit">Button</button>
        <div class="message error">
            <span class="icon iconexclamation"></span><span>Error message here.</span>
        </div>
    </div>
</form>
Variations
Warning message here.
Select option..
Success message here.
Success message here.
Variations Markup 

<form>
    
    <!-- Select Box -->
    <div>
        <label>Field Name</label>
        <select>
            <option value="" disabled selected>Select option..</option>
            <option value="">Option 1</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
        </select>
        <button type="submit">Button</button>
        <div class="message warning">
            <span class="icon iconexclamation"></span><span>Warning message here.</span>
        </div>
    </div>

    <!-- CSS Select Box -->
    <div>
        <label>Field Name</label>
        <div id="dd" class="ddSelect" tabindex="1">Select option..
            <ul class="dropdown">
                <li><a href="#"><i class="icon iconpencil"></i>Profile</a></li>
                <li><a href="#"><i class="icon iconeye"></i>Settings</a></li>
                <li><a href="#"><i class="icon iconx"></i>Log out</a></li>
            </ul>
        </div>
        <button type="submit">Button</button>
        <div class="message success">
            <span class="icon iconcheckmark"></span><span>Success message here.</span>
        </div>
    </div>

    <!-- Checkboxes -->
    <div>
        <div class="inlineCheckbox">
            <input type="checkbox" name="optionA">
            <label for="optionA">Option A</label>
        </div>
        <div class="inlineCheckbox">
            <input type="checkbox" name="optionB">
            <label for="optionB">Option B</label>
        </div>
        <button type="submit">Button</button>
        <div class="message success">
            <span class="icon iconcheckmark"></span><span>Success message here.</span>
        </div>
    </div>
</form>

Single Field Block

Adding the class block to the basic form style changes the display of elstrongents from inline to block.

Example
Error message here.
Markup 

<form>
    <div class="block">
        <label>Field Name</label>
        <div>
            <input type="text">
            <div class="message error">
                <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>
</form>
Variations
Error message here.
Warning message here.
Select option..
Success message here.
Success message here.
Variations Markup 

<form>

    <!-- Text Area -->
    <div class="block">
        <label>Field Name</label>
        <div>
            <textarea rows="4"></textarea>
            <div class="message error">
                <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>

    <!-- Select Menu -->
    <div class="block">
        <label>Field Name</label>
        <div>
            <select>
                <option value="" disabled selected>Select option..</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
            </select>
            <div class="message warning">
                <span class="icon iconexclamation"></span><span>Warning message here.</span>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>

    <!-- CSS Select Menu -->
    <div class="block">
        <label>Field Name</label>
        <div>
            <div id="dd" class="ddSelect" tabindex="1">Select option..
                <ul class="dropdown">
                    <li><a href="#"><i class="icon iconpencil"></i>Profile</a></li>
                    <li><a href="#"><i class="icon iconeye"></i>Settings</a></li>
                    <li><a href="#"><i class="icon iconx"></i>Log out</a></li>
                </ul>
            </div>
            <div class="message success">
                <span class="icon iconcheckmark"></span><span>Success message here.</span>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>

    <!-- Checkbox -->
    <div>
        <label>Field Name</label>
        <div>
            <input type="checkbox" name="optionA">
            <label for="optionA">Option A</label>
        </div>
        <div>
            <input type="checkbox" name="optionB">
            <label for="optionB">Option B</label>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
            <div class="message success">
                <span class="icon iconcheckmark"></span><span>Success message here.</span>
            </div>
        </div>
    </div>
</form>

Full Blocks

When using block forms, adding the class full stretches the input fields. This is best for containers that have a fixed width.

Example
Error message here.
Markup 

<form style="width: 500px;">
    <div class="full block">
        <label>Field Name</label>
        <div>
            <div class="message error">
                <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
            <input type="text">
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>
</form>
Variations
Error message here.
Warning message here.
Success message here.
Select option..
Variations Markup 

<form style="width: 500px;">

    <!-- Textarea -->
    <div class="full block">
        <label>Field Name</label>
        <div>
            <div class="message error">
                <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
            <textarea rows="4"></textarea>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>

    <!-- Select Menu -->
    <div class="full block">
        <label>Field Name</label>
        <div>
            <div class="message warning">
                <span class="icon iconexclamation"></span><span>Warning message here.</span>
            </div>
            <select>
                <option value="" disabled selected>Select option..</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
            </select>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>

    <!-- CSS Checkbox -->
    <div class="full block">
        <label>Field Name</label>
        <div>
            <div class="message success">
                <span class="icon iconcheckmark"></span><span>Success message here.</span>
            </div>
            <div id="dd" class="ddSelect" tabindex="1">Select option..
                <ul class="dropdown">
                    <li><a href="#"><i class="icon iconpencil"></i>Profile</a></li>
                    <li><a href="#"><i class="icon iconeye"></i>Settings</a></li>
                    <li><a href="#"><i class="icon iconx"></i>Log out</a></li>
                </ul>
            </div>
        </div>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>
</form>

Small Inline Form

Use these for fields like logins, small registration forms, or multiple-field queries. This style is called by placing the class inlineForm to the child div of the form.

Example
Error message here.
Error message here.
Error message here.
Success message here.
Success message here.
Markup 

<form>
    <div class="inlineForm">
        <div>
            <div><label>Text Input</label></div>
            <div>
                <input type="text">
                <div class="message error">
                    <span class="icon iconexclamation"></span><span>Error message here.</span>
                </div>
            </div>
        </div>
        <div>
            <div><label>Select Menu</label></div>
            <div>
                <select>
                    <option value="" disabled selected>Select option..</option>
                    <option value="">Option 1</option>
                    <option value="">Option 2</option>
                    <option value="">Option 3</option>
                </select>
                <div class="message error">
                    <span class="icon iconexclamation"></span><span>Error message here.</span>
                </div>
            </div>
        </div>
        <div>
            <div><label>Textarea</label></div>
            <div>
                <textarea rows="4"></textarea>
                <div class="message error">
                    <span class="icon iconexclamation"></span><span>Error message here.</span>
                </div>
            </div>
        </div>
        <div>
            <div><label>Checkbox</label></div>
            <div>
                <input type="checkbox" name="optionA">
                <label for="optionA">Option A</label>
                <input type="checkbox" name="optionA">
                <label for="optionA">Option A</label>
                <div class="message success">
                    <span class="icon iconcheckmark"></span><span>Success message here.</span>
                </div>
            </div>
        </div>
        <div>
            <div><label>Checkbox</label></div>
            <div>
                <div>
                    <input type="checkbox" name="optionA">
                    <label for="optionA">Option A</label>
                </div>
                <div>
                    <input type="checkbox" name="optionA">
                    <label for="optionA">Option A</label>
                </div>
                <div class="message success">
                    <span class="icon iconcheckmark"></span><span>Success message here.</span>
                </div>
            </div>
        </div>
        <div>
            <div></div>
            <div>
                <div class="submit">
                    <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
                </div>
            </div>
        </div>
    </div>
</form>

Small Block Form

This style is called by adding the classes block and smallForm to the child div of the form.

Example
Error message here.
Error message here.
Warning message here.
Select option..
Success message here.
Markup 

<form>
    <div class="block smallForm">
        <label>Field Name</label>
        <div>
            <input type="text">
            <div class="message error">
                    <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
        </div>
        <label>Field Name</label>
        <div>
            <textarea rows="4"></textarea>
            <div class="message error">
                <span class="icon iconexclamation"></span><span>Error message here.</span>
            </div>
        </div>
        <label>Field Name</label>
        <div>
            <select>
                <option value="" disabled selected>Select option..</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
            </select>
            <div class="message warning">
                <span class="icon iconexclamation"></span><span>Warning message here.</span>
            </div>
        </div>
        <label>Field Name</label>
        <div>
            <div id="dd" class="ddSelect" tabindex="1">Select option..
                <ul class="dropdown">
                    <li><a href="#"><i class="icon iconpencil"></i>Profile</a></li>
                    <li><a href="#"><i class="icon iconeye"></i>Settings</a></li>
                    <li><a href="#"><i class="icon iconx"></i>Log out</a></li>
                </ul>
            </div>
            <div class="message success">
                <span class="icon iconcheckmark"></span><span>Success message here.</span>
            </div>
        </div>
        <hr>
        <div class="submit">
            <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
        </div>
    </div>
</form>

Long Form

A form with multiple fieldsets. You can combine different form styles inside the fieldsets by changing the classes of the fieldset's child divs depending on what you need. An error message can also be placed near the top of the fieldset instead of per input if needed; this error message should have the class block appended to it.

Example
Fieldset Name
Error message here.
Error message here.
Error message here.
Fieldset Name
Error message here.
Error message here.
Success message here.
Success message here.
Markup 

<form style="width: 600px;">
    <fieldset>
        <h6>Fieldset Name</h6>
        <div class="block message error">
            <span class="icon iconexclamation"></span><span>Error message here.</span>
        </div>
        <div class="inlineForm">
            <div>
                <div><label>Text Input</label></div>
                <div>
                    <input type="text">
                    <div class="message error">
                        <span class="icon iconexclamation"></span><span>Error message here.</span>
                    </div>
                </div>
            </div>
            <div>
                <div><label>Select Menu</label></div>
                <div>
                    <select>
                        <option value="" disabled selected>Select option..</option>
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                        <option value="">Option 3</option>
                    </select>
                    <div class="message error">
                        <span class="icon iconexclamation"></span><span>Error message here.</span>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <h6>Fieldset Name</h6>
        <div class="block message error">
            <span class="icon iconexclamation"></span><span>Error message here.</span>
        </div>
        <div class="inlineForm">
            <div>
                <div><label>Textarea</label></div>
                <div>
                    <textarea rows="4"></textarea>
                    <div class="message error">
                        <span class="icon iconexclamation"></span><span>Error message here.</span>
                    </div>
                </div>
            </div>
            <div>
                <div><label>Checkbox</label></div>
                <div>
                    <input type="checkbox" name="optionA">
                    <label for="optionA">Option A</label>
                    <input type="checkbox" name="optionA">
                    <label for="optionA">Option A</label>
                    <div class="message success">
                        <span class="icon iconcheckmark"></span><span>Success message here.</span>
                    </div>
                </div>
            </div>
            <div>
                <div><label>Checkbox</label></div>
                <div>
                    <div>
                        <input type="checkbox" name="optionA">
                        <label for="optionA">Option A</label>
                    </div>
                    <div>
                        <input type="checkbox" name="optionA">
                        <label for="optionA">Option A</label>
                    </div>
                    <div class="message success">
                        <span class="icon iconcheckmark"></span><span>Success message here.</span>
                    </div>
                </div>
            </div>
            <div>
                <div></div>
                <div>
                    <div class="submit">
                        <button type="submit">Button</button> <button type="submit" class="secondaryAction">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Special Input Types

Price
100000
Markup 

<form>
    <div class="block">
        <label>Price</label>
        
        <div>
            <div class="rangeContainer">
                <input type="range" min="0" max="10000000" step="50000" value="100000" onchange="updateSlider(this.value)">
                <label>PHP</label> <span class="rangeValue" id="priceRange">100000</span>
            </div>
        </div>
        <button type="submit">Button</button>
    </div>
</form>

Other Iterations

These are special colored inputs which can have <span> and <a> appended to them to denote their function. Note that <a> elements must have the class button. Their container must have the class affixed. If you need this to appear as a block element, you must place the div with the class affixed in another container with the display set to block. Should you use these styles, make sure not to use them with the other input styles declared above, for consistency.

This is a price input field. Placing the class right in the input tag aligns the cursor to the right.
PHP .00
Markup 

<div class="affixed">
    <span class="">PHP</span>
    <input type="text" class="right"></input>
    <span class"">.00</span>
</div>
You can put icons alongside text in the <span> or <a> tags.
Markup 

<div class="affixed green">
    <span class="icon iconphone" aria-hidden="true"> +63</span>
    <input type="text"></input>
</div>
The default color is gray. You can specify the color by adding the classes blue, green, orange and red.
Markup 

<div>
    <div class="affixed green">
        <input type="text" placeholder="mail@server.com"></input>
        <span class="icon iconcheckmark" aria-hidden="true"></span>
    </div>
</div>
<div>
    <div class="affixed red">
        <input type="text" placeholder="mail@server.com"></input>
        <span class="icon iconx" aria-hidden="true"></span>
    </div>
</div>
<div>
    <div class="affixed orange">
        <input type="text" placeholder="mail@server.com"></input>
        <span class="icon iconexclamation" aria-hidden="true"></span>
    </div>
</div>
You can put <span> and <a> elements both before and after the input field.
Add
Markup 

<div>
    <div class="affixed">
        <span class="icon iconenvelope" aria-hidden="true"></span>
        <input type="text" placeholder="mail@server.com"></input>
        <a href class="button"><span class="icon iconplus"> Add</span></a>
    </div>
</div>
<div>
    <div class="affixed orange">
        <span class="icon iconenvelope" aria-hidden="true"></span>
        <input type="text" placeholder="mail@server.com"></input>
        <span class="" aria-hidden="true">Not a valid email address.</span>
        <a href class="button"><span class="icon iconplus"></span>  Add</a>
    </div>
</div>
<div>
    <div class="affixed green">
        <span class="icon iconenvelope" aria-hidden="true"></span>
        <input type="text" placeholder="mail@server.com"></input>
        <span class="icon iconcheckmark" aria-hidden="true"></span>
        <a href class="button"><span class="icon iconplus"></span> Add</a>
    </div>
</div>
<div>
    <div class="affixed blue">
        <input type="text" placeholder="mail@server.com"></input>
        <a href class="button"><span class="icon iconsearch"></span> Search</a>
    </div>
</div>
This special input field has a dropdown. It can be used for autocomplete. It is called by adding the class dropdown to the div containing your special input field. There is also a div with the class drop immediately after your special input field.
Search
Item 1 Item 2 Item 3
Markup 

<div class="dropdown">
    <div class="affixed blue">
        <input type="text" placeholder="mail@server.com"></input>
        <a href class="button"><span class="icon iconsearch"></span> Search</a>
    </div>
    <div class="drop">
        <a href=""><span class="icon iconyoutube" aria-hidden="true"></span> Item 1</a>
        <a href=""><span class="icon icontwitter" aria-hidden="true"></span> Item 2</a>
        <a href=""><span class="icon iconpinterest" aria-hidden="true"></span> Item 3</a>
    </div>
</div>
Another variation of the dropdown. Note that changing the color of the special input automatically changes the color of all the elements inside. You can override this by adding a color class inside the <span> or <a> element.
Categories
Item 1 Item 2 Item 3
Markup 

<div class="dropdown">
    <div class="affixed blue">
        <a href class="showdrop button gray">Categories <span class="icon iconarrowdownsmall" aria-hidden="true"></span></a>
        <input type="text" placeholder="mail@server.com"></input>
        <a href class="button"><span class="icon iconsearch" aria-hidden="true"></span></a>
    </div>
    <div class="drop">
        <a href=""><span class="icon iconyoutube" aria-hidden="true"></span> Item 1</a>
        <a href=""><span class="icon icontwitter" aria-hidden="true"></span> Item 2</a>
        <a href=""><span class="icon iconpinterest" aria-hidden="true"></span> Item 3</a>
    </div>
</div>
This element can double as a select box when programmed. This look is achieved by adding the class clear to your anchors.
Item 1 Item 2 Item 3
Markup 

<div class="dropdown">
    <div class="affixed blue">
        <input type="text" placeholder="mail@server.com"></input>
        <a href class="button clear"><span class="icon iconarrowdownsmall" aria-hidden="true"></span></a>
    </div>
    <div class="drop">
        <a href=""><span class="icon iconyoutube" aria-hidden="true"></span> Item 1</a>
        <a href=""><span class="icon icontwitter" aria-hidden="true"></span> Item 2</a>
        <a href=""><span class="icon iconpinterest" aria-hidden="true"></span> Item 3</a>
    </div>
</div>