Contents

OK.css is split into three modules. You can import all of them with ok.min.css, or import only what you need.

• Core (core.min.css) — Typography, colors, dark mode, code blocks, links, lists, images
• Forms (forms.min.css) — Inputs, selects, textareas, buttons
• Tables (tables.min.css) — Table styling

Core

The core module includes everything you need for a content-focused site: typography, colors, dark mode, normalize, code blocks, links, lists, and media elements. Perfect for documentation, blogs, and markdown rendering.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/core.min.css" />

Type scale

Header 1 h1

Header 2 h2

Header 3 h3

Header 4 h4

Header 5 h5

Header 6 h6

Paragraph p

Inline elements

This is a link. a

This is strong text. strong

This is emphasized text. em

This is bold text. b

This is italic text. i

This is underlined text. u

This is deleted text. del

This is inserted text. ins

This is strikethrough text. s

This is ^superscript text. sup

This is _subscript text. sub

This is small text. small

This is an abbreviation. abbr

This is an inline quote. q

This is a citation. cite

This is a definition. dfn

This is highlighted text. mark

This is a variable. var

This is a time element: a while ago. time

Code

Keyboard input: Cmd kbd

This is some code: <span>code</span> code

This is sample output: Uncaught TypeError: 'undefined' is not a function samp

This is preformatted text: pre

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Senectus et netus et malesuada fames ac turpis. Diam vel quam elementum pulvinar etiam non quam.

Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.
Elit at imperdiet dui accumsan.
Justo laoreet sit amet cursus sit amet.
Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas.
Auctor elit sed vulputate mi sit amet mauris commodo quis.

Lists

This is an ordered list: ol

1. List item 1 li
2. List item 2 li
3. List item 3 li

This is an unordered list: ul

• List item 1 li
• List item 2 li
• List item 3 li

This is a description list. dl

This is a description term. dt

And this is the description. dd

This is another description term. dt

With a different description. dd

Media

This is a video: video

This is a sound clip: audio

This is an image: img

Wrap the img in a figure to include a caption with figcaption:

Other

This is a horizontal rule. hr

This is a blockquote. blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros.

Aliquet eget.

Forms

The forms module includes all interactive form elements: text inputs, date/time pickers, selects, checkboxes, radio buttons, range sliders, file inputs, and buttons.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/core.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/forms.min.css" />

Tables

The tables module includes styling for data tables with sticky headers, proper borders, and caption support.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/core.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/tables.min.css" />