CSS
Raiting:
7

Set of tools for effective frontend development


Today I want to offer to umumble lovers this small set of applications that are intended to increase productivity while working with the frontend. If you will not find your favorite app here, then you are very welcome to make some comments!

Form Builder
image
This beautiful form builder helps you to create the most marvelous CSS login boxes and other input items in very short time. Besides the forms on the website of this project, you can create other equally beautiful CSS elements including buttons and ribbons.

Bootstrap Generator
image
For fans of Twitter Bootstrap, there was created this generator that helps you easily change the initial setting styles and start prototyping.

On/Off Switches Generator
image
There are available switches & toggles on pure CSS. They have very high quality and are simple.

imageColllor
image
Colllor generates a blending color palette based on the specified color. It allows avoiding the eye-gouging effect in your project, and at the same time it allows using a wide range of colors.

Minify and GZip
image
They speed up your website by compressing, merging and Gzipping your CSS and JavaScript files.

cssUpdater
image
It is useful tool that synchronizes changes made through FireBug with CSS files. Can you imagine how much time you'll save?

CSSComb
image
This site will help you sort CSS by criteria, priorities, selectors and so on. It is very handy thing.

CSS load.net
image
Generator for loading indicators for AJAX and jQuery. It is easy to use and helps to customize.

Ribbon Builder
image
This tool will help you to generate a pretty ribbon. Well, you know what I mean; Now they are everywhere.

Typecast
image
It lets the designers experiment with the fonts. It takes about 30 seconds to register, and you get a powerful tool in your arsenal that allows doing all kinds of things with the fonts, and when you find your perfect combination it is exported to CSS. Is not it wonderful?

Fontello
image
It offers set of icons and pictograms for CSS use on your website. Select what you like, watch preview and download. It's simple.

Stitches
image
It is a very convenient app for creating sprites. You just simply drag and drop the images you want to, click on the Generate button and get sprite sheet. So far it only works in Chrome and Firefox.

Responsive.Is

If you do the responsive project, here you can check out how it would look on the screens of various devices.

Stylie
image
Do you want to easily and naturally create animations with CSS? Then you get this link. Next you set the direction, location, watch animation and download the source code.

SpritePad

This is another tool for working with CSS sprites. Also, it has drag'n'drop interface, but I think it's much nicer.

Css2Less
image
If you like LESS preprocessor, then you may be interested in this tool, which converts from CSS to LESS just in one click.

ZenBG
image
It is a great generator for backgrounds. It offers a huge selection of textures, effects and more.

SnipSave
image
This website offers you to store all your CSS snippets in one place, namely in the library. It has a comfortable interface that works great.

Prefixr

An application from Jeffrey Way that helps quickly to solve cross browser problems. You can write the CSS code only for one browser, and then you run it through Prefixr, and it will generate the missing code for the correct displaying in other browsers.

HTML5 PLease
image
You can call it as an online assistant for HTML5. Do you have some doubts about the use of a specific new tag? This resource will tell you whether or not to use it, and how to use it.

The links were taken from smashinghub, tutsplus, codeschool, and my own resources.
Sparks 8 january 2014, 14:26
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute