Design your way

It is no secret that CSS frameworks have been the cornerstone of web design for many years now, but, in the age of responsive design, a framework’s value has multiplied. A well-designed CSS framework or boilerplate can reduce the designing process tremendously by saving time spent on the development phase, while ensuring that your website is rendered properly on all devices.

However, with so many choices out there, choosing the right framework to build upon can be difficult.

CSS frameworks are divided into two distinct categories based on their complexity: simple and complete frameworks. This distinction is totally subjective, however, and does not mean that one is necessarily better than the other. It simply means that they offer different solutions, depending on the complexity level or flexibility required for a particular project.

It is natural to be tempted to go with the more popular applications like Bootstrap or Foundation, but for a simple page, the amount of building blocks and tools they offer would be superfluous.

Fortunately, there are a number of leaner alternatives to Bootstrap and Foundation. Most of them contain just the right amount of tools and styles for the fledgling designer, while at the same time offering expansion capabilities to match your growing needs.

Pure.css

Pure.css is incredibly small. All the modules contained in the set take up only 4.4kb of space when minified and gzipped. Designed primarily for mobile devices, the designers felt it was important to keep the file size as small as possible. And by restricting your usage to a single subset, you save even more space.

Pure.css is responsive, so your page designs look great on all devices, no matter the screen size. Pure.css also allows you to customize styles with the Skin Builder, giving all your pages that personal touch.

Yet, Pure.css carries only a minimum of styles, encouraging the user to design his own styles. Simply override the default styles setting and follow your imagination.

Skeleton

If you’re embarking upon a smaller project, or just don’t feel like navigating all the tools of one of the larger applications like Frameworks, then Skeleton may be the design application for you. Skeleton carries only a handful of the styles found on the larger apps, but it does include a grid.

The new Skeleton grid employs a mobile-first philosophy, which means it is built to display content correctly on small screens first, not the other way around.

Concise

Concise is also built with mobile devices in mind. This ensures that it will look great on any screen, especially smaller ones.

Concise also includes support for Vanilla CSS and SASS. Currently, there are unsupported versions of Stylus and Less on the framework.

Concise also includes responsive, mobile-first grid system. This means that once the viewing area of a device is larger than 768px, the rows on the grid transitions to 16 columns.

PowerToCSS

PowerToCSS is an agile, yet, sound front-end framework. It is a well-designed CSS framework based on SMACSS and DRY principles.

PowerToCSS is built for speed: it loads fast, is easy to learn, and makes designing pages a cinch. And frameworks should be simple; they should serve only as a launch pad for your designs, not take over the whole project.

Cardinal

Cardinal is a scalable mobile-first CSS framework designed with versatility and performance in mind. It is designed to make prototyping easier for front-end web developers to build, scale and maintain CSS for responsive web pages, applications and user interfaces.

Cardinal leaves off many of the aesthetic design decisions that usually slow down other CSS framework applications, leaving the user free to express his own creativity.

SpaceBase

SpaceBase is a SASS-based, responsive-design, CSS framework application. Most frameworks applications come complete and are not scalable. But SpaceBase is a Boilerplate application that can be built upon and tailored to fit your needs.

It combines the best features of responsive design with the basic components we use on every-day projects. Consider it the starting point for a magnificent cyber adventure.

Materialize

Materialize is a post-modern front-end framework app based on Material Design. Materialize the life of a designer simple and easy.

By using elements and principles perfected in Material Design, this framework combines components and animations geared toward eliciting more feedback for users. Moreover, the user’s unified experience is facilitated by a single underlying responsive design system that extends across all platforms.

Webplate

Webplate is an extraordinary front-end framework app that allows the user to stay focused on building his website or app, while remaining user-friendly at all times.

Webplate includes everything from a vigorous responsive design layout engine, universal button controls, costumizable forms, Simple modals and icon font support. Webplate also includes Jquery, Modernizr, Velocity.js, and Hammer.js. And the default feature, Typlate, has a ton of extra features and tools available for your use. But the good news is these features will look and perform the same on all devices.

Mueller

Designed for both responsive and non-responsive layouts, Mueller is a modular, front-end design system based on Compass. Mueller gives you complete control of column width, gutter width, baseline grid, and media queries.

Base

Base is an easy-to-use framework designed to display properly on all devices, no matter what the screen size. It is fast and lightweight and comes with all the essentials necessary to get you started on your next project.

Built on the Normalize.css pattern, it includes all the basic styles for typography, lists, tables, block quotes, and forms.