Website Classes and Styles

Gordon's website uses a set of global CSS classes to maintain a consistent visual system. All of these styles are maintained in the "responsivestyles.css" stylesheet. Below are examples of commonly used classes across Gordon's website. Many of these classes have a variation for each Gordon color, which is usually added with a hyphen at the end of the name.

Brand Colors

Gordon's brand colors are saved as "CSS Variables" so that you don't need to remember the hex color codes. This also allows us to adjust a color globally if ever needed. To use a variable, type the name in following format anywhere where you would have typed out a color:


var(--NAME)

For example, to use a variable named "seaspray" as a color:


style="color: var(--seaspray);"

The following color variables are available:

blue
cyan
snowday
red
gold
seaspray
nightmarsh
athleticblue
lavidagreen
christmasred
gradient-blue-cyan
gradient-seaspray
gradient-light-seaspray
gradient-night-seaspray

Image Alignment

Adding the class "img-left" or "img-right" to an image floats an image to the left or right and adds 25px of margin to the side. On mobile, they automatically go back to full width.

	
<img class="img-left" src="/images/layout/example.jpg" alt="description" />

Mobile-Only and No-Mobile

These classes can be applied to any element that you want to either only show on mobile sizes, or not show on mobile. It could be used on a <span> to cut out longer portions of text on a phone, or for sections where you made alterations for mobile (so, double the section, and apply the relevant class to each).

	
<img class="mobile-only" src="image.jpg" />
<img class="no-mobile" src="image.jpg" />

Headings

Gordon has defined styles for <h1>, <h2>, <h3> and even <h4>. H1 is reserved for page titles, and you can see H2 and H3 in use on this page.

You can switch the heading font to Gordon's secondary font, Amster, by adding class="amster" within the heading.

Heading 3 in Amster

	
<h3 class="amster">Heading 3 in Amster</h3>

Heading with Line

This style creates a centered text heading with a horizontal line on either side.

A SAMPLE HEADING

	
<div class="heading-line">
	<p><span class="heading-text">A SAMPLE HEADING</span></p>
</div>

Wavy Lines

Wavy line separators are part of Gordon's design language and there are a couple ways to add them to web pages.

To create one, use the "hr" element (horizontal rule) and apply one of the following classes:

	
<hr class="wavy-hr-seaspray">
<hr class="wavy-hr-cyan">
<hr class="cyan-hr">
<hr class="blue-hr">

The "cyan-hr" or "blue-hr" class creates a straight line as seen separating the sections of this page.

Buttons

Gordon's most basic button styles are "button-box" and "button-inline." "button-box" creates a solid box that expands to fill the width of the space. This works well when used with a tile grid, because it will fill the width of the column. The "button-inline" has a similar style but only fills the width of the text with some padding (inline-box). It's better for a standalone button not filling a grid.

For these buttons you would add a class for the style of button, plus an additional class to set the color, such as button-cyan , button-blue, button-seaspray, button-nightmarsh, button-gold, etc.

Example Button Box

INLINE BUTTON

	
<p><a class="button-box button-cyan" href="#">Example Button Box</a></p>
<p><a class="button-inline button-cyan" href="#">BUTTON OUTLINE</a></p>

Fancier Buttons

Gordon also uses a couple more customized buttons. The gradient buttons only use one class that includes the color since it's more complicated.

	
<p><a class="pill-button button-cyan" href="#">PILL BUTTON</a></p>
<p><a class="pill-button-arrow-cyan" href="#">Pill button arrow</a></p>
<p><a class="pill-button-arrow-blue" href="#">Blue Pill button arrow</a></p>
<p><a class="pill-button-arrow-gold" href="#">Gold Pill button arrow</a></p>

Layout Grids

We have a grid system that allows you to quickly create even, mobile-responsive columns. Create a container or wrapper <div> to contain the whole section with a class name of "tilegridwrapper". Each child element of the wrapper can be given a class based on how wide you'd like it to be. These can be applied to divs, a tags, or any other block element. On mobile, tilegrids will automatically flow into one column.

Layouts available: tilegrid-2col, tilegrid-3col, tilegrid-4col.

3-Column Content

	
<div class="tilegridwrapper">
	<div class="tilegrid-3col lightgraybox">3-Column Content</div>
	<div class="tilegrid-3col lightgraybox">3-Column Content</div>
	<div class="tilegrid-3col lightgraybox">3-Column Content</div>
</div>

Highlight Boxes

This paragraph is in a white box with a drop shadow and rounded corners.


<p class="whitebox-shadow">Text</p>

The highlight class is used on content with a left-alignment and trades the shadow for a colored border on the left side.


<p class="highlight">Text</p>

<p class="highlight-blue">Text</p>

There is also a class for a highlight with centered text with the accent bar across the top:


<p class="highlight-top">Text</p>

Color Boxes

These create boxes with padding in various Gordon brand colors. By default, they extend to the width of the section they are in.

A Blue Box

	
<p class="bluebox">A Navy Box</p>

Photo Tiles

Photo tiles are a visual way of providing links on a dashboard-style page. There are two styles -- a tinted version with a heading over the image, and a plain version with just the lower text.

Title over Image

SUBTEXT HERE

ONLY LOWER TEXT

In the code below, the photo tiles are placed within a "tilegridwrapper" with the "tilegrid-2col" class added so that they will appear as a row of two. You can see that each photo tile is an <a> tag with a class and <div> and <p> within it.

The image itself is not built into the class because it will be unique to each tile, so you would replace the path below with your own image (which you'll need to upload to the web server).

The code in the first tile is for the version with a heading over image, and the second tile is without.


<div class="tilegridwrapper">
 <a class="tilegrid-2col photo-tile" href="#">
  <div class="photo-tile-top-tinted" style="background-image: url('/images/home2023/bucket-business.jpg');">
   <h2>Title over Image</h2>
  </div>
  <p>SUBTEXT HERE</p>
 </a>

 <a class="tilegrid-2col photo-tile" href="#">
  <div class="photo-tile-top" style="background-image: url('/images/home2023/bucket-social.jpg');"></div>
  <p>ONLY LOWER TEXT</p>
 </a>
</div>

Gradient Border Boxes

If you need to create visual tiles without images, the gradient border boxes provide a splash of color and can be used within tile grids in the same way as photo tiles.

A heading here

And some description goes here lorem ipsum dolor sit amet.

	
    <div class="gradient-border-box">
       <h3 class="amster">A heading here</h3>
       <p>And some description goes here lorem ipsum dolor sit amet.</p>
    </div>

Pretty Tables

HTML tables are ugly by default. The "pretty-table" class adds some basic formatting such as a white background, padding in each cell, and light gray borders.

Sample Content	Lorem ipsum
Etcetera
Lorem ipsum	etcetera

	
<table class="pretty-table" border="1" cellpadding="1" cellspacing="1" style="width:100%;">
	<tbody>
		<tr>
			<td>Sample Content</td>
			<td>Lorem ipsum</td>
		</tr>
		<tr>
			<td>Etcetera</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>Lorem ipsum</td>
			<td>etcetera</td>
		</tr>
	</tbody>
</table>

Numbered Step Lists

Adding the class "numbered-steps" to an OL or UL element will create numbers in cyan circles

<ol class="numbered-steps">
    <li>The first step in this example</li>
    <li>The second step here</li>
    <li>You're all set!</li>
</ol>

The first step in this example
The second step here
You're all set!

Video Embed Container

This class can be added to a <div> wrapped around video embed code from Youtube or elsewhere, and helps make the video mobile-responsive. After using it, change the width in the embed code to 100% and delete the height.

	
<div class="embed-container">
	<iframe width="100%" src="https://www.youtube.com/embed/GRV5PDUyIGQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

For vertical videos, use the class name "embed-container-vertical".

	
<div class="embed-container-vertical">
	<iframe width="100%" src="https://www.youtube.com/embed/GRV5PDUyIGQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Accordions

This is the name given to sections of a page that can be expanded or collapsed with a click. It can be helpful for long pages with clear sections. In addition to CSS classes, it involves a Javascript snippet to allow the interaction to function. The accordion itself is made up of an outer container, individual "toggles" that appear as bars that can be clicked, and finally the content nested within each toggle:

	
<div id="accordion">
	<p class="accordion-toggle whitebox collapsed" style="text-align: left;"><strong>The First Toggle</strong></p>
	
	<div class="accordion-content">
		<p>The content within the first toggle goes here</p>
	</div>
	
	<p class="accordion-toggle whitebox collapsed" style="text-align: left;"><strong>The Second Toggle</strong></p>
	
	<div class="accordion-content">
		<p>The content within the second toggle goes here</p>
	</div>
</div>

Because the accordion involves user-interaction, some Javascript is needed to make it function. This code can be pasted anywhere on the page after the accordion. Generally just at the very bottom.

	
<script type="text/javascript">
  $(document).ready(function($) {
    //Add collapsed class for icon
    $('#accordion).find('.accordion-toggle')
    .addClass('collapsed');

    $('#accordion).find('.accordion-toggle').click(function(){

      //Expand or collapse this panel and swap icon 
      $(this).next().slideToggle('fast');
      $(this).toggleClass('expanded');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');
      $(".accordion-toggle").not($(this)).removeClass('expanded');

    });
  });
</script>

Example Accordion:

The First Toggle

The content within the first toggle goes here

The Second Toggle

The content within the second toggle goes here