Zurb Fondation in wordpress

The other day I watched this talk Build a Responsive WordPress Theme with ZURBs Foundation 4 Framework and it was good. This talk it made me think about a few things.

Approximately 50% of your audience is going to be coming from the mobile platform… what is your plan for that?

I have used twitter bootstrap for years now and I love it… or rather, I hate dealing with the minutiae of creating and modifying css… hate-it .. which is why I love bootstrap. It takes all of the pain out of properly designing a modern-web look-n-feel. However in the vain of avoiding the ‘tool trap’ and also because Brendan’s talk was good I decided to switch to the Zurb Fondation platform. I downloaded the ‘ Reverie ‘ theme and I have never looked back.

Below are my handy Fondation-patterns that I used over and over again: ‘Hence the notes’

Inning an image :

<a href="/"><img style="display: inline; margin: 0 5px;" src="/wp-content/*" alt="" align="right" /></a>

<a><img style="display: inline; margin: 0 5px;" src="/wp-content/" alt="" align="left" /></a>

Embedding a video :
Flex video

<div class="flex-video"><iframe src="" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
for vimeo
<div class="flex-video widescreen vimeo"><iframe src="" width="400" height="225" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

In the end Brendan was right, approx 1/2 of my internet traffic is using mobile. You can see in the google analytics image below that 46% of my traffic is from mobile devices.





Reference: