Base CSS

This section will outline the usage and styling of common elements, as well as any options, extensions or dependencies.

Typography

The TDAS products employ a simple set of typography based off of two typefaces: Istok Web for copy and Source Sans Pro for emphasis. Our approach is currently entirely sans-serif.

This is an h1 tag. Use <small> for 40% reduction.

This is an h2 tag

This is an h3 tag

This is a paragraph with the starting sentence in bold. This is the second sentence in the paragraph. This is the third sentence in the paragraph.

  • This is a list - item one
  • This is a list - item two
  • This is a list - item three
  • This is a list - item four
  • This is a list - item five

Button

There are a variety of buttons to use depending on the use case. While use of a button is preferred for optimal semantics, an a tag can be used interchangeably.

Button Class Description
.button or .button-normal This is the default button style. It is applied on any button element, or when a class of .button or .button-normal is applied to an element.
.button-highlight The highlight style is useful for directing attention to a primary or preferred action.
.button-positive The positive button style is good to indicate creation, saving, finishing an action, etc.
.button-negative The negative button style is appropriate to use for deleting, canceling or really any action that could be considered dangerous, unrecoverable or negative.
.button-facebook This style is set up to use for Facebook-oriented actions.
.button-link The style effectively removes the standard button styling, and allows a button to look like a link. Good for use when you don't want to break button semantics, but want to demphasize an option.

Button sizing

There are a couple of sizing options for additional button styling. Just append these to your button element.


<button class="button-large">Large Button</button>
<button>Default Button</button>
<button class="button-small">Small Button</button>

	

.button-group

Buttons can be grouped together in a contigious string utilizing a parent container classed with .button-group


<div class="button-group">
    <button>Button one</button>
    <button>Button two</button>
    <button>Button three</button>
</div>

	

.button-toggle

The .button-toggle is a non javascript button toggle that uses radio or checkbox input types along with labels to toggle an option on or off. Each label and input element must have a unique ID for the toggles to work.



<div class="clearfix">
    <div class="button-toggle">
        <input class="hidden" name="buttonToggle" id="btn1" type="radio" checked />
        <label class="button" for="btn1">Option one</label>
    </div>
    <div class="button-toggle">
        <input class="hidden" name="buttonToggle" id="btn2" type="radio"/>
        <label class="button" for="btn2">Option two</label>
    </div>
    <div class="button-toggle">
        <input class="hidden" name="buttonToggle" id="btn3" type="radio"/>
        <label class="button" for="btn3">Option three</label>
    </div>
</div>


	

.button-menu

A button can be extended to be a dropdown menu with supporting markup. Just nest a unordered list with a class of .button-menu inside of a button or element classed for a button.

Hover for menu
  • Option one
  • Option two
  • Option three

<div class="button-highlight">
    Hover for menu <i class="fa fa-caret-down"></i>
    <ul class="button-menu">
        <li>Option one</li>
        <li>Option two</li>
        <li>Option three</li>
    </ul>
</div>

	

.button-container

The .button-container class can be used on a parent container of multiple buttons to set up a standard group presentation of buttons. Utilizing this class, the buttons within the container with be force floated right, and a right margin will be applied.


<div class="button-container">
    <button>standard button</button>
    <button class="button-highlight">a preferred action</button>
</div>

	

Disabled buttons

If you need to disable a button, you can do so by either adding disabled to a button or submit button, or by adding .disabled to an anchor tag. These are the only elements that can represent buttons and be disabled.

Another disabled button

<button disabled>A disabled button</button>
<a class="button-highlight disabled">Another disabled button</a>

	

Toggle Switch

The toggle switch is a simple checkbox that uses the checked attribute to toggle between the component being off or on. The "on" and "off" labels are stored in the data attributes data-toggle-on and data-toggle-off.


<!-- Base Toggle Switch Markup -->
<div class="toggle">
    <input class="toggle-checkbox" type="checkbox" name="toggleswitch" id="toggle1" checked >
    <label class="toggle-container" for="toggle1">
        <span class="toggle-label" data-toggle-on="On" data-toggle-off="Off"></span>
        <span class="toggle-handle"></span>
    </label>
</div>

<!-- Modified Toggle Switches -->
<div class="toggle toggle--medium toggle--positive">...</div>
<div class="toggle toggle--large toggle--light">...</div>

Modifiers

There are two types of modifiers for the toggle switch which are size and color that can be extended with the base .toggle class. There are two size modifiers .toggle--medium and .toggle--large that can be used for longer labels if needed.

Also there are to theme/color modifiers. .toggle--positive will give a green "on" state and .toggle--light will produce a muted "off" state.

Form Controls

The CSS framework has well fleshed-out input/form element coverage. Input controls do not have to be wrapped in the form element to receive styling.

.input-container

Each line of form controls should be wrapped in div class="input-container". This provides a vertical rhythm for the form elements, and allows extension for different styling.


<div class="input-container">
    <input type="text" />
</div>

    

Inputs

Standard text inputs. Text, password, email, datetime and number types are supported. The type="" attribute must be used to enforce styling.


<div class="input-container">
    <label>text input</label>
    <input type="text" />
</div>
<div class="input-container">
    <label>password input</label>
    <input type="password" />
</div>

    

Textarea

Textarea performs exactly like standard text inputs do. Make sure to include rows and provide a width or cols attribute.


<div class="input-container">
    <label>A textarea input</label>
    <textarea rows="5" class="one-half"></textarea>
</div>

    

Checkboxes and radios

Both checkboxes and radio buttons have similar styling and extensions that can be utilized depending on the application. Groups of checkboxes and radio buttons are stacked by default. Always wrap the input inside the associated label.


<div class="input-container checkbox">
    <label><input type="checkbox"> my checkbox option</label>
    <label><input type="checkbox"> my checkbox option</label>
    <label><input type="checkbox"> my checkbox option</label>
</div>
<div class="input-container radio">
    <label><input type="radio"> my radio option</label>
    <label><input type="radio"> my radio option</label>
    <label><input type="radio"> my radio option</label>
</div>

    

Inline Checkbox and radio groups

To line multiple checkboxes or radio buttons up side by side, simply add a class of .checkbox-inline or .radio-inline to the input-container, respectively.


<div class="input-container checkbox checkbox-inline">
    <label><input type="checkbox"> my checkbox option</label>
    <label><input type="checkbox"> my checkbox option</label>
    <label><input type="checkbox"> my checkbox option</label>
</div>
<div class="input-container radio radio-inline">
    <label><input type="radio"> my radio option</label>
    <label><input type="radio"> my radio option</label>
    <label><input type="radio"> my radio option</label>
</div>

    

Select Boxes

The select element also has a standard look that accompanies the rest of the form elements


<div class="toolbar-group">
    <select>
        <option>Choice one</option>
        <option>Choice two</option>
        <option>Choice three</option>
        <option>Choice four</option>
        <option>Choice five</option>
    </select>
    <select multiple>
        <option>Choice one</option>
        <option>Choice two</option>
        <option>Choice three</option>
        <option>Choice four</option>
        <option>Choice five</option>
    </select>
</div>

Disabled Fields

All form fields also accept styling for disabled states. Pass in the disabled attribute or a class of disabled.


<div class="toolbar-group input-container">
    <input type="text" disabled />
    <select disabled>
        <option>Choice one</option>
        <option>Choice two</option>
        <option>Choice three</option>
        <option>Choice four</option>
        <option>Choice five</option>
    </select>
    <textarea disabled rows="5" cols="50"></textarea>
</div>

    

Prepends / Appends

You can prepend or append an input to add additional functionality. Buttons, button-groups, selects and spans are supported.


<div class="input-container">
    <label>Prepended select</label>
    <div class="prepend-to">
        <select>
            <option>option one</option>
            <option>option two</option>
            <option>option three</option>
        </select>
        <input type="text" />
    </div>
</div>

    

<div class="input-container">
    <label>Appended button</label>
    <div class="append-to">
        <input type="text" />
        <button><i class="fa fa-search"></i></button>
    </div>
</div>

    

<div class="input-container">
    <label>Prepended span element</label>
    <div class="prepend-to">
        <span><i class="fa fa-envelope"></i></span>
        <input type="text" />
    </div>
</div>

    

<div class="input-container">
    <label>Appended span element</label>
    <div class="append-to">
        <input type="text" />
        <span><i class="fa fa-envelope"></i></span>
    </div>
</div>

    

<div class="input-container">
    <label>Prepended span and appended button</label>
    <div class="prepend-to append-to">
        <span><i class="fa fa-search"></i></span>
        <input type="text" />
        <button>Search</button>
    </div>
</div>

    

