UNMAINTENED - yahdrib

Yet Another HTML5 Device Resolution Independent Boilerplate

A boilerplate for a responsive design that fits all current and future devices.

See the page, or the awesome demo

The logic of this responsive design is that we don't want, neither have the time, to create CSS for all current and future devices and resolutions.

Moreover mobiles and narrow medias doesn't need the CSS rules made for wider ones, less to download them.

So the deal is that there is 3 files:

One that is shared and contains normalization, boilerplate, default yahdrib theme and your custom mobile theme.

The shared.min.css is the base of all: normalization, base of theme, and mobile styles. In developement, there is 3 separated files (css/dev). So that it's much more understandable, readable, and easy to customize.

But remember, it's made for mobile, so keep it stupidly simple (KISS).
An other one with the CSS for the wider screens.

The wider.min.css contains rules for large and intermediate screens. Here, CSS are more for enhanced page layout, theme, etc.
At least, the helpers-print.min.css is a final tiny one for the helpers, non semantic stuff, and print rules.

yahdrib uses the following librairy:

html5-boilerplate | v3.0.2

Modernizr | 2.5.3 html5-boilerplate build

Respond | 1.2.0

Enhanced normalize.css from Nicolas Gallagher | Mar 03, 2012 release

A custom resolution independent design

index.html

Replace / customize / fill in the <head> section such as the title, description, keywords, author, Google Webmaster site verification ID, sitemap, feeds (Atom / RSS), etc.

Of course customize the different <body> text contents. And at least, the JavaScript, jQuery, and Google Analytics ID if needed.

Remove unnecessary code and comments for production environment.
humans.txt

Fill in the /* TEAM */, /* THANKS */, and /* SITE */ sections. See http://humanstxt.org/ for more information about it.
CSS files

Customize values, or remove unchanged, from css/dev/01-yahdrib-theme.css file.

Add your own custom CSS for mobiles to css/dev/02-yahdrib-mobile.css file.

Add your custom CSS for wider media to css/dev/wider.css file.

For production environment, merge and minify the follwing files into one single css/shared.min.css file.
1. css/dev/00-normalize-h5bp-yahdrib.css
2. css/dev/01-yahdrib-theme.css
3. css/dev/02-yahdrib-mobile.css
Also minify css/dev/wider.css into css/wider.min.css.
Extra, but well appreciated

Clone, fork, give some feedback, comment, or whatever. Talk about how you like it !