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@1/dist/ok.min.css" />
Note that normalize.css is included in OK.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 file in ./src/ok.css and yarn build to create a minified version available in ./dist/ok.min.css.
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.
Confirm changes with:
yarn release:dry
Release with:
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent