# Web Starter Kit

## Visual Style Guide

1. Typography
2. Buttons
3. Lists
4. Links
5. Icons
6. Breadcrumbs
7. Table
8. Grid
9. Colors
10. Highlights
11. Editorial header
12. Article section
13. Guides section
14. Page header
15. Quote
16. Featured icons
17. Featured spotlight
18. Featured list
19. Featured block
20. Article navigation

## #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

Use our tool

#### Secondary

Use our tool
Use our tool

## #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

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

- 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

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

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

1. Layout basics
2. Basics layouts
3. Layout patterns

1. Layout basics
2. Basics layouts
3. Layout patterns

## #04 Links

#### Primary

Use our tool

#### Secondary

Use our tool

Lorem ipsum dolor sit amet, consectetur adipisicing elit. use our tool Fugiat, quam alias voluptatem tempora minus dolor facere cumque necessitatibus placeat velit aliquid ab dolore beatae. Neque ipsam in a illum repellendus?

## #05 Icons

#### Icon Circles

#### Icon Circles - Themed

#### Icon Circles - Large

## #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>

`

    <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.

- ### Multi-Device Layouts

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, velit, illum iure id in saepe laborum. Doloribus, eaque, assumenda inventore eos iusto tenetur error dolorem suscipit molestiae natus ullam aliquam?

  1. Responsive Web Design Fundamentals
  2. Responsive Web Design Patterns
  3. Navigation and Action Patterns

- ### Images, Audio and Video

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, fugit ea maiores omnis ad iste autem sed reiciendis amet quam deleniti sapiente laboriosam voluptate pariatur veniam quod beatae sunt architecto?

  1. Images
  2. Video
  3. Audio

- ### Forms and User Input

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, adipisci, aspernatur. Velit, consequatur, temporibus, neque minus obcaecati dolor officia architecto voluptatem et pariatur quo vitae saepe laborum ratione eum. Soluta.

  1. Create Amazing Forms
  2. Add Touch to Your Site

- ### Optimizing Performance

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ratione officia officiis natus illum quos cumque quis! Optio, dolore, eligendi ea culpa quod esse atque architecto reprehenderit at tempora itaque!

  1. Critical Rendering Path
  2. Optimizing Content Efficiency

## #14 Page header

### Multi-screen layouts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, optio, ad, voluptates repudiandae at excepturi error delectus explicabo nulla eum provident quibusdam ipsum sapiente culpa sequi quia unde fuga id.

## #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

- ### Multi-Device Layouts

  Create flexible, not fixed, layouts.

- ### Images, Audio and Video

  Only use media that loads fast and scales.

- ### Forms and User Input

  Touch, tap, click, and submit.

- ### Optimizing Performance

  Performance is a feature.

## #17 Featured spotlight

### Featured spotlight

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

View Google

## #18 Featured list

- ### Case study

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.

  View Google

- ### Case study

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.

  View Google

## #19 Featured block

### Next Lessons

1. Lesson title one
2. Lesson title two
3. Lesson title three
4. Lesson title four
5. Lesson title five

## #20 Article navigation