Less classes. Less overhead.

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


Getting Started

One-Click Testing
For testing, you can simply insert the following two lines into your HTML file. For production, please host the classless.css file yourself.

<link href=",400" rel="stylesheet">
<link rel="stylesheet" href="">
Look at this Code
The page you are seeing right now, is already a demo of pure classless.css. We do not use any additional 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.

Sometimes, I need to delete, insert, or mark certain words.

The dfn element indicates a definition.

The variable element, such as x = y.

The time element:


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.


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>


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

A Term is defined by this definition.


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


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
grid, utilities
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
Table 1: Comparison of different minimal CSS frameworks

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


Image alt text
Here is a caption for this image.
    <img src="" alt="Image alt text">
    <figcaption>Here is a caption for this image.</figcaption>

Horizontal rules



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.

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

Margin Notes

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

Form elements

Input fields

Checkboxes and Radiobuttons


Radio buttons



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 class="col">
    <p>This text is on the other side ...</p>


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.


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>
  <p>This is the card body.</p>