CSs tools

Collections

• Modern CSS Solutions for Old CSS Problems
• Replacing Sass - Shopify/foundational-design-system-proto
• CSS Solutions - Solution analysis for Polaris Foundations
• unocss - The instant on-demand atomic CSS engine.
• open-props - CSS custom properties to help accelerate adaptive and consistent design.
• Component Encyclopedia | Storybook
• CSS Protips - Open Source CSS Variables. A collection of tips to help take your CSS skills pro

  a[href^="http"]:empty::before {
    content: attr(href);
  }
  

• Contrast Grid - Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
• linaria - Zero-runtime CSS in JS library.
• Keyframes.app - It does not only help you to learn through experimenting with CSS animations attributes with real-time visualizer, but also helps you generate cool animations and shadows that best fit your design.
• Super Useful CSS Resources
• What is my viewport - A simple online tool for quickly finding the dimensions of your current device's viewport!
• Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.

Calculator

• Min-Max-Value Interpolation calculates the CSS clamp formula to interpolate between two values in a given viewport range.
• A Typographic Scale Calculator

UI Component tools

• NProgress - Minimalist progress bar. For slim progress bars like on YouTube, Medium, etc.
  • next.js example
• Pikaday - A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS
• Figma Inspect - Export to HTML, React, TailwindCSS
• SQIP is a SVG-based LQIP technique.
• Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.
  • Fluenticons Viewer
• daisyUI - Tailwind CSS Components
• Tailwind CSS Components

Tailwind

• CSS Utility Classes and "Separation of Concerns"
  • Why Tailwind Isn't for Me
• daisyUI - The most popular, free and open-source Tailwind CSS component library
• 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
• 🐳 HyperUI is a free, open source Tailwind CSS component library.

Divops

• CSS Checker - Show Similar & Duplicated CSS Scripts with Diff in Seconds!
• PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Base - classless CSS

• Classless CSS
• Drop-in switcher for previewing minimal CSS frameworks
• Pico CSS - Minimal CSS Framework for semantic HTML
• 🌸 sakura - a minimal, classless CSS framework / theme.
• 🌊 Water.css - A drop-in collection of CSS styles to make simple websites just a little nicer
• new.css

---

Children

1. Tailwind