Some of these tiny time-savers will help you to better assess your site’s accessibility, check your CSS for redundant classes, copy & paste CSS animations, beautify screenshots of your code, and so much more.

Whatever the web design time-saver you’re looking for, then the chances are you will find it here.

If you’re looking for last year’s collection of tiny little tools for web designers, here they all are.

Color Tools & Generators

Pattern & Gradient Generators

Code Screenshot Generators

Image Effect Tools & Editors

CSS Tools & Generators

CSS Button Generators

CSS Code Quality Analyzers

Fonts & Typography Tools

Web Accessibility Tools

Icon Sets & Tools

Markdown Tools & Online Editors

Miscellaneous Tools & Generators

The post 50 Tiny Little Web-Based Tools for Web Designers from 2022 appeared first on Speckyboy Design Magazine.

Here are 10 free tools you can use to make your forms the best they can be:

formbase

formbase is a package that uses CSS/SASS to bring improved default styles to your form elements. The styles are cross-browser compatible and make for a better UX.

Foxholder

Foxholder is a collection of 15 different placeholder animations to enhance your forms. When users interact with an input, an animation is triggered. It’s a neat way of ensuring that users will know exactly where they are on your form.

dirrty

dirrty is a jQuery plugin that can detect whenever a form field has been modified. When a change is detected, the user will be prompted to save changes to the form.

Inputmask

Make form input data like dates, phone numbers and currencies super easy for users with Inputmask. When a user interacts with a defined input, a mask is placed in the field showing the exact formatting required. Not only does it show users the required format, but it also ensures that the input data is valid.

jQuery Validation Plugin

The jQuery Validation Plugin is a highly-customizable tool to help with validating form data. Out of the box, it supports both URL and email validation. It even comes with an API to allow developers to add their own spin.

If you’re looking for more jQuery validation libraries, take a look at this collection.

dependsOn

Field dependencies are great for tasks like making sure that the user only sees the relevant fields and can also be a means of validation. dependsOn is a jQuery plugin that will allow you to add dependencies to any form.

Choices.js

Using Choices.js, you can add some very attractive select box and text input features into your forms. This lightweight, vanilla JavaScript lets you create your own custom input templates.

Cascading Drop-Down Menu

Cascading Drop-Down Menu is a great solution for times when you need a form that requires the user to select several steps. For example, think of choosing a car. You’d select the make, then the model, then the year, and so on.

Multipicker

Multipicker provides a visually-appealing way for users to select multiple items (similar to a checkbox) or a single item (similar to a radio button) in a list. It can be used with those aforementioned form elements or even HTML elements like an unordered list.

jQuery Form Plugin

Upgrade your standard HTML forms to use AJAX with the jQuery Form Plugin. The plugin features lots of options to allow you to take full control over how form data is submitted.

Great Forms = Great UX

The combination of a form that looks great, is easy to use and assists the user in entering data is one that results in a better conversion rate. Adding one or more of the tools above into your workflow can help bring your forms up to snuff.

The post 10 JavaScript & CSS Frameworks for Enhancing HTML Forms appeared first on Speckyboy Design Magazine.

Table of Contents

• CSS Layout Tools
• CSS Tools
• CSS Gradient & Color Tools
• SVG Tools
• Loader & Spinner Tools
• Screenshot Generators
• Icon Tools
• Typography & Font Tools
• Image Filter Tools
• Animation Tools
• Profile Picture Generators
• Learning Tools
• Text Editors
• Uncategorizable Useful Tools
• Share & Display Code Snippets
• GitHub Tools & Apps

CSS Layout Tools

Web-Based CSS Tools

Web-Based Pattern Generators

Web-Based Color & Gradient Generators & Tools

Web-Based SVG Tools

Loader & Spinner Tools

Screenshot Generators

Icon Generators & Tools

Web-Based Typography & Font Tools

Image Filter Apps & Tools

Web-Based Animation Tools

Profile Picture & Avatar Generators

Web-Based Learning Tools

Note-Taking & Text Editor Tools

Useful Web-Based Tools

Share & Display Code Snippets

GitHub Tools & Apps

…and finally…

Dev Dad Jokes – A silly little app that adds a little extra humour into the world of developers.

The Useless Web – Have some free time? Why not use this resource to find some useless websites to visit?

The post 75 Tiny Little Web-Based Tools for Web Designers appeared first on Speckyboy Design Magazine.

What we are going to do is share a collection of tools, frameworks, and tutorials with you that will help ease your CSS animation learning woes and help save you some time along the way.

You may also like these toolboxes: CSS Flexbox, SVG Workflow Tools, Styleguide Tools, or Tools for Formatting CSS.

Animista

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

Animate.css

Animate.css is a collection of cross-browser CSS animations that you can use in your sliders, home pages, and other web projects.

Keyframes.app

Generate amazing CSS animations with this free web-based tool Keyframes.app.

Stylie

Stylie is a web-based CSS animation tool that you can use to configure and generate your own set of animations.

animo.js

animo.js is a powerful tool for managing CSS animations. You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event or at any moment you please.

Anima

The lightweight (only 5k when gzipped) Anima lets you animate multiple objects at the same time, and each item can have it’s mass and viscosity to emulate real-life objects. It uses CSS transforms and 3d-transforms together with Javascript to create the animation.

Animated CSS Background Generator

Create your own mind-blowing animated background with this free online Animated Background Generator.

Vivify

Vivify is a new and free CSS animation library.

Rocket

Rocket is a simple tool for creating web animations.

Animate Plus

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

Animatelo

Animatelo – Just-add-water Web Animations.

Obnoxious.CSS

Obnoxious.CSS – Animations for the strong of heart, and weak of mind.

Tuesday

Tuesday is a ‘quirky CSS animation library’.

Shift.css

Shift.css is a simple responsive framework to build timed, contained CSS animations.

MOTION UI

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

CSS Shake

CSS Shake is a collection of CSS classes that will vibrate & shake the 'DOM'.

Magic Animations

Magic Animations is a small library of CSS special effect animations.

Hover.css

Hover.css is a selection of CSS animated hover effects for buttons.

Saffron

Saffron is a Sass mixin library of simple CSS animations and transitions.

CSSynth

CSSynth is a small web-based app for running animations in order.

Ceaser

Ceaser is a simple CSS easing animation tool that you can easily employ in your projects.

WAIT! Animate

WAIT! Animate is a tool that makes it easy to calculate CSS animation keyframe percentages.

Tridiv

Tridiv is a web-based editor that lets you create 3D shapes in CSS. It is cross-browser compatible, and you can also browse several online examples before you actually start using the editor.

Morf.js

Morf.js is a JavaScript work-around that lets you produce hardware-accelerated CSS transitions with custom effects.

CSS Keyframes Animation Generator

The CSS Keyframes Animation Generator, as the name suggests, is an online tool that lets you create CSS keyframe animations.

Effeckt.css

The Effeckt.css library offers a multitude of UI-less animations and transitions that you can use in your web projects.

CSS Animation Cheat Sheet

The CSS Animation Cheat Sheet is a set of pre-made CSS animations that you can use in your web projects by adding the stylesheet to your site and applying the pre-made CSS classes to the necessary elements.

CSS Animation Tutorials

• A Beginner’s Introduction to CSS Animation
  After covering the basics, this tutorial will show you how to quickly create a quick example that will animate a square element into a circle.
• CSS Transitions, Transforms and Animation Tutorial
  This website teaches you how to make use of CSS transitions, transforms and animations in your web projects. The tutorial is fairly simple and does not require an advanced level of working knowledge of CSS.
• Using CSS Animations
  This tutorial serves as a primer to CSS animations. If you are looking for a place to start with CSS animations, this tutorial can be of great use for you.
• Using CSS Transitions
  Just like the above one, this tutorial too comes from the Mozilla Developer Network, even though this one teaches you how to work with CSS transitions.
• 4 Simple CSS Animation Tutorials
  This resource is a collection of four CSS animation tutorials combined into one. You can learn how to use and work with functions such as scale(), translate(), rotate() and skew().
• Examples of Pseudo-Elements Animations and Transitions
  This tutorial unravels the potential of CSS animations and transitions when working with pseudo-elements :before and :after.
