What is fluid24 ?
It is a 24 column CSS fluid grid system, designed for rapid prototyping as well as final product layouts, built upon the work of Nathan Smith and his 960 Grid System 960.gs; Intended to use with any page width and fluid layouts.
Download: fluid24.css text.css
Fluid/Liquid layouts are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.
Vertical Rhythm
fluid24 uses a "text.css" which helps the site get the rhythm. example
h1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget erat quis lorem aliquam tristique.
h1 with class=sidenote
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non. Nullam varius, justo non feugiat faucibus
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non. Nullam varius, justo non feugiat faucibus, nisl dui faucibus sapien, ut accumsan urna ligula at nisi.
h2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget erat quis lorem aliquam tristique.
h2 with class=small
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non.
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non. Nullam varius, justo non feugiat faucibus, nisl dui faucibus sapien, ut accumsan urna ligula at nisi.
h3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget erat quis lorem aliquam tristique.
h3 with class=large
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula.
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non.
h4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget erat quis lorem aliquam tristique. Fusce urna dolor, lacinia nec venenatis sed, molestie at risus. Sed lectus quam, accumsan at consectetur at, ornare ac elit. Etiam ornare libero sed libero viverra mattis. In porttitor metus ut leo malesuada a faucibus risus tempus.
Etiam at nisi ut nisl suscipit rhoncus id vel erat. Nunc dolor velit, consectetur eu adipiscing ac, bibendum a ligula. Etiam fringilla vestibulum ipsum, quis sollicitudin felis mollis non. Nullam varius, justo non feugiat faucibus, nisl dui faucibus sapien, ut accumsan urna ligula at nisi.
How it works?
fluid24 by default works like 960.gs If a grid unit contains grid children then the sub_X must be used example: (see below)
<div class="container_24">
<div class="grid_12">
<div class="grid_sub_12 sub_alpha">
<p>A see below</p>
</div>
<div class="grid_sub_12 sub_omega">
<p>B</p>
</div>
</div>
<div class="grid_12">
<p>C</p>
</div>
</div>
A see below
I am the output of the example, I am grid_sub_12, with sub_alpha, my parent is grid_12
B
I am grid_sub 12 sub_omega, my parent is grid_12
C
I am parent grid_12 and have no children.
Issues
When using firefox the fluid24 grid, looks symmetrically nice, tuning more your css could help for keeping browsers compatibility.
Helpful Links:
960.gs
fluid 960
PXtoEM.com PX to EM conversion made simple.
fluidgrid
Setting Type on the Web to a Baseline Grid
Typograph - Scale & Rhythm
setting a vertical rhythm
Blueprint: a CSS Framework
Unitless line-heights
compute CSS that has a consistent vertical rhythm
Fluid Grids Adaptive CSS-Layouts: New Era In Fluid Layouts?
Automatic Magazine Layout
jQuery Masonry
Smart Columns
Fixed vs. Fluid vs. Elastic Layout
How to use it ?
Example: demo.html
<html>
<head>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/text.css" type="text/css">
<link rel="stylesheet" href="css/fluid24.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<title>demo fluid24</title>
</head>
<body>
<div class="c960">
<div class="container_24">
<div class="grid_24">
<p>header</p>
</div>
<div class="clear"></div>
<div class="grid_8">
<p>sidebar</p>
</div>
<div class="grid_16">
<p>content</p>
<div class="grid_sub_12 sub_alpha">
<p>sub col</p>
</div>
<div class="grid_sub_12 sub_omega">
<p>sub col</p>
</div>
</div>
<div class="clear"></div>
<div class="grid_24">
<p>footer</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Some examples below
Vertical Rhythm losses when the rows shrinks
grid_8
grid_sub_24
grid_sub_8 sub_alpha
grid_sub_8 sub_middle
grid_sub_8 sub_omega
grid_sub_6 sub_alpha
grid_sub_6 sub_middle
grid_sub_6 sub_middle
grid_sub_6 sub_omega
grid_sub_12 sub_alpha
grid_sub_12 sub_omega"
grid_sub_14 sub_alpha
grid_sub_10 sub_omega
grid_sub_24
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc enim, auctor ut iaculis id, commodo in tortor. Maecenas nisl nulla, pretium non laoreet vitae, mollis et dui. Donec accumsan sem diam. Morbi porta nisi sagittis arcu rhoncus fermentum. Nunc cursus tempus auctor. Morbi viverra est sapien, in pellentesque turpis. Ut placerat mi ut lacus rhoncus venenatis. Proin volutpat sapien eu erat ullamcorper sit amet tristique justo mollis. Mauris eu metus rhoncus odio hendrerit mollis eu eget elit.
grid_12
grid_sub_12 sub_alpha
grid_sub_12 sub_omega
grid_sub_8 sub_alpha
grid_sub_8 sub_middle
grid_sub_8 sub_omega
grid_sub_6 sub_alpha
grid_sub_6 sub_middle
grid_sub_6 sub_middle
grid_sub_6 sub_omega
grid_sub_12 sub_alpha
grid_sub_12 sub_omega
grid_sub_18 sub_alpha
grid_sub_6 sub_omega
fluid24 on your web page
Just copy the HTML code below onto your page.
<a href="http://fluid24.org"><img src="http://fluid24.org/fluid24.png" alt="fluid24"></a>
grid_4
Quite a large amount of time has been spent creating, crafting and maintaining this software, please consider donating.
Donating helps ensure continued support, development and availability.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc enim, auctor ut iaculis id, commodo in tortor. Maecenas nisl nulla, pretium non laoreet vitae, mollis et dui. Donec accumsan sem diam. Morbi porta nisi sagittis arcu rhoncus fermentum. Nunc cursus tempus auctor. Morbi viverra est sapien, in pellentesque turpis. Ut placerat mi ut lacus rhoncus venenatis.
Below is the 'More Columns" example from 960.gs
For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case "i" or "l" might be easily missed. 960.gs
950
30
910
70
870
110
830
150
790
190
750
230
710
270
670
310
630
350
590
390
550
430
510
470
470
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
sub12
sub12
sub2
sub22
sub2
sub22
sub12
sub12
© qép.com | @