Table of Contents

• Introduction
• Anchors
• Articles
• Badges
• Block quote
• Bread crumbs
• Buttons
• Colors
• Comments
• Components
• Figures
• Forms
• Gallery
• Hints
• Images
• Lists
• Media
• Media box
• Modals
• Navigation
• Pre-formatted
• Print
• Prototype
• Responsive
• Screenshot
• Tables
• Tabs
• Tags
• Tree
• Typography
• Utilities
• Vertical rhythm
• 🔍︎ (search)

Introduction

This is a style guide for Sweet CSS. No comments. Look at the (pretty) plain HTML.

Todo

• Split layout, typography, provide a light version for web games

Anchors

Link (external)

Visited link (external)

Hovered link

Active link

Anchored mediabox

TODO hide underline a > * TODO boxing borders

Articles

Sweet CSS can be used with or without articles. The main article content can be wrapped in a class .content (deprecated) for outstanding items (tables, figures, pre-formatted code). In fact .content can be used on anything (main, article, body) to make content reasonable width. Don't nest it however (or do if you like).

TODO prototype article with headings

012345678901234567890123456789012345678901234567890123456789

Badges

Also know as labels. To be used with contextual background classes (bg-info, bg-ok, bg-warning, bg-danger).

Block quote

TODO >cite<?

Henk wrote some time ago

There is no business like show business.

Bread crumbs

1. one
2. two
3. three

Buttons

Colors

.primary-color

primary

.brand-color

brand

.secondary-color

secondary

.tertiary-color

tertiary

.body-color

body

.background-color

background

.text-color

text

Comments

Using nested block quotes:

Sjaak, 30 November

Lets agree we disagree.

Ricky, 30 November

No!

Components

Details

Figures

Figures can be wrapped around almost anything. But please keep it semantic!

Forms

Plain

We have to think about this. Input should be smaller than textarea. Should input 80% and textarea 100% of form and let form determine the width?

As well: aside, section, article, forms (or fieldsets?) are at the same level. They are blocks with or without a title that is visually separated from the block (what if forms are nested within articles?).

Form without fieldset:

Fields should be wrapped in labels. Using the for attribute is possible but not needed (except for some screen readers?).

Plain with label-wrapped inputs

The parent form or field sets the total width.

Inline search form

Note that the input and button should not have whitespace in HTML.

Using a field set

Better not wrap this in an article(?)

Check boxes

Check boxes and radio buttons are grouped using a (nested) fieldset.

Using a nested fieldset:

TODO needs some tweaking to the nested legend to visual distinquish it.

Radio buttons

Other field types

Gallery

It has responsive masonry-like columns.

figure
table
video
image
pre
text

canvas

figure

figure

Hints

Ⓘ

Images

Images within articles are responsive by default. Outside articles they need a class .responsive.

Lists

• Unnumbered item 1 item item item item item item item item item item item item item item item item item item item item item tem item item item item item item item item item item item item item item item item item item tem item item item item item item item item
• Unnumbered item 2
• Unnumbered item 3

1. Numbered item 1
2. Numbered item 2 item item item item item item item item item item item item item item item tem item item item item item item item item
3. Numbered item 3

Nested

1. one
2. two
   1. one
   2. two

Flat list .flat

• Unnumbered item 1
• Unnumbered item 2 item item item item item item item item item item item item item item item item item item item item
Unnumbered item 3

Definition list

Definition term

Definition description

Long definition term term term term term term term term term term term term term term term term term term term term term term term term term term term

Long definition description description description description description description description description description description description description description description description description description

Definition term

Definition description description description description description description description description description description description description description description description description description

Media

Audio element

Video element

Canvas element

Media box

Apple!

Lorem ipsum....

TODO stretched a instead of surrounding a

TODO smaller h1 and h2, width, padding so it can be used for article previews.

Modals

Modals are always behind an (unqiue) anchor.

Click me!

Navigation

Priority menu. TODO less important items will be floated to a dropdown on smaller screens.

Pre-formatted

Pre-formatted elements belong to the outstanding items (see there). They can be used within or without figures. Comes with line-numbers for free when lines are wrapped in code tags.

line 1
	line 2
		line 3
	line 4
line 5

line 1
line 2

Another one without class name:

01234567890123456789012345678901234567890123456789012345678901234567890123456789
0         1         2         3         4         5         6         7         

Watch your white-space!

Inline elements

<code></code>

<kbd></kbd>

<output></output>

<samp></samp>

<var></var>

Print

Environment friendly.

Prototype

Wireframe look to distinguish examples from actual site design to prevent misclicking. Responsive though.

Acme™

User list

Name	Surname
Jane	Doe	edit
John	Smith	edit
2 persons

Responsive

Due to no hardcoded widths everything is responsive by nature. The only media query is used on <article> to keep line length within reasonable limits.

TODO responsive SVG

Screenshot

To get a more outstanding screenshot and prevent users from confusing the screenshot with an actual site or application .screenshot can be used on a figure to make it stand out. The figcaption is optional but can be used to create a window caption.

Tables

No need for a class .table because you know why.

Table without thead, tbody and tfoot sections.

C64 directory listing

C64 video matrix

Tabs

Target IDs should be unique over the page.

Unordered

• Tab a

  Tab 1 content

• Tab b

  Tab 2 content

Ordered / numbered

1. Tab 1

   Tab 1 content

2. Tab 2

   Tab 2 content

Tags

Tree

• grandma
• grandpa
  • father
  • mother

• grandma
• grandpa
  • father
  • mother

Typography

Bold text or Strong text

Italic or Emphasized text

Strikeout text

Superscript^sup

Subscript_sub

Deleted text

Inserted text

A short quote

A definition is a description of something

abbr.

Utilities

Text emphasis

.text-ok

This is totally OK!

.text-info

Dinosaurs did not have opposing thumbs.

.text-warning

Be quiet if I talk.

.text-danger

This looks wrong to me :-(

Background emphasis

.bg-ok

This is totally OK!

.bg-info

Dinosaurs did not have opposing thumbs.

.bg-warning

Be quiet if I talk.

.bg-danger

This looks wrong to me :-(

Vertical rhythm

Add #notelines as anchor to see it in action.