├── .prettierignore ├── assets └── Eiffel Tower.webp ├── .prettierrc.json ├── LICENSE.md ├── README.md ├── lissom.min.css ├── lissom.css └── index.html /.prettierignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/Eiffel Tower.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lissomware/css/HEAD/assets/Eiffel Tower.webp -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 200, 3 | "trailingComma": "all", 4 | "tabWidth": 4, 5 | "semi": true, 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 lissomware 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lissom.CSS 2 | **The web is bloated.** Trackers, advertisements, third-party JavaScript, custom fonts, unoptimized images, and useless CSS are prevalent on too many websites, all detrimental to user experience. 3 | 4 | **Lissom.CSS is a classless, minimalist, accessible, and themeable CSS library that aims to address the issue of styling web pages.** 5 | 6 | [Demo](https://lissomware.github.io/css/) 7 | 8 | --- 9 | 10 | HTML element(s) | Status | 11 | -------------| :---: | 12 | `` | ✅ | 13 | `` | ❌ | 14 | ``, ``, ``,
``, `` | ✅ | 15 | `
` | ✅ | 16 | `` | ✅ | 17 | ``, `
` | ✅ |
18 | `
` | ✅ |
19 | `` | ✅ |
20 | `
`, `
`, `
` | ❌ |
21 | `
`, `
`,
`
`, `` | ❌ |
22 | `
` | 🟡 |
23 | `
` - `
` | ✅ |
24 | `
` | ✅ |
25 | `` | ✅ |
26 | ``, `` | ✅ |
27 | `` | ✅ |
28 | `` | ❌ |
29 | `` | ✅ |
30 | `
` | ✅ |
31 | `` | ✅ |
32 | `
` | 🟡 |
33 | ``, `
    `, `
  1. ` | ✅ |
34 | `` | ❌ |
35 | 
36 | Legend: ✅ supported; 🟡 partially supported (WIP); ❌ not yet supported but will be in the future
37 | 
38 | For minifying the CSS, I use [this tool](https://www.toptal.com/developers/cssminifier).
39 | 


--------------------------------------------------------------------------------
/lissom.min.css:
--------------------------------------------------------------------------------
1 | blockquote,button,details[open],input[type=submit],th{background-color:var(--accent-alt)}button:active,h2::before,input[type=submit]:active{opacity:.9}button:hover,h4::before,input[type=submit]:hover{opacity:.7}blockquote::after,h1::before,h2::before,h3::before,h4::before,h5::before,h6::before{position:absolute}a:hover,h1::before,h2::before,h3::before,h4::before,h5::before,h6::before{color:var(--accent-ui)}kbd,summary{font-weight:700}dialog,mark{color:inherit}details,pre{padding:.5em;background-color:var(--tertiary)}hr,td{text-align:center}body,dialog,html,tr:nth-child(2n) td{background-color:var(--light)}code,details,input,kbd,pre,textarea,tr:nth-child(odd) td{background-color:var(--tertiary)}*{box-sizing:border-box}:root{--primary:hsl(265, 38%, 13%);--secondary:hsl(283, 6%, 45%);--tertiary:hsl(257, 15%, 95%);--light:hsl(270, 100%, 99%);--accent:hsl(278, 100%, 92%);--accent-alt:hsl(279, 100%, 97%);--accent-ui:hsl(284, 55%, 66%);--semantic-green:hsl(88, 76%, 83%);--semantic-red:hsl(0, 76%, 83%)}@media (prefers-color-scheme:dark){:root{--primary:hsl(300, 100%, 99%);--secondary:hsl(280, 5%, 37%);--tertiary:hsl(270, 5%, 16%);--light:hsl(280, 5%, 12%);--accent:hsl(282, 25%, 40%);--accent-alt:hsl(278, 14%, 20%);--accent-ui:hsl(284, 55%, 66%);--semantic-green:hsl(88, 35%, 40%);--semantic-red:hsl(0, 35%, 40%)}}body,html{color-scheme:light;accent-color:var(--accent-ui);color:var(--primary);font-family:sans-serif;margin:0;padding:0;line-height:1.4}main{width:min(100% - 3rem,65ch);margin-inline:auto;margin-top:2em;margin-bottom:2em}a{color:var(--primary);text-decoration-color:var(--accent-ui);text-underline-offset:0.15em;text-decoration-thickness:0.1em}a:hover{text-decoration-thickness:0.2em;z-index:2}a:focus-visible{background-color:var(--accent-ui);box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent-ui);outline:0;z-index:2;animation:1s linear infinite alternate-reverse pulseFill;border-radius:.1em;position:relative}@keyframes pulseFill{0%{background-color:var(--accent-ui);box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent-ui)}100%{background-color:var(--accent);box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent)}}blockquote{margin:1.5em 0;position:relative;padding:.7em;z-index:1;border-radius:.5em}blockquote p{margin:0}blockquote::after,blockquote::before{color:var(--accent-ui);font-size:5em;line-height:.8}button,input,input[type=submit],textarea{padding:.4em 1em;font-size:inherit;position:relative;color:var(--primary)}blockquote::before{content:open-quote;vertical-align:top;position:absolute;left:-.15em;top:-.1em}blockquote::after{content:close-quote;vertical-align:bottom;right:-.1em;bottom:-.65em}[lang=fr] blockquote::after,[lang=fr] blockquote::before{font-size:3.5em}[lang=fr] blockquote::before{left:-.3em;top:-.4em}[lang=fr] blockquote::after{right:-.3em;bottom:-.3em}button,input[type=submit]{border:1px solid var(--accent);border-radius:.3em;cursor:pointer}input::placeholder{font-style:italic}button[data-primary],input[type=submit]{color:var(--light);background-color:var(--accent-ui);border-color:var(--accent-ui);outline:1px solid var(--accent);outline-offset:-0.15em;padding:.4em .8em;border-radius:.3em;cursor:pointer;font-weight:700}button:disabled,input:disabled,input[type=submit]:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--tertiary);color:var(--secondary);border-color:var(--secondary);opacity:.5}button:focus-visible,details:has(summary:focus-visible),input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent-ui);outline:0;z-index:2;animation:1s linear infinite alternate-reverse pulseBorder}details:has(summary:focus-visible) summary{outline:0}@keyframes pulseBorder{0%{box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent-ui)}100%{box-shadow:0 0 0 .2em var(--light),0 0 0 .4em var(--accent)}}code{border-radius:.3em;font-family:monospace;padding:.1em .2em}details{border:.1em solid var(--secondary);border-radius:.3em;margin:1em 0}details[open] summary{border-bottom:.1em solid var(--accent);padding-bottom:.3em;margin-bottom:.7em}dialog{border-radius:.6em;max-width:min(100% - 3rem,65ch);border:1px solid var(--accent-ui);box-shadow:0 0 .3em .1em var(--accent-alt)}hr,progress{border:none;margin:1em 0}::backdrop{background:rgba(0,0,0,.5)}form:not([data-modal]){display:flex;flex-direction:column;gap:.5rem;margin:1em 0}form>div{display:flex;flex-direction:column}form>div:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:.2em}h1,h2,h3,h4,h5,h6{position:relative}h1::before{content:'#';left:-2ch}h1:dir(rtl)::before{right:-2ch}h2::before{content:'##';left:-3ch}h2:dir(rtl)::before{right:-3ch}h3::before{content:'###';left:-4ch;opacity:.8}h3:dir(rtl)::before{right:-4ch}h4::before{content:'####';left:-5ch}h4:dir(rtl)::before{right:-5ch}h5::before{content:'#####';left:-6ch;opacity:.6}h5:dir(rtl)::before{right:-6ch}h6::before{content:'######';left:-7ch;opacity:.5}h6:dir(rtl)::before{right:-7ch}h1[data-no-heading-level]::before,h2[data-no-heading-level]::before,h3[data-no-heading-level]::before,h4[data-no-heading-level]::before,h5[data-no-heading-level]::before,h6[data-no-heading-level]::before{content:''}hr{border-top:.2em double var(--primary);color:var(--primary);overflow:visible;height:.4em}hr:after{background:var(--light);content:'§';padding:0 4px;position:relative;top:-13px}img{border-radius:.6em;width:100%;height:auto;transition:border-radius .1s linear}img:hover{border-radius:0}input,textarea{border:1px solid var(--secondary);border-radius:.3em;font-family:inherit}kbd{border-radius:.3em;border:1px solid var(--secondary);box-shadow:0 1px 1px var(--secondary),0 2px 0 0 var(--light) inset;color:var(--primary);display:inline-block;font-size:.85em;line-height:1;padding:.2em .4em;white-space:nowrap}mark{background-color:var(--accent)}pre{font-family:monospace;color:var(--primary);border-radius:.6em;border:1px solid var(--secondary)}progress{appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:1em;display:block;height:.5rem;overflow:hidden;padding:0;width:100%}progress::-webkit-progress-bar{background-color:var(--accent)}progress::-webkit-progress-value{background-color:var(--accent-ui)}progress::-moz-progress-bar{background-color:var(--accent-ui)}progress::-ms-fill{background-color:var(--accent-ui);border:none}progress:indeterminate{animation:3s linear infinite progressShine;background-color:var(--accent);background-image:linear-gradient(to right,var(--accent) 0,var(--accent-ui) 10%,var(--accent-ui) 30%,var(--accent) 40%);background-position:top left;background-repeat:no-repeat;background-size:150% 150%}progress:indeterminate:dir(rtl){animation-direction:reverse}progress:indeterminate::-webkit-progress-bar{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-ms-fill{animation-name:none}@keyframes progressShine{0%{background-position:200% 0}100%{background-position:-200% 0}}caption{padding:.8em;caption-side:bottom}table{border-collapse:collapse;border:.1em solid var(--secondary);border-radius:.6em}td,th{border:1px solid var(--secondary);padding:.4em .3em}ins{background-color:var(--semantic-green)}del{background-color:var(--semantic-red)}


--------------------------------------------------------------------------------
/lissom.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | :root {
  6 |     --primary: hsl(265, 38%, 13%);
  7 |     --secondary: hsl(283, 6%, 45%);
  8 |     --tertiary: hsl(257, 15%, 95%);
  9 |     --light: hsl(270, 100%, 99%);
 10 |     --accent: hsl(278, 100%, 92%);
 11 |     --accent-alt: hsl(279, 100%, 97%);
 12 |     --accent-ui: hsl(284, 55%, 66%);
 13 |     --semantic-green: hsl(88, 76%, 83%);
 14 |     --semantic-red: hsl(0, 76%, 83%);
 15 | }
 16 | 
 17 | @media (prefers-color-scheme: dark) {
 18 |     :root {
 19 |         --primary: hsl(300, 100%, 99%);
 20 |         --secondary: hsl(280, 5%, 37%);
 21 |         --tertiary: hsl(270, 5%, 16%);
 22 |         --light: hsl(280, 5%, 12%);
 23 |         --accent: hsl(282, 25%, 40%);
 24 |         --accent-alt: hsl(278, 14%, 20%);
 25 |         --accent-ui: hsl(284, 55%, 66%);
 26 |         --semantic-green: hsl(88, 35%, 40%);
 27 |         --semantic-red: hsl(0, 35%, 40%);
 28 |     }
 29 | }
 30 | 
 31 | html,
 32 | body {
 33 |     color-scheme: light;
 34 |     accent-color: var(--accent-ui);
 35 |     color: var(--primary);
 36 |     background-color: var(--light);
 37 |     font-family: sans-serif;
 38 |     margin: 0;
 39 |     padding: 0;
 40 |     line-height: 1.4;
 41 | }
 42 | 
 43 | main {
 44 |     width: min(100% - 3rem, 65ch);
 45 |     margin-inline: auto;
 46 |     margin-top: 2em;
 47 |     margin-bottom: 2em;
 48 | }
 49 | 
 50 | a {
 51 |     color: var(--primary);
 52 |     text-decoration-color: var(--accent-ui);
 53 |     text-underline-offset: 0.15em;
 54 |     text-decoration-thickness: 0.1em;
 55 | }
 56 | 
 57 | a:hover {
 58 |     color: var(--accent-ui);
 59 |     text-decoration-thickness: 0.2em;
 60 |     z-index: 2;
 61 | }
 62 | 
 63 | a:focus-visible {
 64 |     background-color: var(--accent-ui);
 65 |     box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent-ui);
 66 |     outline: none;
 67 |     z-index: 2;
 68 |     animation: 1s infinite pulseFill linear alternate-reverse;
 69 |     border-radius: 0.1em;
 70 |     position: relative;
 71 | }
 72 | 
 73 | @keyframes pulseFill {
 74 |     0% {
 75 |         background-color: var(--accent-ui);
 76 |         box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent-ui);
 77 |     }
 78 | 
 79 |     100% {
 80 |         background-color: var(--accent);
 81 |         box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent);
 82 |     }
 83 | }
 84 | 
 85 | blockquote {
 86 |     background-color: var(--accent-alt);
 87 |     margin: 1.5em 0;
 88 |     position: relative;
 89 |     padding: 0.7em;
 90 |     z-index: 1;
 91 |     border-radius: 0.5em;
 92 | }
 93 | 
 94 | blockquote p {
 95 |     margin: 0;
 96 | }
 97 | 
 98 | blockquote::after,
 99 | blockquote::before {
100 |     color: var(--accent-ui);
101 |     font-size: 5em;
102 |     line-height: 0.8;
103 | }
104 | 
105 | blockquote::before {
106 |     content: open-quote;
107 |     vertical-align: top;
108 |     position: absolute;
109 |     left: -0.15em;
110 |     top: -0.1em;
111 | }
112 | 
113 | blockquote::after {
114 |     content: close-quote;
115 |     vertical-align: bottom;
116 |     position: absolute;
117 |     right: -0.1em;
118 |     bottom: -0.65em;
119 | }
120 | 
121 | [lang='fr'] blockquote::before,
122 | [lang='fr'] blockquote::after {
123 |     font-size: 3.5em;
124 | }
125 | 
126 | [lang='fr'] blockquote::before {
127 |     left: -0.3em;
128 |     top: -0.4em;
129 | }
130 | 
131 | [lang='fr'] blockquote::after {
132 |     right: -0.3em;
133 |     bottom: -0.3em;
134 | }
135 | 
136 | button,
137 | input[type='submit'] {
138 |     color: var(--primary);
139 |     background-color: var(--accent-alt);
140 |     border: 1px solid var(--accent);
141 |     padding: 0.4em 1em;
142 |     border-radius: 0.3em;
143 |     cursor: pointer;
144 |     font-size: inherit;
145 |     position: relative;
146 | }
147 | 
148 | input::placeholder {
149 |     font-style: italic;
150 | }
151 | 
152 | button:hover,
153 | input[type='submit']:hover {
154 |     opacity: 0.7;
155 | }
156 | 
157 | button:active,
158 | input[type='submit']:active {
159 |     opacity: 0.9;
160 | }
161 | 
162 | button[data-primary],
163 | input[type='submit'] {
164 |     color: var(--light);
165 |     background-color: var(--accent-ui);
166 |     border-color: var(--accent-ui);
167 |     outline: 1px solid var(--accent);
168 |     outline-offset: -0.15em;
169 |     padding: 0.4em 0.8em;
170 |     border-radius: 0.3em;
171 |     cursor: pointer;
172 |     font-weight: bold;
173 | }
174 | 
175 | button:disabled,
176 | input[type='submit']:disabled {
177 |     cursor: not-allowed;
178 |     background-color: var(--tertiary);
179 |     color: var(--secondary);
180 |     border-color: var(--secondary);
181 |     opacity: 0.5;
182 | }
183 | 
184 | button:focus-visible,
185 | input:focus-visible,
186 | textarea:focus-visible,
187 | details:has(summary:focus-visible) {
188 |     box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent-ui);
189 |     outline: none;
190 |     z-index: 2;
191 |     animation: 1s infinite pulseBorder linear alternate-reverse;
192 | }
193 | 
194 | details:has(summary:focus-visible) summary {
195 |     outline: none;
196 | }
197 | 
198 | @keyframes pulseBorder {
199 |     0% {
200 |         box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent-ui);
201 |     }
202 | 
203 |     100% {
204 |         box-shadow: 0 0 0 0.2em var(--light), 0 0 0 0.4em var(--accent);
205 |     }
206 | }
207 | 
208 | code {
209 |     background-color: var(--tertiary);
210 |     border-radius: 0.3em;
211 |     font-family: monospace;
212 |     padding: 0.1em 0.2em;
213 | }
214 | 
215 | details {
216 |     border: 0.1em solid var(--secondary);
217 |     border-radius: 0.3em;
218 |     padding: 0.5em;
219 |     margin: 1em 0;
220 |     background-color: var(--tertiary);
221 | }
222 | 
223 | summary {
224 |     font-weight: bold;
225 | }
226 | 
227 | details[open] {
228 |     background-color: var(--accent-alt);
229 | }
230 | 
231 | details[open] summary {
232 |     border-bottom: 0.1em solid var(--accent);
233 |     padding-bottom: 0.3em;
234 |     margin-bottom: 0.7em;
235 | }
236 | 
237 | dialog {
238 |     border-radius: 0.6em;
239 |     max-width: min(100% - 3rem, 65ch);
240 |     background-color: var(--light);
241 |     border: 1px solid var(--accent-ui);
242 |     box-shadow: 0 0 0.3em 0.1em var(--accent-alt);
243 |     color: inherit;
244 | }
245 | 
246 | ::backdrop {
247 |     background: rgba(0, 0, 0, 0.5);
248 | }
249 | 
250 | form:not([data-modal]) {
251 |     display: flex;
252 |     flex-direction: column;
253 |     gap: 0.5rem;
254 |     margin: 1em 0;
255 | }
256 | 
257 | form > div {
258 |     display: flex;
259 |     flex-direction: column;
260 | }
261 | 
262 | form > div:has(input[type='checkbox']) {
263 |     flex-direction: row;
264 |     align-items: center;
265 |     gap: 0.2em;
266 | }
267 | 
268 | h1,
269 | h2,
270 | h3,
271 | h4,
272 | h5,
273 | h6 {
274 |     position: relative;
275 | }
276 | 
277 | h1::before {
278 |     content: '#';
279 |     position: absolute;
280 |     left: -2ch;
281 |     color: var(--accent-ui);
282 | }
283 | 
284 | h1:dir(rtl)::before {
285 |     right: -2ch;
286 | }
287 | 
288 | h2::before {
289 |     content: '##';
290 |     position: absolute;
291 |     left: -3ch;
292 |     color: var(--accent-ui);
293 |     opacity: 0.9;
294 | }
295 | 
296 | h2:dir(rtl)::before {
297 |     right: -3ch;
298 | }
299 | 
300 | h3::before {
301 |     content: '###';
302 |     position: absolute;
303 |     left: -4ch;
304 |     color: var(--accent-ui);
305 |     opacity: 0.8;
306 | }
307 | 
308 | h3:dir(rtl)::before {
309 |     right: -4ch;
310 | }
311 | 
312 | h4::before {
313 |     content: '####';
314 |     position: absolute;
315 |     left: -5ch;
316 |     color: var(--accent-ui);
317 |     opacity: 0.7;
318 | }
319 | 
320 | h4:dir(rtl)::before {
321 |     right: -5ch;
322 | }
323 | 
324 | h5::before {
325 |     content: '#####';
326 |     position: absolute;
327 |     left: -6ch;
328 |     color: var(--accent-ui);
329 |     opacity: 0.6;
330 | }
331 | 
332 | h5:dir(rtl)::before {
333 |     right: -6ch;
334 | }
335 | 
336 | h6::before {
337 |     content: '######';
338 |     position: absolute;
339 |     left: -7ch;
340 |     color: var(--accent-ui);
341 |     opacity: 0.5;
342 | }
343 | 
344 | h6:dir(rtl)::before {
345 |     right: -7ch;
346 | }
347 | 
348 | h1[data-no-heading-level]::before,
349 | h2[data-no-heading-level]::before,
350 | h3[data-no-heading-level]::before,
351 | h4[data-no-heading-level]::before,
352 | h5[data-no-heading-level]::before,
353 | h6[data-no-heading-level]::before {
354 |     content: '';
355 | }
356 | 
357 | hr {
358 |     border: none;
359 |     border-top: 0.2em double var(--primary);
360 |     color: var(--primary);
361 |     overflow: visible;
362 |     text-align: center;
363 |     height: 0.4em;
364 |     margin: 1em 0;
365 | }
366 | 
367 | hr:after {
368 |     background: var(--light);
369 |     content: '§';
370 |     padding: 0 4px;
371 |     position: relative;
372 |     top: -13px;
373 | }
374 | 
375 | img {
376 |     border-radius: 0.6em;
377 |     width: 100%;
378 |     height: auto;
379 |     transition: border-radius 100ms linear;
380 | }
381 | 
382 | img:hover {
383 |     border-radius: 0;
384 | }
385 | 
386 | input,
387 | textarea {
388 |     color: var(--primary);
389 |     background-color: var(--tertiary);
390 |     border: 1px solid var(--secondary);
391 |     padding: 0.4em 1em;
392 |     border-radius: 0.3em;
393 |     font-size: inherit;
394 |     font-family: inherit;
395 |     position: relative;
396 | }
397 | 
398 | input:disabled,
399 | textarea:disabled {
400 |     cursor: not-allowed;
401 |     background-color: var(--tertiary);
402 |     color: var(--secondary);
403 |     border-color: var(--secondary);
404 |     opacity: 0.5;
405 | }
406 | 
407 | kbd {
408 |     background-color: var(--tertiary);
409 |     border-radius: 0.3em;
410 |     border: 1px solid var(--secondary);
411 |     box-shadow: 0 1px 1px var(--secondary), 0 2px 0 0 var(--light) inset;
412 |     color: var(--primary);
413 |     display: inline-block;
414 |     font-size: 0.85em;
415 |     font-weight: 700;
416 |     line-height: 1;
417 |     padding: 0.2em 0.4em;
418 |     white-space: nowrap;
419 | }
420 | 
421 | mark {
422 |     background-color: var(--accent);
423 |     color: inherit;
424 | }
425 | 
426 | pre {
427 |     font-family: monospace;
428 |     background-color: var(--tertiary);
429 |     color: var(--primary);
430 |     border-radius: 0.6em;
431 |     border: 1px solid var(--secondary);
432 |     padding: 0.5em;
433 | }
434 | 
435 | progress {
436 |     appearance: none;
437 |     -moz-appearance: none;
438 |     -webkit-appearance: none;
439 |     border: none;
440 |     border-radius: 1em;
441 |     display: block;
442 |     height: 0.5rem;
443 |     overflow: hidden;
444 |     padding: 0;
445 |     margin: 1em 0;
446 |     width: 100%;
447 | }
448 | 
449 | progress::-webkit-progress-bar {
450 |     background-color: var(--accent);
451 | }
452 | 
453 | progress::-webkit-progress-value {
454 |     background-color: var(--accent-ui);
455 | }
456 | 
457 | progress::-moz-progress-bar {
458 |     background-color: var(--accent-ui);
459 | }
460 | 
461 | progress::-ms-fill {
462 |     background-color: var(--accent-ui);
463 |     border: none;
464 | }
465 | 
466 | progress:indeterminate {
467 |     animation: 3s infinite progressShine linear;
468 |     background-color: var(--accent);
469 |     background-image: linear-gradient(to right, var(--accent) 0%, var(--accent-ui) 10%, var(--accent-ui) 30%, var(--accent) 40%);
470 |     background-position: top left;
471 |     background-repeat: no-repeat;
472 |     background-size: 150% 150%;
473 | }
474 | 
475 | progress:indeterminate:dir(rtl) {
476 |     animation-direction: reverse;
477 | }
478 | 
479 | progress:indeterminate::-webkit-progress-bar {
480 |     background-color: transparent;
481 | }
482 | 
483 | progress:indeterminate::-moz-progress-bar {
484 |     background-color: transparent;
485 | }
486 | 
487 | progress:indeterminate::-ms-fill {
488 |     animation-name: none;
489 | }
490 | 
491 | @keyframes progressShine {
492 |     0% {
493 |         background-position: 200% 0;
494 |     }
495 | 
496 |     100% {
497 |         background-position: -200% 0;
498 |     }
499 | }
500 | 
501 | caption {
502 |     padding: 0.8em;
503 |     caption-side: bottom;
504 | }
505 | 
506 | table {
507 |     border-collapse: collapse;
508 |     border: 0.1em solid var(--secondary);
509 |     border-radius: 0.6em;
510 | }
511 | 
512 | td,
513 | th {
514 |     border: 1px solid var(--secondary);
515 |     padding: 0.4em 0.3em;
516 | }
517 | 
518 | th {
519 |     background-color: var(--accent-alt);
520 | }
521 | 
522 | td {
523 |     text-align: center;
524 | }
525 | 
526 | tr:nth-child(even) td {
527 |     background-color: var(--light);
528 | }
529 | 
530 | tr:nth-child(odd) td {
531 |     background-color: var(--tertiary);
532 | }
533 | 
534 | ins {
535 |     background-color: var(--semantic-green);
536 | }
537 | 
538 | del {
539 |     background-color: var(--semantic-red);
540 | }
541 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |     
  4 |         
  5 |         
  6 |         Lissom.CSS - Classless, minimalist & themeable CSS framework
  7 |         
  8 | 
  9 |         
 42 |     
 43 | 
 44 |     
 45 |         
    
 46 |             
    
 47 |                 
    Lissom.CSS
    
 48 |                 GitHub repository
 49 |             
    
 50 |             
    
 51 |                 
    
 52 |                     The web is bloated. Trackers, advertisements, third-party JavaScript, custom fonts, unoptimized images, and useless CSS are prevalent on too many websites, all
 53 |                     detrimental to user experience.
 54 |                 
    
 55 |                 
    
 56 |                     Lissom.CSS is a classless, minimalist, accessible, and themeable CSS framework that aims to address the issue of styling web pages. If you want to go a step further,
 57 |                     ditch whatever bloated web framework you are using and switch to Astro, Svelte,
 58 |                     SvelteKit, or a static site generator. Optimize your images and use a modern image format, such as
 59 |                     WebP. Finally, cut down on third-party JS files and ask yourself whether each and
 60 |                     every one of them are truly necessary.
 61 |                 
    
 62 |                 
    Raw source (10.5 KB) • Minified (7.2 KB) • Minified + Brotli compressed (1.7 KB)
    
 63 |             
    
 64 |             
    
 65 |             
    
 66 |                 
    Demo
    
 67 |                 
    
 68 |                     
    
 69 |                         <p></p>
 70 |                         
    
 71 |                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus erat, suscipit vehicula arcu quis, pellentesque accumsan ante. Ut dictum placerat pellentesque.
 72 |                             Curabitur ligula neque, varius nec auctor vitae, pharetra ut augue. Cras sem augue, ornare quis lacinia ullamcorper, varius quis dolor. Nam vel diam tempus, posuere tellus
 73 |                             eget, suscipit dolor. Etiam sed libero nunc. Proin nec lorem sed nisl pellentesque sodales. Aliquam a quam leo. Proin mattis malesuada neque non ultrices. Aliquam vitae
 74 |                             metus quis dolor elementum elementum id vel mi.
 75 |                         
    
 76 |                     
    
 77 | 
 78 |                     
    
 79 |                         <b></b>
 80 |                         <strong></strong>
 81 |                         <i></i>
 82 |                         <em></em>
 83 |                         <a></a>
 84 |                         <mark></mark>
 85 |                         <ins></ins>
 86 |                         <del></del>
 87 |                         
    
 88 |                             This is bolded text, and this is semantically strong text. This is italicized text, and this is semantically emphasized text. And
 89 |                             this is a link that leads to nowhere. Here is some text with a strikethrough, and some text with highlighted words. This is a CSS library framework!
 90 |                         
    
 91 |                     
    
 92 | 
 93 |                     
    
 94 |                         <button></button>
 95 |                         
    
 96 |                             
 97 |                             
 98 |                             
 99 |                             
    
100 |                             
    
101 |                             To make a button primary, add the data-primary attribute to it.
102 |                         
    
103 |                     
    
104 | 
105 |                     
    
106 |                         <kbd></kbd>
107 |                         
    The key combination Ctrl + Shift + R performs a hard page reload.
    
108 |                     
    
109 | 
110 |                     
    
111 |                         <blockquote></blockquote>
112 |                         
    
113 |                             
    
114 |                                 This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies
115 |                                 faucibus purus mattis tristique.
116 |                             
    
117 |                         
    
118 |                     
    
119 | 
120 |                     
    
121 |                         <code></code>
122 |                         <pre></pre>
123 |                         
    The JavaScript method alert() instructs the browser to display a dialog with an optional message, and to wait until the user dismisses the dialog.
    
124 |                         
    Preformatted text can be used to display code, as well ASCII art (the one below comes from Wiby):
    
125 |                         
    126 |         .n.                     |
127 |        /___\          _.---.  \ _ /
128 |        [|||]         (_._ ) )--;_) =-
129 |        [___]           '---'.__,' \
130 |        }-=-{                    |
131 |        |-" |
132 |        |.-"|                p
133 | ~^=~^~-|_.-|~^-~^~ ~^~ -^~^~|\ ~^-~^~-
134 | ^   .=.| _.|__  ^       ~  /| \
135 |  ~ /:. \" _|_/\    ~      /_|__\  ^
136 | .-/::.  |   |""|-._    ^   ~~~~
137 |   `===-'-----'""`  '-.              ~
138 |                  __.-'      ^
139 |                     
    
