A framework is a package that consists of a structured set of files and folders of standardized code (i.e. HTML, CSS, JavaScript documents) and is utilized within supporting website development, as the foundation to begin creating or building a website.

Within CSS frameworks, there’s a significant distinction among two types of frameworks, depending on their complexity, such as simple frameworks and complete frameworks. This distinction is purely subjective, and doesn’t necessarily mean that one specific framework is better than the other. It’s simply because these frameworks offer different solutions, depending upon the level of complexity and/or flexibility the user requires.

In today’s post, we’ve compiled 10 amazing new CSS frameworks for 2014, some of which are more complex than the others and offer more in terms of configuration options, widgets, and interface options, among others. Check out their features and see what works best for your project.

Enjoy!

Unsemantic

Unsemantic

A successor to the popular 960 Grid System, Unsemantic is a fluid grid system that works the same way as its predecessor, but instead of being a set number of columns, it’s fully based on percentages. For example, if you want a 50% wide column, you can just use class=”grid-50”. There are grid classes for multiples of five, as well as grid classes for dividing a page into thirds (grid-33 and grid-66).

Tachyons

Tachyons

This performance-centric CSS framework has simple and fast modules and components. It’s easy to get started with and is very lightweight (6.2KB gzipped). With it, you can quickly and easily build responsive, high-performance, and easy-to-maintain interfaces. Take note, however, that this is a work in progress (heavily in flux), so watch out for more documentation and examples.

Kouto Swiss

Kouto Swiss

Kouto Swiss is a comprehensive CSS framework for Stylus, inspired by popular tools like Nib, Compass, Bourbon, etc. It provides you with a lot of mixins, functions, and utilities to code faster, and comes with the power of CanIUse to make your stylesheets suit your compatibility needs.

Base

Base

This simple and responsive CSS framework is built for all devices big and small. It’s a fast and lightweight framework that comes with all the basic essentials to get your web project up and running in no time.

Concise

Concise

Concise is built to give you a lot of options out-of-the-box. It’s built from the ground up to be mobile-friendly and comes equipped with a simple grid system, beautiful typography, and a few bells and whistles. On top of these, Concise is built to be lean, with a little over 2,000 lines of CSS, and a few hundred lines of JavaScript. It’s highly customizable, and is built to be tinkered with and hacked.

Material UI

Material UI

This CSS framework is comprised of a set of React components that implement Google’s Material Design specification. It’s still a work in progress, so keep your eyes peeled for more documentation and live examples in the coming months.

ApplePie

ApplePie

ApplePie is a responsive and modular CSS framework that allows you to easily get started with your project, whether you’re building a simple website with a default user interface or building a new application (if you’re an expert SASS user). This tool will surely come in handy!

Kickstart

Kickstart

This is the first and only library to use either semantic CSS mixins or CSS classes for styling. It’s an easy-to-theme frontend framework that works with either semantic CSS mixins or CSS classes. It comes with a single CSS file and a JavaScript file – no jQuery required. It mainly targets modern browsers, providing the latest and most robust features. For targeting older browsers, former Kickstart releases were also made available in the documentation.

TukTuk

TukTuk

TukTuk is responsive frontend framework that allows you to easily create extensible websites. It’s a fast and lightweight CSS framework (only 9KB gzipped), with object-oriented CSS to encourage code reuse and for faster and more efficient stylesheets that are easier to add to and maintain.

Crumpet

Crumpet

This incredibly simple and responsive SASS/SCSS framework keeps your HTML clean and stays out of your way. It’s built to make use of placeholder selectors to minimize the size of your HTML markup. After all, nobody likes messy HTML. With this framework, it’s simple and easy to create fast and responsive web layouts. It even gives you the freedom to do whatever you want with your code.

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name (required)
Email (required)