⚡️Bolt.css

GitHub

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, utility classes, and the like.

Features

How and why I made this

I used the fantastic HTML Elements Reference on MDN and modified it as needed.

I created Bolt.css because I wanted to

  1. Pay homage to HTML
  2. Have an exercise to learn more of the lesser-known tags/elements
  3. Use it in other projects

How to use

Grab the bolt.css stylesheet and add it manually to your app/site.

Alternatively, drop this right into your <head> to use it via a CDN. <link rel="stylesheet" href="https://unpkg.com/boltcss/bolt.min.css">

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.

dl (description list)

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.

ol (ordered list)

  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 (unordered list)

pre

 ___________________________
| I'm an expert in my field.|
 ---------------------------
    \   ^__^
     \  (oo)\_______
        (__)\       )\/\
            ||----w |
            ||     ||
    

img

Photo of a snowy landscape

audio

video

table

Name Home Runs AVG
Mike Trout 45 .291
Christian Yelich 44 .329
Mookie Betts 29 .295
Cody Bellinger 47 .305

button

datalist

fieldset

Choose your favorite monster

form

select

text area

summary/details

Details Something small enough to escape casual notice.

meter

optgroup

progress

70%

range/output

0

color picker