Crea sito

HTML Boilerplates, CSS and WordPress Frameworks

June 14th, 2012 by Villa Tommaso Leave a reply »

HTML5 Boilerplate

HTML5 Boilerplate
HTML5 Boilerplate is the professional frontend developers’s base HTML/CSS/JS template for a fast, robust and future-safe site.
After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site’s filesize by half with robust gzipping.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.
HTML5 Boilerplate as designed and developed by Paul Irish & Divya Manian. It is basically a product that took more than two years to develop it is basically deigned to support the best available practices as well as techniques for creating various cross-browser websites which are compatible and which will operate in synch with the legacy browsers besides being ready for HTML5.
There are certain types of HTML5 Boilerplate templates on GitHub that can be used for watching, forking and commenting pleasure

Twitter Bootsrap

Twitter Bootsrap
Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it’s a front-end toolkit for faster, more beautiful web development. It’s created and maintained by Mark Otto and Jacob Thornton at Twitter.
To get started, checkout in Github and look up some really cool examples of websites built with Bootstrap and Twitter Bootstrap Button Generator

Rootstheme

Rootstheme
Roots is based on HTML5 Boilerplate, Bootstrap from Twitter, and is hNews microformat ready
You get all of HTML5 Boilerplate’s markup (but they do place JavaScript in the header to avoid any plugin conflicts). You get most of HTML5 Boilerplate’s incredibly powerful .htaccess directly from the theme. You get all of HTML5 Boilerplate’s style.css.
Bootstrap from Twitter is included by default, with topbar navigation and the responsive grid ready to go. Blog posts are based on the hNews microformat as recommended by Readability’s Article Publishing Guidelines.

Foundation Zourp

Foundation Zourp
Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time. Clone the repo to get the marketing site, docs, and base source. You can also visit Foundation Home Page to download just the base source as a starting boilerplate.

Gantry Framework

Gantry Framework
Gantry was born when the RocketTheme development team wanted to consolidate our extensive set of custom Joomla template functionality into a simple, easy to use framework. However, they wanted to ensure they didn’t lock ourselves into a rigid framework that would stifle the creativity and bleeding-edge design features that they had become known for. It had to be powerful enough to do everything our templates already handled, but allow us to easily extend and build-on these features with a minimum of effort and complexity.
They wanted to have a solid base we could build on top of when creating a new Joomla template. Anything that was common to all templates was a prime candidate to be put in the core of Gantry, and anything specific to the template design itself should be part of the template itself. Traditionally the Joomla layout options are limited, but Gantry was built to provide a new layer on top of this traditional module configuration to give an unprecedented level of control and flexibility.

Reverie

Reverie
Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improve readability.
It is extremely easy to create your blog, CMS, brochure and any other kind of sites with Reverie. You can see some samples on ZURB and how they make these prototypes. Did I just mentioned Reverie works well with bbPress 2.0 and BuddyPress 1.5, even without styling?

Responsive Grid System

Responsive Grid System
Responsive GS 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.
Responsive GS was created by Denis Leblanc from Studio Snapsize and inspired by many other published grid systems. They say that the reason they put this framework together is because they are obsessed with reducing everything to it’s simplest form possible.

Gumby Framework

Gumby Framework
Gumby Framework was built to be the most maleable grid framework you’ve ever used while still maintaining the familiarity and ease-of-use of the grid you’ve always used.
Similar to Twitter Bootstrap, it includes a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life.
Gumby has multiple versions to download: 12 columns, 16 columns, a hybrid one or an all-in-one package. And, there are PSD files provided to ease designing with the grid.
The framework is very well-documented, has demos for all of its features and totally free to use.

Less Framework

Less Framework
Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. These are the 4 layouts: Default Layout, Tablet Layout, Mobile Layout, Wide Mobile Layout.
Less Framework uses the HTML5 enabling script by Remy Sharp & optionally there is a JavaScript function provided (requires jQuery) included which mimics the function of min-device-width for browsers that do not support it.

52 Framework

52 Framework
52framework is a CSS framework which provides an easy way to build websites using HTML5 & CSS3 while still supporting all modern browsers (including ie6). It uses HTML5 tags like header, nav, section, article, footer or new input field types like url, email, etc. The framework also has a HTML5 compatible reset stylesheet.
52framework uses the new :selection selector that enables you to customize the properties of selected text.It can apply rounded corners for any block level element, text-shadow for text elements & more. Framework also includes styles for creating grids : 16 column, 52 pixel based with 8 pixel gutter.

Golden Grid System

Golden Grid System
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Skeleton A Responsive WordPress

Skeleton
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down To Mobile, Fast to Start, Style Agnostic.
Well, if you are creating a nice, clean and basic styled website, Skeleton is easy to use and kick ass at what is for. Everything is easy to use, compatible, and sizes perfectly. If on the other hand, if you are creating a site that I think most developers do, which uses a lot of CSS background images, you could be in for a lot of pain.

99 Lime HTML KickStart

99 Lime HTML KickStart
HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10′s of hours on your next web project.

Fluid CSS Framework Evolved

Fluid CSS Framework
Centage CSS Framework is based on less.js, that takes full advantage of it’s advanced features like mixins, variables and nesting.
Centage does not use pixel values, everything expands and shrinks according to browser width, remaining in visual balance, and does not add anything to your xhtml markup. It’s end result is pure, robust CSS.
Centage! is currently in alpha release state and might have bugs. It’s not fully tested with IE, so you might encounter problems.

Advertisement

Leave a Reply

*

Powered by AlterVista