This post originally posted at mark-swanson.com

CSS frameworks have been around for awhile. They’ve just changed a lot in the last several years. What started out as basic fluid or static grid systems have now evolved to include Javascript libraries, responsive layouts, more robust user interface elements and advanced typography.

First, what is a framework and how do they work?

In its most simple form, a CSS Framework is a grid system as well as a collection of assets and styles for creating any variety of page layouts. They lay the groundwork for creating cross-browser sites that work great across all modern browsers with minimal work on the developers part.

In short, they speed up the development process by providing a solid code-base for building sites without the repetitious coding and routine setup that would otherwise be necessary in getting our sites and applications off the ground.

When used properly, the right CSS framework can really speed up the front-end development by providing you with the guts of your project while you code the truely unique aspects of the site. That’s the whole point, really.

A note on terminology: for the purposes of this article, I’m grouping terms like boilerplates, frameworks and grid systems together as one concept. They are not entirely the same, but their purpose here is.

Do you really need to use a framework?

Well, No. Whether you want to make use of a framework largely depends on your personal preference as well as the requirements of the specific project you’re working on. It will also depend on other factors, such as how comfortable you are writing code, designing user interface elements and modifying the framework’s existing HTML, CSS and Javascript.

The more complex frameworks, such as Bootstrap and Foundation may be better suited for someone with minimal coding skills, as it provides many pre-packaged UI widgets such as image carousels, lightboxes and popover menus. You can plug these into your site and add a level of interactivity with very minimal coding skills.

A more experienced developer my opt for a simplified framework as their starting point, customizing it specifically for each project, to create a leaner site without all the unnecessary bloat that may never find use on the site.

And for those really simple projects, a framework might even be overkill. Not every project needs a framework. But if you decide you do, read on for some things you should know.

What should you be looking for in a framework?

It’s going to vary from project to project, but here are some general things your framework should be doing for you:

  • Your framework should be speeding up your development process
  • Your framework should make things look nice and presentable with minimal effort on your part
  • Your framework should allow you to quickly wireframe or prototype sites, putting little focus on the actually styling
  • Your framework should be responsive or at least include mobile alternatives

Other questions to ask yourself

There are a lot of other factors that go in deciding which, if any, framework is best suited for your project. Ask yourself some very fundamental questions about your site, for example:

Are you looking for an HTML5 framework?

If you’re developing a site to certain standards, make sure your framework meets those standards. Spend some time researching different frameworks and testing them out to understand how they’re built. The documentation for the various frameworks is pretty extensive, but like anything, it will require rolling up your sleeves and getting in there.

Do you need a Responsive framework?

If your project requires mobile and tablet-optimized sites, make sure your framework provides this. You may even want to look at mobile-first frameworks, such as 320 and Up, that puts the emphasis on mobile-first.

Are you primarily a designer or an experienced Front-end developer?

For the seasoned Front-end Developer, conforming to the structure of a CSS Framework can be difficult, as they have their own habits and standards for coding.

Conversely, for those just learning to code in HTML and CSS, it’s actually a great way to develop proper coding and organizational habits.

Do you use a CSS Preprocessor?

If you’re using a CSS Preprocessor like LESS or SASS, you’ll want to make sure your framework supports your choice of CSS Preprocessor.

The Minimalist Approach to Frameworks

Minimal frameworks are meant to serve as a starting point, leaving a smaller footprint on the overall site. They focus more on style than functionality, providing consistent button styles, alert messages and typography.

A few advantages to the basic frameworks

  • There’s less overhead and bloat
  • It’s easier to get up and running, with a smaller learning curve than some of the more complex frameworks
  • You are not as boxed in by the framework. More experienced coders may appreciate the flexibility of the more basic frameworks

Examples: Skeleton, Less Framework, The Square Grid, Atatonic, Baseline

The more complex Frameworks

The more complex frameworks expand on the traditional CSS Grid Systems that came before it, by providing support for expanded user interface elements such as alerts and messages, and widgets such as image sliders, galleries and modal windows.

They often include the addition of Javascript libraries, such as JQuery, the integration of CSS Preprocessors like LESS and SASS, and browser normalization tools like Modrnizr.

You’ll find a larger variety of button styles, tabbed interfaces and navigation systems packaged with these frameworks, creating a larger footprint on your site, but giving you access to more functionality than the minimal frameworks. Keep in mind, you generally won’t use all the features of the full framework.

Examples: Foundation and Bootstrap

Should I just build my own?

Sometimes, it truly is best to just roll up your sleeves and do the heavy lifting yourself. After all, who knows your project better than the person working on it day to day?

At MINDSCAPE, we’ve found a custom framework makes the most sense for us, the same way a custom CMS made more sense than using some of the other options that are already available. It’s really your decision in the end, but hopefully this article has given you some insight on what to look for.