Alerts are dialog boxes that the user can make disappear.

Code

				
<div class="alert-wrap">
  <input type="checkbox" id="alert-check">
  <label for="alert-check">CLOSE</label>
  <div class="alert">
    <p>Surface rules! That is all.</p>
  </div>
</div>
				
			

Animations bring your page to life.

Code

Direction

There are 4 classes for fading in.

• .fade-in-from-top
• .fade-in-from-bottom
• .fade-in-from-left
• .fade-in-from-right

				
<div class="fade-in-from-top">
  I fade in from the top
</div>
<div class="fade-in-from-left">
  I fade in from the right
</div>
				
			

Delays

You can delay an animation for up to 10 seconds.

The suffixes go up to 100. 5 is 0.5s, 25 is 2.5s and so on.

• .anim-delay--5
• .anim-delay--10
• .anim-delay--15
• .anim-delay--20

				
<div class="fade-in-from-top anim-delay--5">
  I have 0.5s delay
</div>
<div class="fade-in-from-left anim-delay--50">
  I have a 5s delay
</div>
				
			

Buttons are essential web elements for interaction.

Code

Types

There are 3 different types of button.

• .btn--flat
• .btn--float
• .btn--raised

Colors

By default, the flat and the raised buttons are the $primary variable color and the floating button is the $accent variable. If you want a specific color, there are 7 different colors.

• .btn--red
• .btn--yellow
• .btn--green
• .btn--blue
• .btn--primary
• .btn--secondary
• .btn--accent

				
<button class="btn--flat">Flat</button>
<button class="btn--float">+</button>
<button class="btn--raised">Raised</button>

<button class="btn--raised btn--green">Green</button>
<button class="btn--raised btn--blue">Blue</button>
<button class="btn--raised btn--accent">Accent</button>
				
			

Cards and tiles are fundamental components of Google's Material Design guidelines.

Code

• .card
• .tile

				
<div class="card">
  I'm a card!
</div>
<div class="tile">
  I'm a tile!
</div>
				
			

Have information that the user might want be don't want it cluttering up the page if they don't want it? Use a collapsible.

Code

If you want a collapsible to be open by default, simply add the checked attribute to the input. For example, the left hand navigation is checked to be open when in the documentation.

				
<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-1">
  <label for="collapsible-1">Collapsible 1</label>
  <div class="collapsible-1-area">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-2">
  <label for="collapsible-2">Collapsible 2</label>
  <div class="collapsible-2-area">
    <p>Cras lobortis elit sem.</p>
  </div>
</div>

<div class="collapsible-wrap card no-pad">
  <input type="checkbox" id="collapsible-3">
  <label for="collapsible-3">Collapsible 3</label>
  <div class="collapsible-3-area">
    <p>Donec efficitur condimentum lacus.</p>
  </div>
</div>
				
			

Code

Use the .bg-- class suffixed with your color of choice.

				
<div class="tile bg--pink">Pink</div>
				
			

Code

Use the .color-- class suffixed with your color of choice.

				
<div class="tile color--pink">Pink</div>
				
			

Use a footer to show extra information or links that aren't necessary elsewhere.

Code

Simply use the HTML5 footer element.

				
<footer class="g--10 m--2 no-margin-vertical">
  <div class="g--10 m--1">
    Some footer information
  </div>
</footer>
				
			

Form elements.

Code

HTML5 Elements

The following elements need only for you to use the HTML5 elements.

• Text inputs (password, text)
• Textarea
• Checkboxes
• Radio Buttons
• Selects
• Range selector

				
<input type="text" required placeholder="Username">
<input type="password" required placeholder="Password">
<label>Label</label>
<textarea></textarea>
<input type="checkbox">
<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="range">
				
			

Class Based

The following elements need to be used as the code shows, in order and with classes.

• Toggles

				
<input type="checkbox" class="toggle" id="toggle">
<label for="toggle"></label>
				
			

The grid system is the basis of Surface layouts.

Code

Grid

The grid system by default is 12 columns wide. This can be changed in the _variables file by altering the $grid-columns variable.

To give an element a grid size, use the class .g-- suffixed by the size of the grid. For example, .g--5 g-s--12 will be 5/12ths wide.

To make your grid elements responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.

• .g-m--12 or .g-m--4 - Use the m- for medium size breakpoints, which is <1200px by default.
• .g-s--12 or .g-s--4 - Use the s- for small size breakpoints, which is <900px by default.
• .g-t--12 or .g-t--4 - Use the t- for tiny size breakpoints, which is <520px by default.

				
<div class="g--5 g-s--12">
  I'm a g--5 g-s--12
</div>
<div class="g--1 g-m--4 g-t--12">
  I'm a g--1 at regular size, g--4 at medium and g--12 at tiny size.
</div>
				
			

Margins

The margins work exactly the same as the grid system. Each m--1 is equal size to a g--1

To give an element a margin, use the class .m-- suffixed by the size of the margin. For example, .m--3 will push your element along a quart of the grid (assuming you have a 12 column grid).

To make your margins responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.

• .m-m--12 or .m-m--4 - Use the m- for medium size breakpoints, which is <1200px by default.
• .m-s--12 or .m-s--4 - Use the s- for small size breakpoints, which is <900px by default.
• .m-t--12 or .m-t--4 - Use the t- for tiny size breakpoints, which is <520px by default.
• All margins can be zero, ie .m-s--0.

				
<div class="m--3">
  I have a 3 grid wide margin
</div>
<div class="m--1 m-s--5">
  I have a 1 grid wide margin at regular size and a m--5 at small size.
</div>
				
			

Containers

Containers are a way of display elements that are usually block level inline. A container has the display flex declaration. Such as displaying divs next to each other. It also gets rid of those pesky gaps between inline-blocks.

To add a container class simply use the .container class. The following suffixes will control where the elements align vertically.

• .container--baseline - This class aligns elements so that the text baselines align
• .container--center - This class aligns elements centrally
• .container--start - This class aligns elements at the top of the container
• .container--end - This class aligns elements at the bottom of the container
• .container--justify - This class aligns elements horizontally central

				
<div class="container g--6">
  <div class="g--5 g-s--12 tile">
    We're in a container
  </div>
  <div class="g--5 g-s--12 tile">
    We're in a container
  </div>
</div>
				
			

You can also apply flex-wrap: wrap to your containers at different breakpoints with the following classes.

• .container--wrap
• .container--wrap--m
• .container--wrap--t
• .container--wrap--s

				
<div class="container container--wrap--t g--6">
  <div class="g--5 g-s--12 tile">
    This container wraps at the tiny breakpoint
  </div>
</div>
				
			

Nudges

Sometimes 1 margin space is too big. That's what nudges are for. Use the .nudge--left and .nudge--right classes. These classes have a margin on their respective side that gets smaller as the screen width gets smaller. Particularly useful for buttons and smaller elements.

You can remove the nudges at small screen sizes using the following classes.

• .no-nudge--m
• .no-nudge--s
• .no-nudge--t

				
<button class="btn--flat">Flat</button>
<button class="btn--float nudge--left nudge--right">+</button>
<button class="btn--raised">Raised</button>

<div class="card nudge--left nudge--right no-nudge--s">
I have a nudge left and right, but no nudge when smaller than the small breakpoint size.
  <p>Words...</p>
</div>
				
			

Headers display titles, website names, navigation and logos.

You can see an example of a header at the top of this page

Code

Simply use the HTML5 header element.

				
<header class="container">
  <h1 class="m--1 g--4">Header</h1>
</header>
				
			

A lightbox is used to display images without other distractions.

Code

Use a checkbox, followed by a label with your img inside. Be sure to make your lightboxes have different numbered suffixes.

				
<input type="checkbox" id="lightbox-1">
<label for="lightbox-1"><amp-img src="https://via.placeholder.com/600x400" width="600" height="400" layout="responsive"></amp-img></label>
				
			

We all know what links are, right?

Code

Simply use the HTML a tag.

				
<a href="http://www.example.com">example.com</a>
				
			

Images, video and audio.

Code

Simply use the required HTML tag, img, video or audio.

By default, all media will be 100% width of their parent

				
<amp-img src="https://via.placeholder.com/600x400" width="600" height="400" layout="responsive"></amp-img>
				
			

Modals are pop out peices of information.

Code

				
<div class="g--4">
  <input type="checkbox" id="modal-1">
  <label class="modal-trigger" for="modal-1">Modal Link</label>
  <div class="modal-content g--4">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>
				
			

Navigation systems are the fundamental method of moving around a website.

An example of a horizontal navigation bar can be found at the top of this page.

An example of a super vertical navigation can be found on the left hand side of this page.

Code

Horizontal Navigation

				
<header class="container--baseline">
  <h1 class="m--1 g--4">Navigation</h1>
  <nav class="g--3 nav--horizontal">
    <ul>
      <li><a href="http://www.google.com">Nav link</a></li>
      <li><a href="http://www.google.com">Hello</a></li>
      <li><a href="http://www.google.com">Contact</a></li>
      <li class="dropdown"><a href="http://www.g.com">Dropdown</a>
        <ul>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
        </ul>
      </li>
      <li><a href="http://www.google.com">Portfolio</a></li>
    </ul>
  </nav>
</header>
				
			

Responsive

To make your horizontal navigation responsive, use the following code before the .nav--horizontal class.

				
<input type="checkbox" id="nav--horizontal-responsive">
<label for="nav--horizontal-responsive">MENU</label>
<nav class="nav--horizontal g--4">
    ....
				
			

Super Vertical Navigation

				
<aside class="nav--super-vertical g--2 g-med--3 g-small--6 g-tiny--12 no-margin-vertical">
  <div class="g--12 logo-area no-margin-vertical">
    Your logo here
  </div>
  <nav class="g--12">
    <a href="">About</a>
    <div class="nav-collapsible">
      <input type="checkbox" id="nav-collapsible-1">
      <label for="nav-collapsible-1">Components</label>
      <div class="nav-collapsible-links">
        <a href="../docs/alerts.html">Alerts</a>
        <a href="../docs/animations.html">Animations</a>
        <a href="../docs/buttons.html">Buttons</a>
      </div>
    </div>
    <a href="">Contact</a>
  </nav>
</aside>
				
			

Responsive

To make your super vertical navigation responsive, use the following code before the .nav--super-vertical class.

				
<input type="checkbox" id="nav--super-vertical-responsive">
<label for="nav--super-vertical-responsive">MENU</label>
<nav class="nav--super-vertical g--2">
    ....
				
			

Code

Simple use the HTML table elements along with the .table-header class for the header.

				
<table class="g--8 card">
  <tr class="table-header">
    <td>Number</td>
    <td>Name</td>
    <td>Age</td>
    <td>Job</td>
  </tr>
  <tr>
    <td>521</td>
    <td>Ben</td>
    <td>23</td>
    <td>Front End Dev</td>
  </tr>
  <tr>
    <td>951</td>
    <td>Zoe</td>
    <td>21</td>
    <td>Care Worker</td>
  </tr>
</table>
				
			

Tooltips are hidden snippets of information that show when the user hovers over.

Code

To use a tooltip, add an element with the class .tooltip and use data-text="" to specify the tooltips text.

				
<p>Lorem ipsum <span class="tooltip" data-text="Hello">tooltip</span></p>
<p>Lorem ipsum <span class="tooltip" data-text="Hello">really loooooooooooong tooltip</span></p>
				
			

The base elements of text.

Code

Simply use the base HTML elements for text.

For emphasis on a subtitle, add the .subtitle class.

For white or black text, add the .color--white class or the .color--black class.

				
<h1>Heading 1</h1>
<h2 class="subtitle">Heading 2 which is a subtitle</h2>
<h3>Heading 3</h3>
<h4 class="color--white">Heading 4 which is white</h4>
				
			

A bunch of useful utility classes.

Code

Floats

Classes for floating and clearing elements.

• .left
• .right
• .clear

				
<p class="left">I'm floating left.</p>
<p class="right">I'm floating right.</p>
<p class="clear">I'm clearing both.</p>
				
			

Display

Classes for changing the display attribute on an element.

• .inline
• .inline-block
• .block

				
<p class="inline">I'm inline.</p>
<p class="inline-block">I'm inline-block.</p>
<p class="block">I'm block.</p>
				
			

Padding & Margin

By default, the grid system will apply padding and vertical margins. To remove these, use these classes.

• .no-pad
• .no-margin
• .no-margin-vertical

				
<div class="g--1 no-pad">I have no padding.</div>
<div class="g--1 no-margin">I have no margin.</div>
<div class="g--1 no-margin-vertical">I have no vertical margins.</div>
				
			

Centering

Classes for centering text or elements.

• .center
• .text-center

				
<p class="center">I have margin: 0 auto</p>
<p class="text-center">I have text-align: center</p>