HTML/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:
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
- 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
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.
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.
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.
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.
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
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.
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.
It’s now crazy fast for designers and engineers to code and learn too. Responsive design gets a whole lot faster for users.
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.
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.
13. HTML KickStart
HTML KickStart Tested and working in IE 8+, Safari, Chrome, Firefox, Opera, Safari IOS, Browser and Chrome Android.
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.
16. Less Framework 4
Less Framework is a CSS grid system for designing adaptive websites. 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.
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.
Responsive Framework is a very small CSS framework (1kb compressed) for fast, intuitive web development.
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.
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.
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.
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.
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.
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
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.