A selection of tools for efficient frontend development
On this beautiful Friday, I dare to offer the small community a small selection of applications designed to increase productivity while working with the front-end. If your favorite app is not represented here - welcome to the comments!
Form builder
')
This wonderful form generator will help you in creating beautiful CSS login boxes and other input things, with minimal time costs. In addition to the forms on the site of this project, you can create other equally beautiful CSS elements, including buttons and ribbons.
Bootstrap Generator
For fans of Twitter Bootstrap, this generator was created, thanks to which you can easily change the initial style settings and start prototyping.
On / Off Switch Generator
Switches and toggle switches on pure CSS. Very high quality and easy.
Colllor
Colllor generates a harmonious color palette based on the specified color. Allows you to avoid the effect of “eyebrows” in your projects, and at the same time use a wide range of colors.
Minify and GZip
Compression for your CSS and JavaScript files without worries and problems.
cssUpdater
A useful utility that synchronizes changes made via FireBug with CSS files. You can imagine how much time you will save yourself.
CSSComb
This site will help you sort the CSS according to specified criteria, priorities, selectors, and so on. Very handy thing.
CSS load.net
Load Indicator Generator for AJAX and jQuery. Easy to use and customize.
Ribbon Builder
This tool will help you generate a cute ribbon. Well, you understand what I mean - they are now everywhere.
Typecast
The typecast project is designed for font experiments. 30 seconds to register, and you have in your arsenal a pretty powerful tool that allows you to do all sorts of operations with fonts, and how you find your perfect combination, everything is exported to CSS. Well, isn't that great.
Fontello
Many icons and icons for CSS use on your site. Choose interesting, watch preview and download. It's simple.
Stitches
The most convenient app to create sprites. Just drag the necessary images, click Generate and get the sprite sheet. While it works only in Chrome Firefox.
Responsive.Is
If you are doing a responsive project, here you can check how it will look on the screens of various devices.
Stylie
Want to easily and easily create animations with CSS? Then you follow the link. Set the direction, coordinates, watch the animation and download the source code.
Spritepad
Another tool for working with CSS sprites. The interface is also drag'n'drop, but it seems to me more appealing.
CSS2Less
If you are a fan of the LESS preprocessor, then perhaps you will be interested in this tool that converts from CSS to LESS with one click.
Zenbg
Excellent background generator. Huge selection of textures, effects and opportunities for their modification.
SnipSave
This site offers you to keep all your CSS snippets in one place. In my library, that is. Nice interface, it works with pleasure.
Prefixr
The app from Jeffrey Way helps to quickly solve cross-browser problems. You can write CSS code only for one browser, then skip it through Prefixr, and it will generate the missing code for correct display in other browsers.
HTML5 PLease
You can call this project an online assistant for HTML5. Doubt the use of a specific new tag? The site will tell you whether to use it. And if so, how.
Links were chosen based on smashinghub, tutsplus, codeschool and personal preferences.
Form builder
')
This wonderful form generator will help you in creating beautiful CSS login boxes and other input things, with minimal time costs. In addition to the forms on the site of this project, you can create other equally beautiful CSS elements, including buttons and ribbons.
Bootstrap Generator
For fans of Twitter Bootstrap, this generator was created, thanks to which you can easily change the initial style settings and start prototyping.
On / Off Switch Generator
Switches and toggle switches on pure CSS. Very high quality and easy.
Colllor
Colllor generates a harmonious color palette based on the specified color. Allows you to avoid the effect of “eyebrows” in your projects, and at the same time use a wide range of colors.
Minify and GZip
Compression for your CSS and JavaScript files without worries and problems.
cssUpdater
A useful utility that synchronizes changes made via FireBug with CSS files. You can imagine how much time you will save yourself.
CSSComb
This site will help you sort the CSS according to specified criteria, priorities, selectors, and so on. Very handy thing.
CSS load.net
Load Indicator Generator for AJAX and jQuery. Easy to use and customize.
Ribbon Builder
This tool will help you generate a cute ribbon. Well, you understand what I mean - they are now everywhere.
Typecast
The typecast project is designed for font experiments. 30 seconds to register, and you have in your arsenal a pretty powerful tool that allows you to do all sorts of operations with fonts, and how you find your perfect combination, everything is exported to CSS. Well, isn't that great.
Fontello
Many icons and icons for CSS use on your site. Choose interesting, watch preview and download. It's simple.
Stitches
The most convenient app to create sprites. Just drag the necessary images, click Generate and get the sprite sheet. While it works only in Chrome Firefox.
Responsive.Is
If you are doing a responsive project, here you can check how it will look on the screens of various devices.
Stylie
Want to easily and easily create animations with CSS? Then you follow the link. Set the direction, coordinates, watch the animation and download the source code.
Spritepad
Another tool for working with CSS sprites. The interface is also drag'n'drop, but it seems to me more appealing.
CSS2Less
If you are a fan of the LESS preprocessor, then perhaps you will be interested in this tool that converts from CSS to LESS with one click.
Zenbg
Excellent background generator. Huge selection of textures, effects and opportunities for their modification.
SnipSave
This site offers you to keep all your CSS snippets in one place. In my library, that is. Nice interface, it works with pleasure.
Prefixr
The app from Jeffrey Way helps to quickly solve cross-browser problems. You can write CSS code only for one browser, then skip it through Prefixr, and it will generate the missing code for correct display in other browsers.
HTML5 PLease
You can call this project an online assistant for HTML5. Doubt the use of a specific new tag? The site will tell you whether to use it. And if so, how.
Links were chosen based on smashinghub, tutsplus, codeschool and personal preferences.
Source: https://habr.com/ru/post/156291/
All Articles