Welcome Home

Introduction

The Basics

Lovely. We can hide stuff in the <details> element:

Lists

This is a plain old bulleted list with some of what I do:

• Music Production
• Sound Design for Visual Media
• Web Development
• Cooking

Ordered lists look pretty much as you’d expect:

1. Goals
2. Motivations
   1. Intrinsic
   2. Extrinsic
3. Second-order effects

It’s nice to visualize trees. This is a regular unordered list with a tree class:

• /dev/nvme0n1p2

  • usr
    • local
      
    • share
      
    • libexec
      
    • include
      
    • sbin
      
    • src
      
    • lib64
      
    • lib
      
    • bin
      
    • games
      • solitaire
      • snake
      • tic-tac-toe
    • media
      
  • media
    
  • run
    
  • tmp

Tables

We can use regular tables that automatically adjust to the monospace grid. They’re responsive.

Note that only one column is allowed to grow.

Forms

Here are some buttons:

And inputs:

Grids

Add the grid class to a container to divide up the horizontal space evenly for the cells. Note that it maintains the monospace, so the total width might not be 100%. Here are six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell.

ASCII Drawings

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>.

┌───────┐ ┌───────┐ ┌───────┐
│   i   │ |  ii   │ │  iii  │
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│  1    | │Actor 2| │Actor 3│
└───────┘ └───────┘ └───────┘

This is a chart of all my things, or most of them :)

                      Things I Have
                                              
    │                                     ████ Usable
15  │
    │                                     ░░░░ Broken
    │
12  │             ░            
    │             ░            
    │   ░         ░              
 9  │   ░         ░              
    │   ░         ░              
    │   ░         ░                    ░
 6  │   █         ░         ░          ░
    │   █         ░         ░          ░
    │   █         ░         █          ░
 3  │   █         █         █          ░
    │   █         █         █          ░
    │   █         █         █          ░
 0  └───▀─────────▀─────────▀──────────▀─────────────
      Songs     Albums     Research   Startups

Media

Media objects are supported, like images and video:

Discussion

Thanks for visiting. I’ve very much enjoyed making this, pushing my CSS chops and having a lot of fun with playing with this design. Thank you to Oskar Wickström for creating this project and helping me along the journey — let me know.

github.com/owickstrom/the-monospace-web

U.S. Graphics Company for all the inspiration.