40 tools to write a better CSS prerequisite

Source: Internet
Author: User
Tags beautifier border color css preprocessor

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


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.


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 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 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.


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


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.


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 combines visualizations (for designing CSS3 animations) and JS libraries (for implementation), which are very simple to use for those who prefer visual design.


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.


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 is a CSS library for layouts that has been designed with CSS flex modules, but not fully flex-used. Kite compatible with ie8+.


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.


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.


Build a complex three-dimensional model with pure CSS.


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 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 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 contains some simple but great CSS animation loading effects


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.


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.


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


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


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.