This page loaded in seconds.

Mercury CSS

Overview

I always knew I was a star, and now the rest of the world seems to agree with me.

—Freddie Mercury

Mercury CSS is a tiny classless stylesheet built for speed. It hooks directly into HTML elements adding minimal modern styling focused on good typography, fast load times, and responsive design.

The Mercury CSS stylesheet is 4kb unminifed.

Mercury CSS is a good place to start and build upon for most modern web development. And it's a pretty good place to stop if you care primarily about legibility and speed.

Typography

As a classless css stylesheet, Mercury CSS is primarily concerned with great typography. Great in the sense that it is easy to read and you probably won't notice much else about it, not great in the sense that it will win an AWWWARD.

Scale

The typographic scale is modular with a base font size of 16.18px and all other sizes being a factor of that and harmonic multipler of 1.375.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Body Copy (16.18px)

Small copy (11.76px)

Code

It's eating the world

define m_hello() {
    print "Hello, World.";
}

for (var i = 1; i <= 100; i++) {
    var expletive = '';
    if (i % 3 === 0) expletive += 'Fizz';
    if (i % 5 === 0) expletive += 'Buzz';
    console.log(expletive || i);
}

Lists

Unordered List

First
First Loser
Third
Fourth
Fifth

Ordered List

Partridge in a Pear Tree
Turtle Doves
French Hens
Calling Birds
Gooolden Riiings

Nested List

Fight or Flight response breakdown:

Chemical Reaction
1. Amygdala triggers neural response in the hypothalamus
2. Activation of pituitary gland and secretion of the ACTH (hormone)
3. Adrenal gland activated almost simultaneously, releasing epinephrine (hormone)
4. Chemical messenger release results in production of cortisol (hormone)
Physical Result
- Acceleration of heart/lung action
- Digestion slows/stops
- Metabolic energy sources freed for muscles
  1. Fat
  2. Glycogen
- Dilation of blood vessels for muscles
- Constriction of other blood vessels
- Pupils dialate
- Hearing loss occurs
- Tunnel vision
- Shaking

Hyperlinks

Styled throughout. They look like this link to DuckDuckGo, a search engine that respects your privacy.

Tables

Type	Setting	Use	Seats
Picnic	Park	BBQ	4-6
Kitchen	Home	Eating	4
High Top	Bar	Mingling	3
Dining	Formal Dining Room	???	6-8
Ping Pong	Frat	Drinking Games	43

A Table Table

Images

Images are responsive:

Freddie Mercury and cat

Form Elements

Input Fields

Text

HTML5 Password

HTML5 Web Address

HTML5 Email Address

HTML5 Phone Number

HTML5 Search

HTML5 Number

Note: Placeholders are not recommended.

Selects

Select

Checkboxes

Mustard

Relish

Ketchup

Radio Buttons Cake

Have it.

Eat it.

Textareas

Textarea

Action Inputs

<input type="submit">

<input type="button">

<input type="reset">

<input disabled type="submit">

Buttons

<button type="submit">

<button type="button">

<button type="reset">

<button disabled type="button">

Made by Wade Meredith in Kansas City.

Mercury CSS on Github.

☿ ☿ ☿