Loving the Foundation CSS Framework

What is the Foundation CSS Framework?

Foundation is a CSS framework by Zurb. What is a CSS framework? It’s just CSS. That’s all it is. As long as you use the CSS classes that you’re supposed to, your site will look polished. Trust me. It is very easy to have a messy looking website when starting from scratch, especially if you’re not a designer. Maybe CSS frameworks are predominantly for developers who do not design. Me.

Keep in mind that CSS frameworks do NOT do everything for you. You will still have to use a lot of CSS to override the framework’s CSS. Don’t rely on the CSS framework to do everything for you. Keep that in mind. “My CSS framework will not do everything for me.”

Example of Setting Up a Site with the Foundation CSS Framework

I like examples. Here is an example. I recently set up a site for a buddy (check it out at http://poconolawnworks.com).

Landscaping website built with FoundationPress

I used a WordPress theme called FoundationPress which I highly recommend. FoundationPress removes the complexity of setting up Foundation. I set up the theme in a local development environment, set up the basics, and compiled everything. I had a nice basic website, but what now? My friend showed me a website that he would like his website to look like. Yikes. How is Foundation, my new CSS framework, supposed to help me here? To put it simply, it couldn’t. I had to use my vast and extensive knowledge of CSS to recreate the design of the other website’s front page… Okay. Not really. I just copied and pasted the CSS from the other site and cleaned it up. But still. Foundation could be of no help here. Foundation just helped me to set up the skeleton of the site. The specifics were left up to me.

Why Not Just Use a Page Builder?

Today, I decided to use a page builder (Visual Composer) to recreate the website I built for my friend. It was very frustrating. It took longer than using the Foundation CSS Framework, and when I finished, it looked crappy. Not to mention all my work would be stuck on that website and the WordPress platform. Using something like Foundation makes it easier to transfer your CSS modules and design to other websites. I can even move my CSS modules to websites using  other CMSs or web stacks (Joomla, Drupal, vanilla PHP, etc.).

A while ago, I created a page called Modules where I kept all of my design sections. I included all the CSS in a stylesheet, and all the JS was enqueued correctly. And everything was scattered everywhere. I took it all (HTML, CSS, and JavaScript) and plopped it into one page. Now, when I start a new website, I can simply reference that page and copy over the CSS and JS.

I will leave you with this: Building Blocks by Foundation. Do you know how cool that is? You can use ANY of those building blocks to create your website. No restrictions. Next time you set up a website, try out Foundation and FoundationPress. You might like it!