Don't write any CSS, just write HTML. The styles are just there.
The idea here is that you write only HTML. Leaning on CSS grid and the absolute simplest design possible we can build a lot of really powerful stuff without thinking much.
There are better alternatives and ways of building most notably using v0. But this is a chance to try something leaning only on existing HTML elements that are prestyled for you.
Challenge...is it possible to build a micro saas without CSS classes? eCom? Get perfect CWV in a Next.js site preloading Moss Kit into the head?
The smallest amount of CSS to make a great looking site that removes CSS completely. Inspired by the million other CSS frameworks that do the exact same thing. I wanted to make something that was so simple that it would be easy to understand and easy to use. I expect to break some rules alonge the way in order to make a very good looking and explicit looking site, without CSS that would make sites extremely fast. The idea is to also experiment with this in Next.js sites to see if we can cut Core Web Vitals even further if you use this over other frameworks. To dev on this follow the instructions below. I really wanted to also have a published NPM package and learn how to make that work so here we are. Moss was born. Hope you enjoy, contribute with questions and ideas or code and have fun with it.
https://unpkg.com/moss-kit@1.0.0/moss-kit.min.css
https://unpkg.com/moss-kit@1.0.0/moss-kit.min.css
Regular paragraph
Bold text
Strong text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscript and Superscript
Underlined text
Strikethrough text
Preformatted
text with
preserved
formatting
Code element
Blockquote element Citation element
Inline quote elementAbbr Definition element Keyboard input Sample output Variable Bi-directional text isolation Bi-directional override 漢 Data element
This content is not rendered until cloned via JavaScript.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Footer 1 | Footer 2 | Footer 3 |