25 Popular HTML/CSS Frameworks to Reduce Your Task Flow and Code LESS

css-3-iconHTML/CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. It has grown in popularity recently, a good CSS Framework can help developers rapidly speed up our development time. A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. Here’s a collection of very powerful responsive HTML and CSS frameworks which can help you to reduce your task flow and code less:

1. 52framework


With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5. Features:

  • CSS3 gradients, multiple shadows, and other amazing properties with IE support when there was any.
  • CSS3 selectors with support for IE thanks to selectivizr
  • New and improved HTML5 video support with vimeo like skin
  • A completely new Form Framework with HTML5 Validation (via javascript)
  • Improvements to the Grid Framework, the CSS framework and more
  • More demo pages giving you quick access to the features you want
  • New Canvas with support for IE
  • A Mobile Page in Pure HTML5
  • Blog and Blog Article pages based on the Framework!
  • and many other little tweaks and improvements

52framework

 

2. 960 Grid System


960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

960 Grid System

 

3. Blueprint


Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Blueprint

 

4. BlueTrip CSS Framework


A full featured and beautiful CSS framework which originally combined the best of Blueprint, it gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.

 BlueTrip CSS Framework

 

5. 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

 

6. Columnal 


The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Features:

  • Built-in debugging CSS to show the structure of any pages being built
  • Sub-columns (columns within columns) for more layout options
  • Prefix and suffix for extra space within a column before or after content
  • Vertical spacing CSS classes
  • PDF of grid system for sketching out site before building
  • Wireframing templates

Columnal -- A CSS Framework

 

7. Elastic CSS Framework


Elastic CSS Framework is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

Elastic CSS Framework

 

8. Elements


Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.

Elements

 

9. Fluid 960 Grid System


The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.

Fluid 960 Grid System

 

10. Foundation


It’s now crazy fast for designers and engineers to code and learn too. Responsive design gets a whole lot faster for users.

Foundation

 

11. Gumby


Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

Gumby 2 built with the power of Sass

 

12. HTML5 Boilerplate


HTML5 Boilerplate is a popular front-end template, which helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

HTML5 Boilerplate

 

13. HTML KickStart


HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android.

HTML KickStart

 

14. Jo HTML5 Mobile App Framework


Jo HTML5 mobile app framework is a simple open source app framework for HTML5. For iOS, Android, Windows 8, BlackBerry 10, Tizen, Chrome OS & anything else with HTML5 Widgets, lists and scrolling goodness using JavaScript & CSS3. Make native mobile apps or web apps with the same code. Works great with PhoneGap.

Jo HTML5 Mobile App Framework

 

15. Kube


Kube is an professional CSS framework, which is minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

Kube

 

16. Less Framework 4


Less Framework is a CSS grid system for designing adaptive web­sites. It’s based on a single grid, composed of 68 px columns with 24 px gutters, the only measures that change from layout to layout are the amount of columns and the width of the outer margins.It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Less Framework 4 -- An adaptive CSS grid system

 

17. MontageJS


MontageJS is a modern, full stack HTML5 framework designed to create single-page applications—fast! MontageJS uses time-tested design patterns and software principles, allowing you to easily create a modular architecture for your projects and help deliver a high-quality user experience. This allows designers and developers to work collaboratively and quickly.

MontageJS

 

18. Responsive Grid System


Responsive Framework is a very small CSS framework (1kb compressed) for fast, intuitive web development.

Responsive Grid System

 

19. SenCSs


SenCSs stands for Sensible Standards CSS baseline, (pronounced "sense"). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.

SenCSs

 

20. Skeleton


Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Skeleton

 

21. Susy


Susy is based on Natalie Downe’s CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, WordPress and more.

Susy

 

22.  Toast 


Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast  -- A Simple CSS Framework

 

23. xCSS


xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.

xCSS

 

24. Yaml 


Yaml is a modular CSS framework for truly flexible, accessible and responsive websites with below features:

  • Bulletproof flexible grid system
  • Flexible forms toolkit with theme-support
  • Focussed on web standards & accessibility
  • Optimized typography for all standard elements
  • Matched building blocks for rapid prototyping
  • Namespacing avoids conflicts with third-party CSS
  • Well prepared for HTML5 and CSS3
  • Very slim framework core (5.9 kB)
  • Build on Sass

Yaml a modular CSS framework

 

25. Zebra


Zebra brings fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept.

Zebra

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply