Classless

This is the example page for stylize.css

Classless is a collection of CSS styles that allows me to compare various CSS classless libraries.

With classless libraries, HTML is king while CSS is a supportive element that only makes HTML look better.

I used the same demo page for all libraries, if you want to see the other demos go to the home page.

Examples

There are demos of stylize.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

Navigation

Usually in <nav> element use ordered or unordered list menu.

This is a unordered list in nav tag.

This is a ordered list in nav tag.


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 <abbr> is for abbreviation like abbr..

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