Style Guide 3 (Simple CSS)

This demo page details a select set of elements that are meant to show off Simple.css’s styling, and provide HTML to help you get started easily. If you want a comprehensive demonstration of elements that may or may not be styled by Simple.css, please see our test page.

This page is a demonstration of the elements that can be formatted using Simple.css. Each section includes a code block on how to include it in your site’s design.

This may be a little basic for some people, but I wanted the barrier for entry to be as low as possible for this project.

Basic Typography

All the typography of Simple.css uses rem for sizing. This means that accessibility is maintained for those who change their browser font size. The body element has a size of 1.15rem which makes all the standard font sizes slightly larger. This equates to 18.4px for paragraph text, instead of the standard 16px.

The heading elements also have an increased top margin in order to break blocks of text up better.

Heading 1 3rem

Heading 2 2.6rem

Heading 3 2rem

Heading 4 1.44rem

Heading 5 1.15rem

Heading 6 0.96rem

This is a H2 header

This is some paragraph text.

Links & Buttons

Links are formatted very simply on Simple.css (shock horror). They use the accent CSS variable and are underlined. There is a :hover effect that removes the underline.

Buttons use the same accent CSS variable for their colour. When hovering, there is an opacity effect.

I’m a hyperlink

I’m a button

I’m a button with a link

I'm a hyperlink

I'm a button

I'm a button with a link

Other typography elements

There are a number of other typography elements that you can use with Simple.css. Some of the common ones are:

• All the standard stuff, like bold, italic and underlined text.
• Highlighting text using the mark element.
• Adding inline code using the code element.
• Displaying keyboard commands like ALT+F4 using the kbd element.

Bold text
Italic text
Underlined text
Highlighted text
Inline code
Alt+F4

Lists

We all love a good list, right? I know my wife does!

• Item 1
• Item 2
• Item 3

1. Do this thing
2. Do that thing
3. Do the other thing

# Bulleted list

  
Item 1
  
Item 2
  
Item 3


# Numbered list

  
Do this thing
  
Do that thing
  
Do the other thing

Blockquotes

Sometimes you may want to quote someone else in your HTML. For this we use the blockquote element. Here’s what a quote looks like with Simple.css:

Friends don’t spy; true friendship is about privacy, too.

– Stephen King

  
Friends don’t spy; true friendship is about privacy, too.
  
– Stephen King

Code blocks

Code blocks are different from the inline code element. Code blocks are used when you want to display a block of code, like this:

body {
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
}

  body {
    color: var(--text);
    background: var(--bg);
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 0;
  }

Other HTML elements

There are other HTML elements that are formatted in Simple.css. If you think there should be more added, please log an issue on GitHub

Notice box

This is a notice box. It’s useful for calling out snippets of information. Cool, huh?

This is a notice box. It's useful for calling out snippets of information. Cool, huh?

Aside

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Article

This is an article
Some content will go here, which will be inside your article.

Section

Sections are good for splitting up a page into multiple…sections. 🙃

This is a section
Some content will go here, which will be inside your section.

Navigation

The nav menu is deliberately designed to be extremely simple so that you can improve on it as you see fit. Or, just leave it as is to have a good looking, functional navigation menu.

Navigation menus inside the header are automatically formatted like the one on this site. If you decide to put a nav menu elsewhere on your site, for example in a post for a table of contents, no formatting is applied. This is so you can add your own formatting as you see fit.

There’s no JavaScript or checkbox CSS hacks here. It’s just a collection of simple “buttons” that wrap to the given width of the page.

The nav menu will also adapt to smaller screens automatically so that it doesn’t take up too much space.

To add a nav menu, just add the following to the

section of your site:

Images

In Simple.css, images within the main element are always full width and have rounded edges to them. The figcaption element is also formatted in Simple.css. Here are examples of images with and without a caption:

# Standard image


# Image with a caption

  
  

Details & Accordions

Details elements are cool to play with. They’re especially useful when it comes to things like FAQ pages. Many people invoke JavaScript, or div for life when they use accordions. I don’t really understand why that is when it’s available in plain old HTML:

Spoiler alert!

You smell. 🙂

  
Spoiler alert!
  
You smell. 🙂

The details element can also be made to work as an accordion where one element opens and others in the list close. Like this:

FAQ 1

Can you smell that?

FAQ 2

Something really stinks.

FAQ 3

Oh, it's you. 🙂

To do this, you need to group the details elements together with a name, like this:

  
FAQ 1
  
Can you smell that?



  
FAQ 2
  
Something really stinks.



  
FAQ 3
  
Oh, it's you. 🙂

Tables

Like lists, sometimes you may need to add a table to your webpage. In Simple.css tables automatically highlight every other row to make reading easier. Table header text is also bold. Here’s what they look like:

Name	Number
Jackie	012345
Lucy	112346
David	493029
Kerry	395499
Steve	002458

  

    

      
Name
      
Number
    
  
  

    

      
Jackie
      
012345
    
    

      
Lucy
      
112346
    
    

      
David
      
493029
    
    

      
Kerry
      
395499
    
    

      
Steve
      
002458
    
  

If your table is too wide to fit on the page, wrap it in a

element to add horizontal scrolling:

Name	Number	Opinion on cheese	Favourite tea	Colour of choice	Unusual fact	Horse?
Jackie	012345	Sometimes	Earl grey, hot	Blue	Communicates exclusively in metaphors	Aye
Lucy	112346	Only on Tuesdays	The green one	The green one	Caught a glimpse of an Australian badger	Aye
David	493029	Always eat the rind	London fog	Purple	Has never been to London	Aye
Kerry	395499	It's on the moon	Camomile	Yellow	Has been to the moon	Aye
Steve	002458	No	Black tea brewed using ISO 3103	Chestnut	Has a 350° field of view	Neigh

  

    

      

        
Name
        
Number
        
Opinion on cheese
        
Favourite tea
        
Colour of choice
        
Unusual fact
        
Horse?
      
    
    

      

        
Jackie
        
012345
        
Sometimes
        
Earl grey, hot
        
Blue
        
Communicates exclusively in metaphors
        
Aye
      
      

        
Lucy
        
112346
        
Only on Tuesdays
        
The green one
        
The green one
        
Caught a glimpse of an Australian badger
        
Aye
      
      

        
David
        
493029
        
Always eat the rind
        
London fog
        
Purple
        
Has never been to London
        
Aye
      
      

        
Kerry
        
395499
        
It's on the moon
        
Camomile
        
Yellow
        
Has been to the moon
        
Aye
      
      

        
Steve
        
002458
        
No
        
Black tea brewed using ISO 3103
        
Chestnut
        
Has a 350° field of view
        
Neigh
      
    
  
  

Forms

Forms are useful for all kinds of things on webpages. Contact forms, newsletter sign ups etc. Forms also look pretty good on Simple.css:

This is just a test form. It doesn't do anything.

Title Mr Miss Mrs Other

First name

Surname

Email

Enquiry type: Sales Support Billing

Message

Choose a car: Volvo Saab Opel Audi

I agree to the terms and conditions

Send Reset Disabled

  
This is just a test form. It doesn't do anything.

  

    Title
    Mr
    Miss
    Mrs
    Other
  

  

  First name
  
  

  

  Surname
  
  

  

  Email
  
  

  

  Enquiry type:
   Sales 
   Support 
   Billing
  

  

  Message
  
  

  

  Choose a car:
  
  Volvo
  Saab
  Opel
  Audi
  
  

  

  
  
  I agree to the terms and conditions
  
  

  Send
  Reset
  Disabled