⚡️Bolt.css

Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

Use it for simple static sites or as a starting point and add your own classes. This is not a complete solution with layout grids, components, etc...

Features

How and why I made this

I used the fantastic HTML Elements Reference on MDN and modified as I saw fit.

Theres a couple main reasons I wanted this to exist. First and foremost is that I long for the days where anyone with a little curiosity and some gumption could publish to the web. This serves as an ode to simple HTML being published without a CMS or JavaScript framework. As well, the native HTML elements are powerful. Simply give them some styling love and you have something extremely usable and performant out of the box.

HTML is the core technology for any web developer, but it seems to be the most neglected one in favor of JavaScript in 2020.

Maybe a stretch goal would be to influence browser defaults styles to be more pleasant. Eliminating the need for this small library.

Demos


address
jim@rock.com
(311) 555-2368
aside

Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.

headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
inline text elements

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that. You can use CSS to style your HTML. The two most popular science courses offered by the school are chemistry (the study of chemicals and the composition of substances) and physics (the study of the nature and properties of matter and energy). First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).

The push() method adds one or more elements to the end of an array and returns the new length of the array. We had to do something about it. I looked at it and thought This can't be real!.

Please press Ctrl + Shift + R to re-render an MDN page. Several species of salamander inhabit the temperate rainforest of the Pacific Northwest. There will be a few tickets available at the box office tonight. I was trying to boot my computer, but I got this hilarious message:

Keyboard not found
Press F1 to continue

The most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight. Almost every developer's favorite molecule is C8H10N4O2, also known as "caffeine. The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2.

The Cure will be celebrating their 40th anniversary on in London's Hyde Park. The concert starts at and you'll be able to enjoy the band for at least . You could use this element to highlight speling mistakes, so the writer can corect them. The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. There is nothing no code either good or bad, but thinking running it makes it so.

This sample section of in-line text was mostly sourced from the wonderful HTML elements reference over on MDN.
blockquote

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

description list
Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
figure
Elephant at sunset
An elephant at sunset
ol
  1. Mix flour, baking powder, sugar, and salt.
  2. In another bowl, mix eggs, milk, and oil.
  3. Stir both mixtures together.
  4. Fill muffin tray 3/4 full.
  5. Bake for 20 minutes.
ul
pre
    L          TE
      A       A
        C    V
         R A
         DOU
         LOU
        REUSE
        QUE TU
        PORTES
      ET QUI T'
      ORNE O CI
       VILISÉ
      OTE-  TU VEUX
       LA    BIEN
      SI      RESPI
              RER       - Apollinaire
    
img
Grapefruit slice atop a pile of other slices
audio
video
table
Name Home Runs AVG
Mike Trout 45 .291
Christian Yelich 44 .329
Mookie Betts 29 .295
Cody Bellinger 47 .305
buttons
datalist
fieldset
Choose your favorite monster

form
meter
at 50/100
optgroup
output
+ = 60
progress
70%
select
text area
summary/details
Details Something small enough to escape casual notice.