Getting Started with Truss

After you've downloaded the folder for our framework, unzip it in your project folder. Make sure your index.html is in the same directory as the Truss folder and remains outside the Truss folder. To get started with using our framework, copy the code below into a blank html document. Included is the basic styles of the Truss framework.


    <!DOCTYPE html>
    <html lang="en">

        <head>
            <meta charset="utf-8">
            <title>Your Title Here</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="Truss/glyphicons/css/font-awesome.min.css">
            <link rel="stylesheet" type="text/css" href="Truss/css/compiledCSS/truss styles.min.css">
            <link rel="stylesheet" href="Truss/font-awesome-4.5.0/css/font-awesome.min.css">
            <!-- Extra CSS Component/JS Plugin Stylesheets Here -->
            <!-- Your Stylesheets Here -->
            <style>
                <!-- JS Plugin Scripts Here -->
            <style>
        </head>

        <body>
            <!-- Your Personal Code Goes Here -->
        </body>
    </html>

Our Truss Grid page has instructions for the incorporation and use of our grid system. Visit our CSS Components and JS Plugins pages for optional components and/or plugins to use/include. Read below to get an idea of the styles used in our framework.

Typography

The majority of Truss typography is applied automatically with the inclusion of truss styles.css in your HTML document. Heading styles are applied to <h1>-<h6> tags automatically. The base type is 16px over 1.2 line height and applies to all <p> tags. Type can be Bolded, Italicized, Underlined, Highlighted, and Linked (hover!) simply by using the <strong>, <em>, <u>, <mark>, and <a> HTML tags, respectively.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Transform any text:
uppercase = <span class="uppercase">text</span>
LOWERCASE = <span class="lowercase">text</span>
capitalize = <span class="capitalize">text</span>

Abbreviations merely require the <abbr title="place full form here"></abbr> tag. A question mark will appear when you hover over the abbreviation, and after another moment or two the abbreviation will appear. Example: An abbreviation of W3C.

Addresses have the following format:

12345 Sample Address
Some City, USA Zip


        <address>
         12345 Sample Address<br>
         Some City, USA Zip
        <address>

Utility Classes

The "no-print" class prevents the element that the class is attached to from being sent to the printer.This includes text, images, etc.

Example: While this sentence shows up in the webpage, it will disappear when you try to print this page.


        <p class="no-print">Example: While this sentence shows up in the webpage, it will disappear when you try to print this page.</p>

The "no-screen" class prevents the display of the element that the class is attached to, but it will show up when you try to print the page.

Example: This sentence will not show up in your webpage until you try to print.


        <p class="no-screen">Example: This sentence will not show up in your webpage until you try to print.</p>

Clearfix solves the zero-height container problem for floated elements.


        <div class="tclearfix">
            <img class="tfloat-right" src="images/LogoIdea2.png">
            <img class="tfloat-right" src="images/LogoIdea2.png">
        </div>

Floats

<p class="tfloat-left"></p>

Result: Left alignment

<p class="center"></p>

Result: Center alignment

<p class="tfloat-right"></p>

Result: Right alignment

Quotes and Blockquotes

For simple quotes, use the <q> tag:

This is how we would show a quote about how amazing our framework is and why you should use it every day. - Contributors

<p><q>This is how we would show a quote about how amazing our framework is and why you should use it every day. - Contributors</q></p>

Simple blockquotes have both a <p> section for the main quoted text and a <footer> section with an optional <cite> tag to effortlessly style the quote citation:

Regular blockquoted text without getting too fancy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada maximus ante, sed convallis tortor convallis ac. Integer in cursus nibh. Etiam volutpat ante ut dui maximus ullamcorper. Nam vitae dolor sit amet mi bibendum fermentum at a odio.

said somebody


    <blockquote class="blockquote-simple">
           <p>Regular blockquoted text without getting too fancy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada maximus ante, sed convallis tortor convallis ac. Integer in cursus nibh. Etiam volutpat ante ut dui maximus ullamcorper. Nam vitae dolor sit amet mi bibendum fermentum at a odio.</p> 
           <footer> said <cite>somebody </cite></footer>
    </blockquote>

code

Truss allows you to not worry about individually styling blocks of code, inline code snippets, keyboard inputs, or variables. Inline code simply needs the HTML <code> tag, while inline keyboard inputs need the <kbd> tag. For the block code below, the <pre>tag outside the <code> tag preserves all breaks and spaces to show the code block below:

Block code:
x = prompt("What is your favorite number?")
User input: "10"
x = 10;
y += x + 10;


        HTML of codeblock above:
            <pre><code>Block code:
            <var>x<var> = prompt("What is your favorite number?")
            User input: <kbd>"10"<kbd>
            <var>x<var> = 10;
            <var>y<var> += <var>x<var> + 10;<code><pre>

Lists

There are no extras when it comes to making ordered and unordered lists, just simple HTML tag usage. However, Truss does not support subs of sub-lists and further.

Ordered list item 1

Sub-ordered item 1
Sub-ordered item 2

Ordered list item 2

Sub-unordered list item 1
Sub-unordered item 2

Ordered list item 3

Unordered list item 1

Sub-ordered item 1
Sub-ordered item 2

Unordered list item 2

Sub-unordered list item 1
Sub-unordered item 2

Unordered list item 3


            </ol>
                    <li>Ordered list item 1</li>
                    <ol>
                        <li>Sub-ordered item 1</li>
                        <li>Sub-ordered item 2</li>
                    </ol>
                    <li>Ordered list item 2</li>
                    <ul>
                        <li>Sub-unordered list item 1</li>
                        <li>Sub-unordered item 2</li>
                    </ul>
                    <li>Ordered list item 3</li>
                </ol>
            
                <ul>
                    <li>Unordered list item 1</li>
                    <ol>
                        <li>Sub-ordered item 1</li>
                        <li>Sub-ordered item 2</li>
                    </ol>
                    <li>Unordered list item 2</li>
                    <ul>
                        <li>Sub-unordered list item 1</li>
                        <li>Sub-unordered item 2</li>
                    </ul>
                    <li>Unordered list item 3</li>
                </ul>

Tables

All tables should start with the same basic layout. The only difference is whether you prefer the standard, striped, or bordered look, all of which can be achieved by putting a class on the table itself. All tables are responsive and depreciate gracefully to mobile sizes. To achieve graceful depreciation, make sure to include "data-th='Heading Title'" in the heading data cells and their corresponding body data cells. See below for examples.

Standard Table
Heading 1	Heading 2	Heading 3
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell


            <div class="tableContainer">
                <table class="standard">
                    <caption>Standard Table</caption>
                    <thead>
                        <tr>
                            <th>Heading 1>/th>
                            <th>Heading 2>/th>
                            <th>Heading 3>/th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Striped Table
Heading 1	Heading 2	Heading 3
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell


            <div class="tableContainer">
                <table class="striped">
                    <caption>Striped Table</caption>
                    <thead>
                        <tr>
                            <th>Heading 1>/th>
                            <th>Heading 2>/th>
                            <th>Heading 3>/th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Bordered Table
Heading 1	Heading 2	Heading 3
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell
DataCell	DataCell	DataCell


            <div class="tableContainer">
                <table class="bordered">
                    <caption>Bordered Table</caption>
                    <thead>
                        <tr>
                            <th>Heading 1>/th>
                            <th>Heading 2>/th>
                            <th>Heading 3>/th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                        <tr>
                            <td data-th="Heading 1">DataCell</td>
                            <td data-th="Heading 2">DataCell</td>
                            <td data-th="Heading 3">DataCell</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Forms and Form Elements

Each form has the same basic skeleton that begins with <form class="formcontainer"></form> wrapping everything else. Fieldsets separate the sections of your form with a small border and a legend. All classes applied to fieldsets can also be applied to divs instead if you want to forgo the fieldset styling.


        Basic Skeleton:
            <form class="formcontainer">
                // Code Here
            </form>

        With Fieldsets:
            <form class="formcontainer">
               <fieldset class="radio/checkbox/text-input/text-input stacked/textarea stacked">
                        // Code Here
                </fieldset>
                <fieldset class="radio/checkbox/text-input/text-input stacked/textarea stacked">
                        // Code Here
                </fieldset>
            </form>
        NOTE: the same classes can be applied to divs to avoid fieldset styling while still grouping.

Checkboxes should have a container with a class of <checkbox>. IDs are optional, but don't forget the "for" and "type"!

Checkboxes Option One Option Two Option Three Option Four


        <fieldset class="checkbox">
            <legend>Checkboxes</legend>
            <input type="checkbox" id="checkbox1">
            <label for="checkbox1">Option One</label>
            <input type="checkbox" id="checkbox2">
            <label for="checkbox2">Option Two</label>
            <input type="checkbox" id="checkbox3">
            <label for="checkbox3">Option Three</label>
            <input type="checkbox" id="checkbox4">
            <label for="checkbox4">Option Four</label>
        </fieldset>

Radio buttons should have a container with a class of <radio>. IDs are optional, but don't forget the "for" and "type", and "name"!

Radio Buttons Option One Option Two Option Three Option Four


        <fieldset class="radio">
            <legend>Radio Buttons</legend>
            <input type="radio" id="radio1" name="radio-group">
            <label for="radio1">Option One</label>
            <input type="radio" id="radio2" name="radio-group">
            <label for="radio2">Option Two</label>
            <input type="radio" id="radio3" name="radio-group">
            <label for="radio3">Option Three</label>
            <input type="radio" id="radio4" name="radio-group">
            <label for="radio4">Option Four</label>
        </fieldset>

