Flurid is a fluid width grid system optimized for - flexibility (fluidity), and, as far as I know, is one of the only fluid - grid systems to work in Internet Explorer versions 6 and 7 (and 5, with - the exception of the push/pull classes) without hiding pixels in margins. - Like any grid system, - the basic purpose is to break the page into a series of rows and - columns, thus giving the designer an easy, rational way to - organize and present content to the user.
+Fluidity, as far as I am concerned, is one of the - cornerstones in making web design more accessible, user friendly, - customizable and, perhaps most importantly, adaptable - (see: A Dao of Web Design). - Fluid designs allow the content of a page to adjust according to the dimensions of - their containing window, which makes it easy to scale up or down, depending upon - the needs of the user or the type of web device being used. If you're interested - in learning more about fluid grid systems, check out the article - "Fluid Grids" - on A List Apart.
- -So why aren't there more fluid grid systems out there that don't hide - pixels in margins? Well, that is due to how different browsers and web - devices handle sub-pixel rounding (see: Sub Pixel Rendering Problems in CSS). - Flurid deals with sub-pixel rounding issues in various ways, namely using - the overflow: hidden and width: auto properties to get - rid of the extra pixels in the last column in a row that would normally - cause a layout to break (in Internet Explorer). Of course, this does make - the width of the last column slightly less precise (in Internet - Explorer), but, as with any compromise, there are caveats.
- -Flurid has a companion jQuery plugin to help make developing with the - framework easier. Along with some additional features like equal - height columns, the jQuery plugin also automatically appends - the last class to the last column in a row and optionally - adds alternating "odd" and "even" classes to rows and columns.
- -The plugin requires a JavaScript enabled web browser and the - jQuery Library, Version 1.2.3 or higher.
- -Flurid and jQuery.flurid have been tested and verified to work on the - following browsers (but may very well be compatible with other browsers - or browser versions):
- -Unlike other grid systems, Flurid uses very intuitive naming conventions - for its styling properties. First, you start by designating your grid by - applying the class "grid" to a block level element (such as a div). Inside - of your grid, you may define your rows, using the class "row." Columns are - defined using fractions such as "1/16" or "2/5" -- it is often helpful to - assign the class "column" to the width that denotes where content will - actually reside (in the case of nested columns), but it is not required. - All of the standard columns have been layed out in the grid below:
-Columns may be mixed and matched as needed, so long as the sum of the - columns reduces to 1/1 (or, in other words, adds up to 100%). I find it's - often easier to stick to one denominator, but if you are keen to reducing - your fractions, you can rest assured that it will not break the system.
-Columns may also be nested inside of themselves as needed, however, - keep in mind that columns will inherit the full width of their parent, - meaning that if you were to nest a 1/2 width column inside another 1/2 - width column, the result would be a container that takes up 1/4 of the - grid's full width.
-These classes are used to pad content from the left or right edge of - the grid and should be used instead of empty column markup in your HTML. - Use append to add padding after a column (pad right) and - prepend to add padding before a column (pad left).
-15/16
+15/16
15/16
+15/16
15/16
+15/16
+1/4
+These classes are used to change the position of a column, relative to - where it would normally appear in the flow of the document. This is handy - for changing the location of a column visually without affecting where the - column lies in relation to other markup in the HTML. Use push to position - your columns to the right of their normal location and - pull to to position your columns to the left of their - normal location.
-1/2 (push 1/2)
1/4 (pull 1/2)
The most up-to-date version of Flurid can be found on github: - http://github.com/kflorence/flurid.
-