CSS Frameworks Are a Great Tool for WordPress Developers


UPDATED 2/25/15 – Added information about use of Foundation mixins for styling WordPress components

In August, ThemeShaper posted, “Why Bootstrap is a Bad Fit For WordPress Themes”. While I initially thought the author had issues with Bootstrap specifically, it appears the article was actually targeted towards all CSS frameworks, including Foundation.

Some of the arguments being made, such as having to overwrite default styling (which is more of an issue with Bootstrap than Foundation) are completely valid. However, there were also some misconceptions being thrown around that I would like to clear up.

Misconception #1 – Frameworks are bloated

This is often a complaint about CSS frameworks and basically every other piece of code…ever, including WordPress. We’ve fallen into a mindset that if a framework or library has too many features or features we don’t use often, that it automatically means that the code is “bloated”. However, the entire point of using a framework is to speed up development and have components that are ready to use – so “bloat” (if you insist on calling it that) is to be expected.

Fortunately, most frameworks (Foundation especially), make it very easy to remove components you are not using – essentially making the complaints about “bloat” a moot point. However, since most developers seem to skip the step of removing unused components, the Foundation 6 core will be slimmed down and only come with essential components while additional components can easily be added.

Misconception #2 – Frameworks don’t do things the ‘WordPress Way’

I think its time we look at this from a different perspective. If developers have to do things “the WordPress way” in order for them to work, maybe “the WordPress way” is really the problem.

If WordPress wants to continue to grow and reach their goal of 50% market share, they’re going to need to make the platform more friendly to modern developer workflows – especially as it continues to grow as a platform for web applications.

As pointed out by Rafi in the comments, Foundation also includes every component as a mixin. Meaning you can easily style core WordPress elements and plugins without ever needing to use the Foundation class names or modify existing class names.

Additionally, If you’re starting with a blank developers theme – ahem, JointsWP – the integration with WordPress is already in place.

Are They a Good Tool for WordPress Developers? Yes!

Less Bloat

Yes, you read that right. Using a CSS Framework may actually cut back on the amount of “bloat” in your WordPress theme. Foundation and Bootstrap both come with components such as drop down modals, slideshows, sticky navigation and more. These are all common elements among websites that would otherwise require downloading an additional plugin or writing additional code to get the same functionality.

Not only do you use less plugins, but the components included in the framework are already built to work with the rest of your website.

Common Code Among Teams

Have you ever been handed a project smack-dab in the middle of development? If so, you already know that much of your time will be spent figuring out exactly what the previous developer was doing and the structure he/she was trying to follow.

If your team is using a CSS framework, this is no longer an issue. Your entire team will be using one set of common code and projects can easily be passed between team members without any hiccups.

Faster Development

Sure, you will have to spend some time overwriting a few default styles, but is that really more time-consuming than writing components such as buttons or drop-downs from scratch? Doubtful. Plus, framework components are being used by thousands of developers everyday who are actively testing for bugs and improving the code.

What do you think? Are Foundation and Bootstrap good tools for WordPress developers? Comment below.

  • Rafi

    We used JointsWP for our ZURB Wired project – http://zurb.com/wired/sacredheart

    It was the fastest way to get started on the development work. I always wondered if WordPress and a framework like Foundation played well together. They do!

    As we move forward with our Studios work, we are seeing more and more companies needing a CRM to manage their site after hand-off. So the need for a powerful CRM with a responsive framework will continue to grow. The challenge for us is that we don’t do the development work so there needs to be more cohesion between these worlds to make it easier for companies to take our work and maintain it with WP.

  • Mickwho

    I love the idea but in reality I deal with a lot of clients that don’t have enough budget to have custom work made for them. So the alternatives are themes… And most of them are Bootstrap or some random clutter.

    What are some beautiful and feature-rich themes with foundation?

    • Rafi

      Aren’t feature rich themes for companies who don’t have unique designs? Wouldn’t they be harder to customize?

      • Mickwho

        Depends of the customization you do. You don’t want to change the structure of the site… but colors/images or some visual stuff using CSS.

        • Jeremy Englert

          You can change a ton of stuff in Foundation just be editing the settings.scss file (if you’re using Sass).

          • Rafi

            Sometimes I wonder if it’s not talked about it enough. Every component in Foundation has a mixin so you don’t have to use the predefined classes.

          • Jeremy Englert

            That’s a great point and especially useful when doing WordPress development.

            Most WP plugins are hard to modify as any hard-coded changes will be overwritten when the plugin is updated. However, using the Foundation mixins makes it really easy to apply Foundation specific styles to plugins without ever having to modify the plugin itself.

            I’m thinking this article may see an update in the very near future. 😉

      • Jeremy Englert

        I agree with Rafi on this one. Starting with a theme that comes loaded with styles/features can become very hard to work with if the client needs something custom done – which always seem to happen.

        However, the Foundation website does list a few WP themes that are built using Foundation.

  • alex vasquez

    I think CSS Frameworks make the job of any theme dev, or any dev working on UI much easier. Although, I tend to favor frameworks that don’t require me to change up my markup and just use their math, like Bourbon/Neat and Susy.

    • Jeremy Englert

      Foundation also includes all of their components as Sass mixins, so you can easily use their components without changing your markup.