Practical CSS tools and applications for 29 developers abroad

CSS plays an important role when you need to edit or change the website design. Some CSS tools allow novice developers and designers to easily learn the language and its functions. Today, we have compiled 29 useful CSS tools and applications for you. The following tools enable you to sort CSS attributes in any order, convert your Photoshop layers into CSS styles, and create your own response Web system. I hope you can find useful content from these tools and applications.

　　1. Metro UI CSS

Metro ui css is a CSS framework that implements the Metro interface of Windows 8.

　　

 

CSScomb can sort CSS attributes by using the specified sorting method. It provides multiple versions, including:

CSScomb Online

CSScomb for Sublime Text 2 (Also in Package Control)

CSScomb for Textmate

CSScomb for Coda & Coda 2

CSScomb for Espresso 2

CSScomb for IntelliJIDEA/WebStorm/PyCharm

CSScomb for Notepad ++

CSScomb for Vim

　3. CSS3Ps

CSS3Ps is a free cloud-based Photoshop plug-in. It is used to convert PhotoShop layers into CSS 3 implementations, And the appearance is completely consistent. You can select multiple layers and Layer groups for one-click conversion. The itinerary is converted to the CSS border attribute. Convert the inner shadow, inner shadow, and shadow to the box-shadow attribute of CSS. You can view the result style in your browser and share it with others. It is applicable to Windows or Mac OS X and Photoshop CS3 and later versions. The most important thing is that it is completely free!

　　

 

4. ResponsiveAeon

ResponsiveAeon is an HTML5/CSS3 framework that allows you to quickly create a response layout. It has a grid system that is based on 12 columns of total PX width and provides three basic classes that are easy to understand for use. This frame enables @ mediaqueries to support devices of any size. In addition to the grid system, the layout, list, table, button, and table style are also available.

　　

 

　5. RefineSlide

RefineSlide is a lightweight (4 kb compressed) jQuery plugin that quickly integrates a responsive, image slider-based effect to our website. The slider uses CSS3 conversion + 3D Transformation (with JS backup) and a bunch of attractive changes. It has an option to display thumbnails (automatically formatted and responded) or arrow navigation (supporting keyboard operations ).

　　

 

　6. Photon

Photon is a Javascript library that allows you to add simple lighting effects to any element in a 3D space. To create results, it uses the objects of WebKitCSSMatrix (WebKit is the only supported browser engine ). The angle of light can be defined and the functions provided can be changed at any time. It is possible to light up an object defined once by one or more groups. We can customize the effect by setting the maximum black + white usage.

　　

 

　7. Gridpak

Gridpak aims to implement responsive Web page design, improve your workflow, and save time. By generating PNG images, CSS and Javascript, Gridpak can create a simple responsive interface.

The CSS generated by Gridpak is compatible with IE 8 +, but it uses many experimental CSS attributes, such as media query, box size, and background editing attributes. Therefore, we recommend that you use it with Modernizer, ensure backward compatibility.

　　

 

　8. Morf. js

　　

 

Morf. js provides a set of Javascript methods to accelerate various conversion effects of CSS3. All supported methods are in the middle, and no need to write CSS3 code.

　9. Gumby

Gumby is a responsive and 960-pixel CSS mesh framework that supports screen display on PCs, tablets, and mobile phones. Similar to Twitter's Bootstrap, it includes a Web UI toolkit with nice-looking buttons, tables, navigation + labels and a small Javascript file

　　

 

　10. AppJS

AppJS is an exciting Javascript library that enables us to quickly develop desktop applications (HTML, CSS, and Javascript) using Web technology ). AppJS uses Node. js as backend support.

　　

 

　　11. Browser Support

Browser Support is a simple search engine used to find whether a CSS attribute is supported by a specified Browser. Provides an automatically completed search input box.

　　

 

　12. SpritePad

SpritePad is a perfect solution. You can create a CSS Sprite in seconds. You just need to drag your images to the canvas, and they can immediately be used as a PNG genie + CSS code.

　　

 

　13. HTML5 Please

HTML5 Please helps you check whether HTML5, CSS3, and other functions are ready.

　　

 

　14. JSBin

JSBin is a Web application mainly used to help test Javascript and CSS code snippets. The function is consistent with that of the jsFiddle website.

Online Demo: http://www.osctools.net/jsbin

　　

 

　15. Animate.css

Animate.css contains CSS that implements various animation effects.

　　

 

　16. Excessive

Excessive is a CSS compression tool developed using Python. It can drag and drop any number of files and merge these files into a single file for instant compression.

　　

 

　17. CSS Refresh

CSSrefresh is a Javascript library used to implement the function of changing the webpage style immediately without refreshing the page. plug-and-play requires no configuration. You only need to introduce this JS file to the page.

　　

 

　18. Impress. js

Impress. javascript is a Javascript package. Its function is to make a dazzling display of content. It mainly utilizes the rotation, distortion, scaling, and other features in CSS 3D Transforms. Therefore, only the latest version of Firefox, Google browser, or apple browser can see its effect. It seems that it can also be used in the new IE 10 browser.

　　

 

19. Bear CSS

Bear CSS is a free Web application that produces CSS styles Based on the given HTML.

　　

 

　20. Less CSS

Less CSS is a widely used CSS Preprocessor that extends CSS with simple syntax and variables to reduce the amount of CSS code.

LESS provides CSS with dynamic language features, such as variables, inheritance, operations, and functions. LESS can be run on the client (supporting IE 6 +, Webkit, Firefox), or on the server (using Node. js ).

　　

 

　21. css2less

Css2less is a small tool developed using Ruby to convert css into a file in Less CSS format.

　　

 

　22. Responsive GS

Responsive GS is a fluid grid CSS framework for rapid development of Responsive Web websites.

Responsive GS provides three styles: 12, 16, and 24 columns. media queries supports all standard devices.

　　

 

　23. CSS3 Shapes

CSS3 Shapes is an online website that uses CSS3 to achieve various graphical effects.

　　

 

　　24. CSS Arrow Please

CSS Arrow Please is a network-based CSS style generator that can be used for all CSS such as stripes, buttons, tables, and loading icons. It is fully implemented using CSS and does not require images.

　　

 

25. WebPutty

WebPutty is an application that allows you to write CSS code online. It supports the syntax highlighting editor and the preview panel on the side to show you real-time changes.

　　

 

26. CSSFx. js

Many prefixes, such as-moz-border-radius, are often appended to different browsers when writing CSS. This is also a lot of unpleasant in the industry. CssFx is a js that automatically generates prefix for you, saving you a lot of time and effort.

　　

 

　27. Dirty Markup

Dirty Markup is a free Web-based application that helps you easily clean Garbled text. The editor uses a simple + function AceEditor and various beautification options to achieve the best effect.

　　

 

　28. Crunch

Crunch is a Less CSS editor developed based on Adobe AIR. It is mainly used for Less editing and compiling into CSS.

　　

 

　29. CSS3 Test

CSS3 Test is an online website that tests the support of the browser's CSS3.

　　

 

Zookeeper