AutoZone Pro - Style Guide

Grid Overview

The Basics

The gird is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns.
Then add elements with a .column class within that row. You can use .column or .columns - the only difference is grammar.
Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.

PX to REM Converter

When possible, use the rem and em units to size everything. Not just font size, but also padding, margins, and any length value. This ensures that your design scales up and down uniformly if the user changes their browser's text size. It's common for vision-impaired users to resize their browser up to 200% zoom.

Be sure to utilize the built-in rem-calc() function in any AutoZone Pro SASS File to help you convert one or more pixel values to correct rem values. You're welcome!

.az-element {
    width: rem-calc(300px);
    height: rem-calc(200px);
    padding: rem-calc(20px);
    background-color: $light-gray;
    border: $base-border-style;
}

.az-element {
    width: 18.75rem;
    height: 12.5rem;
    padding: 1.25rem;
    background-color: #f8f8f8;
    border: 0.0625rem solid #c4c4c4;
}

Example Conversion

rem-calc(200px) = 12.5rem

Breakpoints

You can declare any number of breakpoints that can be set to any value but it must be declared in the $breakpoint-classes variable in order to be used.

There are three basic $breakpoints which include: .small, .medium, and .large
The breakpoints are defined in the _settings.scss file and the screen size for each are listed below.
These are the default settings but can be changed by editing the $breakpoints variable.

Breakpoint Class	Screen Width - @media screen and (min-width)
`.small`	0px
`.medium`	640px / (40em)
`.large`	1024px / (64em)
`.xlarge` (max-width)	1200px / (75em)

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
);
$breakpoint-classes: (small medium large);

Gutters

To add more gutter definitions, add new lines to the map. The breakpoint names used here must match a breakpoint name in your project's $breakpoints map.

The grid gutter - the space between two columns in a row, and the space between the edge of a grid and the edge of the page - is responsive, and becomes wider on larger screens.
These are the default settings but can be changed by editing the $grid-column-gutter variable.

Breakpoint	Gutter Size
`.small`	20px
`.medium`	30px

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

How to Use

Using the grid is simple. Here's an example of what your code will look when you use a series of <div> tags to create vertical columns.

<div class="row">
    <div class="small-1 columns">1</div>
    <div class="small-11 columns">11</div>
</div>
<div class="row">
    <div class="small-2 columns">2</div>
    <div class="small-10 columns">10</div>
</div>
<div class="row">
    <div class="small-3 columns">3</div>
    <div class="small-9 columns">9</div>
</div>
<div class="row">
    <div class="small-4 columns">4</div>
    <div class="small-8 columns">8</div>
</div>
...

Nesting Columns

You can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.

<div class="row">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>

8 Nested

8 Nested Again

Small Grid

As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.

<div class="row">
  <div class="small-2 columns">small-2</div>
  <div class="small-10 columns">small-10</div>
</div>
<div class="row">
  <div class="small-3 columns">small-3</div>
  <div class="small-9 columns">small-9</div>
</div>

small-2

small-10

small-3

small-9

Medium Grid

Only declaring a .medium grid class will default to 12 columns on small screens.

<div class="row">
  <div class="medium-3 columns">small-12 / medium-3</div>
  <div class="medium-9 columns">small-12 / medium-9</div>
</div>
<div class="row">
  <div class="medium-4 columns">small-12 / medium-4</div>
  <div class="medium-8 columns">small-12 / medium-8</div>
</div>

small-12 / medium-3

small-12 / medium-9

small-12 / medium-4

small-12 / medium-8

Large Grid

Only declaring a .large grid class will default to 12 columns on small and medium screens.

<div class="row">
  <div class="large-4 columns">small-12 / medium-12 / large-4</div>
  <div class="large-8 columns">small-12 / medium-12 / large-8</div>
</div>
<div class="row">
  <div class="large-5 columns">small-12 / medium-12 / large-5</div>
  <div class="large-7 columns">small-12 / medium-12 / large-7</div>
</div>

small-12 / medium-12 / large-4

small-12 / medium-12 / large-8

small-12 / medium-12 / large-5

small-12 / medium-12 / large-7

Mixed Grid

Scale the browser down to see the difference.
Example creates different column widths at .small .medium and .large screen sizes.

Putting all together, we can create a very unique grid structure that will allow content to respond any screen size.

<div class="row">
  <div class="large-4 medium-6 columns">small-12 / medium-6 / large-4</div>
  <div class="large-8 medium-6 columns">small-12 / medium-6 / large-8</div>
</div>
<div class="row">
  <div class="large-5 medium-8 columns">small-12 / medium-8 / large-5</div>
  <div class="large-7 medium-4 columns">small-12 / medium-4 / large-7</div>
</div>
<div class="row">
  <div class="large-4 medium-6 small-7 columns">small-7 / medium-6 / large-4</div>
  <div class="large-8 medium-6 small-5 columns">small-5 / medium-6 / large-8</div>
</div>
<div class="row">
  <div class="large-5 medium-4 small-6 columns">small-6 / medium-4 / large-5</div>
  <div class="large-7 medium-8 small-6 columns">small-6 / medium-8 / large-7</div>
</div>

small-12 / medium-6 / large-4

small-12 / medium-6 / large-8

small-12 / medium-8 / large-5

small-12 / medium-4 / large-7

small-7 / medium-6 / large-9

small-5 / medium-6 / large-3

small-6 / medium-4 / large-3

small-6 / medium-8 / large-9

Advanced Grid Sizing

Combined Column/Row

If you need a full-width column to use as a container, put the .column and .row classes on the same element. You can still nest more grids inside this container like usual.

Column rows can use sizing classes like .small-8, but only when it's a top-level container - not when nested inside another row.

<div class="column row">
  Column Row
</div>

Column Row

Offset

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

10, offset 1

9, offset 2

8, offset 3

Centered Columns

Center your columns by adding a class of .small-centered to your column. Medium and large will inherit small centering by default.

You can also center or un-center columns per class by applying a .xxx-centered class or .xxx-uncentered class.

<div class="row">
  <div class="small-4 small-centered columns">4 centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns">8 centered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns">10 centered</div>
</div>

4 centered

6 centered

8 centered

10 centered

Incomplete Rows

In order to work around browsers' different rounding behaviors, the grid will float the last column in a row to the right so the edge aligns.

If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of .end in order to override that behavior.

<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
</div>
<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>

3 end

Collapse/Uncollapse Rows

The .collapse class lets you remove column gutters (padding).

There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element.

<div class="row medium-collapse large-uncollapse">
  <div class="small-6 columns">...</div>
  <div class="small-6 columns">...</div>
</div>

Scale the browser down to see the difference.
Example retains the gutters on .small and .large screen sizes, and then removes the gutter on .medium screens.

On a small screen, I have gutters!

On a medium screen, I have gutters!

On a large screen, I have gutters!

On a small screen, I have gutters!

On a medium screen, I have no gutters!

On a large screen, I have gutters!

Block Grid

Add a class in the format of [size]-up-[n] to change the size of all columns within the row at a particular breakpoint class. By default, the max number of columns you can use with block grid are 8.

Example Block Grid Layout:

<div class="row small-up-1 medium-up-4 large-up-8">
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
    <div class="columns">1</div>
</div>

Building A Symantic Grid

The grid structure includes a powerful set of SASS mixins, that allow you to build a custom semantic grid.

Leveraging the SASS mixins will help reduce the number of classes needed to build out the document structure, and will allow for more meaningful naming conventions. It will also help to ensure that all elements will adapt to global changes in the grid structure.

Rows

To include a grid .row class into an element, use the grid-row() mixin.

.example-container {
    @include grid-row;
}

Columns

To include a grid .columns class into an element, use the grid-column() mixin.

.example-container-inner {
    // Use a full-width column (12 of 12) 100%
    @include grid-column;

    // Use a default column count (4 of 12) 33.33%
    @include grid-column(4);

    // Use a custom column count (1 of 5) 20%
    @include grid-column(1 of 5);

    // Use a percentage (15%)
    @include grid-column(15%);
}

The grid-column mixin can also be used as a function. Which gives you a percentage value, without any of the grid column CSS.

.example-sidebar {
    // Outputs a percentage value of 25%
    width: grid-column(3 of 12);
}

To center a column semantically, use the grid-column-position(center); mixin.

.example-column-centered {
    @include grid-column-position(center);
}

Multiple Grids

By default, all grids use the number of columns set by the $grid-column-count variable. However, this can be selectively overridden within an instance of a row.

In this example, the grid is 16 columns instead of the normal 12. Any references to column calculations inside the mixin will use the new column count of 16.

.container {
    // Sets the column count to 16
    @include grid-row(16) {
        .sidebar {
            // 5/16 = 31.25%
            @include grid-column(5);
        }
        .main-content {
            // 11/16 = 68.75%
            @include grid-column(11);
        }
    }
}

Putting It All Together

Nearly all grid variables can be used as a mixin. Pair them with the breakpoint() mixin to symanctically build a 100% responsive grid structure.

.main-content {
    // Sets grid structure for small screens
    @include grid-col;

    // Changes grid structure for medium and large screens
    @include breakpoint(medium) {
        // Changes the column size only
        @include grid-col-size(8);

        // Changes the position only
        @include grid-col-pos(4);
    }

    // Changes grid structure for large screens
    @include breakpoint(large) {
        // Changes the column size only
        @include grid-col-size(10);
    }
}

Colors

Below are the default color variables, which can be located in the _settings.scss file.

#f37f00

Primary Color

$primary-color
.primary

#f26100

Warning Color

$warning-color
.warning

#d52b1e

Alert Color

$alert-color
.alert

#008300

Success Color

$success-color
.success

#4278a0

Blue

$blue
.blue

#f8f8f8

Light Gray

$light-gray
.light-gray

#c4c4c4

Medium Gray

$medium-gray
.medium-gray

#3a3c3d

Dark Gray

$dark-gray
.dark-gray

#231f20

Black

$black
.black

Typography

Fonts

AutoZonePro.com utilizes the following font-families:

@Helvetica Neue (graphics/images) for headings and callouts.
@Urbano-ExtraBdCond (web-font) for headings, page titles, main navigation links, buttons, and call-outs.
@Arial for paragraphs, secondary links, sidebar navigation, etc.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Headings

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest). The style for all headings are balanced and sized along a modular scale.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

Header Sizes

Our framework includes two typographic scales - one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the $header-sizes map in the Settings File.

Header	Default	Large and up
`<h1>`	24px	48px
`<h2>`	20px	40px
`<h3>`	19px	31px
`<h4>`	18px	25px
`<h5>`	17px	20px
`<h6>`	16px	16px

h1. Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

h2. Heading Level 2

h3. Heading Level 3

h4. Heading Level 4

h5. Heading Level 5

h6. Heading Level 6

Paragraphs

Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.

Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. Use the <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

If the emphasis of a phrase is important, don't make the emphasis purely visual - use the <em> or <strong> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.

Icons

To use the icon set, add the prefix .azp class and the .azp_xxx class to an <i> element with "xxx" representing the icon name from the list below.

Example Code: <i class="azp azp_check-square"></i> Result:

General Icons

azp_account-overview
azp_availability
azp_availability-dashed
azp_az-icon
azp_bag
azp_bookmark
azp_bookmark-o
azp_calendar
azp_caret-down
azp_caret-left
azp_caret-right
azp_caret-top
azp_cart
azp_check
azp_check-circle
azp_check-circle-o
azp_check-square
azp_check-square-o
azp_chevron-circle-down
azp_chevron-circle-left
azp_chevron-circle-right
azp_chevron-circle-top
azp_chevron-down
azp_chevron-left
azp_chevron-right
azp_chevron-top
azp_close-circle
azp_close-circle-o
azp_close-square
azp_close-square-o
azp_cog
azp_contact
azp_csm-new-user
azp_csm-tools
azp_device
azp_dollar
azp_download
azp_email
azp_email-o
azp_error-caution
azp_error-warning
azp_estimate
azp_external-link
azp_filter
azp_grid
azp_home
azp_info
azp_info-o
azp_license-plate
azp_lightbulb
azp_list
azp_location-arrow
azp_lock
azp_unlock
azp_map-marker
azp_marketing-tool-bag
azp_menu
azp_minus-circle
azp_minus-circle-o
azp_minus-square
azp_minus-square-o
azp_monitor
azp_phone
azp_phone-square
azp_plus-circle
azp_plus-circle-o
azp_plus-square
azp_plus-square-o
azp_power
azp_print
azp_promo-zone
azp_question
azp_question-o
azp_quote
azp_quote-new
azp_quote-recent
azp_return-item
azp_search
azp_sliders
azp_sort
azp_sort-asc
azp_sort-desc
azp_sort-last-lookup
azp_star
azp_star-half
azp_star-half-o
azp_star-o
azp_tags
azp_toggle-down
azp_toggle-left
azp_toggle-right
azp_toggle-up
azp_toggle-on
azp_toggle-off
azp_trash
azp_trash-o
azp_user
azp_user-add
azp_user-delete
azp_vehicle
azp_vehicle-list
azp_web

Unordered Lists

Use a unordered list <ul> to list content where the order of the items does not matter.

<!-- default ul -->
<ul>
    <li>Unordered content item</li>
    <li>Unordered content item</li>
    <li>Unordered content item</li>
</ul>

<!-- ul.simple  -->
<ul class="simple">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ul>

<!-- ul.with-arrows -->
<ul class="text-or-links with-arrows">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ul>

Default UL

Ordered content item
Ordered content item
Ordered content item

Simple UL

Ordered content item
Ordered content item
Ordered content item

With Arrows UL

Ordered content item
Ordered content item
Ordered content item

Ordered Lists

Use a ordered list <ol> to list content where the order of the items does matter.

<!-- default ol -->
<ol>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

<!-- ol.upper-alpha -->
<ol class="upper-alpha">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

<!-- ol.lower-alpha Styling -->
<ol class="lower-alpha">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

Default OL

Ordered content item
Ordered content item
Ordered content item

Upper-Alpha OL

Ordered content item
Ordered content item
Ordered content item

Lower-Alpha OL

Ordered content item
Ordered content item
Ordered content item

<!-- Circled Numeric ol Styling -->
<ol class="circled-numeric">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

<!-- Circled Numeric ol (Primary Color) Styling -->
<ol class="circled-numeric primary">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

Circled-Numeric OL

Ordered content item
Ordered content item
Ordered content item

Circled-Numeric OL (Primary Color)

Ordered content item
Ordered content item
Ordered content item

<!-- Circled Alpha Lower ol Styling -->
<ol class="circled-alpha-lower">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

<!-- Circled Alpha Lower ol (Primary Color) Styling -->
<ol class="circled-alpha-lower primary">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

Circled-Alpha OL

Ordered content item
Ordered content item
Ordered content item

Circled-Alpha OL (Primary Color)

Ordered content item
Ordered content item
Ordered content item

<!-- Circled Alpha Upper ol Styling -->
<ol class="circled-alpha-upper">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

<!-- Circled Alpha Upper ol (Primary Color) Styling -->
<ol class="circled-alpha-upper primary">
    <li>Ordered content item</li>
    <li>Ordered content item</li>
    <li>Ordered content item</li>
</ol>

Circled-Alpha OL

Ordered content item
Ordered content item
Ordered content item

Circled-Alpha OL (Primary Color)

Ordered content item
Ordered content item
Ordered content item

Helper Classes

Class Name	Description	Result
`.text-orange-primary`	Sets `color` attribute to `#F37F00`	ORANGE-PRIMARY
`.text-orange-secondary`	Sets `color` attribute to `#F26100`	ORANGE-SECONDARY
`.text-red`	Sets `color` attribute to `#D52B1E`	RED
`.text-green`	Sets `color` attribute to `#008300`	GREEN
`.text-blue`	Sets `color` attribute to `#4278A0`	BLUE
`.text-gray`	Sets `color` attribute to `#6C6F70`	GRAY

Links

Anchors

An anchor <a> is used to link to another page or to an anchor within a page, and generally do not require JavaScript to work.

<!-- Default Link Style -->
<p><a href="">Default Link</a></p>

<!-- Secondary Link Style -->
<p><a href="" class="secondary-link">Secondary Link</a></p>

<!-- External Link Style -->
<p><a href="" class="azp azp_external-link">External Link</a></p>

Default Link
Secondary Link
External Link (in #header)
External Link (in #mainContent)

Buttons

A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag.

Use the <button> tag if the button performs an action that changes something on the current page. <button> elements almost always require JavaScript to function.

<!-- Anchors (links) -->
<a href="about.html" class="primary button">Learn More</a>
<a href="#someAnchor" class="secondary button">View All Features</a>

<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>

Learn More View All Features

Button Colors

Give a button additional meaning by adding a coloring class, or .disabled to create a faded appearance.

The .disabled class is a purely visual style, and won't actually disable a control. For <button> elements, you can add the disabled attribute to disable it. If you want to disable a link, you should add the aria-disabled attribute to mark it as disabled for assistive technology.


<!-- Default Button Colors -->
<div class="column row">
    <a href="" class="success button">Success button</a>
    <a href="" class="warning button">Warning button</a>
    <a href="" class="alert button">Alert button</a>
    <a href="" class="secondary button">Secondary button</a>
</div>

<!-- Disabled Button Colors -->
<div class="column row">
    <a href="" class="success button disabled">Success button</a>
    <a href="" class="warning button disabled">Warning button</a>
    <a href="" class="alert button disabled">Alert button</a>
    <a href="" class="secondary button disabled">Secondary button</a>
</div>

Success button Warning button Alert button Secondary button

Button Sizing

These additional classes can be added to a button to change its size and shape.

<!-- Regular buttons -->
<div class="column row">
    <a href="" class="large success button">Large button</a>
    <a href="" class="button">Regular button</a>
    <a href="" class="small alert button">Small button</a>
    <a href="" class="tiny secondary button">Tiny button</a>
</div>

<!-- Expanded buttons -->
<div class="row">
    <div class="medium-3 columns">
        <a href="" class="expanded large success button">Large button</a>
    </div>
    <div class="medium-3 columns">
        <a href="" class="expanded button">Regular button</a>
    </div>
    <div class="medium-3 columns">
        <a href="" class="expanded alert small button">Small button</a>
    </div>
    <div class="medium-3 columns">
        <a href="" class="expanded tiny secondary button">Tiny button</a>
    </div>
</div>
<div class="column row">
    <button type="button" class="expanded warning button">Full-Width button</button>
</div>

Large button Regular button Small button Tiny button

Large button

Regular button

Small button

Tiny button

Hollow Buttons

Add the .hollow class to a button to give it a hollow style.

<a class="hollow button" href="#">Default Color</a>
<a class="primary hollow button" href="#">Primary Color</a>
<a class="success hollow button" href="#">Success Color</a>
<a class="alert hollow button" href="#">Alert Color</a>
<a class="warning hollow button" href="#">Warning Color</a>

Default Color Primary Color Success Color Alert Color Warning Color

Add a dropdown arrow to your button with the .dropdown class.

Note: This doesn't add dropdown functionality automatically. You will need to add the javascript plugin and data-attributes below to add functionality to the menu.

To create a dropdown pane, add the class .dropdown-pane and the attribute data-dropdown to an element. Give the dropdown a unique ID as well.

To create the dropdown trigger, add data-toggle to a <button>. The value of data-toggle is the ID of the dropdown.

<button class="success dropdown button" type="button" data-toggle="example-dropdown">Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
    <p>Example Dropdown Menu</p>
    <ul class="vertical dropdown menu" data-dropdown-menu>
        <li><a class="secondary-link" href="#">Link 1</a></li>
        <li><a class="secondary-link" href="#">Link 2</a></li>
        <li><a class="secondary-link" href="#">Link 3</a>
            <ul class="menu">
            <li><a class="secondary-link" href="#">Nested Link 1</a></li>
                <li><a class="secondary-link" href="#">Nested Link 2</a></li>
                <li><a class="secondary-link" href="#">Nested Link 3</a></li>
            </ul>
        </li>
        <li><a class="secondary-link" href="#">Link 4</a></li>
        <li><a class="secondary-link" href="#">Link 5</a></li>
    </ul>
</div>

Button Groups

You can add the .button-group class to a container element to create a group of inline buttons separated by 1px border.

<div class="button-group">
    <button type="button" class="button">Primary</button>
    <button type="button" class="secondary button">Secondary</button>
    <button type="button" class="success button">Success</button>
</div>

Advanced Button Groups

You can add classes like .stacked-for-xxx or .expanded to easily create global styles for each button in the group.

<!-- Expanded Buttons -->
<div class="expanded button-group">
    <button type="button" class="button">Expanded 1</button>
    <button type="button" class="button">Expanded 2</button>
    <button type="button" class="button">Expanded 3</button>
    <button type="button" class="button">Expanded 4</button>
</div>

<!-- Stacked For Small Buttons -->
<div class="stacked-for-small button-group">
    <button type="button" class="secondary button">Stacked 1</button>
    <button type="button" class="secondary button">Stacked 2</button>
    <button type="button" class="secondary button">Stacked 3</button>
    <button type="button" class="secondary button">Stacked 4</button>
</div>

<!-- Split Dropdown Buttons -->
<div class="button-group">
    <a class="button">Split Dropdown</a>
    <a class="dropdown button arrow-only">
        <span class="show-for-sr">Show menu</span>
    </a>
</div>

Split Dropdown

Common Use Cases

To ensure standardization of button uses, follow the guides below for when and how to implement common use cases for buttons on AutoZonePro.com.

Use Case:	Code:	Example:
Primary CTA Proceed, Checkout, Sign Up, any primary action	type = `button` class = `.button`
Secondary CTA Clear Quote, New Quote, View Estimate, any secondary action	type = `button` class = `.button` `.secondary`
Primary Form Input Submit, Update, Continue, any primary input	type = `submit` class = `.button`
Secondary Form Input Clear, Cancel, Reset, any secondary input	type = `reset` class = `.button` `.hollow`
Success CTA Get Deal, View Deal, any monetary-related action	type = `button` class = `.button` `.success`
Learn More CTA Learn More, See How, any informational-realated action	type = `button` class = `.button` `.info`

Forms

Use forms to allow users to interact with the site and provide information to the company.

How to Use

Make forms great and easy to use with the following rules:

Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.
Place a series of checkboxes and radio buttons within a <ul class="inline-list">.
Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).

Autofill Form Controls

For information on autofilling form controls via the autocomplete attribute, visit the following resource(s):

Form Elements - Living Standards

Field Name				Meaning	Canonical Format	Canonical Format Example	Control Group
"name"				Full name	Free-form text, no newlines	Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA	Text
	"honorific-prefix"			Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "M^lle")	Free-form text, no newlines	Sir	Text
	"given-name"			Given name (in some Western cultures, also known as the first name)	Free-form text, no newlines	Timothy	Text
	"additional-name"			Additional names (in some Western cultures, also known as middle names, forenames other than the first name)	Free-form text, no newlines	John	Text
	"family-name"			Family name (in some Western cultures, also known as the last name or surname)	Free-form text, no newlines	Berners-Lee	Text
	"honorific-suffix"			Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")	Free-form text, no newlines	OM, KBE, FRS, FREng, FRSA	Text
