Lissom.CSS

GitHub repository

The web is bloated. Trackers, advertisements, third-party JavaScript, custom fonts, unoptimized images, and useless CSS are prevalent on too many websites, all detrimental to user experience.

Lissom.CSS is a classless, minimalist, accessible, and themeable CSS framework that aims to address the issue of styling web pages. If you want to go a step further, ditch whatever bloated web framework you are using and switch to Astro, Svelte, SvelteKit, or a static site generator. Optimize your images and use a modern image format, such as WebP. Finally, cut down on third-party JS files and ask yourself whether each and every one of them are truly necessary.

Raw source (10.5 KB) • Minified (7.2 KB) • Minified + Brotli compressed (1.7 KB)

Demo

<p></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus erat, suscipit vehicula arcu quis, pellentesque accumsan ante. Ut dictum placerat pellentesque. Curabitur ligula neque, varius nec auctor vitae, pharetra ut augue. Cras sem augue, ornare quis lacinia ullamcorper, varius quis dolor. Nam vel diam tempus, posuere tellus eget, suscipit dolor. Etiam sed libero nunc. Proin nec lorem sed nisl pellentesque sodales. Aliquam a quam leo. Proin mattis malesuada neque non ultrices. Aliquam vitae metus quis dolor elementum elementum id vel mi.

<b></b> <strong></strong> <i></i> <em></em> <a></a> <mark></mark> <ins></ins> <del></del>

This is bolded text, and this is semantically strong text. This is italicized text, and this is semantically emphasized text. And this is a link that leads to nowhere. Here is some text with a strikethrough, and some text with highlighted words. This is a CSS library framework!

<button></button>



To make a button primary, add the data-primary attribute to it.

<kbd></kbd>

The key combination Ctrl + Shift + R performs a hard page reload.

<blockquote></blockquote>

This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.

<code></code> <pre></pre>

The JavaScript method alert() instructs the browser to display a dialog with an optional message, and to wait until the user dismisses the dialog.

Preformatted text can be used to display code, as well ASCII art (the one below comes from Wiby):

        .n.                     |
       /___\          _.---.  \ _ /
       [|||]         (_._ ) )--;_) =-
       [___]           '---'.__,' \
       }-=-{                    |
       |-" |
       |.-"|                p
~^=~^~-|_.-|~^-~^~ ~^~ -^~^~|\ ~^-~^~-
^   .=.| _.|__  ^       ~  /| \
 ~ /:. \" _|_/\    ~      /_|__\  ^
.-/::.  |   |""|-._    ^   ~~~~
  `===-'-----'""`  '-.              ~
                 __.-'      ^
<hr />

The horizontal divider delimitates paragraphs of thematically different content:

<img />

This image of the Eiffel Tower at Paris comes from Wikimedia Commons. Source

At sunset, March 2011. Eiffel Tower in Paris, France.
<table></table>
Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric) - MDN
Name Mass (1024kg) Diameter (km) Density (kg/m3) Gravity (m/s2) Length of day (hours) Distance from Sun (106km) Mean temperature (°C) Number of moons Notes
Terrestrial planets Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our world
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 The red planet
Jovian planets Gas giants Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 -140 62
Ice giants Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14
Dwarf planets Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 Declassified as a planet in 2006, but this remains controversial.
<progress></progress>
<dialog></dialog>

This is a native HTML dialog

It can be dismissed with the Close button or with the Esc key.
<form></form> Note: Work in progress
<details></details> Note: Examples from MDN
Details Something small enough to escape casual notice.
I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? A keyboard.
<ul></ul> <ol></ol> <li></li>
  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
<h1></h1> - <h6></h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
RTL support: