Classless.css

Less classes. Less overhead.

Abstract

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. With the basic tag styling, Classless provides a solid appearance for simple article pages without any classes. If you need more fancy features such as grid or cards – which are infeasible with basic HTML5 – we provide a few Bootstrap compatible classes.

Features

¹: we import the font 'Open Sans' but if it fails, we fallback to Helvetica.
²: we also offer a pre-made tiny version (90 lines) with only the base styles.

Getting Started

For testing, you can simply insert the following line into your HTML file. For production, please host the classless.css file yourself.

<link rel="stylesheet" href="https://classless.de/classless.css">
Tiny Version

We also offer a pre-made tiny version (90 lines, 2.6 kB) with only the most basic styles for text, tables, figures, and code.
Test now:

<link rel="stylesheet" href="https://classless.de/classless-tiny.css">
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.

A Short Classless Article

E. Regnath,

An image

Simple but Elegant

Text in from of paragraphs is the main ingredient for most articles. Therefore, the appearance of text over multiple lines will account for the basic look & feel. The initial drop letter on the first paragraph will set a visually exiting impression. Note that this is automatically inserted for the first paragraph inside an <article> tag and does not require any additional styling.

The typography of Classless is purely based on CSS3. W3C: CSS Values and Units Module Level 3, 2019 You can use the standard HTML5Wikipedia: HTML5 tags to emphasize certain words. Inline quotations with <q> such as This is Lars’ car! will insert automatically the correct quotation marks. Block quotations are also possible:

Some people say, How can you live without knowing? I do not know what they mean. I always live without knowing. That is easy. How you get to know is what I want to know.

Richard P. FeynmanRichard P. Feynman: “The Meaning of It All: Thoughts of a Citizen-Scientist”, 1997

Mini Sections:

Use the <h6> tag to create a bold inline heading for the first paragraph. To do this we also have to inline that paragraph.

However, the following paragraph will be displayed as block again.

Tables, Figures & Code Listings

In typesetting systems (e.g LaTeX) it is easy to define several environments that will have their own number and caption. We try to reproduce this behavior for the most common environments: 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,
themes, navbar,
cards, utilities
responsive,
grid
responsive,
grid, utilities
responsive
Size* 11.2 kB
400 LOC
11.2 kB
400 LOC
10.3 kB
600 LOC
3.3 kB
165 LOC
Reset tiny reset normalize normalize normalize
Browsers Chrome, FF,
Edge
Chrome, FF Chrome, FF, Opera
Edge, Safari
Chrome, FF
License MIT MIT MIT MIT
Comparison of different minimal CSS frameworks.
* readable, non-minified code (these tiny libs don't need minimizers)

Even more advanced tables are possible. We apply extra styling in case you specify a rowspan or colspan attribute for the <th> tags of the table header.

Name CSS File Browser Support Dependency License
LOCSize
Classless 40011.2 kB ? none MIT
Classless Tiny 912.6 kB ? none MIT
Skeleton 40011.2 kB ? normalize MIT
Milligram 60010.3 kB ? normalize 8.0 MIT
Sakura 1653.3 kB ??? (normalize) MIT
A more complex table. Still no classes.

Figures

Visual elements are important components for appealing documents. Figures such as diagrams or graphs should be encapsulated within a figure element. The image within the figure will be centered by default and shrinks with the screen width.

Image alt text
This is the first figure of this article that has a caption. The label with number will be inserted automatically if placed inside an article.

How about subfigures?

Image alt text
First Subfigure
Image alt text
Second Subfigure
Example of a figure with two subfigures. Left you see a cat, right you see also a cat.

Code Listing

You can use inline code, such as div, or show keyboard inputs, such as Ctrl+C. However, larger code examples require their own block environment.

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

Unfortunately, captions for listings do not work perfectly at the moment. If you want to provide a caption for the listing, you have to place it inside a figure environment. However, it will be called Figure.

main(int a){
  println("hello world")
}
The caption for the listing.

While dynamic code highlighting does not work without JavaScript, you can use a static, CSS-based code highlighter that will do the styling based on <span> tags with classes.

References

  1. W3C: CSS Values and Units Module Level 3, 2019
  2. Wikipedia: HTML5
  3. Richard P. Feynman: “The Meaning of It All: Thoughts of a Citizen-Scientist”, 1997

Basic Styling

The following sections provide more detailed but artificial examples of the appearance of different HTML-tags that are styled with Classless.

Typography

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 Anna shouted: This is Lars’ car!, when he saw him. 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:

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>

Tables

The basic HTML tables allow already quite complex layouts. As often seen in professional tables, we omit vertical lines and and only insert horizontal lines as visual separation.

Head 1 Head 2
A B
C D
Use of thead and tbody.
<table>
 <thead>
  <tr>
   <th>Head 1</th>      
   <th>Head 2</th>      
  </tr>
 </thead>
 <tbody>
      ...                
 </tbody>
 <caption>Use of ...</caption> 
</table>
Test Ctrl
AB
42X
Cells spanning several rows or columns.
<table>
 <tr>
  <td colspan="2">Test</td>
  <td rowspan="2">Ctrl</td>
 </tr>
 <tr>
  <td>A</td><td>B</td>
 </tr>
 ...
</table>
Test Ctrl
AB
42X
A table in a figure environment will be centered and produce a scrollable overflow on mobile devices.

Lists

In order to display several aspects in a concise way, lists as shown in the following are useful and also deserve a proper spacing.

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.

Here, we have also demonstrated the basic usage of rows and columns, which will automatically rearrange once the page width falls below a certain threshold. This ensures that the page will also look well on small tables and phones.

Misc

Some other elements

A summary heading that spans multiple lines can briefly tell you something. If you want to know more, you have to click.

These are the details that only become visible once you click on the the summary heading. This is great to hide supplementary information by default.

  • A summary in a list

    These are the details that only become visible once you click on the the summary heading. This is great to hide supplementary information by default.

  • Second Item

A test video
A simple inline svg.

Math

Math would have been possible without JavaScript but Google dropped support for MathMLCNET: “Google subtracts MathML from Chrome, and anger multiplies”, 2013. The common alternatives are MathJax and KaTeX. While Classless does not support math on its own, it looks very decent in combination with KaTeX default settings.

KaTeX Examples

The term $\sqrt{a^2 + b^2}$ is an example of a KaTeX equation. Displaystyle equations are $$\int x^2 \mathrm dx$$

$$x = \frac{ - b \pm \sqrt {b^2 - 4ac} }{2a}$$
A Math example

Extra Styling

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 collapsing 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. The side notes are considered supplementary and are not omitted on narrow screens with a width lower than 40rem. So, if you read this on a mobile device, you cannot see the side note.

Form elements

If you want to use forms, you will need PHP or JavaScript, which then exceeds the typical usecase of a simple article. However, to create a consistent appearance, Classless provides some basic styling on these elements as well.

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>