https://github.com/colingourlay/classycss
A simple fluid-width css framework
https://github.com/colingourlay/classycss
Last synced: 2 months ago
JSON representation
A simple fluid-width css framework
- Host: GitHub
- URL: https://github.com/colingourlay/classycss
- Owner: colingourlay
- Created: 2009-12-17T02:17:54.000Z (over 15 years ago)
- Default Branch: master
- Last Pushed: 2009-12-22T05:47:42.000Z (over 15 years ago)
- Last Synced: 2025-01-28T13:27:13.957Z (4 months ago)
- Homepage:
- Size: 78.1 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
class="y" Css Framework
=========================
Copyright (c) 2009, Colin Gourlay
Email: [email protected]
class="y" is a simple fluid-width css framework for quickly injecting column-based grids into your html pages. Here's a quick example of class="y":
Left Column
Right Column
In the code above, we have a div element with a class "y". This indicates that this element is a 'row' (it lies on the typical Y-axis of the document). The classes of the divs inside this element are prefixed with an "x" to indicate that they are 'columns' (they lie on the typical X-axis of the document). The numbers following this prefix can be translated to show how wide the column is, as follows:
* x12 = 1/2 of the width of the row
* x13 = 1/3 of the width of the row
* x14 = 1/4 of the width of the row
Columns are spaced by a margin equal to 1% of the row width. This margin is applied to the left of all columns, but it is not needed for the first column in the row. The first column in a row must also be assigned an "a" class so that this margin is not applied (there is a css pseudo-class that can be applied instead, but will not work across all browsers.
class="y" also provides a couple of extra column widths we can also use:
* x23 = 2/3 of the width of the row
* x34 = 3/4 of the width of the row
We don't have an "x24" class, as we can acheive the same effect by using "x12". These clases can be used in any order to acheive the effect we want. For example, if we want the first and last columns to take up a quarter of the row, and let the middle column span half of the row, we can mark it up as follows:
Left Column
Middle Column
Right Column
I'd experimented with more granular column layouts using 1/6th and 1/8th widths, but I decided to leave them out of this release of the initial release of class="y". They allowed even more complicated layouts, but they weren't consistently aligned across all browsers, and their implementation almost doubled the size of classy.css. If you desperately need them, you can request them by email, or take a few minutes to re-implement them yourself.
I hope you find class="y" useful.