Design your way

I have to tell you that I discovered my first CSS framework a few years ago and I was fascinated at least.

Hours of writing the same dull code and then solving the same silly bugs have been lost before it and I was almost mad about it but in the same time happy that I’ve at least found the bloody thing.

Out of a personal curiosity I’ve searched all the possible CSS frameworks to see what they are bringing new and how they are helping the community and then selected the best of them for other unfortunate designers or developers out there who don’t have their hands on a CSS grid framework.

Bootstrap

Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes. Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Foundation

A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.

Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!

UIkit

A lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.

UIkit is developed in LESS & SASS to write well-structured, extendable code which is easy to maintain. It’s a collection of small, responsive components using consistent and conflict-free naming conventions.

UIkit’s very basic style can be extended with themes and is easy to customize to create your own look. With the mobile-first approach UIkit provides a consistent experience from phones and tablets to desktops.

Turret

Turret is a styles and browser behavior normalization framework for rapid development of responsive and accessible websites. Turret has been developed for mobile first responsive web design with an intuitive grid system and responsive utilities for rapid development using logical and legible markup.

Turret is focused on a customizable base of typography, font definitions, color and indicators palettes for simple and stylish web user interfaces. Turret is a Less framework for styling native web elements. That’s about it, no Javascript, no custom markup, just semantic HTML5 elements.

Siimple

Siimple is a minimal and responsive CSS framework for flat and clean designs, created initially for my projects. I don’t want to compete with Bootstrap, because it is insuperable.

Base

Whether you’re building a new web application from scratch or creating a mobile-first, responsive website, Base is very easy to learn and use.

Juiced: a Flexbox CSS Framework

Juiced has many of the same layout features that you know and love, but improves upon them with better mobile targeting, custom column ordering, better alignment options, understandable HTML, and less boilerplate styles.

Webplate

Webplate is a package of libraries and tools that make building your project very easy and comes complete with everything you need to structure your layout responsively, write your Javascript and make your project touch enabled.

Simply drop a copy of the Webplate directory into your project and include the stack.js file in your head tag. Below is a basic example and note that the id of webplate-stack is required.

Concise CSS

Concise CSS is a framework written in SASS carefully crafted by Keenan Payne and James Kolce, it provides all the basics without the bloat. No unnecessary styles are added so you can spend more time building and less time overriding.

Do you need more components? You can easily extend the framework by using their pre-built add-ons. Concise has a small learning curve; the simplicity of the styles helps to get started faster.

SkyBlue

SkyBlue is a minimal framework that is meant to be starting point for the author’s projects.

Pure

Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

Neutron

Neutron is a Sass framework that empowers you to create flexible, clear, and semantic website layouts.

Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project.

Rebar Grid Framework

Rebar is aimed to make responsive development more efficient and keep CSS organised. The idea is to setup a list of breakpoints and assign container or grid settings for each breakpoint at one time.

It uses padding for gutter and works the same way as the Bootstrap 3 grid system does. So if you’re already familiar with Bootstrap, you will find Rebar is easy to use and far more flexible.

Skeleton

You should use Skeleton if you’re embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started.

Layers CSS

Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter’s – and build it fluid. Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit.

Materialize

Materialize comes in two different forms. You can select which version you want depending on your preference and expertise.

Semantic UI

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Stretch

Stretch is a 12 column grid that can have any gutter size you want. Columns can be offset and centred to make manoeuvring content really easy. Columns can be specified differently for three devices sizes.

Outline

Outline is a simple CSS starter responsive boilerplate for any new web project. It’s a modular, mobile-first framework which includes today’s best practices for responsive design and core components.

ApplePie

ApplePie Toolkit is modular and responsive CSS framework. Getting started with ApplePie is easy. Whether you are building a simple site with a ‘default’ UI, or you are a master of SASS, building a new app – this toolkit will help you get up and running!

Schema

A modular, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box.

Kickoff

Kickoff comes with a robust CSS framework; it provides many sensible defaults so that you can get your project up and running in the shortest possible time.

Spacebase

Spacebase is a Sass-based responsive CSS framework. Many CSS frameworks are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace.

Source: http://ift.tt/1faZ0nH