6 CSS tools for coding in style

Preprocessors, frameworks, boilerplate -- these technologies bring style, consistency, and responsiveness to Web development

Programming in style: 6 CSS tools tailored for Web success
Credit: Yury Shchipakin
Programming in style: 6 CSS tools tailored for Web success

Just as tools have emerged to facilitate use of JavaScript, developers and designers are witnessing an explosion in frameworks, boilerplates, and similar technologies that extend, standardize, and expedite the use of CSS. Many of these options have arisen to help developers and designers create consistent, responsive websites and Web apps across a variety of devices.

We spoke with the developers of six popular CSS technologies to find out what spurred them to create their tools and where their projects fit along the ever-expanding style tool spectrum.

Base
Base

Base is a lightweight CSS preprocessor that compiles to SASS (Syntactically Awesome CSS) or LESS (Leaner CSS). Whereas many other frameworks have ditched Internet Explorer, Base still supports IE, according to Matthew Hartman, who designed Base to enable designers to write cleaner, well-structured CSS code.

While the current version focuses on the desktop, Hartman is building a second version to overhaul the code base with a mobile-first approach. He says Base "started off very basic and grew very quickly as I started to implement it in more and more websites. There has been a lot of trial and error, but it's been an awesome and fun learning experience."

Compass
Compass

The Compass CSS authoring framework offers designers cleaner markup, reusable patterns, and ease in creating sprite images, among other benefits. "It's not a heavy-handed, predefined set of class names. There are more tools in Compass than any other CSS framework," says developer Lorin Tackett, who built the grid calculator included in the framework. "Compass takes into account that its features may not match the state of browser support in the future, so features can be selectively turned off."

Tackett says Compass is best for maintaining style sheets for complex Web apps.

Foundation
Foundation

The Foundation framework’s forte is responsive design, a strategy for building websites and Web apps that automatically adapt to the browsing environment of the user's device.

"Foundation was the first CSS framework built to help people build responsive sites that work on any device," says Jonathan Smiley, design lead for Foundation and a partner at Zurb, a Web design agency. "We've been focused on responsive sites since our initial public release, and over the course of five versions we've had a chance to see a lot of the issue people face building for a multidevice world, so we can help solve that."

Foundation leverages SCSS (Sassy CSS), provides built-in components to facilitate layout and prototyping, and allows overrides for customizing your front end.

Gumby
Gumby

While anyone born before 1970 might remember Gumby as the flexible green claymation character of children's television, the same name has been applied to a CSS framework.

"[The name] Gumby comes from the flexibility of the framework. It allows for rapid prototyping," says Peter Sena, executive creative director of Digital Surgeons, the producer of the Gumby framework.

Gumby offers multiple grids with column variations, and its UI kit features buttons, fonts, and form fields. Gumby aims to spare developers from having to write hundreds of lines of code, Sena says. Currently at Version 2.6, Gumby 3 will add screen sizes and devices not currently supported, such as some high-definition tablets and touchscreen laptops.

Kube
Kube

Kube dubs itself the "professional" CSS framework. While other frameworks offer predefined styling that makes sites look alike, Kube is much simpler, says Artem Rosnovskiy, one of the principals behind Kube.

"Kube doesn't impose any style rules or forms,” Rosnovskiy says, making it useful only for professional designers and developers. "Many beginners prefer to have some sort of a guide with predefined ways of doing things -- colors, grids, buttons, forms, etc. -- whereas Kube provides designers and developers with total freedom.... It requires skill, effort, and full understanding of what one wants to achieve."

Responsive Grid System
Responsive Grid System

Responsive Grid System is neither a framework nor a boilerplate, but a "quick and easy way" to build responsive websites, according to Graham Miller, its developer. Responsive Grid System plugs into existing HTML and CSS.

"I found that once I started building responsive websites, I needed something that was simple enough to plug into my own code and flexible enough to work on any project," Miller says. "I stumbled through lots of frameworks and boilerplates, but they all wanted me to set up the grid and then put the content in it. I'm very much from the 'content first' school of thought, so I created my own responsive grid system."

Mobile versions are baked into the system, or developers can make their own.