Fluid 24 Grid System
fluid24

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.

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. Curabitur sit amet tortor in magna vulputate mattis. Sed semper ullamcorper est a vehicula. Nam auctor sollicitudin diam, vitae laoreet sem viverra ut. Nulla fermentum fringilla nisl, a ullamcorper turpis rhoncus a. Maecenas ut ante eu nunc iaculis vulputate. Vestibulum hendrerit convallis adipiscing.

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.

firefox

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

Valid HTML 4.01 Strict

fluid24 on your web page
Fluid 24 Grid System
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.
donate

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 | @