-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
177 lines (177 loc) · 6.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="OK.css is a classless CSS framework that adds sensible styling defaults to your web page."
/>
<meta property="og:title" content="OK.css" />
<meta property="og:url" content="https://okcss.netlify.app" />
<meta property="og:type" content="website" />
<meta
property="og:description"
content="OK.css is a classless CSS framework that adds sensible styling defaults to your web page."
/>
<meta property="twitter:card" content="summary" />
<meta property="twitter:title" content="OK.css" />
<meta property="twitter:url" content="https://okcss.netlify.app" />
<meta
property="twitter:description"
content="OK.css is a classless CSS framework that adds sensible styling defaults to your web page."
/>
<title>OK.css</title>
<link rel="stylesheet" href="./ok.min.css" />
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/demo">Demo</a></li>
<li><a href="https://github.com/andrewh0/okcss">Contribute</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h1><span aria-hidden="true" role="presentation">🆗 </span>OK.css</h1>
</header>
<section>
<p>
<b>OK.css</b> is a
<a href="https://css-tricks.com/no-class-css-frameworks/"
>classless CSS framework</a
>
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.
</p>
<p>
To use it, you can
<a
href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@1/dist/ok.min.css"
>download the CSS file directly</a
>
or add the following line to your HTML <code><head></code>:
</p>
<pre>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andrewh0/okcss@1/dist/ok.min.css" /></pre
>
<p>
<b>OK.css</b> is somewhere between a CSS normalizer and a
full-fledged framework like
<a href="https://getbootstrap.com/">Bootstrap</a> or
<a href="https://tailwindcss.com/">Tailwind</a>. 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.
</p>
</section>
<section>
<h2>What does it look like?</h2>
<p>
You're looking at it! A comprehensive set of supported elements can
be found on the
<a href="/demo.html">demo</a> page.
</p>
<h3>Features</h3>
<p>
This CSS framework is intentionally <i>boring</i> and
<i>unsurprising</i>. It aims to get out of the way so you can focus
on what makes your app unique. <b>OK.css</b>…
</p>
<ul>
<li>
includes and builds on
<a href="https://necolas.github.io/normalize.css/"
>normalize.css</a
>.
</li>
<li>
adopts <a href="https://rsms.me/inter/">Inter</a> as its primary
font family.
</li>
<li>
uses a
<a href="https://spec.fm/specifics/8-pt-grid">base-8</a> rem/em
spacing and sizing for harmonious vertical rhythm.
</li>
<li>
is compliant with the
<a
href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
>WCAG</a
>
recommendation to use a <b>4.5:1</b> contrast ratio or higher for
primary text and background colors.
</li>
<li>
toggles <b>dark and light</b> themes automatically based on
browser or system settings.
</li>
</ul>
<h3>Limitations</h3>
<ul>
<li>Right-to-left languages may not be supported well.</li>
<li>There is limited support for Internet Explorer.</li>
<li>
Less commonly used HTML tags like
<code><progress></code> and <code><meter></code> are
not styled.
</li>
</ul>
</section>
<section>
<h2>Inspiration and motivation</h2>
<p>
I built <b>OK.css</b> because I got tired of reusing the same CSS
snippets between small personal projects. I wanted to make my web
pages look <i>presentable</i>, <i>accessible</i>, and
<i>consistent</i> between browsers — not broken or like it was built
in the 90s (<a href="https://jdan.github.io/98.css/"
>not that there's anything wrong with that</a
>). 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.
</p>
<h3>Influences</h3>
<p>
While creating this stylesheet, I borrowed ideas from these
classless CSS frameworks…
</p>
<ul>
<li><a href="https://newcss.net/">new.css</a></li>
<li><a href="https://watercss.netlify.app/">Water.css</a></li>
<li><a href="https://yegor256.github.io/tacit/">Tacit</a></li>
<li><a href="https://oxal.org/projects/sakura/">sakura</a></li>
</ul>
<p>…and from these other approaches to styling:</p>
<ul>
<li><a href="https://tailwindcss.com/">Tailwind CSS</a></li>
<li><a href="https://tachyons.io/">Tachyons</a></li>
<li><a href="https://theme-ui.com/">Theme UI</a></li>
</ul>
<p>
The thinking behind <b>OK.css</b>'s styling was influenced by these
design systems:
</p>
<ul>
<li><a href="https://primer.style/css/">Primer</a> by GitHub</li>
<li><a href="https://garden.zendesk.com/">Garden</a> by Zendesk</li>
<li>
<a href="https://polaris.shopify.com/">Polaris</a> by Shopify
</li>
</ul>
</section>
</article>
</main>
<footer>
Made by
<a href="https://twitter.com/andrewlho_codes">@andrewlho_codes</a> in
2020.
</footer>
</body>
</html>