• Animated 3D Bar Chart with CSS
  This advanced tutorial explains how to create a 3D bar chart using CSS animations.

The post 25 Free CSS Animation Libraries, Tools & Generators appeared first on Speckyboy Design Magazine.

Quite often, this means optimizing images, implementing page caching and serving files via a content delivery network (CDN). These are all effective measures. But one item that doesn’t get enough attention is the potential bloat in a website’s CSS.

While you might minify your stylesheets or serve them over a CDN, more can be done. Specifically, getting rid of the wasteful markup that isn’t being used and tightening up styles that are still relevant.

This is best done from the very start of the build process. But it’s also possible to lighten the load on existing websites. Let’s take a look at the challenges involved, along with some tools and techniques that can make for a faster website.

Dealing with Bloat Built into Themes and Frameworks

It used to be that websites were essentially built from scratch. This was a great approach in that designers could include only the styles and scripts that were needed. If done with care, this process could result in a finely-tuned website.

Of course, there are a number of reasons why that practice has been abandoned by many of us. It’s simply not efficient in terms of time and budgetary restraints.

Modern websites are so often built on top of a prebuilt product. That could be a CSS framework such as Bootstrap or an elaborate WordPress theme. In some cases, a CMS theme may even include a framework.

These products are meant to be one-size-fits-all. By including everything you might possibly need, it makes development that much quicker. Unfortunately, the same can’t be said for their impact on performance.

So, what can be done to improve the situation?

Use Component-Based or Lightweight Frameworks, Where Possible

Theoretically, it’s possible to both get the advantages of a framework while avoiding bloat. This can be achieved by using component-based packages that enable you to load specific features while leaving others out. The aforementioned Bootstrap does allow for this type of customization – to a point.

Another alternative is Tailwind CSS, which provides basic styles and assumes you will build on top of them. If you’re looking for a great starting point, as opposed to a more finished product, this could be a fit.

There’s nothing wrong with using a framework. But look for one that either: a) lets you pick and choose which components to load, or; b) offers a barebones stylesheet that can be easily customized. Either way, your project will benefit from the reduced load.

What to Do with CMS Themes?

Products such as commercial WordPress themes can be tricky, as they often include a boatload of styles – whether you need them or not.

It’s possible that a specific theme will be well-organized to the point where it’s easy enough to dequeue the stylesheets you don’t want. There may even be a theme options panel that lets you do this with a few clicks. However, this is more likely the exception than rule.

The best way to avoid a bloated theme is to create your own. For instance, a WordPress starter theme will offer up some barebones CSS that you can customize. This helps to ensure a leaner stylesheet and takes away at least a tiny bit of the overhead associated with a CMS.

Declutter Existing Stylesheets

Changing our focus to an existing website, decluttering and refactoring CSS can be done one of two ways:

Manually Reviewing Styles

Firing up your favorite code editor and opening your site’s stylesheets is always a good place to start. Yes, it can be a tedious experience. But it’s also an effective way to take care of the low-hanging fruit.

It’s not necessary to scrutinize every line of CSS. Instead, the idea is to find any items that you know aren’t being used or aren’t as efficient as they could be.

For example, let’s say you run a WordPress website that has some custom styles to overwrite those of a plugin. What if you’re no longer using that particular plugin? In this case, the styles can easily be removed.

Or, perhaps there are a selection of styles that you only use sporadically – like during the winter holidays. It may be worthwhile to move those styles into a separate file and only call them when needed.

Then there are CSS selectors that just aren’t very well written. Maybe they have a number of no-longer-needed browser prefixes or unnecessary duplicate properties. This is an area ripe for cleanup.

If your site’s design is more than a couple of years old, you might be surprised at how much excess styling you can find.

Use an Automated Tool

There are a number of tools out there that will scan your site (or, at least a part of it) and report back with a list of unused CSS. However, don’t hold your breath while waiting for perfection.

Much like automated accessibility tools, unused CSS scanners can only give you so much information. Therefore, it’s best to take results with a grain of salt and use them as a guide – not a final answer to your question.

Chris Coyier of CSS-Tricks wrote an outstanding article on this particular issue that is worth checking out. He not only tests out some of these tools but also looks at the bigger issues at hand, such as media queries.

However, if you’re interested in trying one or more of these tools, a few of the more popular choices are:

• JitBit
• PurgeCSS
• PurifyCSS
• Unused CSS

A combination of an automated tool and manual review is likely the best course of action. Doing both will give you a more complete picture of potential performance optimizations. You may not catch every single item, but there’s still an opportunity to make a measurable impact. You can do some before and after testing with a tool such as GTmetrix to see the results.

When it Comes to CSS: Waste Not, Want Not

It’s amazing just how large a stylesheet can get – especially when using a readymade CSS framework. Sure, it’s nice that the author has done a lot of the hard work for you in terms of styling elements. At the same time, it leaves a lot on the table when it comes to page rendering and load times.

This is something worth paying attention to right from the very start of a project. By looking to reduce the weight of a stylesheet, you’re helping to wring every last drop of optimization out of your site.

If your website is already out there for the world to see, there are still positive steps you can take. Review the CSS and look for items to streamline or remove. Utilize one of the many automated tools out there to find items you might have missed.

The bottom line is that trimming your CSS down to the essentials isn’t a perfect process. However, it’s still one worth your time and effort.

The post Avoiding ‘Wasteful’ CSS in Your Projects appeared first on Speckyboy Design Magazine.

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 useful!

CSS Libraries

filters.css – A tiny CSS library for applying color filters to images and more.

Seasonal.css – A CSS framework that displays a seasonal color scheme based on the date.

Checka11y.css – Utilize this stylesheet to quickly detect some common accessibility issues.

Knopf.css – A modern, modular, extensible CSS button system.

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.

LaTeX.css – A minimal, almost class-less CSS library which makes any website look like a LaTeX document.

CUBE CSS – A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. At least, that’s what they say.

pattern.css – A CSS-only library for adding background patterns to your projects.

98.css – Missing the good old days of computing? Use this design system to recreate those classic UIs.

Cooltipz.css – A library for adding pure CSS tooltips to existing HTML elements.

MVP.css – A minimalist stylesheet for HTML elements.

MoreToggles.css – A pure CSS library that provides you with stylish toggles.

Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes.

CSS Frameworks

Cirrus.CSS – A component and utility centric SCSS framework designed for rapid prototyping.

OrbitCSS – Check out this modern CSS framework based on flexbox.

Halfmoon – A front-end framework with a built-in dark mode and full customizability using CSS variables.

mono/color – A small, responsive, dual-themed CSS-only framework.

new.css – A classless CSS framework for building HTML-only websites.

Honeycomb – A configurable, mobile first, fluid SCSS framework for your web projects.

Shorthand – A free and open-source CSS framework that allows you to make unique and modern designs without writing any CSS.

Griddle – A modern CSS framework built with CSS Grid and Flexbox.

Flash Grid – A new lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout.

Web-Based CSS Tools & Generators

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.

CSS Spider – This Chrome extension is billed as the quickest and most convenient way to copy, visualize, edit and export CSS.

Layoutit Grid – Build your ideal CSS Grid with this online tool.

Beautiful CSS box-shadow examples – Choose from this collection of 80+ copy & paste shadow styles.

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.

CSS Effects – A collection of click-to-copy CSS special effects.

Capsize – An online tool for defining typography in CSS.

CSS Background Patterns – Generate your own seamless background pattern.

Animated CSS Background Generator – Make your own mind-blowing animated background with this tool.

Keyframes.app – Generate awesome CSS animations with this web-based tool.

Gradihunt – Find or generate the perfect CSS gradient for your projects.

CSS Section Separator Generator – Use this tool to create unique separator shapes with pure CSS.

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.

Neumorphism.io – A tool for creating Soft-UI CSS code.

700+ CSS Icons – A collection of free icons available in CSS, SVG and other popular formats.

Indie Icons – A collection of icons you can copy-and-paste into CSS, HTML and Illustrator.

Useful CSS Cheatsheets

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.

BEM Cheat Sheet – Use this guide to boost your CSS class naming skills.

A list of 300+ CSS properties – A helpful list of CSS properties that are supported by browsers.

Visualizing CSS Resets – Use this helpful infographic to better understand what CSS resets do.

Selectors Explained – Translate CSS selectors into plain English.

Useful CSS Items

What Does 100% Mean in CSS?

CSS Breakpoints Used by Popular CSS Frameworks – Confused about which CSS breakpoints to implement? Check out what the biggest frameworks are utilizing for inspiration.

Learn Z-Index Using a Visualization Tool – CSS z-index can be hard to grasp. This visual guide can help you get the hang of it.

Color Theme Switcher – Learn how to add multiple color schemes to your website via CSS.

The CSS Cascade – Learn how web browsers resolve competing CSS styles.

What’s Missing From CSS? – A random look at responses to the annual CSS survey. See anything you agree with?

Favorites from Previous Years

• Our Favorite CSS Libraries, Frameworks and Tools from 2019
• Our Favorite CSS Libraries, Frameworks and Tools from 2018
• Our Favorite CSS Libraries, Frameworks and Tools from 2017
• Our Favorite CSS Libraries, Frameworks and Tools from 2016
• Our Favorite CSS Libraries, Frameworks and Tools from 2015
• Our Favorite CSS Libraries, Frameworks and Tools from 2014
• Our Favorite CSS Libraries, Frameworks and Tools from 2013

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020 appeared first on Speckyboy Design Magazine.

But if you are one of the 99.9% of web designers out there that work with CSS on a regular basis, it is for you.

You know how it goes, you start a new web project with a barebones CSS file, and as you build the site, your CSS grows rapidly with it. And it will keep on growing. It will become disorganized. The structure and at times it will be confusing and even unreadable. Structure will ultimately be lost. Mistakes will have been made. Rest assured though; it happens to everybody.

At this point you can either do one of two things, stop at different stages and re-structure the CSS, or you can wait until the site is finished and then fix everything. Either way and depending on the size of the site, it will take a lot of your time.

If only there were a bunch of tools that would help format, organize and sort my CSS for me. Thankfully, there is. Now, these tools are not fool-proof. They won’t know about the unique and quirky style you use for writing your CSS, but they will help and will save you a lot of time. Time back that will let you go and mess up another CSS file!

You may also like these toolboxes: CSS Flexbox, CSS Animation, SVG Workflow Tools or Styleguide Tools.

CSS Comb – CSS Sorting

CSScomb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, sort them in a specific order.

Unused CSS

Unused CSS is a simple tool that scans your website for any unused CSS selectors.

Purgecss

Purgecss is a tool that can quickly remove unused CSS from your site.

Sanitize CSS

sanitize.css is a CSS library that corrects broken and missing styles.

Mort

Mort is a simple tool for detecting and highlighting “dead” CSS.

CSS Shrink

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

csscss -A CSS Redundancy Analyze

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

Helium CSS – JS Tool To Scan Your Site and Show Unused CSS

Helium CSS is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages.

It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO can also perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers.

It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSS Lint- Helps Find Issues With Your CSS Code

CSS Lint is a tool that helps point out problems within your CSS code.

It does basic syntax checking as well as applying a set of rules to the code that looks for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

extractCSS

extractCSS is a tool that can extract ids & classes from HTML documents and output a CSS stylesheet.

Alternative Optimizers, Formatters & Validators:

• Online JavaScript/CSS Compression Using YUI Compressor
• PrimerCSS – Undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet
• Compressor – CSS Compression Tool
• The W3C CSS Validation Service
• CSS Validator from CSS Portal

The post 10 Free Tools for Formatting, Organizing and Tidying CSS Code appeared first on Speckyboy Design Magazine.

You will find tools for creating flexbox and grid layouts, responsive menu generators, apps for collecting stats and sorting CSS, generators for creating pie and circle menus, and much, much more.

Get ready to start bookmarking!

Flexbox CSS Tools & Web-Based Apps

Flexulator

Flexulator – An interactive CSS Flexbox space distribution calculator.

FlexBox Parent Attribute Visualizer

The FlexBox Parent Attribute Visualizer is an interactive way to see the effect of various CSS Flexbox settings.

