12 CSS resources you may not know about ... 🔎 🧐

#opensource #web #css #frontend

Hi web dev community 👋

One day, I told myself that instead of cluttering my browser with bookmarks I’d never revisit, it would be smarter and more useful to share them publicly on a website. That must have been back in 2016. Since then, I’ve been regularly adding all the tools that seem interesting to me, and here’s just a small selection:

1. BeerCSS

Build material design in record time without stress for devs.

2. HyperUI

HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

3. Pico CSS

Minimal CSS Framework for semantic HTML. Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

4. SimpleCSS

Simple.css is a classless CSS framework that makes semantic HTML look good, really quickly. By classless it means that there are no CSS classes anywhere in the CSS or the HTML. So your website can look just like this using plain old vanilla HTML.

5. UnoCSS

The instant on-demand Atomic CSS engine. UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations. We are imagining UnoCSS being able to simulate the functionalities of most of the existing atomic CSS frameworks. And possibly have been used as the engine to create some new atomic CSS frameworks!

6. Chart.css

Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.

7. Tailblocks

Ready-to-use Tailwind CSS blocks. 15 different categories (ecommerce, blog, pricing and more...), responsive, dark/light mode, color variations.

8. :nth Tester

Online and visually :nth css tester made by CSSTricks.

9. Matcha.css

matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

10. css-selectors

Here's a visual guide to the most popular CSS selectors.

11. What is your reset/base css?

Ire Aderinokun presents in this article her solution to resetting some default browser styles, she also includes some utilities that she wants in every project.