Foundation Zurb

Foundation includes a rock-solid, tested, 12-column grid which is both fluid and responsive. It adapts to different screen sizes through percentage-based widths as well as through media queries. That means you can quickly lay out complex pages without worrying that they won’t show up right on an iPhone, or an Android tablet, or a Blackberry, or a TV. You’ll be able to see exactly how they look, and how they adapt to different sizes, then plan accordingly.

Extra: typography, buttons, tabs, pagination, image grids, forms and more are all included.

{code type=xhtml}

{/code}

Golden Grid System

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.

Elastic gutters are created by positioning elements in the center of the gutter (using percentages) and giving them a padding equal to half of the gutter’s width. For example:
{code type=xhtml}

.wrapper {
box-sizing: border-box; /* + vendor prefixes */
width: 50%;
margin-left: 25%;
/* Assuming gutter width = 1.5em */
padding: 0 0.75em;
}

{/code}

Amazium

Amazium uses 4 main media queries to adjust the layout of your website to match the size of your screen. The media queries in Amazium only target at max and min widths rather than device sizes or orientations, which means that any new mobile or browsers that don’t match the exact dimensions will still benefit from the styling.
Made from the 960.gs

{code type=xhtml}

{/code}

Semantic grid system

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?
Runs on LESS, SCSS, or Stylus.

{code type=html}

{/code}

{code type=css}

@column-width: 60;
@gutter-width: 20;
@columns: 12;

header { .column(12); }
article { .column(9); }
aside { .column(3); }

@media (max-device-width: 960px) {
article { .column(12); }
aside { .column(12); }
}

{/code}

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.

{code type=html}

{/code}

simplegrid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px.
Most grid systems use one class for all units of a single size, leaving units oblivious to where they fit into the grid. That leaves you with .first and .last classes. With SG each slot knows whether it’s first, middle, or last in its respective row; no extra classes needed.

{code type=html}

Combining Slots to Create Super Slots

Combining slots is as simple as connecting their slot numbers with dashes.

{/code}

columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

{code type=html}

{/code}

Magazin Grid, made for the iPad

{code type=xhtml}

{/code}

1140 css grid

It’s an ultramodern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid. Made for the iPad.

{code type=xhtml}

{/code}

mqframework

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes

{code type=css}
@media only screen and (min-width: 960px) and (max-width: 1139px) {
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
@media print{}
{/code}

{code type=html}

{/code}

iPhone – Css3

iiOS Icons Made in Pure CSS

iPhone keyboard with CSS

iThe Opera logo, rendered only with CSS

iOur Solar System in CSS3

iCSS3-Man

Pure CSS Twitter Fail Whale

CSS3 Monsters Blob

Wicked CSS3 3d bar chart

3d animation using pure CSS3

Pure CSS Icons

Safari 4, built entirely with valid HTML5 and CSS3

CSS3 Charts

The Man From Hollywood

CSS3 Super Mario 3D Animated

Raindrop

Use CSS3 to Create a Dynamic Stack of Index Cards

Google Images Gift Box

Sliding Vinyl with CSS3

Polaroids with CSS3

With avatar or cartoons

Minimalist

With the author’s photo

With the team

With a timeline (or other numbers)

On the top (or with a slider effect)

Miscellaneous

Here we go again, kids. But this time is about @font-face. Yes, this is a topic of CSS3 and fonts (just in case you are recently awaking from a coma and you have never heard about it). There are some different ways to use custom fonts in your website. The @font-face is one of the ways.

I have chosen a wide range of articles to show you. From the basics in “Fonts” to the new possibilities in the article “Ever Thought About Using @Font-face for Icons?” And even a cheat sheet and a powerpoint to learn by heart.

And if you have a predilection for fonts and your eyes wide open, there are a lot of blogs using Museo .

I hope you really enjoy the selection and discover something new to learn.

Fonts

Web fonts with @font-face

Introducing the Web Safe Font Cheat Sheet

Quick and Easy CSS @font-face Code

Implementing @font-face

@FONT-FACE GENERATOR

Practical steps for using @font-face in your websites now

Get up and running with @font-face

How Do I Implement @font-face?

CSS3 Generator : Generate CSS3 On The Fly

The Future Of CSS Typography

CSS3 Please! Instant results… Thank You

Quick Tip: How to Work with @Font-face

10 Best @font-face Fonts

Understanding @font-face and Typography

Tools and Resources to Improve your Typography on the Web

30 Beautiful and Free Fonts You Can Use with @font-face

CSS, JAVASCRIPT AND XHTML EXPLAINED

@font-face Generator Every Web Designer Must Know

MIX10: THE TYPE WE WANT

Custom Web Fonts In CSS3

Real Fonts and Rendering: The New Elephant in the Room

Quick Tip: Ever Thought About Using @Font-face for Icons?

Spruce It Up

Jeff Veen Talks Future of Typekit

7 Useful CSS3 Code Generators

Source box:

Images:

http://www.w3.org/TR/CSS2/fonts.html#propdef-font

http://www.css3.info/preview/web-fonts-with-font-face/

http://www.mightymeta.co.uk/introducing-the-web-safe-font-cheat-sheet/

http://perishablepress.com/press/2010/04/13/quick-and-easy-css-font-face-code/

http://www.miltonbayer.com/font-face/

http://www.fontsquirrel.com/fontface/generator

http://www.unmatchedstyle.com/podcast/practical-steps-for-using-font-face-in-your-websites-now.php

http://blog.doliver.co.uk/2010/03/get-up-and-running-with-font-face/

http://www.littleboxofideas.com/blog/tutorials/how-do-i-implement-font-face

http://www.webstuffshare.com/2010/03/css3-generator-generate-css3-on-the-fly/

http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/

http://ajaxian.com/archives/css3-please-instant-results-thank-you

http://net.tutsplus.com/videos/screencasts/quick-tip-how-to-work-with-font-face/

http://www.paper-leaf.com/blog/2010/02/10-best-font-face-fonts/

http://hokuten.net/2010/understanding-font-face-and-typography/

http://inspectelement.com/articles/better-typography-tools/

http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/

http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

http://aext.net/2010/01/font-face-generator-every-web-designer-must-know/

http://snook.ca/archives/conferences/mix10-the-type-we-want

http://antitables.com/2009/08/26/custom-web-fonts-in-css3/

http://24ways.org/2009/real-fonts-and-rendering

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-ever-thought-about-using-font-face-for-icons/

http://24ways.org/2009/spruce-it-up

http://carsonified.com/blog/design/jeff-veen-talks-future-of-typekit/

http://pelfusion.com/tools/7-useful-css3-code-generators/