Visualize the box-model

A useful app to help you visualize the box-model.

Flexy Boxes

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

CSS Grid Tools & Web-Based Apps

CSS Grid Generator

CSS Grid Generator – Build complex grid layouts via drag-and-drop with this tool.

CSS Grid Layout Generator

CSS Grid Layout Generator – Create complex grids with this visual tool.

CSS Grid Layout Builder

Visually Build Responsive Layouts with CSS Grid is a tool to help you build a responsive CSS grid.

Layoutit!

Layoutit! is an interactive CSS Grid building tool.

CSS Animation Tools & Web-Based Apps

Keyframes.app

Keyframes.app is a web app and Chrome extension for creating CSS animations.

CSSynth

CSSynth is a small app for running animations in order.

Animated CSS Background Generator

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

Rocket

Rocket is a simple tool for creating web animations.

SpinKit

SpinKit allows you to create simple loading spinners animated with CSS.

CSS Cheatsheet Web-Based Apps

CSS Alignment Cheatsheet

CSS Alignment Cheatsheet is a nicely-illustrated guide to aligning all the things.

Screen Size Map

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.

CSS Shape Generators

Trianglify.io

Trianglify.io will generate custom low-poly patterns in either PNG or SVG format.

CSS Doodle

css-doodle is a web-based tool for drawing simple patterns with CSS.

Circulus

CIRCULUS.SVG is an SVG circular menu generator.

CSS Measurement Tools & Web-Based Apps

CSS Ruler

CSS Ruler is a handy web-based tool for exploring CSS lengths.

px-em

px-em is a simple PX to EM calculator.

CSS Border Tools & Web-Based Apps

Fancy Border Radius

Fancy Border Radius Generator is a generator tool for creating CSS borders that go beyond the normal.

CSS Color Tools & Web-Based Apps

Mycolorpanda

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

CSS Duotone

CSS Duotone Generator is a simple tool for creating customized duotone effects with HTML & CSS.

Pantone Sass

Pantone Sass is a list of Pantone colors as Sass variables.

Flat UI Colors

Flat UI colors reference.

BADA55.io

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

CSS Gradient Tools & Web-Based Apps

Gradient Generator

Gradient Generator – Take two colors and create a variety of custom CSS gradients.

CSS Gradients

Gradient Joy is a web-based tool for generating gradients as placeholder images.

CSS Typography Tools & Web-Based Apps

typesetwith.me

typesetwith.me is a web-based typography and legibility sandbox.

Type Scale

Type Scale is a typographical visual calculator.

TypeWonder

TypeWonder is a useful tool for testing web fonts on the fly.

Font Library

Font Library is an open source project to tag and organize Google Fonts.

Icon Font Tools, Apps & Generators

GlyphSearch

GlyphSearch is an app for searching for icons from Font Awesome, Glyphicons, IcoMoon & Ionicons.

FontAwesome Finder

FontAwesome Finder will quickly and instantly search FontAwesome icons.

Fontello

Fontello will generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .

Fontsatic

Fontsatic is a tool for creating custom icon fonts (over 6,000 icons to choose from).

SVG Icon Tools, Apps & Generators

Glyphter

Glyphter is a handy tool for creating icon fonts from SVGs.

iconizr

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

iconmelon

iconmelon will quickly create a library of SVG icons.

Miscellaneous CSS Tools

DropCSS

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

extractCSS

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

CSS Shrink

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

EnjoyCSS

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

CSS3 Generator

CSS3 Generator is a simple CSS3 generator.

CSS clip-path

Clippy is an online tool you can use to create a CSS clip-path.

Encoding / Decoding Tool

One Click Encoding Decoding Tool is a useful app for converting content to ASCII character-set.

Superposition

Superposition – An app that extracts the design tokens from your website for use in your favorite design tool.

branded

branded. – A free tool for creating and maintaining style guides.

The post 50 Free Web-Based Tools & Apps for Working With CSS appeared first on Speckyboy Design Magazine.

The great thing about these Styleguide resources is that there is undoubtedly one that will let you work the way you want to. Whether it’s allowing you to manually mock-up styles with your favorite image editor or automatically generating them through a browser, there’s something for everyone here.

