Don't start your front-end development from scratch, use a framework

Posted by JD Collier on October 24, 2012

The next time you are ready to slice up a Photoshop design and begin implementing a custom design, don't reach for your favorite Drupal theme—try using a framework like Zurb Foundation. There is already a Drupal project underway, let's lend a hand!

Why spend your budget reinventing? We need modern requirements: responsive site designs, clean type styles, HTML5, CSS3 and the list goes on and on. No one makes everything from scratch, we use various libraries to accomplish these requirements.

When it is time to begin the build (for a custom design), there are a couple of approaches to build a modern website.

  • Scratch: write your own HTML and CSS from the ground, up.
  • Theme: create a sub theme and build your website on an established theme.
  • Framework: blend the best of both worlds and build your site with a good foundation.

Scratch

I love building from scratch, creating perfect HTML, clean CSS and everything named exactly how I want. In today's world, this approach is outdated.

Pros:

  • Very clean code.
  • Easy to read and manage your code.
  • Easy to maintain your code later.
  • No "code bloat" since there will only be code needed for the project.

Cons:

  • You have to do extensive browser testing.
  • You are often solving problems that have been solved before. (float bugs, double-margin bugs, orientation resize bugs, etc)
  • Don't take outliers into account (Did you remember Chromeframe for old browsers, did you remember ARIA roles for accessibility, etc)
  • Can be more challenging to integrate with a CMS since you have to know all the integration code.

Theme

Using a pre-built theme can be great because you can usually know if it is well tested, it has nice configurations to customize to your project and it comes packed with all the best code for your chosen CMS.

Pros:

  • Browser tested.
  • Vetted by a community of users.
  • Often they have CMS options to set various extras like turning on IE shiv, set which browsers will get Chromeframe as an alternative and how you want the design to behave on various devices.

Cons:

  • Often overly complex code to accommodate all the attributes and variables you can set inside the CMS.
  • Often have way too much code since the theme isn't designed for your project, it is designed for everyone's project.
  • Can be difficult to find and style the appropriate CSS to match the design. Especially difficult if the design calls for full-width background but the theme doesn't take that into account.
  • If the theme upgrades, it can break your code.

Framework

My preferred method is somewhere in the middle. I prefer to use a framework like Yahoo's YUI Grid, 960.gs or my new favorite Zurb Foundation. 

Pros:

  • HTML5, CSS3 baked in.
  • Ready for the latest technology like SASS, Responsive design, and off-canvas layouts.
  • Lots of styling built-in (top navigation functionality, typography, table styles).

Cons:

  • CMS implementations of your favorite framework often require a deeper understanding of your chosen CMS because these frameworks often do not have all the settings inside the CMS to alter the framework. You often have to edit the code in the framework.
  • Some frameworks lend themselves to certain designs and not to others. For example, Zurb Foundation might be a little more challenging to use in a deeply textured, highly styled design because Foundation starts out very clean and open.

My choice? I have used lots of themes for Drupal and Wordpress. With the Drupal themes I've used, I always feel like I'm molding a theme to my design rather than building my website to my needs. The analogy I imagine is buying a fixer-upper when I really need a custom-built home. 

Recently, I have started using Zurb Foundation. I must say, I'm in love with this framework. As they say, it is "Developed with SASS, Feature Complete and Freakishly Advanced." I would say in real-world use, this is true. My last project went very quickly because so much was already done for me. I also didn't feel like there was a lot of code in my way. Foundation has a Wordpress and a Drupal implementation.

I must also disclose that I have used Adaptive Theme and Omega for Drupal. They are great themes, but sometimes, I just want something that feels a bit more nimble. My feeling is that Adaptive and Omega are good themes, but not as flexible and extensible as Zurb Foundation.

What about you? 

Do you use a good framework for your projects? If so, please share your experience as I'm always looking to continue this discussion.

Image Credit: Yeti by Zurb, Inc.

MONTHLY MARKETING INSIGHTS.

Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.

RELATED POSTS

LEAVE A COMMENT

The content of this field is kept private and will not be shown publicly.
About text formats

Plain text

  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Submitted by Ben Goshow on Wed, 10/24/2012 - 10:33am

Glad you like Foundation! It's been an invaluable addition to our process in creating responsive and mobile-friendly sites.

Submitted by Carlos on Wed, 10/24/2012 - 11:22am

Hey, nice article.

Please can you explain how you implemented Zurb Foundation since it depends on Jquery 1.7?

Once I tried to implement another Framework that depends on an updated Jquery version, and my admin pages ended all broken.

Thankyou

Submitted by JD Collier on Wed, 10/24/2012 - 11:27am

The jQuery Update module is in our base install of Drupal so I guess I take that for granted.

jQuery Update will allow you to push your Drupal site to use 1.7

Submitted by ishmael-sanchez on Wed, 10/24/2012 - 11:50am

@JD Collier thanks for the mention about the Drupal Foundation theme. I agree with everything you said in your article which is why I decided to create the integration between Drupal and foundation.

@Carlos I'm running into that issue with my theme but you can use hook_library or hook_js_alter if you don't want to use jQuery Update.

Submitted by Laboni on Thu, 10/25/2012 - 12:17am

Awesome work!

This is a good insight and comparison of the three. I myself have been struggling a bit with this conceptually.

Have you guys had experience in using something like Twitter Bootstrap as a framework? Or the related basethe.me port into Drupal?

Submitted by Erfan on Thu, 10/25/2012 - 4:45am

Hi. I using omega theme. in omega we can use 960.gs framework.
which is better:
omega+960.gs OR Zurb ?

Submitted by JD Collier on Thu, 10/25/2012 - 4:26pm

@Laboni: Twitter Bootstrap is really awesome actually. At this point, it feels a bit more robust than Foundation. You can see lots of pros and cons of each here on Google: http://bit.ly/S9Y19x

I'm keeping my eye on both at this point.

Submitted by JD Collier on Thu, 10/25/2012 - 4:29pm

@Erfan: I don't want to step on the toes of the people doing great work with Omega. It is a great theme. For me, personally, I prefer Foundation over Omega ... I think I like working in the code for Foundation rather than the code in Omega. It is something you will have to try both and see what you think.

Submitted by Andrew on Fri, 10/26/2012 - 4:01am

Interesting stuff! I've been looking around for a good framework to use over the last couple of days. A couple of things have made me pause though, and was wondering what you think:

- How are you finding the accessibility support of Foundation?
- ie7 is not supported in Foundation 3. I was wondering if sites built using Foundation are still usable with ie7 or if it's pretty unusable?

Great blog by the way!

Submitted by JD Collier on Fri, 10/26/2012 - 8:47am

@Andrew: 1. ARIA roles are integrated into the code and I have see several support cases of imperfect accessibility being corrected. They seem very well implemented at this point in the newest Foundation. I haven't done a thorough check on it though.

2. IE7 ... since the global usage is down close to 1% on IE7, I use Chromeframe for that browser. My Foundation site looks horrible on IE7. I believe Foundation 2 still supports IE7 if that is a requirement for you.

Submitted by JD Collier on Mon, 10/29/2012 - 9:05am

@Andrew: Thanks for the link to Bootstrap's accessibility ... I'll keep an eye on that too.

Submitted by paul-lain on Mon, 12/03/2012 - 4:27pm

Interesting indeed. You mention that you find Foundation more flexible than Omega etc..

Here are some things I am wondering:

1. If I am using Display Suite, can I call up the Foundation classes easily to style nodes or would you suggest going into the code to do this?

2. I like using Panels and PM to layout pages (DS to style nodes). With foundation, can I easily use their responsive CSS and integrate it with Panels ? Do you do this with Foundation? Any issues or things to be aware of when using Zurb with panels, PM etc... ?

3. Since Omega has UI for configuring the theme, do you find you can also do same stuff easily with foundation?

Basically - can you use Zurb as a replacement for say, Omega, and get cleaner and better results? What do you need to do that is *easier* in Omega? I guess my question is a bit open ended but just wondering where you need to resort to code vs. UI control of the theme.

thanks in advance!