With all of the changes and rapid advancements CSS has gone through over the last few years, we should not be surprised at the vast volume of open-source resources and tools that are continually being released.

These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.

In this collection you will find 50 of our favorite CSS libraries, frameworks, resources and tools that have all been released this year. No doubt, you’ll find something useful!

Quick Jump: CSS Libraries, CSS Frameworks, Web-Based CSS Tools & Generators, Useful CSS Cheatsheets, Useful CSS Items.

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.
Example from filters.css


Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.
Example from Seasonal.css


Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.
Example from Checka11y.css


Knopf.css – A modern, modular, extensible CSS button system.
Example from Knopf.css


grxdients – A CSS library that makes adding gradients to your projects incredibly simple.
Example from grxdients


LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.
Example from LaTeX.css


CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.
Example from CUBE CSS


pattern.css – A CSS-only library for adding background patterns to your projects.
Example from pattern.css


98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.
Example from 98.css


Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.
Example from Cooltipz.css


MVP.css – A minimalist stylesheet for HTML elements.
Example of MVP.css


MoreToggles.css – A pure CSS library that provides you with stylish toggles.
Example from MoreToggles.css


Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.
Example from Fluiditype

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.
Example of Cirrus.CSS


OrbitCSS – Check out this modern CSS framework based on flexbox.
Example from OrbitCSS


Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.
Example from Halfmoon


mono/color – A small, responsive, dual-themed CSS-only framework.
Example from mono/color


new.css – A classless CSS framework for building HTML-only websites.
Example from new.css


Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.
Example of Honeycomb


Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.
Example from Shorthand


Griddle – A modern CSS framework built with CSS Grid and Flexbox.
Example from Griddle


Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.
Flash Grid

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.
Example from The good line-height


CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.
Example from CSS Spider


Layoutit Grid – Build your ideal CSS Grid with this online tool.
Example from Layoutit Grid


Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.
Example from Beautiful CSS box-shadow examples


zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.
Example from zerodivs.com


CSS Effects – A collection of click-to-copy CSS special effects.
Example from Css Effects


Capsize – An online tool for defining typography in CSS.
Example from Capsize


CSS Background Patterns – Generate your own seamless background pattern.
Example from CSS Background Patterns


Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.
Example from Animated CSS Background Generator


Keyframes.app – Generate awesome CSS animations with this web-based tool.
Example from Keyframes.app


Gradihunt – Find or generate the perfect CSS gradient for your projects.
Example from Gradihunt


CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.
Example of CSS Section Separator Generator


Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.
Example from Parametric Color Mixer


Neumorphism.io – A tool for creating Soft-UI CSS code.
Example from Neumorphism.io


700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.
Example from 700+ CSS Icons


Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.
Example of Indie Icons

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.
Example from Grid Cheatsheet


BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.
Example of BEM Cheat Sheet


A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.
Example from A list of 300+ CSS properties


Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.
Example from Visualizing CSS Resets


Selectors Explained – Translate CSS selectors into plain English.
Example from Selectors Explained

Useful CSS Items

What Does 100% Mean in CSS?
What does 100% mean in CSS?


CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.
Example from CSS breakpoints used by popular CSS frameworks


Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.
Example of Learn Z-Index Using a Visualization Tool


Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.
Example from Color Theme Switcher


The CSS Cascade – Learn how web browsers resolve competing CSS styles.
Example from The CSS Cascade


What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?
Example from What's Missing From CSS?

Favorites from Previous Years

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.

Source: Specky Boy