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, cards 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.7 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 custom CSS to make this demo look better than what Classless provides.

Customize

Classless can be easily customized with just 15 lines of theme code at the start of the CSS file. To give you some examples of what is possible, you can switch between some pre-made themes that are inspired by popular CSS frameworks.

Switch theme now:

The styles of these themes are defined in the addons/themes.css. You can copy the code from there or include the following file:

<link rel="stylesheet" href="https://classless.de/addons/themes.css">

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.

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.8 kB none MIT
Classless Tiny 912.7 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.

Image alt text Inline img tags within a p tag will float to the right side and are suitable for smaller images that should not appear in their own figure environment. Floats will be cleared by the next heading.

Code Listings

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")
}

If you want to provide a caption for the listing, you have to place it inside a figure environment and use the <figcaption>. If the element before the caption is <pre>, it will be automatically labeled Listing.

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>
<thead>
 <tr>
  <td colspan="2">Test</td>
  <td rowspan="2">Ctrl</td>
 </tr>
 <tr>
  <td>A</td><td>B</td>
 </tr>
</thead>
 ...
</table>
Classless Skeleton Milligram Sakura
Features responsive, grid,
themes, navbar,
cards, utilities
responsive,
grid
responsive,
grid, utilities
responsive
Size 11.8 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
A table in a figure environment will be centered and produce a scrollable overflow on mobile devices.
* readable, non-minified code (these tiny libs don't need minimizers)

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

Summaries and Details

What is the Answer?

This. So summaries are probably a good solution for simple Q&As.

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

Meters

Meters can be used to display a percentage in form of a bar.

at 50/100

Videos and SVG

A test video

A simple inline svg. This caption is inside a p-tag.

Second paragraph inside a caption.

Extra Styling

Besides the basic styling, Classless also offers more advanced features that fall into two categories:

  1. Opt-Out Extras:These features are considered widely used and are included in the CSS file but are marked as extras such that you can easily remove them from the CSS file in case you do not need them.
  2. Opt-In Addons:These features are not included in the CSS file. If you want those, you need to add additional CSS files or copy their content into your main CSS. We add these as guidance on how to create an even more feature-rich website with a consistent Classless style.

Opt-Out Extras

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.

If the floating right elements should remain visible when collapsing, make sure that you place them directly after the first “Brand” item and give it the class sticky.

<nav>
  <ul>
    <li>Brand</li>
    <li class="float-right sticky">Sticky Right</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">Collapse</li>
  </ul>
</nav>

Margin Notes

You can place side notes using the <aside> element. The side notes are considered supplementary and are removed 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

Tooltips and Citations

A simple tooltip like this will also work. Simply put a data-tooltip attribute on any element that should display a tooltip.

a label

a <span data-tooltip="A tooltip note.">label</span>

Citation work within the <cite> tag and will automatically increase a counter. Just make sure to put exactly one child element within the <cite> tag.

The earth is flat.Myself at age 6

The earth is flat.
<cite><span>Myself at age 6</span></cite>

Grid System

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.

Classless provides the following simple grid system.

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. The most basic card looks like this:

Card Heading


This is the card body.

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

Any <img> directly within the card will span the full width.

Image alt text

Do not feed this cat.

<div class="card">
 <img src="..">
 <p>Do not feed this cat.</p>
</div>

Using <div class="card info">, you can also create info boxes.

Card Heading

This is the card body.

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

Instead of info, you can also use hint or warn to create the following box types:

Hint for Cards

The first <p> tag will be the card heading for info/warn.

Warning

The first <p> tag will be the card heading for info/warn.

Pro-Tip: The <details> tag is styled similar to cards and so you can also apply the card class directly on this tag:

What is the Answer?

This. So summaries are probably a good solution for simple Q&As.

<details class="card">
 <summary> .. </summary>
 <p>This. So summaries are probably 
 a good solution for simple Q&As.</p>
</details>
Danger: Do not open this card!

I told you so.

<details class="card warn">
 <summary> .. </summary>
 <p>I told you so.</p>
</details>

Blockquotes can be used with the .hint or .warn classes to create special boxes.

⚠ Warning

Do not run too fast.

Opt-In Addons

The following features are not included in the Classless CSS file. If you want those, you need to add additional CSS files or copy their content into your main CSS.

Tabboxes

The following tab boxes work with pure CSS3. While they look very decent, they require ≈50 lines of extra code, which we consider too much for a non-standard feature to include in a minimal CSS framework. Furthermore, you have to abuse radio buttons in the HTML and put the labels directly below these. Therefore, in order to use tabboxes, you need to include the following file:

https://classless.de/addons/tabbox.css

Use extra CSS file:

Tab One Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Two Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<link rel="stylesheet" href="https://classless.de/classless-tiny.css">

Tab Three Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Themes

You can easily change the overall theme with the variables in the beginning. Some premade themes are available in the following file:

https://classless.de/addons/themes.css

Switch theme now:

To create a new theme, just define/overwrite these variables:

:root {
  --rem:    12pt;       /* the base size of 1rem */
  --width:  50rem;      /* container width */
  --navpos: absolute;   /* fixed | absolute */
  --font-p: ...;        /* font shorthand for paragraphs */
  --font-h: ...;        /* font shorthand for headings and captions */
  --font-c: ...;        /* font shorthand for code */
  --border: ...;        /* border shorthand */
  --ornament: "‹‹ ››";  /* ornament content after sections */

  --cfg:   #433;        /* foreground color for text  */
  --cbg:   #fff;        /* background color for html  */
  --cdark: #888;        /* dark gray for captions  */
  --cmed:  #d1d1d1;     /* medium gray for borders, table separator  */
  --clight:#f5f6f7;     /* light gray for different background (code) */
  --clink: #07c;        /* color to indicate clickable elements */
  --cemph: #088;        /* the primary emphasis color of the theme */
}

Settings: Dark Mode, Font Size

Ok, this finally requires 15 lines of JavaScript. They provide the functionality of the two buttons in the navigation bar. I find them quite useful but since Classless is JavaScript-free, they are not included. You can simply copy them to your project:

function addFontSize(addPx){
  html = document.querySelector('html');
  currentSize = parseFloat(window.getComputedStyle(html, null)
    .getPropertyValue('font-size'));
  html.style.fontSize = (currentSize + addPx) + 'px';
}
function toggleDarkMode(el){
  var theme='light'
  if (el.innerText == '☪'){
    el.innerText = '☀'; theme='dark';
  } else {
    el.innerText = '☪';
  }
  document.documentElement.setAttribute('data-theme', theme)
}

Code Highlighting

As you have noticed, code listings are not highlighted. You can highlight them using a static highlighter such as hilite.me, or use a JavaScript library like highlightjs.org. For highlightjs, we also provide an extra highlight-style that colors the code using the current theme colors of Classless:

https://classless.de/addons/hljs-style.css

Try highlightjs.org:

Example Python Code:

requires_authorization(roles=["ADMIN"])
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    def __init__(self, name):
        self.name = name

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