Our 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.
CSS Frameworks
Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you.
xstyled – A consistent theme-based CSS for styled-components.
Fomantic-UI – A free, “human-friendly” development framework for creating responsive websites.
Raster – A simple CSS Grid system that utilizes descriptive HTML.
Diez – A free, open-source design language framework.
Butter Cake – Check out this modern, lightweight CSS framework.
CSS Libraries
Destyle.css – An “opinionated” CSS reset library.
Immutable Styles – A library for styling web interfaces with a focus on predictability and robustness.
Matter – A collection of Material Design components in pure CSS.
Water.css – Simple styles and semantic code for your static website.
Flexbox Case Studies – Tutorials to help you achieve common Flexbox layouts.
IsometricSass – A Sass library for creating isometric 2D without JavaScript.
css-fx-layout – A lightweight CSS Flexbox library that includes both classes and HTML data attributes.
a11y-css-reset – A set of global CSS rules to help improve the accessibility of your projects.
augmented-ui – A tool for creating “futuristic, cyberpunk-inspired UI” with CSS.
CSS Animation
CSS Wand – Copy, paste and customize a variety of useful animation styles.
CSSFX – A collection of animated CSS buttons, hover effects, inputs and loaders for use in your projects.
CSSeffectsSnippets. – A collection of handy CSS animations that you can copy and paste.
useAnimations – A free CSS library of icon-based microinteractions.
extra.css – Use this CSS Houdini library to add stunning effects.
Izmir ImageHover CSS Library – A mini CSS library built by Ciaran Walsh for quickly creating beautifully animated image hover elements.
CSS Animo – A collection of copy & paste CSS animation effects.
CSS Typography
CSSans Pro – A free colorful and sassy font.
RFS – A responsive font size engine that automatically calculates sizing based on browser viewport.
Typetura – A tool for fluid typesetting, based on screen size.
Interactive Typography Cheatsheet – A fun tool for learning the various components of a letterform.
TypeSafe CSS – A tiny (under 1KB) responsive CSS framework with a focus on reading and writing.
Fontsmith Variable Fonts – Learn about this much-hyped development in typography – complete with examples.
Font style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.
Fontanello – A browser extension that displays typographic styles via right-click.
GooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items.
CSS Tools & Generators
Flexulator – An interactive CSS Flexbox space distribution calculator.
CSS Grid Layout Generator – Create complex grids with this visual tool.
branded. – A free tool for creating and maintaining style guides.
CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.
Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.
Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.
Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.
DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.
Gradient Generator – Take two colors and create a variety of custom CSS gradients.
Mycolorpanda – Create CSS gradients in a breeze with this simple tool.
Amino – A live CSS editor for Google Chrome.
CSS Learning Guides & Cheatsheets
CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.
Relearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.
CSS Guidelines – A detailed document to help you write more scalable and manageable CSS.
The Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.
CSS Layout – A collection of popular CSS layouts and patterns.
Flexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.
CSS Inspiration
Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.
And, finally…
CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.
Our CSS Snippets Collections
- 10 CSS Animated Underline Text Effects Snippets
- 10 Advanced Image Hover Effects Snippets
- 8 Tip-Top Toggle Switch CSS Snippets
- 10 Character Designs Created Entirely With HTML & CSS
- 10 Incredible Examples of CSS, JS & SVG Logo Design
- 10 Examples of Unorthodox Shapes Created with CSS
- 9 Free Progress Bar JavaScript Plugins For Web Designers
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 Free CSS & JavaScript Select Box Snippets
- 8 Ways to Make the Search Field Sexy with CSS
- 9 Custom Open Source File Upload Field Snippets
- 10 Exciting CSS & JavaScript Page Transition Effects
- 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
- 10 Snippets for Creating Split Screen Layouts
- 10 Amazing CSS & JavaScript Text Animation Snippets
- 10 Amazing CSS Button Libraries & Collections
- Free Modal Window Libraries & Plugins
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.
The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 appeared first on Speckyboy Design Magazine.