A curated collection of great CSS, Sass, LESS and Stylus libraries.

Metro UI CSS a set of styles to create a site with an interface similar to Windows 8 Metro UI. This set of styles was developed as a self-contained solution.
 Metro UI CSS contained type of license: MIT.
LESS
 Metro UI CSS is made with LESS. It makes developing systems-based CSS faster, easier, and more fun.

Steve Fisher and Alaine Mackenzie set out their vision for responsive web design as it approaches maturity
Let’s be clear: design is the solution only if it focuses on the deeper issues at hand, the why behind everything. A solid process should always guide our work, but we need to embrace something more flexible. Our medium has finally proven itself to be fluid, so shouldn’t our process? Think about system design: you need to see both the whole picture and the tiny details. Impossible? Far from it!
 Frank Chimero puts it beautifully in his book The Shape of Design: “There is a part where the artist steps back from the easel to gain a new perspective on the work. Painting is equal parts near and far: when near, the artist works hard to make his mark; when far, he assesses the work in order to analyse its qualities. He steps back to let the work speak to him.”

 We need to let our work, our medium, speak to us. With the rise of responsive design, we are finally embracing our medium as it was meant to be: fluid. It is a brilliant time to step back and assess the work, analyse, and embrace a new way of doing things, a new process. Gone are the days of static mock-ups and web designers who don’t understand code. It is time for a responsive process.

Avec la généralisation des technologies JS, CSS3 et HTML5, il est aujourd'hui possible de faire des sites Web qui n'ont rien à envier aux interfaces des logiciels que l'on peut trouver sur nos machines. Le revers de la médaille est une complexité croissante qui nécessite de faire appel à des professionnels . Quand vous devez faire un site personnel ou pour une association, il est difficile, à moins de s'appeler Cresus, de passer par un Web designer.
Heureusement des frameworks libres permettent avec un minimum d'investissement et de connaissances de bâtir des sites Web dans les règles de l'art. Nous allons dans ce billet parler du plus médiatique d'entre eux: Bootstrap. L'idée n'est pas de traduire la documentation officielle qui est par ailleurs très bien faite, mais de partager avec-vous mes méthodes que je suis en train d'utiliser pour développer le prochain thème du Blog de Nicolargo qui sera, vous l'avez compris largement basé sur Bootstrap.

I'm sure we all agree that responsive web design has been one of the biggest subjects in the last few years and will continue with the growth of mobile. As a senior front and backend developer with a strong interest in research and development at my company, I am responsible to evaluate techniques like RWD. Whenever I received a link to a totally new CSS grid system, I became more and more skeptical. They did not feel "right" to me, but I wasn't sure why.
Then I happened to come across a great article by Ian Yates titled "Life Beyond 960px: Designing for Large Screens" which introduced me to the term "Screen Real Estate". Prior to that, I did some deeper research using rem units in CSS which was a fortunate coincidence. Suddenly I knew what felt wrong.
When talking about RWD we mostly talk about devices below the target width of our layouts. But what about larger screens? Most of you will agree that a non RWD website with a target width of 960px looks a bit odd or lost on such a screen. Things are becoming more obvious when we talk about people accessing our websites with a 60" TV. Sure, these TV sets will most likely still only have full HD resolution. But keep in mind that whoever sits in front of them is probably at least 4m/10f away from the screen.

The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also meet the expectations of users. They’re not sitting still.

Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of us who write HTML.
Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size. Prior to the iPhone’s introduction in mid-2007, designers could rely on windows at least 700 pixels wide (if they ignored accessibility). Conventions like navigation bars, two- and three-column layout and hover effects evolved to fit the mouse-based wide-screen standard. Designers made their upper left corner logos clickable because it was expected.

There’s a debate over which technique of creating mobile-ready websites is the best.
Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).
A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS from the same URL depending on the device a web page on the site is being requested from (which has been referred to as responsive design + server side components).
This article will discuss each of these methods.
Real-world examples of websites using a particular method are provided under each section.
The mobile device used to test and gather data for all examples is an iPhone 4 using iOS 5.0.

Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.
Want to test Centurion out simply fork or download the repository on Github to get started and see the power a responsive framework can have on your next web project.

HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5.
Inline comments explain how and when to use some of the most common HTML5 elements.
Can also be used as a guide when building your own pages from scratch.
No JavaScript libraries such as jQuery or Modernizr are included, as they may be completely unnecessary.
It does include Normalize.css and original html5shiv as the former aids cross browser similarity and the latter is the minimum requirement for HTML5 documents to render in older versions (8 and below) of Internet Explorer.
Some of the WAI-ARIA roles are also included.
Templates that explain how to use HTML5 audio and video are also available.