Thursday, March 7, 2013

15 More Responsive CSS Frameworks & Boilerplates Worth Considering - Web design Sri Lanka

How to Create Responsive web site - web design sri lanka
Following on from 15 Responsive CSS Frameworks Worth Considering, which we published last November, today we have 15 more for you to consider. All of the frameworks and boilerplates below have been built with strict compliance to standards and conventions and will, as you would expect from any CSS framework, save your precious time by eliminating the need to write any of the base CSS styles yourself and, more importantly, helping you solve any tricky responsive layout issues you may have.

Gumby 960 Grid Responsive CSS Framework

Gumby offers a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column version or absolutely everything in a single bundle.
Within the framework they’ve packaged up tons of styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns) to help you quickly put together functional prototypes.
In a nut-shell, Gumby has been built to be the most malleable grid framework you’ve ever used while still maintaining the familiarity and ease-of-use of the grid you’ve always used.

Responsive HTML5 Aeon Framework

This is version 2 of the Aeon framework. It now comes with a 12 column responsive grid (with a full width of 1104px) and all coded in HTML5.
Aeon has just over 120 lines of code and has only three basic classes (1-Container, 2-Contentand Col) allowing you to quickly create mockups/wireframes and final websites from scratch in no time.

Ingrid – A Fluid CSS Layout System

Ingrid is a lightweight and fluid CSS layout system with the goal of reducing the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to re-flow responsive layouts. t has also been developed to be an extendable easy to customize system.

Titan Framework

The Titan Framework uses the exact same CSS classes as the 960.gs. So if you have developed websites with 960.gs, you can easily switch them to responsive in a matter of minutes by just replacing the 960.gs CSS files with the Titan Framework CSS files… and you are good to go.

Foundation 3

With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.
The latest version (3) of Foundation has been built with Sass allowing you to quickly develop Foundation itself – and gives you new tools to quickly customize and build on top of Foundation. The developers have added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively.
Yes, as their taglines states, Foundation is quite possibly the most advanced responsive front-end framework in the world.

Gridiculous – A Fully Responsive Grid Boilerplate

Gridiculous is fully responsive boilerplate based on a twelve column grid (max site widths of 1200px, 960px, 640px, 320px and full width). With Gridiculous you can space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.

Responsive Grid System

The Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Less+ Framework

Less+ is an extension of the Less Framework with the difference that it has extended support for Internet Explorer. It empowers designers and developers to build websites that can adapt their content depending on screen resolution, making use of the jQuery Media Queries library.

Bootstrap v.2.0 from Twitter

The hugely popular Bootstrap, now in its second version, is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions that uses some of the latest techniques that gives you stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a lightweight (only 6k with gzip) framework.
Bootstrap doesn’t include responsive features by default. You can turn on the responsive CSS by including the proper meta tag and the additional stylesheet within the <head> of your document:
1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Susy – Responsive Grids for Compass

Susy is a semantic CSS grid system with a responsive twist. Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to.
Susy isn't another one-size-fits-all grid framework that will make your sites look identical and litter your markup with meaningless "col2of5" jargon. It won't design your site or write your markup, it just does the math and quickly gets out of your way.

YAMB

YAMB is a small set of tools and best practices for building responsive websites faster. It includes a fluid grid, a drop-down menu with the option of unlimited sub-levels or/and mega subs (for small screens a drop-down menu is automatically converted into a select box) and a responsive image slideshow with captions.

Responsive Grid System

Wirefy – The Responsive Wireframe Boilerplate

Wirefy is a collection of CSS & JS files to help you experiment with responsive wireframes. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. It is style agnostic so that clients don’t get hung up on colors, fonts, other design elements.
Wirefy is meant to be another tool for your development kit that provides the most basic styles as a foundation.

Responsive SCSS – eCSSential

The Responsive SCSS eCSSential boilerplate is a front-end framework is an amalgamation of different techniques, including: Adaptive Images, The Semantic Grid System, and the power ofSCSS and also utilizes eCSSential (an experimental utility for making browsers load responsive CSS in a more responsible way).

StatSheet Frameless CSS Framework

The StatSheet Frameless CSS framework, based on the Frameless Grid, utilizes a 12 column grid for the desktop version and portrait tablet, a 4 column grid for a landscape mobile device and a 2 column grid for a portrait mobile device.
You have a choice of either downloading the responsive or non-responsive version of the grid.

The Boiler – A Responsive Boilerplate

The Boiler is a responsive HTML5/CSS3 boilerplate WordPress theme that includes: Includes: Theme Customizer & Options, Custom Header, Custom Background, Custom Templates, Shortcodes, and more.

Understanding Viewport

Understanding-Viewport is a set of simple HTML pages with various viewport and media query settings, that will help you better understand the working of the viewport meta tag and its @viewport CSS-based counterpart.
Here is a presentation, using these templates, which explains the working of the viewport mechanism, media queries, and more:

Southstreet

SouthStreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help them deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.
Southstreet →

Courtesy: http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
Posted by at

3 comments:

Subscribe to: Post Comments (Atom)