A website is never finished. We are continuously improving our style guide. If you follow this guide, your content will always be styled correctly—now and in the future.

Purpose of this page

This page contains all the styles available on this website. When creating or modifying a page or post, use this as a reference for how it should look.

We recommend reading this entire page before working on the website, so you have an understanding of our design philosophy.

What is a style guide and why do we use one?

A style guide is a set of standards for how pages should be designed on a website. This page contains all the styles available, guidance on when to use them, and how to implement them.

It’s important we all follow these guidelines to ensure we maintain a consistent feel that meets best practices online—both now and in the future.

A style guide carries many benefits:

  • An easy reference to the styles available to use.
  • Creates a consistent user experience. All our code has been rigorously tested.
  • Allows for control over the design so no one can go rogue.
  • Forces us to be lean. Jeff Atwood saysThe best code is no code at all.” We want to keep a clean and simple codebase that is easy to maintain.
  • To enforce best practices to ensure our website meets all usability guidelines.
  • Makes onboarding new people easier as the website is well documented.

Corporate branding

Style guides normally contain information on branding, colors, and typography. Our corporate branding can be found in Corporate identity guidelines for CRE. To save duplication, we will keep all branding information in that document.

Coding guidelines

Before writing any new code for our website, please consider the following quote from Jeff Atwood.

The best code is no code at all. Every new line of code [or feature] you willingly bring into the world is code that has to be debugged, code that has to be read and understood, code that has to be supported. Every time you write new code, you should do so reluctantly, under duress, because you completely exhausted all your other options.

Jeff Atwood, Effective Programming: More Than Writing Code

The structure of our CSS uses a simplified version of ITCSS by Harry Roberts. ITCSS follows conventions of layering CSS on top of each other from low specificity (such as headings and paragraphs) to more specific ones (such as elements with classes). This organization helps us avoid specificity wars which can lead to bloated and unmanageable code.

Naming is the hardest part of coding. We want all our names to be understandable, easy to remember and descriptive to their function. To help us achieve this, we use two naming conventions called namespacing and BEM. Both these naming conventions work in combination, allowing us to understand their structure and function from inspecting the HTML—so there is no need to delve into the codebase itself.

Namespacing is the convention of prefixing class names to indicate if its function and scope. For example, utilities are prepended with u- and JavaScript is prepended with js-. Namespacing can also signify a temporary change based on the state of an element. For example, using is- and has- on a menu item could signify if the user is currently browsing that page. More on the available prefixes on this website in the next section.

BEM helps us to visualize the structure of the HTML and see which elements are reliant upon each other to be styled correctly. BEM stands for block, element, and modifier—seperated by underscores and dashes respectively. Underscores show an element is reliant on its parent and dashes show it’s modified from the default. It’s important you fully understand BEM before making any modifications to the CSS of this website.

Namespacing and BEM provide structure to our classes but don’t suggest how we should name them. Always choose a name that reflects it’s function and not contents—allowing that element to be reusable. Some user interface elements or components (we’ll reference as components from now) already have industry recognized names (such as accordion, tabs, widget, modal) so before creating a new name, check that someone else hasn’t already done the hard work. All names should be singular including classes, files, and folders.

The structure of our style guide

Our style guide is arranged into sections based on the function of that element or component.

  1. Base. These are default styles applied to every element on the website. Everything inside base doesn’t require a class. Base elements include typography, forms, and images.
  2. Components. These are styles that require a specific class and/or HTML structure to create that piece of UI. Any changes should not impact any other part of the website. Components include widgets, buttons, notifications, and navigation.
  3. Utilities. These are single function classes. They perform a very specific role. They should not be bound to, and changes should be made with caution. Utilities use the namespacing prefix of u-, g- or l-. Utilities include containers, grid systems, visibility.
  4. JavaScript. Any interaction or animation that requires JavaScript should be isolated into its own class. This allows it to be reusable and visible to anyone working on the website. JavScript uses the namespacing prefix of js-.

Overview of our style guide

Below is a list of everything that’s included in our style guide and therefore our website.

  1. Base
    1. Typography
    2. Form
    3. Image
    4. Table
  2. Components
    1. Badge
    2. Button
    3. Caption
    4. Checklist
    5. Drawer
    6. Hamburger
    7. Hero
    8. Logo table
    9. Media object
    10. Mobile nav
    11. Nav
    12. Overlay
    13. Responsive table
    14. Sample output
    15. Search form
    16. Testimonial
    17. Video embed
    18. Widget
  3. Utilities
    1. Container
    2. Clearfix
    3. Grid System
    4. Layout
    5. Section
    6. Visibility

Base (default styles)

Typography

All the following styles require no additional classes. It is the “out of the box” styling for the typography on our website.

I am the big heading

The European languages are members of the same family. Their separate existence is a myth.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

I am a second level heading

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

  • The European languages are members of the same family.
  • Their separate existence is a myth.
  • The new common language will be more simple and regular than the existing European languages.
    • It will be as simple as Occidental; in fact, it will be Occidental.
    • To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.
    • The European languages are members of the same family.
    • Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
  • The languages only differ in their grammar, their pronunciation, and their most common words.
  • Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

I am a second level heading

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

I am a third level heading

Shall we have a very important quote from someone famous?

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words.

Someone famous in Source Title

I am a third level heading

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

I am a fourth level heading

  1. The European languages are members of the same family.
  2. Their separate existence is a myth.
  3. The new common language will be more simple and regular than the existing European languages.
    • It will be as simple as Occidental; in fact, it will be Occidental.
    • Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
  4. The languages only differ in their grammar, their pronunciation, and their most common words.
  5. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation, and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.

Form

All forms should be style consistently. Below shows all available input types and how they should appear on any form created.

Note: Most forms on the website are generated using a plugin. We recommend using that plugin to add or modify forms. When using the plugin it will generate slightly different HTML to the example below but will look the same.

Image

All images will resize to fit their containers. Images will stretch beyond its natural size so if the container is wider than the image it will stop resizing.

Note: Images are automatically resized so they work on all screen sizes. This cannot, and should not, be overridden.

Note: Some legacy images on the website are quite small. In these cases, it’s often more practical to allow them to be wider than their natural maximum size. To allow this to happen, increase the width of the <img> tag.

Table

Tables are styled without applying any classes. They will stretch to the width of their container, regardless of whether the contents are narrower.

Note: Only use tables for tabular data.

Note: Tables don’t work well responsively so we recommend using them in conjunction with the .responsive-table component.

Column heading 1 Column heading 2
Value 1.0 Value 2.0
Value 1.1 Value 2.1
Value 1.2 Value 2.2
Value 1.3 Value 2.3

Components

Badge

Badges are used to flag something. A note can be added by wrapping text with a span and the class .badge.

You can add tags inside the WordPress editor using the formats dropdown.

This heading has a tag This is the tag

This paragraph of text also has a tag. This is the tag

Button

You can style any link to look like a button by adding the .button class.

Form buttons are automatically styled to look like buttons. You don’t need to add any additional classes.

If you wish to make a full-width button you can add the modifier class .button--block to the link or form button.

If you wish to make a large button you can add the modifier class .button--lg to the link or form button.

Some buttons link to pages with video testimonials. To indicate this we have a button with a play icon. Add the modifier class .button--play to the link or form button.

Note: Text inside buttons do no wrap. Be careful when using lots of text and test on multiple devices to make sure they don’t cause any issues.

Caption

WordPress editor uses .wp-caption for its captions. For the sake of simplicity and consistency, we will use this class name everywhere.

Captions will automatically be styled when images are uploaded and embedded using the WordPress editor. If you’re not using the WordPress editor, you can wrap the image and text in a div with the class .wp-caption.

This is a caption for the CRE logo.

Checklist

This is a list with ticks instead of the default circular bullet. To create a checklist add the class .checklist to the unordered list.

  • Conversion secrets of a million-dollar landing page.
  • Advanced tips for highly converting websites.
  • Bonus tip: hearing the voice of the customer.
  • Plus email notification of new tools, research, and conversion insights as soon as we get them.

Video embed

Video embeds ensure all videos stretch to the width of their container, are responsive, and use the 16:9 aspect ratio. To use the video embed, wrap the object or video inside a div with the class .video-embed.

When embedding video using the WordPress editor these styles will automatically be applied. To embed a video paste the URL of the video into the editor and it will automatically embed. Do not use embed code as it could cause visual issues for smaller screens.

Media object

A media object is a two column layout with a media column on the left and a text column on the right. The media column has a fixed width and the image inside will resize to fit that width.

There are three available classes for a media object:

  • Default which uses the class .media-object.
  • Small which displays a smaller image which uses the class .media-object--sm in addition to .media-object.
  • Large which displays a larger image which uses the class .media-object--lgl in addition to .media-object.
Thumbnail of Smart Insights annotated PDF

Persuasion techniques used in a sophisticated landing page (PDF)

This is an annotated screenshot of a page we created for Smart Insights. The control was strong, but this page beat it, generating 157% more paid memberships. That’s almost three times as many. The page fires on all cylinders, so study the methods we used in it; you’ll be able to apply many of them to increase the profits of your own website.

Hamburger

The hamburger icon only appears in the header on smaller devices. Once clicked an is-active class is added which turns the burger into a close symbol.

You can demo the hamburger if you visit this website on your cell phone.

Note: Do not reuse this component. There should only be one on each page. It is included in the style guide for completeness only.

Hero

Each page and post has a full-width banner that includes the title and featured image. Featured images fill the area and with special CSS effects give an opaque green look.

Note: Do not reuse this component. There should only be one on each page. It is included in the style guide for completeness only.

Note: Images should be a wide letterbox shape. Consider that depending on the screen size a significant portion of the image could become cropped.

The style guide for our website

Logo table Needs improving

The logo table uses a list to display a grid of logos. This is primarily used to display client logos. Spacing is automatically added to each logo so they sit in the middle of each cell.

Note: This pattern works best when it contains a number that is divisible by three. This is because the last three items in the grid do not display a border at the bottom.

  • Apple
  • Google
  • Facebook
  • Amazon
  • Dropbox
  • Dyson

Many of the world’s most respected brands trust us to grow their businesses.

Navs are styled lists. A nav can be an unordered or ordered list, in both cases, the list style will be removed. All navs inherit some basic styling but most the useful functionality comes from modifiers. Remember you can use several modifiers at once to achieve what you’re after.

A basic nav default margins normally placed on a list and styles links. To start using navs, add the class .nav.

Nav pills

Nav pills are when each link has padding around it which increases the clickable area. To use nav pills add the modifier .nav--pills. Although this is a modifier it is recommended for all navs.

Note: Nav pills do not allow text to wrap. Keep this in mind when using them as it could cause some visual issues, particularly on small devices.

Nav inline

Nav inline makes all nav items sit next to each other.

Note: On smaller screens, an inline nav will display as a two column list. This ensures there is enough spacing between links for a comfortable touch area.

Nav grid

Nav grid makes all nav items the same width and places them in a grid formation. They are full width on mobile and then start moving next to each other once there is enough space.

Note: It’s recommended this pattern is used in conjunction with .nav--pills as demonstrated below.

Nav dropdown

Nav dropdown turns a multi-level navigation into a dropdown. For items that have a dropdown menu an arrow is added to the right.

Note: This is used for the main navigation of large screen devices. It is not recommended that this pattern is used on its own as it could pose some usability issues on small screens.

Mobile nav

A mobile nav is a multi-level navigation with large touch targets and a separate arrow to initiate sub menus to remove the need for hover, which is unavailable on most smaller screens that have touch as their primary input.

Note: While a mobile nav is very similar to the nav patterns, it requires additional HTML for the dropdown targets. This is why it has been separated into its own pattern.

Overlay

An overlay is an opaque layer that sits on top of all the page content. It appears when initiating a drawer. The overlay is clickable and will hide itself and any drawers that are open.

Drawer

A drawer is a content box that overlays the page content. It slides in from the right-hand side. This is used to display the main menu on devices with small screens. Initiating the drawer will also initiate an overlay.

Responsive table

Often tables will not fit on smaller screens. The responsive table component allows the table to scroll horizontally when there is not enough space for it to fit.

By wrapping two divs around a table and adding the class .responsive-table and .responsive-table__body.

Note: We recommend always using the responsive table, even if you don’t think it’s necessary, to ensure there are no layout issues.

Search form

The search form uses default WordPress HTML. We have used CSS to style it so the label is full width and the input and button sit next to each other.

Note: Remember to use the official WordPress function to add a search form. Do not copy and paste the HTML.

Sample output

A sample output is a scrollable box that contains HTML to demonstrate what an element looks like. It’s used in this document to demonstrate various elements and components. To display some sample output, wrap a div around some HTML with the class .sample-output.

You can add sample output inside the WordPress editor by highlighting a section and selecting “Sample block” inside the formats dropdown.

This a demo of sample output.

Testimonial

Testimonials include an author image, logo, text and some call to actions. They’re used throughout the site to display client testimonials and industry recognition.

We have helped TopCashback to be one of the 100 fastest-growing companies in the UK. For three years in a row.

“Sales nearly tripled.”

Widget

This will create a stylized grey box around your content. Add the class .widget to a div that wraps your contents. This is primarily used in the sidebar but can be used anywhere to highlight some content.

This is a widget. Any content could be placed inside of it.

Utilities

Container

Containers are full-width elements that contain the content within a certain width.  All containers use a percentage width with varying maximum widths.

There are three different containers that can be used.

  • Default which uses the class .u-container. If you’re unsure which to use, use this.
  • Small which uses the class .u-container-sm. Applies a narrow maximum width which is ideal for text.
  • Large which uses the class .u-container-lg. Applies a wide maximum width which is ideal for headers, footers and very wide content.

Grid System

Grids are a collection of repeating elements that all have the same width. An example would be a gallery or testimonials. All grids apply space between item.

To create a grid, each item needs to be in its own div. Then, wrap all those items in a containing div with one of the following classes applied.

  • Two column grid uses the class .g-two-up. This grid is one column on smaller screens and two on larger ones.
  • Three column grid uses the class .g-three-up. This grid is one column on smaller screens and three on larger ones.
  • Four column grid uses the class .g-four-up. This grid is one column on smaller screens, two on medium sized screens and four on larger screens.
Column 1
Column 2
Column 3
Column 4

Layout

A layout contains two columns of different widths. This pattern is used for the default page layout with a sidebar and main content. On small screens, the columns will stack (unless the sidebar is hidden using visibility classes) and side by side on larger screens.

This page is a demonstration of a two column layout.

Section

A section adds margin above and below. Section spacing increases the larger the screen becomes. To create a section, wrap your content in a div and add either .u-section.

Note: If two sections are placed one after another the spacing between them will collapse.

Visibility

Visibility classes show and hide content at different breakpoints. This website has two different breakpoints for small and large screens.

The following visibility classes are available:

  • .u-hidden hides the element at all times.
  • .u-visible displays the element at all times. Note: This will force the element to display block.
  • .u-hidden-mobile hides the element for small screens only.
  • .u-visible-desktop hides the element for large screens only.
  • .u-visible-mobile shows the element for small screens only.
  • .u-visible-desktop shows the element for large screens only.

Clearfix

A clearfix is a way to force an element to contain its children elements. It’s generally used in combination with floats that break the normal layout flow. It can also be used to stop margins from collapsing into each other. To add a clearfix, wrap your content in a div and add the class .u-clearfix.

 


What you should do now

1. If you’d like us to work on your website—to dramatically improve your conversion rate and profits (like we did for all these companies), then claim your FREE website strategy session. On this free phone consultation, one of our experts will discuss your conversion goals and suggest strategies to double your sales.

2. If you’d like to learn conversion for free, go to our “Learning Zone” page, where you can download templates of million-dollar winning pages. Or, if you’d like us to build your company’s in-house capabilities (not for free), then contact us and we’ll discuss your requirements.

3. If you’d like to work for us—or see why our team members love working for us—then see our “Careers” pages.

4. If you enjoyed this article, then so will your friends, so why not share it on LinkedInTwitterFacebook and Email

All of our articles are subject to our Testimonial Protocol, which is described here.