"nickname"				Nickname, screen name, handle: a typically short name used instead of the full name	Free-form text, no newlines	Tim	Text
"organization-title"				Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director")	Free-form text, no newlines	Professor	Text
"username"				A username	Free-form text, no newlines	timbl	Text
"new-password"				A new password (e.g. when creating an account or changing a password)	Free-form text, no newlines	GUMFXbadyrS3	Password
"current-password"				The current password for the account identified by the `username` field (e.g. when logging in)	Free-form text, no newlines	qwerty	Password
"organization"				Company name corresponding to the person, address, or contact information in the other fields associated with this field	Free-form text, no newlines	World Wide Web Consortium	Text
"street-address"				Street address (multiple lines, newlines preserved)	Free-form text	32 Vassar Street MIT Room 32-G524	Multiline
	"address-line1"			Street address (one line per field)	Free-form text, no newlines	32 Vassar Street	Text
	"address-line2"				Free-form text, no newlines	MIT Room 32-G524	Text
	"address-line3"				Free-form text, no newlines		Text
"address-level4"				The most fine-grained administrative level, in addresses with four administrative levels	Free-form text, no newlines		Text
"address-level3"				The third administrative level, in addresses with three or more administrative levels	Free-form text, no newlines		Text
"address-level2"				The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found	Free-form text, no newlines	Cambridge	Text
"address-level1"				The broadest administrative level in the address, i.e. the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town	Free-form text, no newlines	MA	Text
"country"				Country code	Valid ISO 3166-1-alpha-2 country code [ISO3166]	US	Text
"country-name"				Country name	Free-form text, no newlines; derived from country in some cases	US	Text
"postal-code"				Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the `address-level2` field)	Free-form text, no newlines	02139	Text
"cc-name"				Full name as given on the payment instrument	Free-form text, no newlines	Tim Berners-Lee	Text
	"cc-given-name"			Given name as given on the payment instrument (in some Western cultures, also known as the first name)	Free-form text, no newlines	Tim	Text
	"cc-additional-name"			Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name)	Free-form text, no newlines		Text
	"cc-family-name"			Family name given on the payment instrument (in some Western cultures, also known as the last name or surname)	Free-form text, no newlines	Berners-Lee	Text
"cc-number"				Code identifying the payment instrument (e.g. the credit card number)	ASCII digits	4114360123456785	Text
"cc-exp"				Expiration date of the payment instrument	Valid month string	2014-12	Month
	"cc-exp-month"			Month component of the expiration date of the payment instrument	Valid integer in the range 1..12	12	Numeric
	"cc-exp-year"			Year component of the expiration date of the payment instrument	Valid integer greater than zero	2014	Numeric
"cc-csc"				Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)	ASCII digits	419	Text
"cc-type"				Type of payment instrument	Free-form text, no newlines	Visa	Text
"transaction-currency"				The currency that the user would prefer the transaction to use	ISO 4217 currency code [ISO4217]	GBP	Text
"transaction-amount"				The amount that the user would like for the transaction (e.g. when entering a bid or sale price)	Valid floating-point number	401.00	Numeric
"language"				Preferred language	Valid BCP 47 language tag [BCP47]	en	Text
"bday"				Birthday	Valid date string	1955-06-08	Date
	"bday-day"			Day component of birthday	Valid integer in the range 1..31	8	Numeric
	"bday-month"			Month component of birthday	Valid integer in the range 1..12	6	Numeric
	"bday-year"			Year component of birthday	Valid integer greater than zero	1955	Numeric
"sex"				Gender identity (e.g. Female, Fa'afafine)	Free-form text, no newlines	Male	Text
"url"				Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field	Valid URL	https://www.w3.org/People/Berners-Lee/	URL
"photo"				Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field	Valid URL	https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg	URL
"tel"				Full telephone number, including country code	ASCII digits and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+)	+1 617 253 5702	Tel
	"tel-country-code"			Country code component of the telephone number	ASCII digits prefixed by a U+002B PLUS SIGN character (+)	+1	Text
	"tel-national"			Telephone number without the county code component, with a country-internal prefix applied if applicable	ASCII digits and U+0020 SPACE characters	617 253 5702	Text
		"tel-area-code"		Area code component of the telephone number, with a country-internal prefix applied if applicable	ASCII digits	617	Text
		"tel-local"		Telephone number without the country code and area code components	ASCII digits	2535702	Text
			"tel-local-prefix"	First part of the component of the telephone number that follows the area code, when that component is split into two components	ASCII digits	253	Text
			"tel-local-suffix"	Second part of the component of the telephone number that follows the area code, when that component is split into two components	ASCII digits	5702	Text
"tel-extension"				Telephone number internal extension code	ASCII digits	1000	Text
"email"				E-mail address	Valid e-mail address	timbl@w3.org	E-mail
"impp"				URL representing an instant messaging protocol endpoint (for example, "aim:goim?screenname=example" or "xmpp:fred@example.net")	Valid URL	irc://example.org/timbl,isuser	URL

Mobile Friendly

In order to maximize usabiility for mobile devices, ensure to use proper input types, attributes, and keybord types. Listed below, are a few resources to help guide your decisions regarding form inputs.

In a recent study, the Baymard Institute revealed that 54% of mobile sites fail to invoke optimized touch keyboards for either phone, ZIP code, or credit card form fields. And even among the sites that do invoke these special touch keyboards, 25% fail to do so consistently throughout their checkout flow.

Form Layouts

Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage - they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

You can size inputs using column sizes, like .medium-6, .small-6.
You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.

Form Elements

A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):

Form
Label
Input, Select, Checkbox, Radio, Text Area
Form Error
Button

Text Inputs

These input types create a text field: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week.

<div class="medium-6 columns">
    <label>
        <p>Input Label</p>
        <input type="text" placeholder=".medium-6.columns">
    </label>
</div>
<div class="medium-6 columns">
    <label>
        <p>Input Label</p>
        <input type="text" placeholder=".medium-6.columns">
    </label>
</div>

Number Inputs

In most desktop browsers, <input type="number"> elements will have up/down controls inside them, which increment and decrement the number inside the field.

<div class="medium-2 columns end">
    <label>
      <p>Qty:</p>
      <input type="number" value="15">
    </label>
</div>

Text Area

Using the <textarea> element will create a resizable multi-line text field.

<label>
  <p>Comments:</p>
  <textarea placeholder="Enter comments, feedback, etc here..."></textarea>
</label>

Select Menu

Use the <select> element to group multiple options together in a dropdown menu. The default select menu allows for only one option to be selected.

To select a default option to show, use the selected attribute for the option you wish to dislpay.

<label>
    <p>Select an Option:</p>
    <select>
        <option value="option1">Option #1</option>
        <option value="option2">Option #2</option>
        <option value="option3" selected>Option #3</option>
        <option value="option4">Option #4</option>
    </select>
</label>

Multiple Select Menu

Add the multiple attribute to the <select> element to allow for multiple selections.

To select multiple options, hold Ctrl (Windows) or Cmd (Mac) and click on desired selections.

<label>
    <p>Select an Option:</p>
    <select multiple>
        <option value="option1">Option #1</option>
        <option value="option2">Option #2</option>
        <option value="option3" selected>Option #3</option>
        <option value="option4">Option #4</option>
    </select>
</label>

Checkboxes & Radio Buttons

Use groups of checkboxes when the user may select multiple choices from a list, and use radio buttons when the user must select just one choice.

Use the <fieldset> element to wrap a group of checkboxes or radio button. Then give the group a common label by using the <legend> element. Each individual control should also have its own label, created using the standard <label> element.


