50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017
With all of the trend changes and advancements that CSS goes through, we shouldn’t be surprised at the volume of free resources and tools that have been released recently. These time-saving CSS libraries and tools have been built to make your lives that little bit easier and also offer a clear learning window into CSS properties that you may not have adopted yet, or fully understand quite yet.
In this collection we have collected 50 of our favorite CSS libraries, frameworks, and tools that have all been released this year.
All of the tools and libraries have been categorized into the following categories: Flexbox Tools & Libraries, CSS Grid Tools, CSS Button Libraries, CSS Components, CSS Animation Tools, CSS References, Guides & Checklists, Atomic CSS Frameworks,CSS Web Frameworks, Lightweight CSS Frameworks, and finally, a bunch of Miscellanous CSS Tools.
CSS Flexbox Tools & Libraries
Waffle Grid
Waffle Grid – An easy to use flexbox grid system.
RAGrid
RAGrid – A flexbox grid that uses recognizable attributes instead of classes.
Taffy Framework
Taffy – An open source, lightweight, modern CSS framework built with Flexbox.
Griddd
Griddd – A dead simple, customisable, flexbox-based grid.
Flexbox Cheatsheet
Flexbox Cheatsheet – An interactive guide for CSS Flexbox properties, with plenty of examples.
For more Flexbox resources, take a look at this post.
CSS Grid Tools & Libraries
Griddy
Griddy – An online tool for learning the CSS Grid.
Graaf
Graaf – A collection of pure CSS grid overlays for designing.
CSS Grid Cheat Sheet
CSS Grid Cheat Sheet – A CSS grid visual guide.
For an introduction to CSS Grid, take a look at this post.
CSS Button Libraries
Bttn.css
Bttn.css – Awesome buttons for awesome projects!
Hover Buttons Library
Hover Buttons Library – A collection of animated CSS/SCSS buttons.
Buttons
Buttons – A collection of CSS buttons.
Social Share Kit
Social Share Kit – A library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups.
CSS Components
Foundation Building Blocks
Foundation Building Blocks – Collection of over 100 components to jump start your projects.
Balloon.css
Balloon.css – Simple tooltips made of pure CSS.
Fontisto
Fontisto – The iconic font and CSS toolkit.
Pretty Checkbox
Pretty Checkbox – A pure CSS library to beautify checkbox and radio buttons.
CSS Checkbox Library
CSS Checkbox Library – A huge library of CSS Checkboxes for every taste.
explodal
explodal – An “explosive” modal window that consists of over 97% CSS, 1 line of JavaScript and a small GIF.
SCSS Only Slider
SCSS Only Slider – This tutorial will teach you how to create a SCSS only responsive slider.
CSS Loader
CSS Loader – Simple loaders for your web applications using only one div and pure CSS.
CSS Animation Tools & Libraries
Animatelo
Animatelo – Just-add-water Web Animations.
Vivify Library
Vivify – A free CSS animation library.
Animista
Animista – A place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.
Obnoxious.CSS
Obnoxious.CSS – Animations for the strong of heart, and weak of mind.
For even more CSS animation tools and resources, take a look at this round-up.
CSS References, Guides & Checklists
CSS Cheatsheets
50 Cheatsheets, References and Guides for CSS – A huge collection of CSS-related cheatsheets and guides that span a variety of subjects.
CSS Database
CSS Database – A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
CSS Triggers
CSS Triggers – An interactive resource that lets you see how CSS properties utilize browser resources.
Flawless Typography Checklist
Flawless Typography Checklist – A complete typography master course in the form of an interactive visual checklist.
Sassmagic
Sassmagic – An extensive Sass reference guide.
Boilrplate
Boilrplate – A curated directory of boilerplates to help you start your projects.
Atomic CSS Frameworks
Fractures
Fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.
Biomatic UI
Biomatic UI – A flexible atomic-focused CSS framework.
CSS Web Frameworks
Tailwind CSS
Tailwind CSS – A utility-first CSS framework for rapid UI development.
PaperCSS
PaperCSS – The less formal CSS framework.
Shoelace.css
Shoelace.css – A back to the basics CSS starter kit, for when you don’t need the whole boot.
Turret CSS
Turret CSS – A styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
Trowel
Trowel – A Sass toolkit that allows you to create and use CSS frameworks.
Unnamed
Unnamed – A colorful CSS framework made by a human not an Ai.
awsm.css
awsm.css – A CSS library for beautify semantic HTML markup without classes, attributes, etc.
Brutalist Framework
Brutalist Framework – An open source framework for the brutalist web design trend.
BBC Grandstand
BBC Grandstand – A collection of common CSS abstractions and utility helper classes.
iotaCSS
iotaCSS – A smart open source SASS based OOCSS framework built for scale.
Semantic UI
Semantic UI – A development framework that helps create beautiful, responsive layouts using human-friendly HTML.
CSS Frameworks
Luxbar
Luxbar – Featherweight, responsive, CSS only navigation bar.
mini.css
mini.css – Aims to provide as much functionality as possible in about 5KB gzipped.
Wireframe CSS
Wireframe CSS – A minimal CSS framework for wireframing.
Less Grid Boilerplate
Less Grid Boilerplate – A lightweight 12-column CSS grid system built with CSS Grid and LESS.
kernel.css
kernel.css – An unintrusive, lightweight and semantic CSS and JavaScript framework inspired by the Material Design spec.
Petal
Petal – A modern, light CSS UI framework. Based on LESS.
Tent CSS
Tent CSS – Pulling inspiration from outdoor survival, Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites.
Spectre.css
Spectre.css – A lightweight, responsive and modern CSS framework for faster and extensible development.
We recently published a collection of new, lightweight CSS frameworks.
Miscellanous CSS Tools
Gradientify
Gradientify – A collection of top gradients with copy and paste CSS code.
Critical Path CSS Generator
Critical Path CSS Generator – Speed up your page render time in no time.
Grabient
Grabient – An online tool for creating all sorts of gradients that can be exported as CSS or to Sketch.
CSSRooster
CSSRooster – A bot that writes CSS classes for HTML with deep learning.
WebGradients
WebGradients – A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.
Angled Edges
Angled Edges – A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
Plumber
Plumber – Create better looking documents and speed up CSS development by adding vertical rhythm to your page.
For more web designer tools: 50 Tiny, Time-Saving, and Free Tools for Web Designers.
You might also like to take a look at the Top 50 CSS Tools from earlier in the year.
The post 50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017 appeared first on Speckyboy Web Design Magazine.