50-favorite-css-libraries,-frameworks-and-tools-from-2019

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 interesting!

Quick Jump: CSS Frameworks, CSS Libraries, CSS Animation, CSS Typography, CSS Tools & Generators and CSS Inspiration.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

CSS Frameworks

Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you.

Terminal CSSxstyled – A consistent theme-based CSS for styled-components.

xstyledFomantic-UI – A free, “human-friendly” development framework for creating responsive websites.

Fomantic-UIRaster – A simple CSS Grid system that utilizes descriptive HTML.

RasterDiez – A free, open-source design language framework.

Example from DiezButter Cake – Check out this modern, lightweight CSS framework.

Butter CakeCSS Libraries

Destyle.css – An “opinionated” CSS reset library.

Destyle.cssImmutable Styles – A library for styling web interfaces with a focus on predictability and robustness.

Immutable StylesMatter – A collection of Material Design components in pure CSS.

MatterWater.css – Simple styles and semantic code for your static website.

Water.cssFlexbox Case Studies – Tutorials to help you achieve common Flexbox layouts.

Flexbox Case StudiesIsometricSass – A Sass library for creating isometric 2D without JavaScript.

IsometricSasscss-fx-layout – A lightweight CSS Flexbox library that includes both classes and HTML data attributes.

css-fx-layouta11y-css-reset – A set of global CSS rules to help improve the accessibility of your projects.

a11y-css-resetaugmented-ui – A tool for creating “futuristic, cyberpunk-inspired UI” with CSS.

augmented-uiCSS Animation

CSS Wand – Copy, paste and customize a variety of useful animation styles.

CSS WandCSSFX – A collection of animated CSS buttons, hover effects, inputs and loaders for use in your projects.

CSSFXCSSeffectsSnippets. – A collection of handy CSS animations that you can copy and paste.

CSSeffectsSnippets.useAnimations – A free CSS library of icon-based microinteractions.

useAnimationsextra.css – Use this CSS Houdini library to add stunning effects.

extra.cssIzmir ImageHover CSS Library – A mini CSS library built by Ciaran Walsh for quickly creating beautifully animated image hover elements.

Izmir ImageHover CSS LibraryCSS Animo – A collection of copy & paste CSS animation effects.

CSS AnimoCSS Typography

CSSans Pro – A free colorful and sassy font.

CSSans ProRFS – A responsive font size engine that automatically calculates sizing based on browser viewport.

RFSTypetura – A tool for fluid typesetting, based on screen size.

TypeturaInteractive Typography Cheatsheet – A fun tool for learning the various components of a letterform.

Interactive Typography CheatsheetTypeSafe CSS – A tiny (under 1KB) responsive CSS framework with a focus on reading and writing.

TypeSafe CSSFontsmith Variable Fonts – Learn about this much-hyped development in typography – complete with examples.

Fontsmith Variable FontsFont style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.

Font style matcherFontanello – A browser extension that displays typographic styles via right-click.

FontanelloGooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items.

Example from GooFontsFlexulator – An interactive CSS Flexbox space distribution calculator.

FlexulatorCSS Grid Layout Generator – Create complex grids with this visual tool.

CSS Grid Layout Generatorbranded. – A free tool for creating and maintaining style guides.

branded.CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.

CSS Grid GeneratorSuperposition – An app that extracts the design tokens from your website for use in your favorite design tool.

SuperpositionScreen Size Map – An interactive map displaying various screen resolutions and usage statistics.

Screen Size MapAnimated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

Example from Animated CSS Background GeneratorDropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

DropCSSGradient Generator – Take two colors and create a variety of custom CSS gradients.

Gradient GeneratorMycolorpanda – Create CSS gradients in a breeze with this simple tool.

MycolorpandaAmino – A live CSS editor for Google Chrome.

AminoCSS Learning Guides & Cheatsheets

CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.

CSS Selectors CheatsheetRelearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.

Relearn CSS layoutCSS Guidelines – A detailed document to help you write more scalable and manageable CSS.

CSS GuidelinesThe Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.

The Complete Guide To SCSS/SASSCSS Layout – A collection of popular CSS layouts and patterns.

Example from CSS LayoutFlexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

Flexbox30CSS Inspiration

Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.

Example from Print to CSSCSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.

CSSBattleOur CSS Snippets Collections

More CSS Resources

You might also like to take a look at our previous CSS collections: 2018, 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.

15-best-css-libraries-for-2019

Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it.

And if you don’t… well… welcome to the industry! We have some articles you may want to check out.

For everyone else, I went searching for the new(ish), the exciting, and perhaps even the fun. God bless GitHub’s advanced search functionality, because I found CSS libraries that do all kinds of stuff. Even if you don’t end up using them, you can absolutely learn from them. Have a look:

CSS Wand

CSS Wand is one of the simpler and smaller libraries on this list; it’s really just a handful of simple, pure CSS-based animations that you can copy-paste into your site, and customize at will. If you need to make your buttons, inputs, or loading animations feel fancy, you could try these out.

01-csswand

Water.css

Yeah, that’s Water.css, as in “just add water”. It’s a set of default styles that, while it falls short of being a full CSS framework, can get you started if you don’t feeling bothering to come up with your own type or form styles. It weighs in at less than 2kb, and uses no classes. That’s my kind of starter framework, to be honest.

02-water

Raisin CSS

Raisin CSS describes itself as a utility CSS library, which means (you guessed it) a whole lot of classes. They’ve got pre-built modules for CSS Grid, FlexBox, breakpoints, the Display property, overflow, positioning, and more. I’d personally use a library like this if I was going to be use JS to alter the appearance of a lot of different elements on the fly.

03-raisin

Atomize

Atomize takes things a little further than Raisin CSS, creating something more like a full framework based on Atomic CSS, and the theory of separation of concerns. It aims to be style-neutral, let you define your own breakpoints, and you can use it with NPM, or just download the source for use with any other dev pipeline.

04-atomize

Sassyfication

Sassyfication has a couple of things going for it, starting with its name. It just makes me want to snap my fingers in a “Z” shape, and tell people they just can’t handle me. It also has a collection of commonly-used variables and mixins for SASS. Think of the previously-mentioned utility libraries, but for SASS.

Man, I love SASS, but I still miss LESS. Anybody else miss LESS?

05-sassy

Spectrum CSS

It should be no surprise that Adobe has its own design system, or “design language” as they sometimes call it. Well, it’s called Spectrum, and Spectrum CSS is what you might use to make your site look a lot like an Adobe project. Or, you know, you could just see how they do things, for fun.

06-spectrum

Box-shadows.css

Okay… just how much do you love drop-shadows, and the box-shadow property? Probably not as much as the people who made Box-shadows.css, a whole library dedicated to one thing: rounded corners.

I’m kidding. I think you can guess what this does. If you need more shadows in your life and your UI, look no further.

07-boxshadow

Flix Carousel

Flix Carousel is, as the name suggests, a carousel based on Netflix’s preview carousels. It’s pure CSS, which I love, and seems to work pretty well. The only hiccup is that the preview on the repository page isn’t working. For a visual example, you’ll have to head to the author’s portfolio.

08-flix

Woah.css

Woah.css is billed as a CSS Animation Library for eccentric web developers, and it lives up to that promise. The animated elements remind me a lot of the old video transitions on TV in the ‘90s, and the video transitions in every “consumer-grade” video editor. It’s cheesy as heck, and a lot of fun to play with.

09-woah

Animation Library

It’s called “Animation Library”, and the animations are about as sedate as the name. This is not a bad thing, as a corporate site probably doesn’t need or want ‘90s video transitions for their animated buttons. It’s pure CSS, so just add the classes you want, and go from there.

10-animation

Wipe.css

Wipe.css is basically a brand new CSS reset, based on libraries like sanitize.css and normalize.css. It doesn’t reinvent the wheel, nor should it. It has sensible defaults that make a lot of sense to me, and I might well be using it myself in the near-ish future.

11-wipe

Denali CSS Library

Denali CSS Library is another one based on a design system, specifically the (you guessed it) Denali design system. It features a sleek, modern, and highly sans-serif sort of look that’s perfect for business sites. It’s also got some fairly detailed documentation to get you started.

12-denali

nova-skeletons

nova-skeletons is an interesting one in that it should definitely never be used for production. It’s basically used to create grey blocks for dummy content in prototypes, as seen in this screenshot. Now dummy content is never completely ideal, but for very early prototypes, this might actually be better than Lorem Ipsum.

13-nova

vov.css

vov.css is a lovely set of pure CSS animations that covers basically every (basic) animation you might want. Just add a class and go. One thing I do like is that they include an extra set of classes for adding delay to the animation.

14-vov

relaxCSS

relaxCSS is a full (but small) framework that styles most of the things you might want in a basic web page or app, with extra components for navigation, tags, and things like that. It also features a dark theme. What I like most is that there’s no layout framework, so you can just add these styles into a site with a Grid or Flexbox layout and get on with your day.

15-relax

Featured image via DepositPhotos.

css-animation-libraries

There are an awful lot of libraries that want to help you animate things on the web. These aren’t really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like “animate-flip-up” and watch an element, uhhh, flip up? These are the kind of libraries to look at.

I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects.

Let’s take a look at the landscape of them. Some libraries have different approaches: only take what you need classes, Sass mixins, light JavaScript libraries for adding/removing classes, etc. But they are all essentially “CSS animation libraries.” (Some of them are kinda funny having “CSS3” in the title, which kinda dates them. People just don’t say that anymore.)

While animations can both be fun and create useful interactions, it’s worth remembering that not all users want them when browsing the web. See Eric Bailey’s “Revisiting prefers-reduced-motion, the reduced motion media query” for information on how to accommodate users who prefer little or no motion.

Animista

You pick an animation you like and it gives you a class name you can use that calls a keyframe animation (you copy and paste both). The point is you just take what you need.

See the Pen


Animista Example
by Chris Coyier (@chriscoyier)


on CodePen.

Animate.css

One of the big original classic CSS animation libraries from Dan Eden.

See the Pen


Animate.css (Part 3)
by Hudson Taylor (@Hudson_Taylor11)


on CodePen.

tachyons-animate

Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need. tachyons-animate extends those by adding “Single purpose classes to help you orchestrate CSS animations.” It can be used alone, but even the docs suggest it can be used in combination with other animation libraries since helper classes are generically useful.

See the Pen


tachyons-animate
by Chris Coyier (@chriscoyier)


on CodePen.

Infinite

These animations, like rotations and pulses, that are specifically designed to run and repeat forever.

See the Pen


BgrYZo
by Chris Coyier (@chriscoyier)


on CodePen.

Motion UI

A Sass library for creating flexible CSS transitions and animations.

See the Pen


Motion UI
by Chris Coyier (@chriscoyier)


on CodePen.

micron

a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

See the Pen


Micron
by Chris Coyier (@chriscoyier)


on CodePen.

Vivify

Vivify is sort of like Animate.css in the sense that it contains a lot of the same types of animations. It does offer plenty of its own as well.

See the Pen


Vivify
by Chris Coyier (@chriscoyier)


on CodePen.

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

See the Pen


Hover.css
by Chris Coyier (@chriscoyier)


on CodePen.

AllAnimationCss3

See the Pen


All Animation
by Chris Coyier (@chriscoyier)


on CodePen.

Magic Animations CSS3

See the Pen


Magic Animations
by Chris Coyier (@chriscoyier)


on CodePen.

It’s Tuesday.

A quirky CSS Animation Library.

See the Pen


Tuesday
by Chris Coyier (@chriscoyier)


on CodePen.

vhs

See the Pen


vhs
by Chris Coyier (@chriscoyier)


on CodePen.

ReboundGen

See the Pen


ReboundGen
by Chris Coyier (@chriscoyier)


on CodePen.

CSShake

See the Pen


CSSShake
by Chris Coyier (@chriscoyier)


on CodePen.

Motion CSS

cssanimation.io

See the Pen


cssanimation.io
by Chris Coyier (@chriscoyier)


on CodePen.

WickedCSS

See the Pen


WickedCSS animations
by Chris Coyier (@chriscoyier)


on CodePen.

Woah.css

See the Pen


Woah.css
by Chris Coyier (@chriscoyier)


on CodePen.

Obnoxious

See the Pen


Obnoxious.css
by Chris Coyier (@chriscoyier)


on CodePen.

Hexa

Mimic.css

See the Pen


mimic.css
by Eric Treacy (@etreacy)


on CodePen.