When you’ve been building websites for over a decade, you can grow tired of the minutia of starting from a blank document every time. Its even more of a burden when you’re trying to rapidly prototype a concept or just get a quick start on a small project. Well, luckily there are tools that go from blank HTML page in an editor, and give us a jump-start on the process.
LayoutIt! is a tool designed to make quick use of the Twitter Bootstrap CSS framework. Providing a simple drag-and-drop tool for most of the common elements featured in Bootstrap, LayoutIt! has easily become where the vast majority of my projects begin. Need a carousel, then 3 boxes, then a email form, then an image gallery? Click and drag a few times and you’re all set. A nice advantage of LayouIt! is the code generated inserts images automatically from LoremPixel. Gray placeholder boxes are replaced with a myriad of random, license-free stock photos.
So now you’ve done the LayoutIt! approach for wire-framing, but what if after a while, that same old Bootstrap css starts to look bland. Well, that’s where Bootswatch comes to the rescue.
The folks at Bootswatch have taken the core bootstrap.css files and developed 16 new base stylesheets. All the responsive functionality, classes, and iconography remains in place. These files are meant as simple replacement files for the original css included with Bootstrap. Boring default fonts get upgraded with sharp pairings, buttons can be flat or vibrant and eye-popping. These options can take your project from the starting gate and get it rolling in a presentable and pleasing manner, without investing time in tweaking hex values in 30 different places.
These are just two of the many, many tools that exist to make web developers and designers’ lives easier. So, stop hand-coding everything from scratch, you’re all smarter than that. Use that brain-power to build something awesome!