<div class="column row">
    <fieldset class="large-5 columns fieldset">
        <legend>Checkbox Field Set</legend>

        <input type="checkbox" name="check" value="option1" id="checkbox-option1" checked>
        <label class="middle" for="checkbox-option1">Option #1</label>

        <input type="checkbox" name="check" value="option2" id="checkbox-option2">
        <label class="middle" for="checkbox-option2">Option #2</label>

        <input type="checkbox" name="check" value="option3" id="checkbox-option3" checked>
        <label class="middle" for="checkbox-option3">Option #3</label>
    </fieldset>
    <fieldset class="large-5 columns fieldset">
        <legend>Radio Button Field Set</legend>

        <input name="radio-options" id="radio-option1" type="radio" value="radio1">
        <label class="middle" for="radio-option1">Radio #1</label>

        <input name="radio-options" id="radio-option2" type="radio" value="radio2" checked>
        <label class="middle" for="radio-option2">Radio #2</label>

        <input name="radio-options" id="radio-option3" type="radio" value="radio3">
        <label class="middle" for="radio-option3">Radio #3</label>
    </fieldset>
</div>

Checkbox Field Set Option #1 Option #2 Option #3

Radio Button Field Set Radio #1 Radio #2 Radio #3

Input Groups

To group inputs and buttons or extra text together, wrap them in an .input-group container and use the following classes as appropriate.

.input-group-label for a text label
.input-group-field for a text field
.input-group-button for an input button

<div class="input-group">
    <span class="input-group-label">.input-group-label</span>
    <input class="input-group-field" type="text" placeholder=".input-group-field">
    <div class="input-group-button">
        <input type="submit" class="small button" value=".input-group-button"><!-- button must be placed inside .input-group-button wrapper element -->
    </div>
</div>

.input-group-label

Helper Text

Place help text below a field to clarify it's purpose or to specify requirments for inputs such as passwords.

When you use the .help-text class you must give the element a unique ID. Then add the attribute aria-describedby to the input, and set it equal to the ID of the element with the .help-text class.

<label>
    <p>Password:</p>
    <input type="password" aria-describedby="exampleHelpText">
</label>
<p class="help-text" id="exampleHelpText">Passwords must have at least 10 characters, a number, and a special character.</p>

Form Errors

Custom form errors can be created by using the following attributes/elements:

Add data-abide and novalidate attributes to the <form> element.
Add a full-width <div class="row"> wrapper element after the initial <form> element.
Add a <div> element inside the above wrapper and add the data-abide-error attribute and the .alert and .callout classes.
Place your error text inside a <p> element within the above <div data-abide-error class="alert callout"> element.

Be sure to set the data-abide-error wrapper element to style="display: none;".

For any required inputs (or inputs that have a pre-defined expression) that are not properly met, the form will throw an error based on your defined parameters set above.

To highlight specific input field errors, place a <span> with the .form-error class directly below the input field and define the error message.

<form data-abide novalidate>
    <div class="column row">
        <!-- begin  Form error notification  -->
        <div data-abide-error class="alert callout" style="display: none;"><!-- Important to set display:none or error will be displayed initially -->
            <p><i class="azp azp_error-warning"></i>&nbsp;Please correct the following errors:</p><!-- add custom error message here -->
        </div><!-- end  Form error notification  -->
    </div>
    <div class="column row">
        <label class="required"><!-- adds a red asterik after the label to denote a "required" class -->
            <p>Sample Form Error Input:</p>
            <input type="text" required placeholder="Submit the form to reveal the form errors...">
            <span class="form-error">This is a required field.</span><!-- add custom input error text here -->
        </label>
    </div>
    <div class="column row">
        <div class="button-group">
            <input type="submit" class="button" value="Submit Form">
            <input type="reset" class="hollow button" value="Reset">
        </div>
    </div>
</form>

Form Example

<form data-abide novalidate style="margin-top: 2em;">
    <div class="column row">
        <!-- begin  Form error notification  -->
        <div data-abide-error class="columns alert callout" style="display: none;">
            <p><i class="azp azp_error-warning"></i>&nbsp; Please correct the following errors:</p>
        </div><!-- end  Form error notification  -->
    </div>
    <div class="small-12 columns"  style="background-color: #f8f8f8; padding-top: 2rem; padding-bottom: 2rem;">
        <div class="row">
            <div class="medium-4 columns">
                <label class="required"><p>First Name</p>
                    <input type="text" placeholder="Frank" autocorrect="off" autocomplete="given-name" required>
                    <span class="form-error">First Name is a required field.</span><!-- Input error notification  -->
                </label>
            </div>
            <div class="medium-4 columns">
                <label class="required"><p>Last Name</p>
                    <input type="text" placeholder="Sinatra" autocorrect="off" autocomplete="family-name" required>
                    <span class="form-error">Last Name is a required field.</span><!-- Input error notification  -->
                </label>
            </div>
            <div class="medium-4 columns">
                <label class="required"><p>Phone</p>
                    <input id="phone" type="tel" placeholder="901-123-4567" autocorrect="off" autocomplete="tel" required>
                    <span class="form-error">Please enter a valid Phone Number.</span><!-- Input error notification  -->
                    <p class="help-text" id="phoneHelpText"><em>Custom Helper Text goes here.</em></p>
                </label>
            </div>
        </div>
        <div class="row">
            <div class="medium-6 columns">
               <label><p>Title</p>
                    <select>
                        <option value="" selected>Select an option</option>
                        <option value="AL">Shop Manager</option>
                        <option value="AK">Technician</option>
                        <option value="AZ">Buyer</option>
                        <option value="AR">Buyer</option>
                        <option value="CA">Administration</option>
                        <option value="CO">Other</option>
                    </select>
                </label>
            </div>
            <div class="medium-6 columns">
                <label><p>Email Address</p>
                    <input type="email" placeholder="frank.sinatra@autozone.com" autocapitalize="off" autocorrect="off" autocomplete="email">
                </label>
            </div>
        </div>
        <div class="row">
            <div class="columns">
                <fieldset class="large-5 columns fieldset">
                    <legend>Checkbox Field Set</legend>

                    <input type="checkbox" name="check" value="option1" id="ex-checkbox-option1" checked>
                    <label class="middle" for="ex-checkbox-option1">Option #1</label>

                    <input type="checkbox" name="check" value="option2" id="ex-checkbox-option2">
                    <label class="middle" for="ex-checkbox-option2">Option #2</label>

                    <input type="checkbox" name="check" value="option3" id="ex-checkbox-option3" checked>
                    <label class="middle" for="ex-checkbox-option3">Option #3</label>
                </fieldset>

                <fieldset class="large-5 columns fieldset">
                    <legend>Radio Button Field Set</legend>

                    <input name="ex-radio-options" id="ex-radio-option1" type="radio" value="radio1">
                    <label class="middle" for="ex-radio-option1">Radio #1</label>

                    <input name="ex-radio-options" id="ex-radio-option2" type="radio" value="radio2" checked>
                    <label class="middle" for="ex-radio-option2">Radio #2</label>

                    <input name="ex-radio-options" id="ex-radio-option3" type="radio" value="radio3">
                    <label class="middle" for="ex-radio-option3">Radio #3</label>
                </fieldset>
            </div>
        </div>
        <div class="row">
            <div class="columns">
                <label><p>Comments Section</p>
                    <textarea placeholder="Enter comments here..."></textarea>
                </label>
            </div>
        </div>
        <div class="row">
            <fieldset class="medium-5 medium-offset-7 columns">
                <div class="expanded button-group">
                    <button class="button" type="submit" value="Submit Form">Submit</button>
                    <button class="hollow button" type="reset" value="Reset Form">Reset</button>
                </div>
            </fieldset>
        </div>
    </div>
</form>

First Name:

First Name is a required field.

Last Name:

Last Name is a required field.

Phone:

Please enter a valid Phone Number.

Custom Helper Text goes here.

Title:

Email Address:

Checkbox Field Set: Option #1 Option #2 Option #3

Radio Button Field Set: Radio #1 Radio #2 Radio #3

Comments Section:

Modules

Following the Atomin Design standards, we have created partials or modules that represent a group of commonly-used components that can be easily added to any page by using Handlebars markdown code {{> example-partial}}.

Module - Persistent Navigation
Module - Main Navigation
Module - Sidebar Navigation
Module - Off-Canvas Navigation
Module - Footer
Module - Graphics / Assets
Module - Breadcrumb
Module - Headers
Module - Tables
Module - Accordions
Module - Product Row
Module - Modals
Module - Callouts
Module - Filters

Templates

Templates represent commonly-used page layouts built with the above modules. Templates only display the structure and layout of the page and do not contain any content.

Content + Sidebar (left)
Content + Sidebar (right)
Single Section (short) + Sidebar
Single Section (long) + Sidebar
Search - Results Page
Search - Interchange Results Page
Search - Category Page
Search - Shelf Page
Search - Product Details Page
Landing - Marketing/Promo
Landing - Product Showcase

Example Pages

Example Pages build on the above templates and include content to show actual data usage, and how the page will respond to different types of content.

Global Styles

AutoZone Pro - Style Guide

Grid Overview

The Basics

PX to REM Converter

Example Conversion

Breakpoints

Gutters

How to Use

Nesting Columns

Small Grid

Medium Grid

Large Grid

Mixed Grid

Advanced Grid Sizing

Combined Column/Row

Offset

Centered Columns

Incomplete Rows

Collapse/Uncollapse Rows

Block Grid

Example Block Grid Layout:

Building A Symantic Grid

Rows

Columns

Multiple Grids

Putting It All Together

Colors

Typography

Fonts

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Headings

Header Sizes

h1. Heading Level 1

h2. Heading Level 2

h3. Heading Level 3

h4. Heading Level 4

h5. Heading Level 5

h6. Heading Level 6

Paragraphs

Icons

General Icons

Unordered Lists

Default UL

Simple UL

With Arrows UL

Ordered Lists

Default OL

Upper-Alpha OL

Lower-Alpha OL

Circled-Numeric OL

Circled-Numeric OL (Primary Color)

Circled-Alpha OL

Circled-Alpha OL (Primary Color)

Circled-Alpha OL

Circled-Alpha OL (Primary Color)

Helper Classes

Links

Anchors

Buttons

Button Colors

Button Sizing

Hollow Buttons

Dropdown Buttons

Button Groups

Advanced Button Groups

Common Use Cases

Forms

How to Use

Autofill Form Controls

Mobile Friendly

Form Layouts

Form Elements

Text Inputs

Number Inputs

Text Area

Select Menu

Multiple Select Menu