<div class="input-container">
    <label>Appended button group</label>
    <div class="prepend-to append-to">
        <input type="text" />
        <div class="button-group">
            <button><i class="fa fa-search"></i></button>
            <button><i class="fa fa-times-sign"></i></button>
        </div>
    </div>
</div>

    

Tables

Tables/grids should be employed whenever there is a need to organize data. The standard table should consist of a thead and tbody.

Name Belt Rank Favorite Move
John Everyman Yellow Side Kick
Mr. Powers Rainbow Judo Chop
Shang Tsung Red Soul Removal
Ryu Black Dragon Punch
Chuck Norris Clear His cold, hard stare

<table width="100%">
    <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    </tbody>
</table>

    

Row Hovers

Add a row hover by adding a class of .row-hover to the table.

Name Belt Rank Favorite Move
John Everyman Yellow Side Kick
Mr. Powers Rainbow Judo Chop
Shang Tsung Red Soul Removal
Ryu Black Dragon Punch
Chuck Norris Clear His cold, hard stare

<table class="row-hover" width="100%">
    ...
</table>

    

Faux Table

You can even build a faux table if necessary from div elements with the proper class hierarchy.

Name
Belt Rank
Favorite Move
John Everyman
Yellow
Side Kick
Mr. Powers
Rainbow
Judo Chop
Shang Tsung
Red
Soul Removal
Ryu
Black
Dragon Punch
Chuck Norris
Clear
His cold, hard stare

<div class="table" style="width:100%;">
    <div class="thead">
        <div class="tr">
            <div class="th">...</div>
            <div class="th">...</div>
            <div class="th">...</div>
        </div>
    </div>
    <div class="tbody">
        <div class="tr">
            <div class="td">...</div>
            <div class="td">...</div>
            <div class="td">...</div>
        </div>
    </div>
</div>

    

Messages and Notifications

Standard Notifications

The following message styles can be used to convey status, warn a user or provide any additional context/information necessary

This is a info message. Use to disclose non-destructive/helpful information.
This is a success message. Use to show when an action completes properly, to indicate save, etc.
This is a attention message. Use a guided note that can keep a user from preventing a fail.
This is a warning message. Use when actions can be potentially or definitely harmful or permenant.
This is a error message. Use to indicate a fail or immiment irreversible decision.

<div class="message info">...</div>
<div class="message success">...</div>
<div class="message attention">...</div>
<div class="message warning">...</div>
<div class="message error">...</div>

    

Fixed messages

You can fix a message to the top by using .status-message. Be advised, this is a CSS only solution, and so it only affixes to it closest parent that has a position defined. To affix to the body, put fixed message directly inside or before the closing body tag.


<body>
<div class="status-message success">...</div>
...
</body>

    

Secondary Alert Messages

Use the code below as an inline alert message that displays within a small content area. There is a positive and negative alert message.

This is a positive secondary alert message.
More text can be added here.
This is a negative secondary alert message.
More text can be added here.

<div class="secondary-alert-positive">
    <div class="alert-icon-box">
        <i class="fa fa-thumbs-up"></i>
    </div>
    ...
</div>

<div class="secondary-alert-negative">
    <div class="alert-icon-box">
        <i class="fa fa-exclamation"></i>
    </div>
    ...
</div>

    

Badges

The badge is an element that will allow you to display a count or icon in a contrasting wrapper beside a heading. By default the badge has a blue background, but the .badge--highlight class will give the badge a blue background and the .badge--attention class will give the badge a yellow background.

4

Heading with Badge

6

Heading with Highlight Badge

8

Heading with Attention Badge


<span class="badge" id="badge1">4</span>
<span class="badge badge--highlight" id="badge2">6</span>
<span class="badge badge--attention" id="badge3">8</span>

Callout

The callout component can be used to draw attention to a particular item on the page. Really good for new added features that a user can typically miss. The callout can be positioned either above or below its targeted element using .callout--top or .callout--bottom

This is a callout
Ok, I got it

<div class="callout callout--top" id="callout">
    <div class="callout__content">This is a callout
        <div class="button button-highlight button-small full-width callout__action">Ok, I got it</div>
    </div>
</div>

Loader

The loader component is used to indicate that something is loading. The loader can be displayed with or without a message. To add a message just add it to the data-loading-message attribute or else just leave it blank for a simple loader. Wrap the loader in an overlay div as shown in the example below.


<div class="overlay">
    <div class="loader" data-loading-message="Please wait while the page loads..."></div>
</div>