Responsive HTML5 & CSS3 Frameworks

Written by Epic Monkeez on | Tiny Url

We know there are a wide range of frameworks out there. So many, we decided to make our own personal list, which we will update often. We created an overview of frameworks that are: state-of-the-art, updated regularly, use the latest techniques (HTML5, jQuery, CSS3), are flexible, responsive, mobile, cross- platform/browser usable and offer a good head start to your projects. Our list consists of frameworks we use and have used on projects over the last few years and also frameworks we have deconstructed to learn from or created our own framework from. In the near future we will write down our thoughts and insights on the most popular frameworks: Twitter Bootstrap, Zurb Foundation and Yahoo!’s Pure. Watch this space.


960 Grid System

960 Grid System

The 960 Grid System is made to streamline web development workflow by providing dimensions, based on a width of 960 pixels. You can use the 960 Grid system in two ways: 12 and 16 columns, separately or in tandem. The download contains various files: OmniGraffle and Vision, printable sketch sheets, design templates for Fireworks, Photoshop and offcourse the CSS and HTML.

52framework

52framework

The 52 Framework supports all modern browsers making this framework distinctive and useful. 52 Framework comes with a numerous number of features: it fully supports Html5, html5 video player, html5 form validation, CSS3, html5 canvas examples, modified reset stylesheet for HTML5, and HTML5 Local Storage.

 Fluid Baseline Grid System

Fluid Baseline Grid System

The Fluid Baseline Grid System system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. The Fluid Baseline Grid System is a HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease. It is packed with CSS normalisation typographic standards, fixed for common browser inconsistencies and with usability in mind.

inuit.css

inuit.css

Inuitcss is a nice and useful framework, which allows users to create beautiful websites. It supports new HTML5 elements and is built to work on smaller screens (such as tablets) and tiny screens (such as phones). Developers can build their own fluid grid systems and it provides nice typography for development along with all types of modern browsers supports, even IE6.

Magazine Grid

Magazine Grid

Magazine Grid is developed specially for the iPad in portrait and landscape orientation. The simple 8 column grid uses the full display without leaving unnecessary margins. Magazine Grid has a small footprint and has a fallback style for devices with even smaller screens. Magazine Grid is a modern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid.

Kendo

Kendo UI

Kendo is an HTML5, jQuery-based framework for building modern web apps. Kendo delivers a rich framework for client-side data binding, templating, animation, and drag-and-drop actions. Don’t waste time trying to find and use tons of scattered jQuery plug-ins. Kendo UI incorporates a seamless, professionally tested and supported HTML5 toolbox for every project.

Press Work

PressWork Toolbox

A HTML WordPress Framework for designers, developers & publishers. The PressWork Toolbox lets you style any theme in a live preview environment without any code, drag & drop to set your layout in seconds, add Google fonts, and much more.

Sencha Touch

Sencha Touch

Sencha Touch is the world’s first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. Sencha Touch is the perfect solution for mobile enterprise application development.

FRAMELESS

Frameless

It’s just an idea for a specific type of adaptive grid. You can use Frameless as a good starting point for a new design, but you’ll still have to do all the hard work, designing and coding yourself. Adapt column by column, not pixel by pixel. It comes with a Less and a Sass template.

Jqwidgets

jQWidgets

jQWidgets is a UI toolkit for the next generation of cloud apps development and it is built entirely on open standards and technologies like HTML5, CSS, JavaScript and jQuery. jQWidgets gives us something new and special. It’s a new and unique library for jQuery UI development and unlike others it makes our Apps and Websites look beautiful on desktops, touch devices and mobile phones.

Boilerplate

HTML5 Boilerplate

It’s the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. As a user you get the best of the best practices baked in: performance optimisations, even optional features like cross-domain Ajax and Flash, cross-browser normalisation. A starter apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

initializer

Initializr

With just a few clicks you generate yourself a HTML5 template. Initializr also gives you an option whether you want your template to include JavaScript or jQuery, server configurations, and Google analytics. Initializr is also built on HTML5BoilerPlate, another great tool to expand your HTML5 grasp, add functionalities, and improve your whole site.

Treesaver

Treesaver®

A free JavaScript framework for creating magazine-style layouts using HTML and CSS. It searches for article tags and shows the content inside them. Both content and design are shaped with standards compliant with HTML + CSS and no JavaScript programming is required.

Toast

Toast

The framework comes with three main parts – a standard reset, to make elements look the same across browsers, as well as a grid system and a typography stylesheet. In short, Toast is a grid based framework designed for simplicity. Toast uses clever tricks to avoid having to clear floated elements or tell the browser when the last column is put in.

Baker

Baker

A HTML5 framework to publish ebooks in HPub format for iPads with minimal effort.

Less Framework

Less Framework

Less Framework is a CSS grid system for designing adaptive (multi-)column websites layouts. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Less Framework can easily build websites or applications compatible with mobiles or smart phones and it works fine with all modern browsers.

Laker

Laker

A box of open source files, fully customisable, frameworks, styles and tips for designing digital publications in HTML5. Some of the core features are that you can distribute your publication as an app for iPhone and iPad. The layout scales automatically depending on screen size and orientation. Laker uses Baker, jQuery, HTML5 and the Less Framework.

jqt

jQTouch

A jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.

Baseline

Baseline

Baseline is a HTML5 framework which assists users to easily create and develop websites and web applications. Baseline comes with standard typography and includes style for HTML form and new HTML 5 tags. Baseline supports all modern browsers such as Safari 3+, Google Chrome, Firefox 3+, Opera 9+, and IE 8.

Tags: