quick.css

A CSS framework for web developers who do not have time.

Examples

There are demos of Quick.css capabilities. If you open the source code of this page you'll see all of them.

Sections

Headings

H1 - H6 represent headings for their sections.

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Sub heading

For sub-heading use the tag <hgroup>.

Level 1 Heading

Level 2 Heading

Note the absence of margins between level 1 and level 2.


Navigation

In <nav> element use unordered list if you want horizontal menu. Otherwise you can use ordered list for vertical menu.

Horizonthal navigation

This is good choose for main menu.

Vertical navigation

This is good choose for table of content.


Address

Addresses are also styled to be awesome!

john.doe@example.com
778-330-2389
666-666-6666

Grouping

The tag <hr>

The hr element represents a paragraph-level thematic break and look like:


The tag <pre>

The <pre> element represents a block of preformatted text. To represent a block of computer code, the <pre> element can be used with a <code> element like in this case:

<h2>Code formatting</h2>
<p>If you need a good syntax highlight for your code, check the <a title="Good plugins" href="plugins.html#highlightjs-prismjs">Plugins</a> section.</p>

The tag <blockquote>

Simplicity is the ultimate sophistication.

- Leonardo Da Vinci

The lists

Use standard <ul>, <ol> and <dl> tag.

Unordered list look like this:

  • Italy
  • Norway
  • Switzerland
  • United Kingdom
  • United States

Ordered list look like this:

  1. Italy
  2. Norway
  3. Switzerland
  4. United Kingdom
  5. United States

And definition list look like this:

What do we want?
Our data.
When do we want it?
Now.
Where is it?
We are not sure.

The tag <figure>

quick css visual
The image for open graph protocol

Text-level semantics

The tag <em> is for stress emphasis.

The tag <i> is for alternate voice or mood.

The tag <strong> is for important piece of content.

The tag <small> is for side comments.

The tag <kbd> is for keyboard command like ctrl + c.

The tag <sup> is for superscript Sup©.

The tag <sub> is for subscript Sub®.

The tag <mark> is for a run of text in one document marked or highlighted for reference purposes.

Edits

The tag <ins> is for inserted piece of content.

The tag <del> is for deleted piece of content.

Embedded

The tag <img>

quick css logo
Logotype for quick css framework

The tag <audio>

"New Beginning" music by Twisterium/freebackgroundtracks.net is licensed under Creative Commons license Attribution-ShareAlike 4.0 International.

The tag <video>

Video by José Manuel de Laá from Pixabay.

Tabular

Name Quantity Price
CMS 1 1.200,00 €
Theme 1 800,00 €
Plugin 8 800,00
Total 10 2.800,00 €

Forms

Form with fieldset tag look like this:

Example of all form elements

Form without fieldset tag look like this:

Interactive

The details and summary tag

Copying... 25%
Transfer rate:
452KB/s
Local filename:
/home/rpausch/raycd.m4v
Remote filename:
/var/www/lectures/raycd.m4v
Duration:
01:16:27
Color profile:
SD (6-1-6)
Dimensions:
320×240