Colors

Apmex Blue

Hex: #002539

RGB: (0, 37, 57)

Apmex Green

Hex: #24A186

RGB: (36, 161, 134)

Dark Blue

Hex: #2B495A

RGB: (43, 73, 90)

Soft Blue

Hex: #476170

RGB: (71, 97, 112)

Dark Red

Hex: #c30000

RGB: (195, 0, 0)

Soft Red

Hex: #F95929

RGB: (249, 89, 41)

Orange

Hex: #F98D29

RGB: (249, 141, 41)

Link

Hex: #4F86C6

RGB: (79, 134, 198)

Component BG

Hex: #F5F5F5

RGB: (245, 245, 245)

Border

Hex: #DDD

RGB: (221, 221, 221)

Text

Hex: #666

RGB: (102, 102, 102)

Typography

Header 1

Header 2

Header 2 Green

This is a bold paragraph

This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Header 3

Header 3 Green

Header 4

  • list item #1
  • list item #2
  • list item #3
This is a Link
  • HTML
  • CSS (SCSS)
  • CSS
<h1>Header 1</h1>
<h2>Header 2</h2>
<h2 class="green">Header 2 Green</h2>
<p class="bold">This is a bold paragraph</p>
<p>This is a Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Header 3</h3>
<h3 class="green">Header 3 Green</h3>
<h4>Header 4</h4>
<ul class="dash">
  <li>list item #1</li>
  <li>list item #2</li>
  <li>list item #3</li>
</ul>
<a>This is a Link</a> 
                

Grid

