WebPutty is an application that enables us to write CSS code with an online, feature-rich, syntax-highlighted editor and see the changes in real-time with a side-by-side preview panel.

The CSS file is hosted by the service so that any changes made are instantly reflected to the live website. And, you can host any number of CSS files under a single account.

It also supports SCSS and Compass which is great for anyone willing to make use of advanced styling features.

WebPutty was a free hosted service and it is now open sourced so that anyone can create their own instances and edit/manage CSS files of multiple projects from a single location.

CSS sprites are great for minimizing the number of requests our websites perform by collecting multiple images in a single one and displaying the appropriate ones using background-position.

However, once the images are placed on a canvas, finding the positions of each item is a time-consuming process.

SpritePad is an impressive web application (which is free) that simplifies the whole process by allowing us to drag 'n' drop any number of images to a canvas, position them how we want and get the auto-generated CSS rules.

The canvas size can be customized and/or can be shrinked to fit the document with a click.

Once we arranged all the items, SpritePad provides us a .zip file which consists of the sprite image + CSS rules.

P.S. There is also a "premium" plan which makes sharing the sprites with colleagues possible and has more features.

Online code beautifiers are very useful when you need to work with any messy code.

Dirty Markup is a free web-based application for cleaning up such code very easily.

It has support for HTML(5), CSS and JavaScript by combining the powers of the popular HTML Tidy, CSS Tidy and JS Beautify.

The editor used is the simple + functional AceEditor and there are multiple options for each beautifier to get the best results.

Icon fonts (pictograms) are great for having scalable and easy-to-style icons in web projects and they seem to be used more and more each day.

Fontello is a web-based and open source project that allows us to combine any selected items from multiple iconic fonts to create a custom + lighter font.

There are 3 built-in iconic fonts (Entypo, Iconic, Web Symbols). Within few steps (select any letters from the icons, re-arrange them), you get a new font.

The generated font is in SVG and web fonts can be produced from it using online generators like the one that FontSquirrel provides.

When designing anything with content (websites, brochures, etc.), if you don’t have the real content, using Lorem Ipsum is the most common way to fill those spaces.

However, for anyone who designs regularly and needs such filler text, it is pretty boring to use Lorem Ipsum again and again.

If you want to try an alternative to Lorem Ipsum, there are several web-based generators which are easy-to-use, customizable and, usually, fun. Check them out:

P.S. If you also want to complement placeholder text with images, I suggest checking 8 Free Placeholder Image Services For Instant Dummy Images.

Bacon Ipsum

A meaty alternative for generating dummy text. It is even kind enough to ask for “all meat” or “meat and filler”.

The service has a JSON API, an Android app and a supportive image placeholder service for generating a mockup full of bacon.

Vegan Ipsum

Didn’t like Bacon Ipsum? Ok, here is veggie lorem ipsum alternative.

Vegan Ipsum will bring all the freshness of season vegetables into your mockups.

Samuel L. Ipsum

It uses quotes from movies which Samuel L Jackson has starred in and comes with 3 modes, lorem ipsum, default and a lite version.

This is a dangerous alternative to lorem ipsum: So, please use responsibly.

Read the rest of this entry »

Gridpak is an interactive web application for generating responsive grid layouts very quickly.

The width of the grid, number of columns, column padding and gutter width can all be defined which are standard features we have seen from several other layout generators.

It gets better with the ability of adding breakpoints for responsive outputs. You can change the size of the layout, click "Add break point" and there you have it.

Once you have setup the layout, a custom download is ready which includes:

• a CSS file with all the classes and properties you need to create the responsive grid layout
• a LESS file with much the same information but including variables, mixins and methods to help you.
• an SCSS file like the LESS file, but in SCSS.
• a semi transparent PNG image for each grid you have created to help with your design, or with lining things up in your front end.
• a JavaScript snippet that allows you to toggle an overlay of your grid on and off in any browser using the 'G' key.

Grid Builder is a web application handy for anyone looking to create a base HTML-CSS grid quickly.

On a canvas with a 3*4 grid, you simply drag 'n' drop the given grid units to create the desired template (like a 3 column design with a header and footer).

After that, just click the "Show me the code" button and get the HTML-CSS output of the designed grid.

P.S. You can also check out "The 892 unique ways to partition a 3 x 4 grid" article andget the PDF provided to find more about the 3*4 grids.

CompareNinja is a free-to-use web application for generating comparison tables very quickly.

It simply requires several variables to get started like "the title of the tables" or "number of items to be compared" and then asks for the details of the comparison.

There are few skins provided to choose from, new columns and rows can always be added and the HTML output is generated instantly.

After that, you can always edit the source and improve the table further.

And, yes, creating tables is not hard but, sometimes, a quick method that doesn't require any web editor is handy.

One of the exciting features in CSS3: "transitions" come with a transition-timing-function which lets us to define an acceleration curve, so that the speed of the transition can vary over its duration. This is simply how we accomplish easing animations with pure CSS.

If we want to use custom easing animations rather than the pre-defined ones like ease, linear, ease-in, ease-out or ease-in-out the cubic-bezier property, which enables us to define a cubic bezier curve to use as the easing function, reaches to our help.

However, setting the cubic-bezier values can be challenging and a visual representation of the curve makes things much easier. Here are 3 great tools that help creating custom easing values:

Cubic-Bezier.com

The application works with drag 'n' drops and/or keyboard shortcuts.

By updating the curve, it auto-generates the cubic-bezier values. And, you can save them for future use by attaching friendly names and even share each with a unique link.

CSS cubic-bezier Builder

A similar tool which enables creating the values for the curve with drag 'n' drops and also compare the custom one with the pre-defined values.

Ceaser

Ceaser comes with values/transitions of Penner Equations (with approximate values) which means there are many new built-in transitions besides the default ones.

Also, you can create new ones easily and test them on different transition values like width, height or opacity.

Other Tools

There are also few other tools for creating visually creating CSS cubic-bezier values:

• Bezier control
  
• Cubic-bezier tool by Netzgesta.de
  

Since ever, we create patterns as image files and use them in web pages by simply attaching them to the backgrounds of elements via CSS.

Patternizer, a web-based pattern design application, brings a different approach in how we create and use them.

The application enables us to design a pattern by simply inserting any number of stripes, rotating them and setting their properties like opacity, color, width or offset.

While we are designing the pattern, the application generates a code including the values of variables which can be used with a JS-library provided (patternizer.js) to build that pattern with HTML5 <canvas>. No images used, just a lightweight JavaScript file and few rules.

The method usually ends up in a smaller-sized solution and, best of all, the pattern can be manipulated by simply changing the values.

Also, with a free membership, it is possible to save and share patterns created.