12 CSS resources you may not know about ... πŸ”Ž 🧐

12 CSS resources you may not know about ... πŸ”Ž 🧐

Β·

3 min read

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.

BeerCSS homepage screenshot


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.

HyperUI homepage screenshot


3. Pico CSS

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

Pico CSS homepage screenshot


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.

simplecss homepage screenshot


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!

UnoCSS homepage screenshot


6. Chart.css

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

Chart css homepage screenshot


7. Tailblocks

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

Tailblocks homepage screenshot


8. :nth Tester

Online and visually :nth css tester made by CSSTricks.

:nth Tester homepage screenshot


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.

Matcha homepage screenshot


10. css-selectors

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

css-selectors homepage screenshot


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.

Blog post screenshot


12. Destyle.css

Destyle.css is a reset stylesheet that provides a clean slate for styling your html. Made with love by Nicolas Cusan.

Destyle.css homepage screenshot


For your information, I publish all my online monitoring on my website The Whale Already πŸ”₯ 1398 resources πŸ”₯ curated.

The Whale homepage screenshot

πŸ₯³ Happy codding and happy new year 2025 ... πŸŽ‰ πŸš€ πŸ›Έ

Β