Typography

"Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience."

—Ethan Marcotte, Responsive Web Design

All typography in cosmoCSS is rendered dynamically with the Utopia fluid type scale calculator. Instead of setting fixed font sizes, there is a base size and a scale factor at two viewport endpoints (mobile and desktop). All other font sizes are interpolated between these two points.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

This is a standard paragraph. You can make your writing come alive with bold text or italic text. Include links to visit a new document. If opening a new tab, you will see an indicator with a small arrow.

Inline Code

It's easy to include inline code snippets within your text.

For example, puts "!dlrow ,olleH".reverse will output Hello, world! in Ruby, a programming language created in Japan by Yukihiro Matsumoto in 1995.

Code

Keyboard input: Cmd

Pre-formatted text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Blockquotes

"I am I and my circumstance; and, if I do not save it, I do not save myself."

—Ortega y Gasset, Meditations on Quixote

Another filler paragraph to create continuity.

Images

Images share similar styling between <img> and <figure> elements. The only difference is the caption below the image, which adds a bit of block margin.

Public domain Las Vegas photo — An image within a figure element with a caption.

Lists

The table of contents above is an ol element with nested links in each li. Here are some more lists below.

Unordered List

First item
Second item
Third item with nested list
- Nested item 1
- Nested item 2
Fourth item

Ordered List

First item
Second item
Third item with nested list
1. Nested item 1
2. Nested item 2
Fourth item

Buttons

Any <button> element can be made to look like the examples below if you give it a class.

Empty buttons are shown as loading:

Details & Summary

Add a bit of context before letting users see more.

This content is hidden until the user clicks the summary element above.

Public Domain image of Seven Magic Mountains in Las Vegas — Seven Magic Mountains outside Las Vegas

Tables

Table Caption
Name	Email	Role	Status
Anakin Skywalker	anakin@jeditemple.edu	Padawan	Active
Padme Amidala	queen@naboo.com	Queen, Senator	Active
Jango Fett	jango@fett.com	Bounty Hunter	Inactive
C-3PO	lovetalking@tatooine.edu	Droid	Active

Forms

Search Text Email Password Telephone URL Date Time Color File Range Select Textarea Checkbox Option 1 Option 2 Radio Option 1 Option 2

Progress

Loading something...

74%

No value

Similar Projects

cosmoCSS follows in the footsteps of some popular "classless" or "drop-in" CSS projects. Please check them out!

cosmoCSS started as a fork of Classless CSS Framework, and it differs in the following ways:

Strong focus on semantic HTML
Dark mode follows browser preferences and does not require JavaScript
Font scaling and responsive design are implemented via fluid scale calculator
Your <main> element has a flex grow property so when you add a site footer, it actually stays at the bottom of the viewport!

Contributions

cosmoCSS is open source and welcomes contributions from the community. Check out the Github repository and if you find any issues, have any comments, or want to contribute, please open an issue or pull request.

🪐 cosmoCSS

Installation