Style Guide

Work in progress overview of styles available, divided in 6 sections.
A style guide helps to define a common visual language for the components of this website.

Base principle: everything should be as consistent and responsive as possible, and enjoyable both in light and dark mode.

Grid system

This is a standard cross-browser 12 column fluid grid system to be modified according to the specific use.

The columns fill the 100% of the width when the viewport size is less than 1100px:
@media (max-width: 1100px) { 
  .columns { 
    width: 100% 
  } 
}

No nesting, re-ordering or alignments for the sake of simplicity. One standard breakpoint at 768px for responsive design adding an optional class to the main container.
It could be added a Flexbox grid system like Bootstrap Grid or Bulma for complex tasks.

100%
91.66%
83.33%
75%
66.66%
58.33%
50%
41.66%
33%
25%
16.66%
8.33%

Colors

#fbfbfb
#bebebe
#999
#666
#111
#ffc107
#f95c1f
#d8450b
Quick and easy reusable color palette via Sass variables.
// texts
$gray-light-extra: #e9e9e9;
$gray-light: #bebebe;
$gray-mid: #555353;
$gray: #999;
$gray-dark: #666;
$gray-dark-extra: #444;
$dark: #333;
$dark-extra: #222;

// links and buttons
$orange-light: orange;
$orange: #f95c1f;
$orange-mid: #df4206;
$orange-dark: #b62e0c;
// backgrounds and details
$white: #fff;
$light: #fbfbfb;

// backgrounds and details (dark mode)
$black-light: #111;
$black: #000;

// outlines (e.g 'a:focus')
$yellow: #ffc107;

Text elements

Every text element should be responsive on every browser and viewport size. Avoid a horizontal scrollbar as much as possible.
Some elements (e.g. headings) could change in size based on the width of the viewport.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Inline text elements

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element placeholder image example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example

Paragraphs

This a default paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a serif font-family paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This a monospace font-family paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

This is a leading paragraph:
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.

This a truncated paragraph at 275px width:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

pre

L          TE
  A       A 
    C    V
      R A
      DOU
      LOU
    REUSE
    QUE TU
    PORTES
  ET QUI T'
  ORNE O CI
    VILISÉ
  OTE-  TU VEUX
    LA    BIEN
  SI      RESPI
          RER       - Apollinaire
        

pre code

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>...</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  <script src="app.js"></script>
</body>
</html>

blockquotes

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Tom Whatever
Even better philosophical quote marked up with just a <blockquote> element.

Ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Unordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Styled list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Emoji

This the official UNICODE V12.0 list of 3,245 emojis.
Copy and paste them directly in the code or use a codepoint replacing U+1 with &#x. This is an hamburger & # x 1 F 3 5 4 (spaced for documentation only) 🍔.

The first cell has a codepoint inside, the others have a copied and pasted emoji.
🔥 😁 🀣 😍 😝 😴 😡 😎
πŸ™‰ πŸ’˜ πŸ’― πŸ’₯ πŸ‘‹ πŸ‘Œ ... ...

Embedded content

All these elements must be 100% responsive but the UI could be inconsistent between browsers and platforms.

Video and audio with controls

Progress and meter

350 degrees

Linked image in a figure with a caption

placeholder image
The image above is 800x400 pixels

YouTube iframe

Forms

100% width for <input>, <select> and <textarea> elements by default. In most cases, a container should be used to avoid cross-browser inconsistencies and accessibility issues.
The UI of some elements (e.g. <select> and checkboxes) could be inconsistent between browsers.

If needed, could be used some advanced CSS selectors to have more power without loosing accessibility.

Inputs

This a legend
60

Selects

Textareas

The buttons could be made with <button> (preferred), inputs or anchors. In all cases, the UI should be the same.

Buttons

Disabled buttons

Tables

The tables could be responsive (preferred) or have a inherited width.

Responsive tabular data

This is a caption
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
row1_cell1 row1_cell2 row1_cell3 row1_cell4 row1_cell5 row1_cell6 row1_cell7 row1_cell8
row2_cell1 row2_cell2 row2_cell3 row2_cell4 row2_cell5 row2_cell6 row2_cell7 row2_cell8
row3_cell1 row3_cell2 row3_cell3 row3_cell4 row3_cell5 row3_cell6 row3_cell7 row3_cell8
row4_cell1 row4_cell2 row4_cell3 row4_cell4 row4_cell5 row4_cell6 row4_cell7 row4_cell8
row5_cell1 row5_cell2 row5_cell3 row5_cell4 row5_cell5 row5_cell6 row5_cell7 row5_cell8
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8

Inherited width tabular data

This is a caption
Header1 Header2
row1_cell1 row1_cell2
row2_cell1 row2_cell2
row3_cell1 row3_cell2
Header1 Header2

Contact me

Marco Pontili picture

I’m a Front-End Developer and Web Designer from Italy, based in The Netherlands.

I have a decade of experience in building fast responsive UIs and customized websites for small and large companies.

If you would like to work with me, please feel free to drop me a line at . I’d love to chat!

You can also find me on LinkedIn, Github, Codepen and DEV.