Sensible styling defaults for your web page
OK.css is a classless CSS framework. Dropping 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@2/dist/ok.min.css" />
Note that normalize.css is included in OK.css.
If you don't need all of OK.css, you can import individual modules to reduce file size:
| File | Size | Description |
|---|---|---|
ok.min.css |
~19 KB | Full framework (includes everything) |
core.min.css |
~7 KB | Typography, colors, dark mode, code blocks, links, lists, images |
forms.min.css |
~12 KB | Inputs, selects, textareas, buttons (requires core.min.css) |
tables.min.css |
~1 KB | Table styling (requires core.min.css) |
Example: Content-only site (documentation, blog, markdown)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/core.min.css" />Example: Content site with forms
<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" />Example: Full framework with tables
<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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@2/dist/tables.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.
Install dependencies with yarn install.
You can start a local server with yarn start. By default, the page will be available at http://localhost:5000.
Make updates to the CSS files in ./src/ and run yarn build to create minified versions in ./dist/:
src/core.css- Typography, colors, dark mode, normalize, code, links, lists, mediasrc/forms.css- Form inputs, selects, textareas, buttonssrc/tables.css- Table stylingsrc/ok.css- Entry point that imports all modules
The build uses Lightning CSS for minification and autoprefixing. The version number in the CSS header is automatically synced from package.json.
This repo is set up with Netlify's continuous deployment. yarn deploy copies files into a .gitignored directory called _site and _site is hosted on Netlify.
Releases are automated via GitHub Actions. When a PR is merged to main, a new version is released based on the label in the PR body.
- Create a PR with your changes
- In the PR body, check one of the version labels:
patch- Bug fixes and minor changes (1.0.0 → 1.0.1)minor- New features (1.0.0 → 1.1.0)major- Breaking changes (1.0.0 → 2.0.0)skip-release- No release needed
- Merge the PR to
main - GitHub Actions will automatically:
- Bump the version in
package.json - Update the version in CSS files
- Create a git tag
- Create a GitHub Release with assets
- Update CHANGELOG.md
- Comment on the PR with the released version
- Bump the version in
Use the next branch to build up changes for a major release without publishing to main.
-
Create and push the
nextbranch frommain:git checkout main git pull git checkout -b next git push -u origin next -
Merge PRs into
nextinstead ofmain. Each merge creates a prerelease version (e.g.,2.0.0-next.0,2.0.0-next.1). -
When ready to release, merge
nextintomain:git checkout main git merge next git pushThis creates the final release (e.g.,
2.0.0).
Preview what would be released:
yarn release:dry
Create a release manually:
yarn release
Pull requests are welcome! If you find a bug or have a feature request, please submit a GitHub issue.
Not all UI features can be implemented with classless CSS while remaining accessible and supported cross-browser. For more complex features, you may need to supplement this framework with additional HTML, CSS, or JavaScript.
Here are some suggestions for altering the behavior of certain elements.
Feature
Make tables scroll horizontally when they are wider than the main content width.
Desired behavior:
Note: In OK.css, tables are set to display: table for accessibility reasons.
Implementation
Wrap the table in a <div> with overflow-x: scroll;:
<div style="overflow-x: scroll">
<table>
...
</table>
</div>
One caveat is that this can prevent the table heading from sticking when scrolling vertically.