Design Templates for Foundation Framework Written by Doug Harrington

Who Likes Free Stuff?

I’ve been on holidays, and I know I’m going to have a lot to catch up on, so this will be a very quick intro into a couple of templates I created for Photoshop and Illustrator. These website design templates (specifically designed for the foundation framework) were made to include a standard side-bar and/or full-width design using a 1000px page width with 12 columns and 30px gutters. I chose these settings as I feel it still gives you a massive amount of flexibility for considering both the design and screen resolutions. Free downloads available at the bottom.

Designing For Foundation

What I found the most frustrating with the foundation framework was the lack of templates available… equally frustrating was the way templates are built. They are usually “what you see is what you get”. They’re fixed, static creations that don’t allow much breathing room for flexing your creative muscle. That being said, my templates are not so drastically different but they should at least offer you a feeling of “what you want to see is what you will get”.

To make it all worthwhile I have created my own custom template that uses grid variations named exactly as they are coded. So let’s say you wanted a layout of four columns on a page with a sidebar. Now you can simply show that layer, and design exactly to that grid. Same goes for a full-width design.

Downloads