X

Getting Started

If you are new to AMP and setting up your first website, please follow the quick start guide on the official AMP Project website here.... https://www.ampproject.org/docs/getting_started/qu...

For 1BX to work with AMP, only the basics are required. Your markup should look similar to the following:

<!DOCTYPE html>
<html lang="en-gb" amp>
<head>
 <meta charset="utf-8">
 <link rel="canonical" href="YOURDOMAIN.COM">
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <title>PAGE TITLE</title>
 <meta name="description" content="PAGE DESCRIPTION">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 <style amp-custom>1BX GOES HERE</style>
</head>
<body>
 <!-- Your Content -->
</body>
<html>

To begin using 1BX you simply need to download and copy the contents of the CSS file into the <style amp-custom> tag in the <head> of your AMP template.

<style amp-custom> PASTE 1BX HERE </style>

With AMP you can only have one custom style element on your page which is why we have made 1BX clear for you to edit. There is also a limit of 50,000 bytes for the custom css in AMP, which is why we have used a super short naming convention so you have plenty of room to style elegant and efficient websites.

We have also included basic navigation styling with 1BX which will require the amp-sidebar JavaScript element to be enabled.

Don't forget to add amp-boilerplate to your amp page to provide the appearance of faster load times.

If you're looking for an example of this setup then simply view the source of this website. We have clearly labelled any additional classes but kept it as pure as possible to the current version of 1BX.

Now you're all setup, let's get started with how the responsive grid works.

The Responsive Grid

The responsive grid within 1BX is loosely based on the popular Bootstrap framework. The most notable changes are with the naming convention which has been designed to reduce the number of characters used for each class.

All responsive elements in 1BX have a class name that starts with 'r' making it easy to identify.

The Wrapper

Like Bootstrap, 1BX uses a container, row and column layout with a grid of 12. We call the container a wrapper.

There are two options for the wrapper with one being fluid (full width) and the other being contained.

Fluid Wrapper - rf

A fluid wrapper fills 100% of the display width on all display sizes.

<div class="rf">
 <!-- Your Content -->
</div>

Contained Wrapper - rw

A contained wrapper has a fixed width for each display size excluding the smallest which is full width.

<div class="rw">
 <!-- Your Content -->
</div>

Responsive Breakpoints

There are 4 display sizes that can be selected to change the layout starting with smallest display size for mobiles.

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

Rows and Columns

Rows are the most basic element but are required as a parent to any columns just like a table.

Let's start with a basic example of two columns in a contained wrapper.

<div class="rw">
 <div class="rr">
  <div class="rcx6">
   <!-- Your Content -->
  </div>
  <div class="rcx6">
   <!-- Your Content -->
  </div>
 </div>
</div>

You can see that the row has a class name 'rr'.

All columns start with 'rc' as the first two letters, followed by the smallest screen size for this grid element and then a number for the rows used.

Each display size is split into a grid of twelve and each column can span any number of these. In our example, we have two columns that are displayed from extra small devices spanning 6 grid columns each. This makes two equal columns that sit side by side. We can then enter our content into each of the columns.

Responsive Columns

Let's start by using the same example as above but rather than having two columns for all screen sizes, let's have one column width for mobiles and tablets and two for laptops and desktops.

<div class="rw">
 <div class="rr">
  <div class="rcx12 rcm6">
   <!-- Your Content -->
  </div>
  <div class="rcx12 rcm6">
   <!-- Your Content -->
  </div>
 </div>
</div>

It's important to remember that 1BX is mobile first so it's best to start by styling the mobile view as a 12 grid width to make one full column.

There is no need to set the medium (tablet) size as it will inherit the same width from the smaller mobile view. You only need to add a new column class when the style changes from the last screen size which in our case is a medium (laptop) display.

A responsive column is made up of the following name elements...

  • rc[size][columns]

Where [size] is the device size with the options:

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

And columns are represented by the number of grid columns to span for the device selected:

  • [1] - [12] An integer value from 1 to 12 to represent the number of columns to span.

Column Offsets

What is a column offset?

There are occasions when a column is used for padding or alignment but has no content. Rather than creating an empty column, we can add a column offset class.

To create an offset we use the class beginning with 'ro' followed by the device size and number of grid columns.

For example, on a large display you may want a narrow column with content at a maximum width of 8 grid columns. This will require an offset of 2 grid columns to the left to keep it central. Rather than creating an empty column div, we can add an offset to the main column. The code would look like this...

<div class="rw">
 <div class="rr">
  <div class="rcx12 rol2 rcl8">
   <!-- Your Content -->
  </div>
 </div>
</div>

From this example, you will see there is a full width column for all devices up to a large display which then has a width of 8 columns and an offset to the left of 2 columns.

A responsive column offset is similar to a column and made up of the following name elements...

  • ro[size][columns]

Where [size] is the device size with the options:

  • [x] Extra Small(Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

And columns are represented by the number of grid columns to offset for the device selected:

  • [1] - [12] An integer value from 1 to 12 to represent the number of columns to offset by.

Responsive Styling

When working with a responsive grid there are often styling elements that need to change depending on the content.

1BX prefixes all responsive classes with 'r' just like the grid.

Responsive Text Alignment

With a responsive website there are occasions when we will need to change the text alignment.

<div class="rw">
 <div class="rr">
  <div class="rcx12 rtxc rcm6 rtml">
   <!-- Your Content -->
  </div>
  <div class="rcx12 rtxc rcm6 rtml">
   <!-- Your Content -->
  </div>
 </div>
</div>

In this example, we have the text alignment centred on a mobile and left aligned on a desktop for both columns.

A responsive text class name is made up of the following elements and options...

  • rt[size][alignment]

Where [size] is the device size with the options:

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

And [alignment] is the desired text alignment of the contents:

  • [l] Left Align
  • [c] Centre Align
  • [r] Right Align
  • [j] Justified

Top & Bottom Responsive Padding

Responsive padding can be added to any elements but are intended mainly for rows and columns. Without declaring a class, the column or row will have no top or bottom padding.

<div class="rw">
 <div class="rr">
  <div class="rcx12 rpxn rpss rpmm rpll">
   <!-- your Content -->
  </div>
 </div>
</div>

This example has one column that has a stepped padding as the display gets larger. For mobile there is no padding, tablet has a padding of 20px and it gets larger for each device.

A responsive padding class name is made up of the following elements and options...

  • rp[size][padding]

Where [size] is the device size with the options:

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

And [padding] is the desired height added to the top or bottom of a row or column the class is added to:

  • [n] No Padding
  • [s] Small Padding = 20px
  • [m] Medium Padding = 40px
  • [l] Large Padding = 60px

Bottom Responsive Margins

The bottom of all main elements such as headings and images have no top margin and a standard 20px bottom margin. The following class can be used to change the bottom margin depending on the device.

<h1 class="rmxm rmml">Title</h1>
<p class="rmxn">Content</p>

In this example, the heading has a medium margin on mobiles and tablets to give it a 40px margin above the paragraph. From a medium device. there is a margin of 60px to provide a larger space between the heading and the paragraph. You will also notice the paragraph has no margin for all device sizes as there are no elements below it.

A responsive margin class name is made up of the following elements and options...

  • rm[size][padding]

Where [size] is the device size with the options:

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

And [margin] is the desired height added to the bottom of an element such as a heading or image:

  • [n] No Bottom Margin
  • [s] Small Bottom Margin = 20px
  • [m] Medium Bottom Margin = 40px
  • [l] Large Bottom Margin = 60px

Hidden Elements

As with most popular grid systems, we have included the ability to hide columns or elements with a short and simple class.

It's important to note that AMP doesn't permit the use of '!important' within the custom CSS so it's possible to inadvertently override this class by changing the display type in your custom CSS.

<div class="rw">
 <div class="rr">
  <div class="rcx12 rcm6">
   <!-- Your Content -->
  </div>
  <div class="hx hs rcm6">
   <!-- Your Content -->
  </div>
 </div>
</div>

With this example, the second column is hidden on mobile and tablet.

A hidden class name is made up of the following options...

  • h[size]

Where [size] is the device size with the options:

  • [x] Extra Small (Mobiles) - 0 - 599px
  • [s] Small (Tablets) = 600px - 899px
  • [m] Medium (Laptops) = 900px - 1199px
  • [l] Large (Desktops) = 1200px +

Typography

Within 1BX we have included some standard typography that you can edit within the CSS.

The standard font we use is Veranda which is a web safe font that works in most browsers. You can include Google fonts within your website as you would with any website and change the font family within 1BX to suit.

Headings

Heading styles can be mimicked by other heading levels by adding the suitable classes.

<h1 class="h2">YOUR TITLE</h1>

The example here has a H1 heading that is styled like a H2.

We have only included styles up to H4 as we have found H5 & H6 headings are rarely used although you can add these in if they are suitable for your project.

A heading class name is made up of the following options...

  • h[level]

Where [level] is the importance of the heading with the options:

  • [1] Level 1 = h1
  • [2] Level 2 = h2
  • [3] Level 3 = h3
  • [4] Level 4 = h4

Text Styles

In a similar vein to the headings, we have included some standard styles with very short class names that you can add to class elements.

  • b = Bold
  • i = Italic
  • u = Underline
  • s = Small Text (80%)
  • tl = Text Lowercase
  • tu = Text Uppercase
  • tc = Capitalise

Buttons

When we built this website to demonstrate 1BX, we kept it simple as a working example of how it is out of the box.

One element that we felt was important to add for styling is the button in which you can style yourself but have included to help you get started.

We have provided two button styles as follows.

Primary Button

The primary button is styled by adding the class 'bp' to the anchor or button tag.

<a href="" class="bp">YOUR BUTTON TEXT</a>
<button class="bp">YOUR BUTTON TEXT</button>

Primary Button

Default Button

The default button is styled by adding the class 'bd' to the anchor or button tag.

<a href="" class="bd">YOUR BUTTON TEXT</a>
<button class="bd">YOUR BUTTON TEXT</button>

Default Button

Full Width Buttons

Buttons are auto width as standard but can be made full width by adding the class 'bf'.

<a href="" class="bd">FULL WIDTH BUTTON</a>

FULL WIDTH BUTTON

Support

1BX has been developed by Unumbox Ltd and will be updated regularly. If you require support or discover any errors in the stylesheet, please contact us on theteam@unumbox.com