OK.css

OK.css is a classless CSS framework that adds sensible styling defaults to your web page. Adding it into your HTML will make your page look decent — no need to reference documentation, think about responsiveness, or account for browser differences as long as your markup is semantically-correct.

To use it, you can download the CSS file directly or add the following line to your HTML <head>: 

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

OK.css is somewhere between a CSS normalizer and a full-fledged framework like Bootstrap or Tailwind. It's great for blogs or small single-page applications, but might not be so great for large, interactive apps that require JavaScript or custom elements.

What does it look like?

You're looking at it! A comprehensive set of supported elements can be found on the demo page.

Features

This CSS framework is intentionally boring and unsurprising. It aims to get out of the way so you can focus on what makes your app unique. OK.css…

  • includes and builds on normalize.css.
  • adopts Inter as its primary font family.
  • uses a base-8 rem/em spacing and sizing for harmonious vertical rhythm.
  • is compliant with the WCAG recommendation to use a 4.5:1 contrast ratio or higher for primary text and background colors.
  • toggles dark and light themes automatically based on browser or system settings.

Limitations

  • Right-to-left languages may not be supported well.
  • There is limited support for Internet Explorer.
  • Less commonly used HTML tags like <progress> and <meter> are not styled.

Inspiration and motivation

I built OK.css because I got tired of reusing the same CSS snippets between small personal projects. I wanted to make my web pages look presentable, accessible, and consistent between browsers — not broken or like it was built in the 90s (not that there's anything wrong with that). Using a popular CSS framework might have helped, but I didn't want to learn yet another set of class names or reference documentation to add styles properly. I started to wish for a drop-in CSS file that "just worked", so that I could get back to working on my project.

Influences

While creating this stylesheet, I borrowed ideas from these classless CSS frameworks…

…and from these other approaches to styling:

The thinking behind OK.css's styling was influenced by these design systems: