andrewh0 / okcss Goto Github PK

View Code? Open in Web Editor NEW

22.0 1.0 4.0 214 KB

🆗 Sensible styling defaults for your web page

Home Page: https://okcss.netlify.app

License: MIT License

HTML 51.94% JavaScript 1.17% CSS 46.89%

css classless-css

okcss's Introduction

🆗 OK.css

Sensible styling defaults for your web page

Project page · Demo

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.

Development

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.

Releasing

Confirm changes with:

yarn release:dry

Release with:

yarn release

Contributing

Pull requests are welcome! If you find a bug or have a feature request, please submit a GitHub issue.

Alternative features

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.

okcss's People

Stargazers

Watchers

Forkers

jimgregory fountainpen diomed em-ak

okcss's Issues

Include license in the CSS

As discussed in #4

Dist file ok.min.css file mentions normalize.css and its license inside, but does not mention okcss, its version and license.

Could probably add it to the top of the unminified CSS file to have it included in the minified output.

Current license: https://github.com/andrewh0/okcss/blob/main/LICENSE

Consider cases surfaced by Tailwind typography demo

Examples I found that could be improved in OK.css:

<code /> or similar element inside link
Padding around bullets and numbers in lists
When a header follows a paragraph, the vertical spacing is less than when a header follows another header
Strange behavior when there are p tags or untagged prose inside lists
article might benefit from vertical padding

Tailwind demo: https://tailwindcss-typography.netlify.app/

Implement versioning, automatic releases

As discussed in #4

It would be nice to have a version in ok.min.css like ok-1.2.3.min.css for easy identification and support for a non-moving target. I will likely put it inside a Git repo without using a CDN and for that scenario the version would be great.

Here are some integrations that help with automated releases:

Remove rounded corners from `table`

From a visual standpoint I would prefer rounded corners on table but:

it doesn't work when border-collapse: collapse is set on the table
when a caption is included as the first child in table, the side the caption is on loses the rounded corners.

Resources:

Make `<table />` header sticky, update `<table/>` to `display: table`

Chrome v91 allows table headers to stick to the top of the table. This allows for better readability if the table is tall.

https://twitter.com/chriscoyier/status/1400897989842030593
Example: https://codepen.io/chriscoyier/pen/WNpJewq

Also, table should be display: table, not display: block for accessibility reasons. Source

Changing the display value of a <table> element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.

use overflow-x on tables?

You've done a really nice job on this framework. The only problem I've found is wide tables become very compressed on small phones in portrait mode. Have you considered changing the table's "width: 100%" attribute to "display:block; overlow-x: scroll"?

Description list (dl/dt/dd) spacing bug + general (mostly delighted) feedback :)

Hi @andrewh0,

I came here from https://github.com/dohliam/dropin-minimal-css — okcss is my top favorite across the whole list. So expectations to find "something ok" have definitely been exceeded! 😃 How can this be 1 star before me only?! 🤔

Before I spam you with multiple GitHub tickets unasked, let me combine one likely bug and general feedback (below) in one ticket here for a start — I'm happy to split more issues off, if desired.

I think the styling of <dl>/<dt>/<dd> is broken with regard to spacing, this doesn't look right:

With this (likely sub-optimal) workaround of mine…

dt {
    margin-bottom: 0;
}

dl dt:nth-child(1n+2) {
    margin-top: 1.5ex;
}

…I get things to this state:

What do you think about this issue and direction for a fix?

Other small things I noticed:

Visual:
- The overall "page width" is a bit too narrow for big screens. I think what Boostrap's class container does may be a better default, but it would need a closer look. Is the current width considered a key feature?
Non-visual:
- The readme could mention dependency normalize.css in particular, not just normalization in general. I was surprised to find normalize.css bundled under the hood after reading that text.
- It would be nice to have a version in ok.min.css like ok-1.2.3.min.css for easy identification and support for a non-moving target. I will likely put it inside a Git repo without using a CDN and for that scenario the version would be great.
- Dist file ok.min.css file mentions normalize.css and its license inside, but does not mention okcss, its version and license. That would be nice.
- (Have you tried putting :ok:/:ok: at the start of the GitHub repo description? I think it would look nice.)

What do you think?

Best, Sebastian

Add vertical spacing to `code` elements on multiple lines

When code elements are used on multiple lines, they can sometimes touch. Add vertical space by either decreasing the padding on code or increasing line height to add separation.