141 |                     
    
142 | 
143 |                     
    
144 |                         <hr />
145 |                         
    The horizontal divider delimitates paragraphs of thematically different content:
    
146 |                         
    
147 |                     
    
148 | 
149 |                     
    
150 |                         <img />
151 |                         
    This image of the Eiffel Tower at Paris comes from Wikimedia Commons. Source
    
152 |                         At sunset, March 2011. Eiffel Tower in Paris, France.
153 |                     
    
154 | 
155 |                     
    
156 |                         <table></table>
157 |                         
    
158 |                             
159 |                                 
165 |                                 
166 |                                     
167 |                                         
168 |                                         
169 |                                         
170 |                                         
171 |                                         
172 |                                         
173 |                                         
174 |                                         
175 |                                         
176 |                                         
177 |                                         
178 |                                     
179 |                                 
180 |                                 
181 |                                     
182 |                                         
183 |                                         
184 |                                         
185 |                                         
186 |                                         
187 |                                         
188 |                                         
189 |                                         
190 |                                         
191 |                                         
192 |                                         
193 |                                     
194 |                                     
195 |                                         
196 |                                         
197 |                                         
198 |                                         
199 |                                         
200 |                                         
201 |                                         
202 |                                         
203 |                                         
204 |                                         
205 |                                     
206 |                                     
207 |                                         
208 |                                         
209 |                                         
210 |                                         
211 |                                         
212 |                                         
213 |                                         
214 |                                         
215 |                                         
216 |                                         
217 |                                     
218 |                                     
219 |                                         
220 |                                         
221 |                                         
222 |                                         
223 |                                         
224 |                                         
225 |                                         
226 |                                         
227 |                                         
228 |                                         
229 |                                     
230 |                                     
231 |                                         
232 |                                         
233 |                                         
234 |                                         
235 |                                         
236 |                                         
237 |                                         
238 |                                         
239 |                                         
240 |                                         
241 |                                         
242 |                                         
243 |                                     
244 |                                     
245 |                                         
246 |                                         
247 |                                         
248 |                                         
249 |                                         
250 |                                         
251 |                                         
252 |                                         
253 |                                         
254 |                                         
255 |                                     
256 |                                     
257 |                                         
258 |                                         
259 |                                         
260 |                                         
261 |                                         
262 |                                         
263 |                                         
264 |                                         
265 |                                         
266 |                                         
267 |                                         
268 |                                     
269 |                                     
270 |                                         
271 |                                         
272 |                                         
273 |                                         
274 |                                         
275 |                                         
276 |                                         
277 |                                         
278 |                                         
279 |                                         
280 |                                     
281 |                                     
282 |                                         
283 |                                         
284 |                                         
285 |                                         
286 |                                         
287 |                                         
288 |                                         
289 |                                         
290 |                                         
291 |                                         
292 |                                         
296 |                                     
297 |                                 
298 |                             
    
160 |                                     Data about the planets of our solar system (Planetary facts taken from
161 |                                     Nasa's Planetary Fact Sheet - Metric) -
163 |                                     MDN
164 |                                 
    NameMass (1024kg)Diameter (km)Density (kg/m3)Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
    Terrestrial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
    Venus4.8712,10452438.92802.0108.24640
    Earth5.9712,75655149.824.0149.6151Our world
    Mars0.6426,79239333.724.7227.9-652The red planet
    Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
    Saturn568120,5366879.010.71433.5-14062
    Ice giantsUranus86.851,11812718.717.22872.5-19527
    Neptune10249,528163811.016.14495.1-20014
    Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255
293 |                                             Declassified as a planet in 2006, but this
294 |                                             remains controversial.
295 |                                         
    
299 |                         
    
300 |                     
    
301 | 
302 |                     
    
303 |                         <progress></progress>
304 |                         
305 |                         
306 |                     
    
307 | 
308 |                     
    
309 |                         <dialog></dialog>
310 |                         
    
311 |                         
    
312 |                         
313 |                         
314 |                             
    This is a native HTML dialog
    
315 |                             
    It can be dismissed with the Close button or with the Esc key.
    
316 |                             
    
317 |                                 
318 |                             
    
319 |                             
320 |                     
    
321 | 
322 |                     
    
323 |                         <form></form>
324 |                         Note: Work in progress
325 |                         
    
326 |                             
    
327 |                                 
328 |                                 
329 |                             
    
330 | 
331 |                             
    
332 |                                 
333 |                                 
334 |                             
    
335 | 
336 |                             
    
337 |                                 
338 |                                 
339 |                             
    
340 | 
341 |                             
    
342 |                                 
343 |                                 
344 |                             
    
345 | 
346 |                             
    
347 |                                 
348 |                                 
349 |                             
    
350 | 
351 |                             
352 |                         
    
353 |                     
    
354 | 
355 |                     
    
356 |                         <details></details>
357 |                         Note: Examples from MDN
358 |                         
    
359 |                             Details
360 |                             Something small enough to escape casual notice.
361 |                         
    
362 |                         
    
363 |                             I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?
364 |                             A keyboard.
365 |                         
    
366 |                     
    
367 | 
368 |                     
    
369 |                         <ul></ul>
370 |                         <ol></ol>
371 |                         <li></li>
372 |                         
      
373 |                             
    • Unordered list item 1
      • 
374 |                             
    • Unordered list item 2
      • 
375 |                             
    • Unordered list item 3
      • 
376 |                         
    
377 |                         
      
378 |                             
    1. Ordered list item 1
      2. 
379 |                             
    2. Ordered list item 2
      3. 
380 |                             
    3. Ordered list item 3
      4. 
381 |                         
    
382 |                     
    
383 | 
384 |                     
    
385 |                         <h1></h1> - <h6></h6>
386 |                         
    Heading 1
    
387 |                         
    Heading 2
    
388 |                         
    Heading 3
    
389 |                         
    Heading 4
    
390 |                         
    Heading 5
    
391 |                         
    Heading 6
    
392 |                     
    
393 |                 
    
394 |             
    
395 |             
    
396 |                 RTL support: 
397 |             
    
398 |             
399 |         
    
400 |         
408 |     
409 | 
410 | 


--------------------------------------------------------------------------------