Web Starter Kit

Visual Style Guide

#01 Typography

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

#02 Buttons

Primary

Secondary

#03 Lists

Default lists

ul

  • Lorem ipsum dolor sit amet.
  • Dicta optio cumque dolore hic ea facilis
  • Minus, possimus, veniam, incidunt eligendi

ol

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi

Default lists of links

ul

ol

#05 Icons

Icon Circles

Icon Circles - Themed

Icon Circles - Large

#06 Breadcrumbs

#07 Table

Element Availability Description Description
src All browsers Gives the address (URL) of the video. Gives the address (URL) of the video.
poster All browsers Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins. Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
Element Availability Description
src All browsers Gives the address (URL) of the video.
poster All browsers Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
Element Availability
src Rules applied for any browser width over the value defined in the query.
poster Rules applied for any browser width over the value defined in the query.

Note: markdown isn't recognized in tables, therefore any code blocks should be wrapped in <code> tags.

#08 Grid

Consistent grid classes

#09 Colours

Blacks

  • gray-background
  • gray-keyline
  • gray
  • gray-dark

Themes

  • layouts
  • layouts secondary
  • user
  • user secondary
  • media
  • media secondary
  • performance
  • performance secondary

Google

  • blue
  • blue secondary
  • green
  • green secondary
  • red
  • red secondary
  • yellow
  • yellow secondary

Helpers

  • text
  • highlight
  • warning
  • danger
  • muted
  • remember
  • learning

#10 Highlights

Remember

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Key Takeaways

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

Remember

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code Samples

    <!DOCTYPE html>
    <html lang="en">
      <head>
            <title>Article Example: sample example</title>
      </head>
      <body>
        <div role="main">
          Hello, world.
        </div>
        </body>
    </html>
View full sample
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Key Takeaways

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

Remember

  • Lorem ipsum dolor sit amet
  • Fugit itaque sapiente earum quo expedita
  • labore aliquam cupiditate veritatis nihil

#11 Editorial header

Layout Basics

What is the viewport?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Sed vitae varius augue, eu varius dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Donec augue diam, scelerisque eget lectus in, posuere aliquet mi. Pellentesque suscipit nisl gravida sem tincidunt, id blandit turpis commodo.

#12 Article section

4 guides

  1. Layout basics

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

    See all lessons
  2. Basic layouts

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

    See all lessons
  3. Layout patterns

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

    See all lessons
  4. UI Elements

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.

    See all lessons

#13 Guides section

Documentation

Follow these guides and build web content users can access on any device they choose.

#14 Page header

#15 Quote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, illum, at quis vero nam minus incidunt consequatur reprehenderit aliquid blanditiis fugiat nihil dolor tempora distinctio ipsum quisquam debitis excepturi magni.

Name / Details

#16 Featured icons

#17 Featured spotlight

#18 Featured list

#19 Featured block

#20 Article navigation