I just recently discovered the Web site LayoutIt!. LayoutIt! provides a Web-based drag-and-drop interface for creating HTML layouts using the Twitter Bootstrap framework. For someone like me, with no design skills whatsoever, Twitter Bootstrap and this new LayoutIt! tool are wonderful inventions.
To use LayoutIt!, you can start from scratch or begin with one of three base templates: starter, marketing, and article. Within the editing window, you can then start customizing your layout. First, use the grid functionality to add rows and columns of varying sizes. Maybe you want a banner across the top, then a row of two columns, and then a row of three. Could not be easier!
Next, use the CSS stuff to add and stylizes tables, forms, blockquotes, images, and the like. Depending upon what you add, you’ll be presented with other options to customize it, such as changing the alignment, emphasis, effects, and other styling.
There are then other conventional components: dropdowns, navigation menus, pagination links, “badges”, and “hero units”. Some of these can also be further customized once added to the page.
Finally, drop in the JavaScript-dependent components you need, like modal windows, tabs, accordions, and carousels.
Once you’ve got the design as you like it, you can download what you’ve created. You have three options:
- Copy just the HTML for the layout created, to be dropped into your own HTML file (with Bootstrap already installed)
- Download a single HTML page
- Download an entire zip file, with all the components required
You can also save what you’ve created, in which case you’ll be presented with a short URL that returns you to your design for future edits. You can also use that URL to give clients or coworkers a preview of what you’ve done.
The site is currently in beta, meaning there are more features to be added, but what’s there already is quite promising, particularly for those of us that can use all the extra design help they can get.