Here are some resources to help you on your quest for consistency!

Quick Jump: Styleguide UI Templates, Styleguide Web Templates, Styleguide Generation Tools, Living Styleguide Tools and Styleguide Generators.

Styleguide UI Templates

Style Guide Preview Template (Sketch) by Tony Jones

If you’re using Sketch App, this free Style Guide Preview Template will help you develop a nice, clean Styleguide.

UI Style Guide Template (PSD) by Tony Thomas

UI Style Guide Template is a Photoshop (PSD) template featuring color swatches, typography, iconography, form and UI elements.

Style Tiles (PSD) by Samantha Warren

Style Tiles are interesting in that they’re meant to be used as more of a catalyst for discussion in the beginning of the design process, before a final look has been established. A great way to show your clients the possibilities before they commit to a design.

Responsive Digital Style Guide (Sketch) by Mark Ludemann

Sometimes, we tend to think of Style Guides only as a one-size-fits-all general palette. Responsive Digital Style Guide goes a step further and defines styles for mobile devices.

Web Style Guide (PSD) by Rafal Tomal

Web Style Guide aims to provide a simple "cheat sheet" for busy designers to maintain consistency in their projects.

Basic Five Page Style Guide Template (AI) by James George

Basic Five Page Style Guide Template is a handsome group of templates you can use in Adobe Illustrator.

Brand Guidelines Template (AI)

Brand Guidelines Template is a resource you can hand off to clients with clear instructions for colors, fonts and examples of what not to do.

Brandbooks Free Brand Guidelines Template (AI & InDesign) by ZippyPixels

Brandbooks Free Brand Guidelines Template is an impressive collection of files that you can use to print out an eight page booklet of branding styles and documentation.

Styleguide Web Templates

Style Guide Guide by Brad Frost

Style Guide Guide is a boilerplate for creating superb style guides.

Style Guide Template in CSS by CodyHouse

Style Guide Template in CSS was created with flexibility and easy updates in mind.

Style Guide Boilerplate by Brett Jankord

Style Guide Boilerplate provides an interactive way to display standard fonts, colors, base styles and patterns for your web project.

Bootstrap Style Guide Boilerplate by Kemie Guaida

Bootstrap Style Guide Boilerplate uses the popular framework to allow for an efficient means of creating a Styleguide.

Styleguide Generation Tools

StyleDocco

Using Node.js, StyleDocco will read your CSS and generate a visual Styleguide for you.

Styledown

Styledown lets you create a Styleguide by using markdown in your CSS files.

Fabricator

Fabricator is a Node.js tool that allows you to easily write project documentation and create an interactive Styleguide.

Styleguide by Huge

Styleguide can be used in alongside your project to create a live, automatically updated repository of styles.

Pattern Lab

Atomic Design is the term Pattern Lab uses to describe its component-driven Styleguide system. That means it’s a bit more in-depth, covering the tiny details of your design.

Living Styleguide Tools

SC5 Style Guide Generator

SC5 Style Guide Generator lets you create and edit your Styleguide directly in a web browser.

KSS – Knyle Style Sheets

KSS generates a Living Styleguide using Ruby or other frameworks that use gems.

DocumentCSS

DocumentCSS helps you create live Styleguides that change along with your site.

LivingStyleGuide Gem

LivingStyleGuide Gem will create a Styleguide with Sass and Markdown using Ruby, Middleman or Padrino, among others.

Styleguide Generators

Stylify Me

Looking for a really quick way to create a Styleguide? Simply enter your URL into Stylify Me and within seconds you’ll have one!

Frontify Style Guide

Frontify Style Guide goes beyond the basics by allowing you to create and tweak your Styleguide using their online service.

Style Guide Preview Template (Sketch) by Tony Jones

If you’re using Sketch App, this free Style Guide Preview Template will help you develop a nice, clean Styleguide.

UI Style Guide Template (PSD) by Tony Thomas

UI Style Guide Template is a Photoshop (PSD) template featuring color swatches, typography, iconography, form and UI elements.

Style Tiles (PSD) by Samantha Warren

Style Tiles are interesting in that they’re meant to be used as more of a catalyst for discussion in the beginning of the design process, before a final look has been established. A great way to show your clients the possibilities before they commit to a design.

Responsive Digital Style Guide (Sketch) by Mark Ludemann

Sometimes, we tend to think of Style Guides only as a one-size-fits-all general palette. Responsive Digital Style Guide goes a step further and defines styles for mobile devices.

Web Style Guide (PSD) by Rafal Tomal

Web Style Guide aims to provide a simple "cheat sheet" for busy designers to maintain consistency in their projects.

Basic Five Page Style Guide Template (AI) by James George

Basic Five Page Style Guide Template is a handsome group of templates you can use in Adobe Illustrator.

Brand Guidelines Template (AI)

Brand Guidelines Template is a resource you can hand off to clients with clear instructions for colors, fonts and examples of what not to do.

Brandbooks Free Brand Guidelines Template (AI & InDesign) by ZippyPixels

Brandbooks Free Brand Guidelines Template is an impressive collection of files that you can use to print out an eight page booklet of branding styles and documentation.

Concluding

Take that extra step for your clients and yourself by creating Styleguides for your projects. Let us know how you’re using them in the comments!

If you’re looking for some stylyeguide inspiration, you should check out this post: Inspirational Examples of UI Styleguides.

The post Styleguide Toolbox – Templates, UI Kits, Tools & Generators appeared first on Speckyboy Design Magazine.

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.

CSS Tools & Generators

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.

Screen Size Map – An interactive map displaying various screen resolutions and usage statistics.

Animated CSS Background Generator – Use this tool to create stunning backgrounds for your website.

DropCSS – A free tool that quickly and thoroughly cleans your unused CSS.

Gradient Generator – Take two colors and create a variety of custom CSS gradients.

Mycolorpanda – Create CSS gradients in a breeze with this simple tool.

Amino – A live CSS editor for Google Chrome.

CSS Learning Guides & Cheatsheets

CSS Selectors Cheatsheet – A combination of a game, quick reference guide and printable cheatsheet.

Relearn CSS layout – Learn to harness the algorithms that power browsers and CSS to create better layouts.

CSS Guidelines – A detailed document to help you write more scalable and manageable CSS.

The Complete Guide To SCSS/SASS – The ins and outs of the popular CSS pre-processor.

CSS Layout – A collection of popular CSS layouts and patterns.

Flexbox30 – A guide for learning CSS Flexbox in 30 days via 30 code tidbits.

CSS Inspiration

Print to CSS – Check out a collection of print-inspired layouts recreated with CSS.

And, finally…

CSSBattle – Use your CSS skills to replicate targets with the smallest possible code in this golf-like game.

Our CSS Snippets Collections

• 10 CSS Animated Underline Text Effects Snippets
• 10 Advanced Image Hover Effects Snippets
• 8 Tip-Top Toggle Switch CSS Snippets
• 10 Character Designs Created Entirely With HTML & CSS
• 10 Incredible Examples of CSS, JS & SVG Logo Design
• 10 Examples of Unorthodox Shapes Created with CSS
• 9 Free Progress Bar JavaScript Plugins For Web Designers
• 8 Code Snippets That Demonstrate the Power of CSS Grid
• 10 Free CSS & JavaScript Select Box Snippets
• 8 Ways to Make the Search Field Sexy with CSS
• 9 Custom Open Source File Upload Field Snippets
• 10 Exciting CSS & JavaScript Page Transition Effects
• 8 Stunning CSS & JavaScript Code Snippets for Enhancing Illustration
• 10 Snippets for Creating Split Screen Layouts
• 10 Amazing CSS & JavaScript Text Animation Snippets
• 10 Amazing CSS Button Libraries & Collections
• Free Modal Window Libraries & Plugins

More CSS Resources

You might also like to take a look at our previous CSS collections: 2018, 2017, 2016, 2015, 2014 or 2013.

And if you’re looking for even more CSS frameworks, tools, snippets or templates, you should browse our extensive and continually updated CSS archives.

The post Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 appeared first on Speckyboy Design Magazine.