Apmex uses a Neat grid (documentation here - http://neat.bourbon.io/docs/latest/ ). The default grid is 12 columns with 20px gutters. There are optional Tablet and Mobile grids with their own breakpoints, columns, and gutters.

Neat uses a CSS grid, meaning there are no required classes for html elements, all grid rules are defined in the CSS with @include statements. Using this method any html element can be a grid container or column element. Apmex uses a designated .container class for convenience and adds the column rules to individual elements within the container. If multiple elements belong in the same grid column, then a grid-wrapper element is used.

Default Grid

12 Columns, 20px Gutters, Max Width 1100px

1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
2 columns
2 columns
2 columns
2 columns
2 columns
2 columns
3 columns
3 columns
3 columns
3 columns
4 columns
4 columns
4 columns
6 columns
6 columns
12 columns
  • HTML
  • CSS (SCSS)
<div class="grid-row default">
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
</div>
<div class="grid-row default">
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
</div>
<div class="grid-row default">
  <div class="col three-col">3 columns</div>
  <div class="col three-col">3 columns</div>
  <div class="col three-col">3 columns</div>
  <div class="col three-col">3 columns</div>
</div>
<div class="grid-row default">
  <div class="col four-col">4 columns</div>
  <div class="col four-col">4 columns</div>
  <div class="col four-col">4 columns</div>
</div>
<div class="grid-row default">
  <div class="col six-col">6 columns</div>
  <div class="col six-col">6 columns</div>
</div>
<div class="grid-row default">
  <div class="col twelve-col">12 columns</div>
</div>
                    

Tablet Grid

6 Columns, 20px Gutters, Max Width 1000px

1 col
1 col
1 col
1 col
1 col
1 col
2 columns
2 columns
2 columns
3 columns
3 columns
6 columns
  • HTML
  • CSS (SCSS)
<div class="grid-row tablet">
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
</div>
<div class="grid-row tablet">
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
</div>
<div class="grid-row tablet">
  <div class="col three-col">3 columns</div>
  <div class="col three-col">3 columns</div>
</div>
<div class="grid-row tablet">
  <div class="col six-col">6 columns</div>
</div>
                    

Mobile Grid

4 Columns, 20px Gutters, Max Width 768px

1 col
1 col
1 col
1 col
2 columns
2 columns
4 columns
  • HTML
  • CSS (SCSS)
<div class="grid-row mobile">
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
  <div class="col one-col">1 col</div>
</div>
<div class="grid-row mobile">
  <div class="col two-col">2 columns</div>
  <div class="col two-col">2 columns</div>
</div>
<div class="grid-row mobile">
  <div class="col four-col">4 columns</div>
</div>
                    

Components

Basic Components

Basic

Component Title

This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Collapsable

Component Title

This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Collapsable - Up

Component Title

This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • HTML
  • CSS (SCSS)
  • CSS
  • Javascript (jQuery)
<!--basic-->
<div class="basic-component">
  <div class="top">
    <h3>Component Title</h3>
  </div>
  <div class="slide">
    <div class="content">
      <p>This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>  
    </div>
  </div>
</div>

<!--collapsable-->
<div class="basic-component collapsable">
  <div class="top">
    <h3>Component Title</h3>
    <div class="collapse-click"></div>
  </div>
  <div class="slide">
    <div class="content">
      <p>This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>  
    </div>
  </div>
</div> 

<!--collapsable-up-->
<div class="basic-component collapsable up">
  <div class="top">
    <h3>Component Title</h3>
    <div class="collapse-click"></div>
  </div>
  <div class="slide">
    <div class="content">
      <p>This is the Component content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>  
    </div>
  </div>
</div>
                  

Buttons

  • HTML
  • CSS (SCSS)
  • CSS
<a class="button green" href="#">Green Button</a>
<a class="button green ghost" href="#">Green Ghost Button</a>
<a class="button orange" href="#">Orange Button</a>
<a class="button orange ghost" href="#">Orange Ghost Button</a>
<a class="button gray" href="#">Gray Button</a>
<a class="button gray ghost" href="#">Gray Ghost Button</a>
<a class="button blue" href="#">Blue Button</a>
<a class="button blue ghost" href="#">Blue Ghost Button</a>

Text Input

  • HTML
  • CSS (SCSS)
  • CSS
<form>
  <label for="example">Input Label</label>
  <input type="text" placeholder="text input placeholder" id="example">
</form>
                  

Read More Link

Hidden content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Read More
  • HTML
  • CSS (SCSS)
  • CSS
  • Javascript (jQuery)
<div class="read-more">
  <div class="read-more-slide">
    <p>Hidden content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <a class="read-more-link" href="#">Read More</a>
</div>
                  

Scroll-to Link

  • HTML
  • Javascript (jQuery)
<a class="scroll-to" href="#" data-dest="#typography">Scroll to Typography Section</a>
                  

Submit Form

Email Submit

Search Submit

  • HTML
  • CSS (SCSS)
  • CSS
<!--email submit-->
<div class="submit-form email">
  <form>
    <input type="text" placeholder="john.doe@example.com">
    <a class="submit-button" href="#"></a>
  </form>
</div>

<!--search submit-->
<div class="submit-form search">
  <form>
    <input type="text" placeholder="Seach for Gold, Silver, Etc.">
    <a class="submit-button" href="#"></a>
  </form>
</div>
                  

Tables

THeader 1 THeader 2 THeader 3 THeader 4 THeader 5
TData 1 TData 2 TData 3 TData 4 TData 5
TData 1 TData 2 TData 3 TData 4 TData 5
TData 1 TData 2 TData 3 TData 4 TData 5
  • HTML
  • CSS (SCSS)
  • CSS
<table>
  <tr>
    <th>THeader 1</th>
    <th>THeader 2</th>
    <th>THeader 3</th>
    <th>THeader 4</th>
    <th>THeader 5</th>
  </tr>
  <tr>
    <td>TData 1</td>
    <td>TData 2</td>
    <td>TData 3</td>
    <td>TData 4</td>
    <td>TData 5</td>
  </tr>
  <tr>
    <td>TData 1</td>
    <td>TData 2</td>
    <td>TData 3</td>
    <td>TData 4</td>
    <td>TData 5</td>
  </tr>
  <tr>
    <td>TData 1</td>
    <td>TData 2</td>
    <td>TData 3</td>
    <td>TData 4</td>
    <td>TData 5</td>
  </tr>
</table>
                  

Tabs

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

This is the Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Full Width

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

This is the Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • HTML
  • CSS (SCSS)
  • CSS
  • Javascript (jQuery)
<div class="tab-component">
  <ul class="tab-list">
    <li class="tab active" data-tab-match="one">Tab 1</li>
    <li class="tab" data-tab-match="two">Tab 2</li>
    <li class="tab" data-tab-match="three">Tab 3</li>
    <li class="tab" data-tab-match="four">Tab 4</li>
  </ul>
  <div class="tab-display">
    <!--one-->
    <div class="tab-content one" style="display:block">
    <p>This is the Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--two-->
    <div class="tab-content two" style="display:none">
      <p>This is the Tab 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--three-->
    <div class="tab-content three" style="display:none">
      <p>This is the Tab 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--four-->
    <div class="tab-content four" style="display:none">
      <p>This is the Tab 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<!--full-width tabs-->
<div class="tab-component">
  <ul class="tab-list full">
    <li class="tab active" data-tab-match="one">Tab 1</li>
    <li class="tab" data-tab-match="two">Tab 2</li>
    <li class="tab" data-tab-match="three">Tab 3</li>
    <li class="tab" data-tab-match="four">Tab 4</li>
  </ul>
  <div class="tab-display">
    <!--one-->
    <div class="tab-content one" style="display:block">
      <p>This is the Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--two-->
    <div class="tab-content two" style="display:none">
      <p>This is the Tab 2 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--three-->
    <div class="tab-content three" style="display:none">
      <p>This is the Tab 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <!--four-->
    <div class="tab-content four" style="display:none">
      <p>This is the Tab 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is the tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>
                  

PLATINUM