CSS tools are important for web designers and developers because they help them by simplifying the jobs they have to do. Considering time is money and such generators spare time, it is easy to understand why many web developers are excited about these tools. The only problem is that some of them are not well-known, therefore I made a showcase for you with CSS tools and generators which developers and designers can use to create functional and optimized websites faster. Because the tools will be categorized, you will find at the end of each category a list with other applications that do the same as the ones reviewed, therefore there is no need to review them too.
Tools for layouts
Templatr
If you don't know HTML or CSS and want a website, Templatr can create a layout for you in a matter of seconds. There are lots of possible layouts you can choose from, upload images and other graphic elements and many, many other things. You can easily select every element on the page and customize it by choosing different options from a dropdown list, which makes modifying the page easier and quite fast. The layouts you make can be downloaded and installed using an application. Another good part is the support for several languages.
CSS Template Generator
CSS Template Generator is not as complex as templatr, but offers some nice features too. As you can see in the screenshot below, it generates a basic CSS stylesheet for an HTML page and gives you the CSS code for it, which you will need to copy/paste in your stylesheet. Obviously, you also get the code for the HTML page. A downside of this generator is the lack of a download option. The only way you can use the layouts created here is copying the code yourself.
YAML
What I like about YAML is the amount of options you have. Besides being able to select the basic information needed to create a layout, you can also go a bit more in-depth if you have enough knowledge of coding. The columns and the layout have properties, you have presets, you can play with the flexible grids, choose coding options and many others. This generator might actually be the best out of these three.
Others: Firdamatic, CSS Portal, CSS Creator, Layout Generators, CSS Layout Generator.
Tools for the grid system
Variable Grid System
Variable Grid System might be one of the best grid system tools you can find on the internet. It allows you to quickly generate a CSS stylesheet for your website and is based on the 960gs, which we will review a bit further down the road. You can customize the width of the main container, the width of the content, the column width, the number of columns and the gutter and you can preview the layout before downloading it – this actually happens automatically when you modify a value.
Gridinator
Gridinator allows the user to customize the layout more than the previous tool. You have the option of modifying colors, font size, choose pixels or em and even select popular layouts from a list on the right hand side. This tool allows you to preview the grid system before downloading the fully functional template.
960gs
960gs is not a grid generator, but you can learn a lot about grid systems from it. There are some templates you can download and you can also see some examples of websites that are built on their default stylesheets. You can find some interesting JavaScripts there – adaptive.css is incredible and beats any other similar JavaScript any day of the week – and watch how the grid works on different webpages.
Others: Blueprint Grid CSS Generator, CSS Grid Calculator, Grid Designer.
Tools for colors
Now that we have a layout and a grid system, we can start thinking about colors and color schemes. Here are some great tools you should look at.
Kuler
My personal favorite is Kuler, a tool developed and maintained by Adobe. You can find lots and lots of color schemes here you can use for your web pages and even inspiration if you need it. There are more than 11.000 color schemes available (all free of charge) and you even have the option to customize them. If you create an account there you can also start submitting your color schemes of choice and inspire others to use them on their websites. Another incredible tool by Adobe…
Color Scheme Designer
Although quite different than the first example, Color Scheme Designer is another great tool which allows you to create schemes on a total other level. You can choose a color, then one of the options above – mono, complement, triad, tetrad, analogic or accented analogic – and let the tool do its job. It is a tool you may find very useful for when you need colors for your design. And if that wasn't already enough, you can also create color schemes for the color blind. Each scheme you create gets an ID which you can save. Later you can return to your scheme again and continue customizing it.
CSS Gradient Generator
If you don't want to open Photoshop to create a gradient, CSS Gradient Generator will be great for you. It allows you to do the same thing Photoshop does, only it works with CSS and way faster. You can save your gradients using an unique link.
Others: Color Palette Generator, CSS Color Codes, Gradient Image Maker.
Tools for menus and buttons
CSS Menu Maker
CSS Menu Maker allows you to create your own customized CSS menus and generates them for you in a simple, HTML/CSS format, so you can download and use them right away. The tool has a fairly big gallery of menus – vertical, horizontal and dropdown – and allows you to customize them in detail. Moreover, you can also download plugins for Adobe Dreamweaver and create your own menus on your own computer. The menus are cross-compatible and will look the same in all the browsers (except maybe transitions for Internet Explorer).
This is the only CSS menu tool that really stands out, some other ones you can take a look at are CSS Menu Generator, My CSS Menu, Tabs Generator and List-O-Matic.
Button Maker Online
Button Maker Online from Dynamic Drive allows you to create and customize your own buttons, then download and use them in your designs. You can pretty much customize everything from colors, borders, size and even has some transparency options. You can preview the buttons before using them.
CSS Button
This one is very similar to the first, only you create the menus in another way: by choosing your style from several dropdown lists. It's pretty much the same it only depends which one you are more comfortable working with.
Tools for fonts
Font Tester
Font Tester is an incredible tool which lets you preview different fonts, so that you won't have to insert them into your CSS file and customize them there. Just customize the fonts on this web page and when you find the perfect one, get the code and use it! There are so many options I don't even know where to begin. There's line height, text decoration, text transform, font weight, word spacing, font stretch, white space, unicode bidi and many, many others. Just go an give it a try, you will fall in love with it.
Typester
Typester is pretty much for the same purpose as Font Tester, only it might be more popular and you can preview more fonts there – even the Google fonts. There are not so many options for customizing, but what you have should be enough to give you a preview of the typeface you wish to integrate in your design.
Others: CSS Font Style, CSS Font and Text Style Wizard, CSS Type Set.
Other tools
CSS Generator
If you wish to generate a default CSS style fast, then CSS Generator is for you. It's similar to the tools for grid systems, only this one doesn't really keep a grid system (you will have to code it afterwards). You can, however, generate a stylesheet with link colors, font size, margins, hover color and so on – and spare some valuable time later on during the coding.
Quick CSS
Quick CSS does the same thing, only you have even more customization possibilities, so take a look at this too. The generated CSS seems to always be validated by W3C and the process is quite fast as well, so you will be able to enjoy a half an hour of TV later instead of coding the defaults of the stylesheet.
Now I am not updated on CSS sprites tools, because I don't use them, but some reviews recommend Spritegen Sprite Generator, CSS Sprites and CSS Sprites Generator.
If you design e-mail newsletters and need to generate tables in CSS, then this tool will do the job.
That was a list of CSS tools and generators I wanted to raise awareness about. Do you have some others you would like to recommend?
Sent from my iPhone
No comments:
Post a Comment