Classless

This is the example page for no-class.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 no-class.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