JSFeeds: improgrammer.net - CSS Tools, Frameworks & Libraries

Wednesday, 3 July, 2019 UTC

CSS Tools, Frameworks & Libraries

Summary

We’ve seen a huge rise in popularity of Flexbox layouts, subtle CSS animations, SVG usage, Structure Styleguides, Instagram-style effects, deeper CSS integration with mainstream applications, like Photoshop and Sketch, and CSS preprocessors, like Sass and Less, are continuing to gain widespread acceptance.

Not only CSS is maturing beautifully, with the help of the many open-source resources released this year, using it and building something robust with it has never been easier.

All 50 of the tools in this collection are time-saving additions to your already existing web design toolbox. So, always pick the right tool for the right project.

All of the tools, libraries, and frameworks have been organized into the following categories:

CSS Animation Tools & Libraries

Rocket

Rocket – Simple tool for creating web animations.

Animate Plus

Animate Plus – JavaScript library that helps you animate CSS properties and SVG attributes.

Tuesday

Tuesday – Quirky CSS animation library.

MOTION UI

MOTION UI – Sass library for creating flexible CSS transitions & animations.

Shift.css

Shift

Shift.css – A Simple framework to build timed, contained CSS animations.

Transformicons

Transformicons – Animated icons, symbols and buttons using SVG and CSS.

CSS Utilities & Tools

PurifyCSS

PurifyCSS – Handy utility that detects which CSS selectors your app is using and creates a file without the unused CSS.

CSS Stats

CSS Stats – Tool that will visualize useful stats about your CSS.

cssfmt

cssfmt – Tool that automatically formats CSS source code.

sanitize.css

sanitize

sanitize.css – Makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box.

Flexbox Tools

Flexbugs

Flexbugs – Community-curated list of flexbox issues and cross-browser workarounds

Flexbox in 5 Minutes

flexbox in 5 minutes – An interactive tour of all the major features of the CSS property: flexbox.

flexbox

Sketch Flex Layout

Sketch Flex Layout – Plugin for Sketch that allow for CSS Flexbox layouts.

Sketch Flex Layout

cssPlus – Robust, fast and cross browser layout scaffolding based on Flexbox.

cssPlus

CSS Toolkits

Flickity

Flickity – CSS library that makes galleries & sliders feel lively and effortless.

CSSGram

CSSGram – Tiny library for recreating Instagram filters with CSS.

Marx

Marx – Stylish CSS reset with no Javacript or Classes, just raw CSS.

Pushy

Pushy – Responsive off-canvas navigation menu using CSS transforms & transitions.

Drop

Drop – Library for creating drop downs and other floating elements.

Rucksack

Rucksack – A little bag of CSS superpowers.

Gradify

Gradify – Module for producing CSS gradients as placeholders for images.

Tufte CSS

Tufte

Tufte CSS – Tools to style web articles using the ideas demonstrated by Edward Tufte’s books.

Stretchy

Stretchy – Form element auto sizing.

CSSketch

CSSketch – An open source CSS plugin for Sketch.

ai2html

ai2html – Open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS.

SassyFlags

SassyFlags

SassyFlags

– Simple library for adding flags to your websites.

Crayon.css

Crayon

Crayon.css – A list of CSS variables linking color names to hexadecimal values.

Responsive Web Frameworks & UI Kits

Primer

Primer – The CSS toolkit and guidelines that power GitHub.

Juiced

Juiced – Flexbox CSS framework.

Basscss

Basscss – Lightweight collection of base element styles and immutable utilities.

Neutron

Neutron – Sass framework for creating flexible, clear, and semantic web layouts.

flexible.gs

flexible

flexible.gs – Responsive and flexible grid system CSS framework (CSS, Sass, LESS and Stylus).

Wee

Wee – Lightweight front-end framework for logically building complex, responsive web projects.

Rin

Rin – Lean, gulp-based HTML and SASS boilerplate for better front-end coding.

Scooter

Scooter – SCSS framework & UI library from Dropbox.

spaceBase

spaceBase – Sass-based responsive CSS framework.

Rebar

Rebar – A Sass/Stylus grid framework.

Decorator

Decorator – HTML, CSS, and JavaScript front-end framework.

Concise CSS

Concise CSS – Framework is written in SASS that’s lightweight and easy-to-use.

minigrid()

minigrid() – Minimal 2kb zero dependency cascading grid layout

Workbench

Workbench – Front-end boilerplate build for faster development.

Lost

Lost – SCSS or Stylus fractional grid system built with calc().

Material Design Frameworks

Material

Material – HTML5 UI framework based on Material Design.

MUI

MUI – Lightweight Material Design web framework.

LumX

LumX – Framework based on AngularJS & Material Design specs.

Web-Based CSS Tools & Apps

CIRCULUS.SVG

CIRCULUS

CIRCULUS.SVG – SVG circular menu generator.

CSS Gradient Animator

Gradient Animator

CSS Gradient Animator – Web-based tool for generating animated gradients.

SVGOMG

SVGOMG – Web-based app for optimizing and configuring SVGO.

Blend

Blend – Tool for generating simple and beautiful CSS3 gradients.

CSS Ruler

CSS Ruler – Handy web-based tool for exploring CSS lengths.

Filter Blend

Filter Blend – CSS blend modes and filters playground & generator.

SVG Path Builder App

Path Builder App

SVG Path Builder App – Build an SVG path quickly using a GUI.

css2sass

css2sass – Web-based app for converting CSS snippets to Syntactically Awesome StyleSheets code.

.resizr

resizr

.resizr – A Simple app for testing your CSS media queries.

See more: HTML5 Cheat Sheet

The post CSS Tools, Frameworks & Libraries appeared first on I'm Programmer.

... more @ improgrammer.net

improgrammer.net