Dropdowns should have a form-group around them to isolate the label and dropdown.


        <fieldset  class="dropdown">
            <legend>Drop-down</legend>
            <div class="form-group">
                <label for="dropdown">
                    <select>
                        <option value="option1" selected>Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>
                        <option value="option4">Option 4</option>
                    </select>
                </label>
            </div>
        </fieldset>

Text inputs require a container div around all inputs in a group as well as a container "form-group" isolating labels and their corresponding inputs. Label + input pairs will stay inline until limited space forces them to stack.

Text Inputs

Username

Password


        <fieldset class="text-input">
            <legend>Text Inputs</legend>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" />
            </div>
        </fieldset>

On larger screens, text areas surrounded by a container class of "textarea" will show their labels in line with their corresponding inputs. On smaller screens textareas will default to a stacked position.

Text Area


        <fieldset class="textarea">
            <legend>Text Area</legend>
            <div class="form-group">
                <label for="textarea">Text Area</label>
                <textarea></textarea>
            </div>
        </fieldset>

If you prefer a stacked appearance, simply add the class "stacked" to the text-input container fieldset/div.

Text Inputs (Stacked)

Username

Password


        <fieldset class="text-input stacked">
            <legend>Text Inputs (Stacked)</legend>
            <div class="form-group">
                <label for="username2">Username</label>
                <input type="text" id="username2" />
            </div>
            <div class="form-group">
                <label for="password2">Password</label>
                <input type="password" id="password2" />
            </div>
        </fieldset>

If you prefer a stacked appearance, simply add the class "stacked" to the textarea container fieldset/div.

Text Area (Stacked)

Text Area


        <fieldset class="textarea stacked">
            <legend>Text Area (Stacked)</legend>
            <div class="form-group">
                <label for="textarea">Text Area</label>
                <textarea></textarea>
            </div>
        <fieldset>

All the buttons

Buttons come in two classes: "white" and "nonwhite". Specify your size and type preference with classes as shown below.

XSmall Buttons


        <button class="white xsmall">Button</button>
        <button class="nonwhite xsmall">Button</button>

Default Buttons


        <button class="white">Button</button>
        <button class="nonwhite">Button</button>

Medium Buttons


        <button class="white medium">Button</button>
        <button class="nonwhite medium">Button</button>

Large Buttons


        <button class="white medium">Button</button>
        <button class="nonwhite medium">Button</button>

Other Buttons


        <input type="button" class="disabled" Value="Disabled">
        <input type="reset" class="nonwhite" value="Reset Button">
        <input type="submit" class="white" Value="Submit Button">

Responsive Images

It's easy to incorporate responsive images into your website. We've designed a class to place right in the <img> tag to do all the work for you.

Responsive Image - Full Width


        <img src="images/trusses.jpg" alt="responsiveImage" class="responsiveImg">

Responsive Image - Floated Right

Nulla nunc neque, commodo et auctor eget, bibendum eget purus. Pellentesque finibus maximus nisl vel laoreet. Morbi sollicitudin id tortor a egestas. Etiam mollis dignissim lobortis. Vivamus ante mauris, iaculis at lectus sed, convallis congue nisl. Vivamus dignissim tincidunt sem. Sed aliquam lectus nec eros cursus euismod. Suspendisse varius augue nunc, eu pharetra odio lobortis ut. Phasellus ac placerat mauris. Suspendisse potenti. Nunc ac convallis sapien. Duis rhoncus mollis sem et interdum. Donec nec dui quam. Cras lacinia luctus odio, quis ultrices lacus.

Maecenas vehicula tempor bibendum. Ut eu efficitur erat. Proin convallis placerat mauris dapibus viverra. Sed ultrices viverra semper. Mauris id tincidunt justo. Integer id porta lacus. Integer sit amet malesuada nulla, quis aliquet massa. Phasellus sagittis, nulla a lacinia varius, augue turpis pulvinar velit, et malesuada massa arcu vel nisl. Donec luctus, nulla quis varius mollis, nunc ante ullamcorper justo, non ultrices tortor lacus ac turpis. Integer vel odio risus.


        <img src="images/trusses.jpg" alt="responsiveImage" class="rightFloatImage">

Responsive Image - Floated Left


        <"images/trusses.jpg" alt="responsiveImage" class="leftFloatImage">

We Use Font Awesome Icons

Include font awesome icons in your webpage! The Font Awesome link should already be included in your webpage if you started out with our html template (see the top of this page). You can see examples of how to use Font Awesome in your webpage by going Here Just plug and play!