Over a million developers have joined DZone.

New, Responsive Themes for HTML5 Foundation (Written in LESS, No Less)

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Foundstyles.com is a little project I've been working on for the last week. The idea is very simple. Remember, I blogged about how the Foundation Framework works pretty well for me. So, I've decided to do something for Foundation similar to something that already exists for the twitter bootstrap framework (bootswatch): ready to use CSS that could be easily integrated to your site. Today the results are available!


Unfortunately Foundation does not support LESS straight out of the box, so I needed to move colors and layout into corresponding .LESS files. As a result it's possible to have a basic template which you can customize with own colors.

As for now, I've created only 3 templates: Blades Of Steel, Evergreen Tree and Coffee and Milk.


I had a lot of joy making those styles. Making web designs and playing with colors is my next hobby, I think. Through, those styles are really simple ones. I'm going to add more eventually. Since the project is just hosted on github, you are able to push your own styles. If you feel inspired, I would be really happy for submissions.

Next step: apply some fixes for IE (both site and styles) and just go ahead and produce some more. Hope it will be useful for you guys.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Alexander Beletsky, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}