40 tools to write a better CSS prerequisite

As we all know, CSS is great, it makes the site look beautiful, can add animations to the site, and let the rendering and content separate. To understand everything about CSS is very difficult to do, it will only become more difficult because we want our code to be cross-browser compatible.
Here are a number of third-party tools, from simplifying workflows to generating real CSS, which provide the code we need and run faster than the code we write ourselves.

Pure

Pure is not a framework. Instead, it simply integrates some of the CSS code that has been applied to the module to make it easier for us to use. Just grab the part of the CSS code you want for your project. Of course, all components are available. Pure contains grid systems, buttons, tables, forms, and menus, all built on NORMALIZE.CSS.

Magic Animations CSS3

The Magic animations CSS3 integrates CSS3 animations, which can be applied to any element, including the effects of element substitution, slippage, deformation, and fading.

Jeet Grid System

Jeet and Semantic.gs are somewhat similar and are sass based grid systems. Instead of adding a class to a markup element, you can define columns (and sometimes define rows) in the CSS. Jeet makes responsive layouts easier, and further separates content and presentation.

Ten Pure CSS Flat Mobile Devices

A guy named Oleg. Redraws and emulates 10 different mobile devices (including iphone 6, IPad Mini, Nexus 5, and Lumia 920) with pure CSS

Codyhouse

You can add a library of unrelated, standalone components to your site. Codyhouse is built with HTML, CSS, and JavaScript, and you can choose from a wide variety of navigation, parallax, paging, modal windows, page layouts, and more, each of which is unique to your quick-to-use tutorials.

Ratchet

If you use HTML, CSS and JavaScript to be mobile App,ratchet should be a good framework. Each UI component is customized for mobile devices, and it has many features that you don't see in the traditional HTML/CSS framework. The default effect of the component is very good.

Animo.js

Animo based on jquery, can help you to better trigger CSS animation. You can overlay animations, or trigger a second animation after the first time, and take advantage of the hardware acceleration provided by CSS animations.

Adobe Extract

It's a pain to convert a Photoshop layer style file to CSS. Fortunately, Adobe has a tool (running in a browser) that allows you to select a layer and convert its properties to CSS code. You can also select any text that is used in the PSD file for any online website.

Sculpt

Sculpt based on Sass, is a good framework. Sculpt supports abandoned, low-version browsers compared to other already published frameworks. If you use SASS to develop mobile-first site, and want the website to run properly on the low version of IE, you can consider sculpt.

CSS3 Generator

A simple generic CSS3 property generator. It's not very new, but it's very useful when you forget some precise syntax.

Bourbon Neat

Sass's favorite, Bourbon. Neat is a simple semantic grid system that can be used alone, but it is designed with Bourbon Mixin Library.

Enjoy CSS

Enjoy CSS is also a CSS3 generator, but interestingly, it is not just generating css3-related code, you can also choose the elements you want to apply: a div, text input, a button, and so on, in a simple visual way to get the exact effect you want.

Keyframer

Start from here to create your keyframe-based CSS animations. Just go to this website to learn some tutorials.

Gumby

Gumby is a HTML/CSS framework designed for those who prefer to work in a ruby environment. You can download it separately, of course, but also packaged as a Ruby Gem,ruby gem is created by people of those technologies.

Csshake

There are more CSS animations that focus on making some changes (know what I'm saying?), but they're showing off their online money-making art (I can't tolerate it!). ）。

Bounce.js

Bounce.js combines visualizations (for designing CSS3 animations) and JS libraries (for implementation), which are very simple to use for those who prefer visual design.

Gridlover

Need a simple, visual way to adjust the font size? Gridlover provides an easy way to preview typography, set up symmetrical vertical, and crawl CSS. You can crawl the pixel values of the fonts in CSS, EMs, or REMs, these values will be formatted as normal CSS, SASS, less or other code styles.

Extractcss

Want to quickly set up CSS files? One way is to write the HTML first, then set the ID, class, etc., paste the HTML code into the Extractcss,web app will list all the selectors, and finally put them in the CSS file is ok.

Kite

Kite is a CSS library for layouts that has been designed with CSS flex modules, but not fully flex-used. Kite compatible with ie8+.

Pesticide

Need to find out exactly what happened to your layout? Add the Pesticidecss file. It adds a border to each element on the page, and subtly changes the border color when the element is a child hierarchy. Simple, but impressive.

Pleeease

Tired of looking for different tools to pre-process CSS, add specific prefixes, including IE filters? Do you mind using the command line? This is for you. Compatible with sass,less and stylus

CSS Colours

A list of CSS-friendly color names that contains 16 binary and RGBA formats.

CSS Vocabulary

A small application that provides a handy list of CSS-related terms. Select one, and it will illustrate the term by highlighting some sample code.

Tridiv

Build a complex three-dimensional model with pure CSS.

Buttons

Building CSS button libraries with sass and compass

CSS Menu Maker

CSS Menu Maker helps you to create simple, responsive navigation

One% CSS Grid

The one% CSS Grid is a 12-column, Flow-layout grid system designed to build a faster, lower-cost, responsive layout.

Simptip

Simptip is a CSS cue box tool made by sass. Not only can you set the direction of the cue box (top, right, bottom, left), you can also set different colors, such as success, information, warning, and dangerous colors.

Myth

Myth is a CSS preprocessor, so you only need to write CSS, not worry about the support of the lower version of the browser, or even the improvement of the lower version specification.

Hover CSS

The code that integrates the CSS hover effect can be used for links, buttons, logos, SVG, featured images, and more.

CSS Animation Cheat Sheet

CSS Animation Cheat sheet is a set of preset, Plug and Play animated CSS libraries. You just import the stylesheet into your site and then add the class to the element you want to animate.

Spinkit

Spinkit contains some simple but great CSS animation loading effects

Typebase.css

Typebase.css is a small, customizable layout style sheet. It is also less and sass versions, so it can be easily modified and merged into modern Web projects.

Spritebox

Make your CSS imager sprites into a drag-and-drop editor and let it write code for you.

CSS Ratiocinator

CSS Ratiocinator is a command-line tool that cleans up useless CSS code by checking the actual rendering effect. It is ideal for applications where some CSS files have gone beyond the control of large projects.

CSS Beautifier

Beautify the CSS, if you've got a shrink file but can't find the original (or you're just a bit confusing code) file, the code beautification can be repaired by proper formatting and indentation.

Csscomb

After using CSS Beautifier to make your code readable, you can use Csscomb to run the code to make sure that all the attributes are sorted alphabetically by the alphabet. Remember, not selectors, but attributes, such as width always after the font declaration and so on

Anima

An animation library designed to extend the functionality of a CSS animation and animate 100 elements at the same time.

Recess

Recess is a program that can also be run as a compiler to ensure that your CSS conforms to a set of rules and remains streamlined. Each rule can be individually banned to suit your coding style.

Bonus:a to Z CSS

Bonus:a to Z CSS is not a tool, but it is a good resource for beginners. The A To Z,guy Routledge provides a solid course for every CSS basic rule, such as the box model and most commonly used CSS properties.

Source: http://www.ido321.com/1545.html
English Original: Writing Tools for better CSS

40 tools to write a better CSS prerequisite