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:
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.
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 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:
Compatibility: All Modern Browsers
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.
Compatibility: All Modern Browsers
RandomText is a website for easily creating dummy text either in Lorem Ipsum or Gibberish format.
It is possible to select the type of the element (paragraph,list or heading), number of these elements and how long they will be.
The generator has shortcuts for getting the HTML-formatted source code and downloading the output as a text/html file.
For a quicker access to the service, you can use a specific URL format like: randomtext.me/lorem/ul-10/5-10/ to create a 5-itemed unordered list with Lorem Ipsum text that has 5 to 10 words.
Also, an API generates the text in JSON format which is great for integrating with 3rd party apps.
While inspecting and editing a CSS file, it is not easy to understand which HEX value represents which color.
CSS Prism is a web-based CSS color spectrum inspector that loads the colors used in a CSS file as a grid and shows us in which rules they exist.
The application also enables us to edit the colors with a color-picker and download the edited CSS file.
CSS Prism is very useful for easily viewing the color palette and making sure it is consistent.
Besides inserting the URLs of CSS files manually, a bookmarklet is provided that eases this process.
With their increasing popularity, we are seeing more and more CSS sprite generators everyday.
Sprite Cow is another one which is open source and works very effective by auto-recognizing the different elements inside a single image.
So, you design the sprite image in your favorite imaged editing application, upload it to Sprite Cow and simply click (or click + drag) on each element to get their width, height and background-position as a CSS rule.
The application can select items in any size and also gives you the option of changing the background color.
At WRD, several applications for generating CSS sprites are shared until now. With their pros and cons, all of them are easing a time-consuming process.
Css-sprit.es is another web-based CSS sprite generator that offers very nice options including:
- getting the sprite image as JPG, GIF or PNG
- stylesheet being CSS or SASS
- CSS-based rollover effect (with few different effects)
Also, it is possible to upload a sprite image (rather than uploading images one-by-one), select the relevant areas and get the CSS code as a result.
Inside Photoshop, in order to edit properties of a layer, we go directly to the popular "Layer Styles" window of the application.
This web-based "Layer Styles" application has a very similar look to the one in Photoshop, allows us to play with the properties of an object but generates the output as CSS(3).
Just like Photoshop, it has ready-to-use styles and comes with the menus like:
- drop shadow
- inner shadow
- background
- border
- border-radius
This HTML5 application is open sourced, mimics Photoshop perfectly and worth checking.
Compatibility: All Modern Browsers
