50 Favorite CSS Libraries, Frameworks and Tools from 2019

speckyboy.com speckyboy.com2 years ago in #Resources Love73

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. 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. 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….

Like to keep reading?

This article first appeared on speckyboy.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply