giovedì 11 dicembre 2014

50 CSS Tools & Resources from 2014

Just as we published in December last year, today we have the 2014 edition of our 50 favorite CSS resources. It’s a huge post of all of the really cool CSS resources, frameworks, libraries, UI kits and tools that have been released this year.

The below resources have been categorized into the following sections: Web-Based Tools & Apps, CSS Button Libraries, CSS Animation Libraries, CSS Typography Toolkits, CSS Loading Spinners Libraries, Material Design Inspired Frameworks, CSS Frameworks, Boilerplates & UI Kits, CSS Icon Generation Tools, CSS Color Palette Tools & Generators, CSS Learning & Reference Resources, and finally, a bunch of miscellaneous CSS tools and apps. Phew!!!

Here we go then…

Web Based CSS Tools & Apps

 

StyleStats, a small app for collecting statistics on any CSS file.
StyleStats A small app for collecting statistics on any CSS file

 

 

extractCSS, a tool which can extract ids & classes from HTML documents and output a CSS stylesheet.
extractCSS A tool which can extract ids & classes from HTML documents and output a CSS stylesheet

 

 

CSS Shrink, a small tool for ‘shrinking’ CSS files.
CSS Shrink a small tool for shrinking CSS files

 

 

CSSynth, a small app for running animations in order.
CSSynth A small app for running animations in order

 

 

EnjoyCSS, a useful tool that allows you to adjust rich graphical styles quickly without coding.
EnjoyCSS A useful tool that allows you to adjust rich graphical styles quickly without coding

 

 

Flexy Boxes, a CSS flexbox playground and code generation tool.
Flexy Boxes, a CSS flexbox playground and code generation tool

 

CSS Button Libraries

 

Beautons, a CSS toolkit for creating consistent, robust and solid buttons.
Beautons A CSS toolkit for creating consistent, robust and solid buttons

 

 

btns.css, a lightweight CSS library for building a variey of beautiful and responsive buttons.
btns.css is a lightweight CSS library for building a variey of beautiful and responsive buttons

 

 

Social Buttons v2, a collection of east to use and elegant sharing buttons.
Social Buttons v2 A collection of east to use and elegant sharing buttons

CSS Animation Libraries

 

 

CSS Shake, a collection of CSS classes that will vibrates & shake the 'DOM'.
CSS Shake A collection of CSS classes that will vibrates & shake the 'DOM'

 

 

Magic Animations, a small library of CSS3 special effect animations.
Magic Animations A small library of CSS3 special effect animations CSS Libraries

 

 

Hover.css, a selection of CSS3 animated hover effects for buttons.
Hover.css A selection of CSS3 animated hover effects for buttons

 

 

Saffron, a Sass mixin library of simple CSS3 animations and transitions.
Saffron A Sass mixin library of simple CSS3 animations and transitions CSS Libraries

CSS Typography Toolkits

 

 

typebase.css, a minimal and customizable LESS & SASS typography stylesheet.
typebase.css A minimal and customizable LESS & SASS typography stylesheet

 

 

Typesettings, a Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratios.
Typesettings A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratios CSS Libraries

 

 

Sassline, Sass mixins for setting text to a baseline grid with ease.
Sassline A Sass mixins for setting text to a baseline grid with ease CSS Libraries

 

CSS Loading Spinner Libraries

 

Tumblr-Style Loading Cogs, a library of animated CSS and SVG icons.
Tumblr-Style Loading Cogs animated with CSS and SVG icons

 

 

Single Element CSS Spinners, a library of single <div> CSS animated loading spinners.
Single Element CSS Spinners A library of single <div> CSS animated loading spinners

 

 

SpinKit, a collection of smooth and easy to customize CSS3 animated loading indicators.
SpinKit A collection of smooth and easy to customize CSS3 animated loading indicators

 

Material Design Inspired Frameworks

 

Materialize is a new framework that utilizes many of the styles, elements, components, animations and of course, the principles of Google's Material Design.
Materialize

 

 

Material UI, a Less CSS framework combined with a huge collection of React-powered components that also implement Google's Material Design specs.
Material UI

 

 

Material Framework, asuper-lightweight Material Design framework with CSS-only components.
Material Design for Bootstrap

 

CSS Frameworks, Boilerplates & UI Kits

 

Flexbox Grid, a grid system based on the flex display property.
Flexbox Grid A grid system based on the flex display property

 

 

Fluidity, a vey, very lightweight responsive system.
Fluidity A vey, very lightweight responsive system

 

 

PowerToCSS is a versatile and lightweight CSS Framework.
PowerToCSS is a versatile and lightweight CSS Framework

 

 

Kouto Swiss, a Complete CSS Framework for Stylus.
Kouto Swiss, a Complete CSS Framework for Stylus

 

 

ConciseCSS, a Lightweight, Customizable, Scalable, Sass-Based, OOCSS Framework.
ConciseCSS, a Lightweight, Customizable, Scalable, Sass-Based, OOCSS Framework

 

 

Cute Grids, a feature-rich responsive grid system.
Cute Grids A feature-rich responsive grid system

 

 

Ungrid, a simple and responsive, table-based CSS grid system.
Ungrid -  A Simple and Responsive, Table-Based CSS Grid System

 

 

csstyle, a modern approach for creating maintainable stylesheets.
csstyle

 

 

Zen Grids, a responsive grid system built with the power of Sass.
Zen Grids A responsive grid system built with the power of Sass CSS Libraries

 

 

Pure CSS Components, a set of common UI components.
Pure CSS Components A set of common UI components

 

 

BASSCSS, a lightweight and responsive toolkit based on OOCSS principles.
BASSCSS A lightweight and responsive toolkit based on OOCSS principles

 

 

Responsee II, a lightweight responsive CSS framework.
Responsee II A lightweight responsive CSS framework

 

CSS Icon Generation Tools

 

Glyphter, a handy tool for creating icon fonts from SVGs.
Glyphter A handy tool for creating icon fonts from SVGs

 

 

Perfect Icons, a web based social icon creator.
Perfect Icons A web based social icon creator

 

 

iconizr, a tool for converting SVG images to a set of CSS icons.
iconizr A tool for converting SVG images to a set of CSS icons

 

CSS Color Palette Tools & Generators

 

Colors – SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web.
Colors SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web

 

 

BADA55.io, an app for finding the most badass leet words for your CSS hex colors.
BADA55.io, an app for finding the most badass leet words for your CSS hex colors

 

 

Pantone Sass, a list of Pantone colors as Sass variables.
Pantone Sass A list of Pantone colors as Sass variables

 

CSS Learning & Reference Resources

 

CSS Vocabulary, a small web app to help understand CSS terminology.
CSS Vocabulary A small web app to help understand CSS terminology

 

 

CSS PREprocessors, a Reference for the Three Most Popular CSS Preprocessors (Less, Sass, and Stylus)..
CSS PREprocessors, a Reference for the Three Most Popular CSS Preprocessors

 

 

Magic of CSS, a free CSS course for web developers who want to be 'magicians'.
Magic of CSS A free CSS course for web developers who want to be 'magicians'

 

 

Cerberus, a few simple patterns for responsive HTML emails.
Cerberus A few simple patterns for responsive HTML emails

 

Miscellaneous CSS Tools, Apps & Libraries

 

Andy.scss, an open-source collection of useful SASS mixins.
Andy.scss, an open-source collection of useful SASS mixins

 

 

Sache, a directory of Sass & Compass extensions.
Sache A directory of Sass & Compass extensions

 

 

CSS Plot, a simple pure-CSS charting library.
CSS Plot, a simple pure-CSS charting library

 

 

FSVS, a simple fullscreen vertical slider using CSS3 transitions with jQuery fallback.
FSVS, a simple fullscreen vertical slider using CSS3 transitions with jQuery fallback

 

 

Imacss, a library that transforms image files to data URIs.
Imacss A library that transforms image files to data URIs

 

 

Pesticide, a CSS layout debugging tool.
Pesticide A CSS layout debugging tool

 

 

Kite, a flexible layout helper CSS library
Kite A flexible layout helper CSS library

 

Finished!

Phew!!! What a fantastic year it has been for CSS, and plenty of resources for you to kick-start your 2015 web projects.

Categories: , ,

Copyright © Niente Canzoni d'Amore | Powered by Blogger

Design by Anders Noren | Blogger Theme by NewBloggerThemes.com | BTheme.net        Up ↑