A Short Classless Article

E. Regnath, 2020-12-15

Simple but Elegant

Text in form 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 exciting 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
	LOC	Size ⓘ
Classless	400	11.8 kB		✔	✔	✔	✔	✘	none	MIT
Classless Tiny	91	2.7 kB		✔	✔	?	✔	✘	none	MIT
Skeleton	400	11.2 kB		✔	✔	✔	?	✔	normalize	MIT
Milligram	600	10.3 kB		✔	✔	✔	✔	?	normalize 8.0	MIT
Sakura	165	3.3 kB		✔	✔	?	?	?	(normalize)	MIT

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.

How about subfigures?

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

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 H₂O.

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: 2 weeks ago

Blockquotes

Headings

Here are the headings h1 to h6

<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.

<table>
 <thead>
  <tr>
   <th>Head 1</th>      
   <th>Head 2</th>      
  </tr>
 </thead>
 <tbody>
      ...                
 </tbody>
 <caption>Use of ...</caption> 
</table>

<table>
<thead>
 <tr>
  <td colspan="2">Test</td>
  <td rowspan="2">Ctrl</td>
 </tr>
 <tr>
  <td>A</td><td>B</td>
 </tr>
</thead>
 ...
</table>

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.

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

• 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.

Videos and SVG

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.

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 <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.
<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.

<div class="row">
  <div class="col">
    <h4>Column 6/12</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:

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

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

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:

<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.

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.

<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:

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

<details class="card">
 <summary> .. </summary>
 <p>This. So summaries are probably 
 a good solution for simple Q&As.</p>
</details>

<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: Activated Deactivated

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

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: Light Dark Sepia Milligram Pure Sakura Skeleton Bootstrap Medium Tufte

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: Deactivated Activated

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$$