Guymon

The Semantic Grid System

Mal wieder ein HTML / CSS Template System was ich mir anschauen will: The Semantic Grid System.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

All without any ugly .grid_x classes in your markup. Oh, and did we mention it’s responsive?

Bootstrap: HTML, CSS Framework

Ich hatte schon lange kein HTML, CSS Framework mehr: Bootstrap:

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Scheint einen Blick wert zu sehr, es bringt neben einem Grid Layout eine Menge Default Styles für Tabellen, Fehler Meldungen, Modal-Windows, etc pp mit.

Elastic Grid Layouts

Steven Bradley erklärt Elastic CSS Layouts und die Unterschiede zu Fluid Layouts.

Developing flexible layouts with relative measurements should be a goal for web design as the format in which our designs live (the browser) will always be flexible.

Those measurements can be relative to the browser, which I’ve defined as fluid layouts or relative to something internal to the design, which I’ve defined as elastic layouts.

It’s quite simple to move from a fluid layout to an elastic one. All it takes is changing the measurement of the outermost container from % to ‘em.’ Everything inside that container will then be relative to the design instead of the browser window. Inner containers can continue to be measured in %..

1 line CSS Grid Framework

CSS kann so schön simple sein: 1 line CSS Grid Framework.

This is the challenge of writing entire CSS layout system with one line CSS class.
I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things.
I started with the principle that every column can be divided by two, becoming half column or 50% column.
So how can we build CSS Layout system with this principle?
One column can become 2 (50%) column or 100% = 50% + 50%.
So we can make 2,4,8,16, … layout system.
Believe it or not we only need this line of CSS code:

.dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

YUI Grids CSS

Bei ThemeForest bietet einen Crash Course im Umgang mit YUI Grids CSS.

With the YUI Grids CSS framework, it’s easy to quickly layout your websites and be confident that they’ll be consistent across all major browsers.

Nach YAML mein zweit liebstes CSS Framework.