AgExchange Style Guide

Return to SteveSutcliffe.com

Colors
Hyperlink 
#26A9E0
 Sample
Hyperlink Hover 
#2494BB
 Sample
Selected Tab 
#B3E0F7
Success or Positive Action 
#2EAE4A
Success Hover State 
#2A9346
Error or Negative Action Color 
#EE4623
Error Hover State 
#D03B27
Title Color 
#006992
Default Body Font Color 
#2D2D2D
Darker Grey Font Color 
#6B6B6B
Lighter Grey Font Color 
#BCBCBC
Background Color 
#EDECED
Darker Background Color 
#E0E0E0
Border Color 
#D1D1D1

Types
H1 26px 
<h1>Text</h1>

Sample
H2 22px 
<h2>Text</h2>

Sample
H3 18px 
<h3>Text</h3>

Sample
H4 16px 
<h4>Text</h4>

Sample
H5 14px 
<h5>Text</h5>
Sample

Navigation

HTML
<header>
<div class="agex-logo">
    <a href="#"></a>
</div>

<div class="agex-nav-outter-container">
<div class="agex-nav-inner-container">
<nav>
    <ul>
        <li><span id="navItemOne">navItemOne</span></li>
        <li><span id="navItemTwo">navItemTwo</span></li>
        <li><span id="navItemThree">navItemThree</span></li>
        <li><span id="navItemFour">navItemFour</span></li>
        <span class="agex-icons-container">
            <li><span class="agex-home-link"></span></li>
            <li><span class="agex-help-link"></span></li>
        </span>
    </ul>
</nav>
</div>
</div>
</header>

Javascript
    //Preload Images
    function preload(imageArray)
    {
        $(imageArray).each(function(){
            $('<img/>')[0].src = this;
        });
    };

    //Prelaod the icon pictures
    preload([
    'img/helpIconHover.png',
    'img/homeIconHover.png',
    'img/homeIcon.png',
    'img/helpIcon.png'
    ]);

    //Attach button listeners
    $('#navItemOne').click(onNav1Click);
    $('#navItemTwo').click(onNav2Click);
    $('#navItemThree').click(onNav3Click);
    $('#navItemFour').click(onNav4Click);   

    //Add class style for active button
    function onNav1Click(){
        clearNav();
        $('#navItemOne').addClass('active');
    }
    //repeat as needed

    //Clear styles for inactive buttons
    function clearNav(){
        $('.agex-nav-inner-container nav ul li span[id]').each(function(){
                $(this).removeClass('active');
        });
    }

Buttons

Main Button

Main Button
    <div class="agex-round-button">Button Text</div>

Main Button with Shadow

Main Button
    <div class="agex-round-button shadow">Button Text</div>

Main Button Disabled

Main Disabled
    <div class="agex-round-button disabled">Button Text</div>

Main Button Disabled with Shadow

Main Disabled
    <div class="agex-round-button disabled shadow">Button Text</div>

Main Button with Focus

Main Button
    HTML
    <div tabindex="0" class="agex-round-button">Button Text</div>

    Javascript (to add/remove the index)
    $('#buttonID').attr('tabindex', -1); //disable the button - prevent focus from happening
    or
    $('#buttonID').attr('tabindex', 0); //enable the button - allow focus to happen

Extended Button

Red border shows the size of the outter div
Main Button
    <div class="agex-round-button extend">Button Text</div>

Main Button in notify mode

Button Notify
    <div class="agex-round-button notify">Button Text</div>

Main Button in notify mode with Shadow

Notify shadow
    <div class="agex-round-button notify shadow">Button Text</div>

Main Button in notify mode with focus

Button Notify
    <div tabindex="0" class="agex-round-button notify">Button Text</div>

Positive Action Button

Confirm
    <div class="agex-positive-action-button">Button Text</div>

Positive Action Disabled Button

Confirm
    <div class="agex-positive-action-button disabled">Button Text</div>

Positive Action Button with shadow

Confirm
    <div class="agex-positive-action-button shadow">Button Text</div>

Positive Action Disabled Button with Shadow

Confirm
    <div class="agex-positive-action-button disabled shadow">Button Text</div>

Positive Action Button with focus

Confirm
    <div tabindex="0" class="agex-positive-action-button">Button Text</div>

Negative Action Button

Delete
    <div class="agex-negative-action-button">Button Text</div>

Negative Action Disabled Button

Delete
    <div class="agex-negative-action-button disabled">Button Text</div>

Negative Action Button with Shadow

Delete
    <div class="agex-negative-action-button shadow">Button Text</div>

Negative Action Disabled Button with Shadow

Delete
    <div class="agex-negative-action-button disabled shadow">Button Text</div>

Negative Action Button with focus

Delete
    <div tabindex="0" class="agex-negative-action-button">Button Text</div>

Map Buttons

Map
    HTML
    <div id="mapButton" class="agex-show-map-button">Button Text</div>

    Javascript
          $('#mapButton').click(function(){
        if(!($(this).hasClass('off')))
            $(this).addClass('off');
        else
            $(this).removeClass('off');
    });

Map Button with Shadow

Show Map
    HTML
    <div id="mapButton2" class="agex-show-map-button shadow">Button Text</div>

    Javascript
          $('#mapButton2').click(function(){
        if(!($(this).hasClass('off')))
            $(this).addClass('off');
        else
            $(this).removeClass('off');
    });

Form Button

Form Button
    <div class="agex-form-button">Button Text</div>

Form Button Disabled

Form Disabled
    <div class="agex-form-button disabled">Button Text</div>

Form Button with Shadow

Form Button
    <div class="agex-form-button">Button Text</div>

Form Button Disabled with Shadow

Form Disabled
    <div class="agex-form-button disabled">Button Text</div>

Submit Button

Submit Button
    <div class="agex-submit-button">Button Text</div>

Submit Button Disabled

Submit Disabled
    <div class="agex-submit-button disabled">Button Text</div>

Submit Button with Shadow

Submit Button
    <div class="agex-submit-button shadow">Button Text</div>

Submit Button with Shadow Disabled

Submit Disabled
    <div class="agex-submit-button disabled shadow">Button Text</div>

Submit Button with Focus

Submit Button
    <div tabindex="0" class="agex-submit-button">Button Text</div>

Toggle

Bushels
Tonnes
    HTML
    <div id="toggleButton" class="agex-toggle-frame">
        <div id="bushelsButton" class="agex-toggle-button right active">Bushels</div>
        <div id="tonnesButton" class="agex-toggle-button left">Tonnes</div>
    </div>

    Javascript
    $('#bushelsButton').click(function(){
        if($('#tonnesButton').hasClass('active'))
            $('#tonnesButton').removeClass('active');
        if(!$('#bushelsButton').hasClass('active'))
            $('#bushelsButton').addClass('active');
    });

    $('#tonnesButton').click(function(){
        if($('#bushelsButton').hasClass('active'))
            $('#bushelsButton').removeClass('active');
        if(!$('#tonnesButton').hasClass('active'))
            $('#tonnesButton').addClass('active');
    });

Toggle with Shadow

Bushels
Tonnes
    HTML
    <div id="toggleButton" class="agex-toggle-frame">
        <div id="bushelsButton" class="agex-toggle-button right active agex-shadow">Bushels</div>
        <div id="tonnesButton" class="agex-toggle-button left agex-shadow">Tonnes</div>
    </div>

    Javascript
    $('#bushelsButton').click(function(){
        if($('#tonnesButton').hasClass('active'))
            $('#tonnesButton').removeClass('active');
        if(!$('#bushelsButton').hasClass('active'))
            $('#bushelsButton').addClass('active');
    });

    $('#tonnesButton').click(function(){
        if($('#bushelsButton').hasClass('active'))
            $('#bushelsButton').removeClass('active');
        if(!$('#tonnesButton').hasClass('active'))
            $('#tonnesButton').addClass('active');
    });

Animated Toggle

<div class="agex-anim-toggle">
  <input id="bushels-tonnes-toggle-1" type="checkbox">
  <label for="bushels-tonnes-toggle-1">
    <div class="agex-anim-toggle-labels" data-checked="Tonnes" data-unchecked="Bushels"></div>
  </label>
</div>

Error

Error Message
    HTML
    <div id="error-box-1" class="agex-error-container">Error Message</div>

    Javascript
    $('#activateError').click(function(){
        if($('#error-box-1').hasClass('general-error')){
            $('#error-box-1').removeClass('general-error');
            $('#error-box-1').text("Error message");
        }
        else{
            $('#error-box-1').addClass('general-error');
            $('#error-box-1').text("An error occured");
        }
    });

Progress Tracker

  1. First
  2. Second Long Phrase
  3. Third
  4. Fourth
HTML

<div id="progtrckrContainer">
<ol class="progtrckr">
    <li class="progtrckr-done">First</li><!--
    --><li class="progtrckr-done">Second Long Phrase</li><!--
    --><li class="progtrckr-todo">Third</li><!--
    --><li class="progtrckr-todo">Fourth</li>
</ol>
</div>

JavaScript

$(document).ready(function(){   
 $(document).ready(function(){   
    //Find out how many elements are in the list and
    $("ol.agex-prog-trckr").each(function(){
        $(this).attr("data-prog-trckr-steps", 
                     $(this).children("li").length);
    });

    /* Set the name of the li elements accordingly */
    $("ol.agex-prog-trckr li[class^='agex-prog-trckr']").each(function(index, el){
        $(el).attr("data-prog-trckr-stage", index+1);
    });
    
    /*Add the dotted line to each of the values*/
    $("ol.agex-prog-trckr li[class^='agex-prog-trckr']").each(function(index,el){
       
        if(!$(el).is(':last-child'))
            $(el).append('<span class="agex-prog-trckr-separator"><span></span></span>');
        
         $(el).wrapInner('<div class="agex-prog-trckr-vert-center"></div>');
    });
})

Accordion Lists

Toggle Page Title

Show All
Sample 1
Sample content hidden/shown based on the toggle.
Sample 2
Sample content hidden/shown based on the toggle. 
<head>
    <script type="text/javascript" src="../js/agex-accordion-functions.js"></script>
</head>

<body>
    <div class="agex-help-content">
        <div>
            <h1 style="float:left">Toggle Page Title</h1>
            <div class="agex-round-button" id="agex-showAll" 
                style="margin-top: 10px; margin-left: 20px">Show All</div>
        </div>
        <div style="clear:both"></div>

        /*for simple accordion just include this portion*/
        <div class="agex-accordion-container">
            <div class="agex-accordion-toggle">Sample</div>
            <div class="agex-accordion-content">
                Sample content hidden/shown based on the toggle.
            </div>
        </div>
    </div>
</body>
Return to SteveSutcliffe.com