Web is constantly changing. While this is exciting it also means that front-end developers must always be proactive about learning new techniques, adapting to changes, and be willing and eager to accept new challenges. So in this post we`ve compiled list of 35 best CSS tools for 2017 that will help not only enhance your front-end development workflow, but also make your life easier, save you time, and lessen your headaches.
CSS Reference
A free visual guide to the most popular CSS properties.
CSSPIN
It has a different set of interactive Pure CSS Loaders and Spinners which are built on the top of LESS Preprocessor. Individual Pure CSS Loader or Spinner can be easily customized and can be embedded with Single HTML Element in your next Dev Project.
cssnano
It takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.
Pavilion
Built for front-end developers who lean towards creativity, exploration and creating UI components themselves from the ground up whilst depending on a solid foundation with future-proof capabilities.
CSS Protips
A collection of tips to help take your CSS skills pro.
Picnic
A beautiful CSS library to kickstart your projects.
Micon
This icon exracted as segmdl2.ttf in windows 10 and converted too css toolkit based on Font Awesome. Micon icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Wing
It provides a base of styles, and you don’t even need to learn a gazillion class names, all of your elements will be styled automatically.
Brand-colors
A color collection available in sass, less, stylus and css.
google-type
There are over 800 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25×52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
Mobi
A lightweight, flexible css framework that focus on mobile.
minireset.css
A tiny modern CSS reset.
Scrollanim
CSS3 and JavaScript library to create stunning scroll animations that work everywhere.
Materialette
Easily access every color in Google’s material design palette from your OS dock.
Starability
Starability ratings are done in pure HTML and CSS, and are accessible by keyboard, so even people using screen readers are able to use it.
Radiobox
Tiny set of CSS3 animations meant for your radio inputs.
SpinThatShit
Set of SCSS mixins for single element loaders and spinners.
Tootik
A pure CSS/SCSS/LESS Tooltip library. Super easy to use, No JavaScript required.
Family
Set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way.
Sprite Spirit
SCSS Mixin that Brings Image Sprite to life.
Flex Layout Attribute
Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self.
tipograf
Lightweight typography base. It is available in pure CSS or Less. Heavily inspired by Medium, it tries to enforce good vertical rhythm.
Auroral
Collection of animated background gradients, that can be used almost anywhere.
iconoo
Icon pack that needs no external resources.
text-spinners
Pure text, CSS only, font independent, inline loading indicators.
Cutestrap
There are plenty of amazing front end frameworks already, such as, Bootstrap and Foundation. If you’re looking for something feature rich with loads of components, those are both great choices. However, if you’re looking for something in between normalize.css and a full blown framework, meet Cutestrap. Cutestrap is only 8kb of CSS.
universal.css
The only CSS you will ever need.
Kickoff
It comes with a robust CSS framework; it provides many sensible defaults so that you can get your project up and running in the shortest possible time.
Stylecow
Modern CSS to all browsers.
SourceJS
SourceJS is a dynamic Style Guide platform. It allows to combine multiple project UI component libraries, based on any technologies.
CSSTree
Fast detailed CSS parser with syntax validation.
Emmet
With Emmet, you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Easing Functions Cheat Sheet
Simple cheat sheet to help developers pick the right easing function.
Browserdiet
The definitive front-end performance guide.
Awesome search
A website which makes you access the awesome lists more quickly.
