Classless.css

Less classes. Less overhead.

Classless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus a few classes for grid and spacing. Nothing more. Nothing less.

Features

Getting Started

Link to online version
You can simply insert the following two lines into your HTML file.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="http://emanuel.regnath.info/classlesscss/classless.css" />
    
Look at this Code
The page you are seeing right now, is already a demo of Classless.css, we do not use any additional custom CSS files.

Text Elements

The typography of Classless is purely based on CSS3.

You can use the standard html5 tags such as <b> or <strong> for bold text, <i> or <em> for italic text and <u> for underlined text.

Use <sub> for subscripts like in H2O.

This small text uses <small> for for fine print, etc.

This big text uses <big> for a lead paragraph

Inline quotations with <q> such as This is Lars’ car! insert automatically the correct quotation marks.

This is a citation.

The dfn element indicates a definition.

The mark element indicates a highlight.

The variable element, such as x = y.

The time element:

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

Headings

Here are the headings h1 to h6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lists

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Definition List

Term
A Term is defined by this definition.

Code

You can use inline code such div with <code>div</code> or show keyboard inputs such as Ctrl+C with <kbd>Ctrl+C</kbd>.

Code Listing

main(int a){
  println("hello world")
}

Pre-formatted text

  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~ 

Tables and Figures

Tables

Classless applies some modern styling on the standard table elements. All columns except the first one are right aligned by default which makes it easy to compare numbers. Of course you can change this behavior with our utility classes.

Classless Skeleton Milligram Sakura
Features responsive,
grid, navbar,
cards, utilities
responsive,
grid
responsive,
grid, utilities
responsive
Size* 8.6 kB
300 LOC
11.2 kB
400 LOC
10.3 kB
600 LOC
3.3 kB
165 LOC
Reset tiny reset normalize normalize none
Browsers Chrome, FF Chrome, FF Chrome, FF, Opera
IE, Edge, Safari
Chrome, FF
License MIT MIT MIT MIT
Table 1: Comparison of different minimal CSS frameworks

* readable, non-minified code (these tiny libs don't need minimizers)

Figures

Image alt text
Here is a caption for this image.
<div>
  <figure>
    <img src="http://placekitten.com/420/420" alt="Image alt text">
    <figcaption>Here is a caption for this image.</figcaption>
  </figure>
</div>

Horizontal rules


<hr>

Extra

These features are included but are marked as extras such that you can easily remove them from the CSS file in case you do not need them.

Navigation Bar

Yes! Just 30 lines of CSS code for a simple yet full responsive navigation bar including dropdown menus and callapsing items on mobile phones.

<nav>
  <ul>
    <li>Brand</li>
    <li><a href="#">Item </a></li>
    <li><a href="#">Menu ▾</a>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
      </ul>
    </li>
    <li class="float-right">Right</li>
  </ul>
</nav>

Margin Notes

You can place side notes using the <aside> element.

Form elements

Input fields


Checkboxes and Radiobuttons

Checkboxes

Radio buttons

Buttons

Bootless.css

Some concepts, such as grids and cards, are not covered by the default html5 tags and require CSS classes. Therefore, Classless defines a few classes with the same class names as the popular framework Bootstrap.

Grid System

Classless provides a simple grid system with the same class names as bootstrap.

Colum 1/2

This text is on the other side explaining something. If the width of the viewport is small enough, this text should be visible below the the heading on the left.

<div class="row">
  <div class="col">
    <h4>Column 1/2</h4>
  </div>
  <div class="col">
    <p>This text is on the other side ...</p>
  </div>
</div>

Columns

There are also classes for columns with special width such as .col-4 (4/12) resulting in one third of the width:

Colum 1/3

Colum 2/3

Colum 3/3

and also .col-3 (3/12) resulting in 4 cols:

Colum 1/4

Colum 2/4

Colum 3/4

Colum 4/4

If you use a .col-X with limited width, the other .col will take up the remaining space:

Colum 1/3

This text is on the other side explaining something. If the width of the viewport is small enough, this text should be visible below the the heading on the left.

Cards

If you want to group special content from the normal text flow, cards will be your friends.

Card Heading


This is the card body.

<div class="card">
  <h4>Card Heading</h4>
  <hr>
  <p>This is the card body.</p>
</div>