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 only 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.325.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Body Copy (16.18px)

Small copy (11.76px)

Inline Styles

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

Highlighted text uses the <mark> element to highlight important text in your content.

Keyboard input displays shortcuts like Ctrl + C to copy or Cmd + V to paste.

Code

It ate 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

1. Partridge in a Pear Tree
2. Turtle Doves
3. French Hens
4. Calling Birds
5. 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

Definition List

Mercury (element)

A heavy, silvery d-block element, mercury is the only metallic element that is liquid at standard conditions for temperature and pressure.

Mercury (planet)

The smallest planet in the Solar System and the closest to the Sun. It orbits the Sun once every 87.97 Earth days.

Freddie Mercury

British singer-songwriter and record producer, best known as the lead vocalist of the rock band Queen.

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

Media

Images are responsive and can be wrapped in <figure> elements with captions:

Interactive Elements

Details & Summary

Collapsible content sections:

What is Mercury CSS?

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.

Why "classless"?

Classless means you don't need to add CSS classes to your HTML. Just write semantic HTML and the stylesheet handles the rest. This makes it perfect for quick prototypes, documentation, and content-focused sites.

Progress Bars

Project completion:

70%

70% complete

Form Elements

Input Fields

Text

HTML5 Password

HTML5 Web Address

HTML5 Email Address

HTML5 Phone Number

HTML5 Search

HTML5 Number

Invalid Input (type an invalid email)

Note: Placeholders are not recommended.

Selects

Select Picky Choosy Finicky Particular Refined

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

Submit  <button type="submit">

Do Something  <button type="button">

Reset  <button type="reset">

Disabled Button  <button disabled type="button">

Print Support

Mercury CSS includes print-optimized styles. When printing, the page automatically adjusts to full width, uses a white background with black text, and displays link URLs inline for reference.

Print This Page

---

---

---