| 1 |
// $Id: README.txt,v 1.3 2009/04/10 22:19:42 toddnienkerk Exp $
|
| 2 |
|
| 3 |
This "framework" theme is based on the 960 Grid System created by Nathan Smith.
|
| 4 |
It is being proposed for the core base theme in Drupal 7. The CSS framework is
|
| 5 |
licenced under GPL and MIT. This Drupal theme is licensed under GPL.
|
| 6 |
|
| 7 |
See these pages:
|
| 8 |
Issue queue: http://drupal.org/node/293540
|
| 9 |
g.d.o discussion: http://groups.drupal.org/node/16200
|
| 10 |
960 post on g.d.o: http://groups.drupal.org/node/16457
|
| 11 |
|
| 12 |
Homepage and download for 960:
|
| 13 |
http://960.gs/
|
| 14 |
|
| 15 |
Background information on 960:
|
| 16 |
http://sonspring.com/journal/960-grid-system
|
| 17 |
|
| 18 |
Write-up from DivitoDesign:
|
| 19 |
http://www.divitodesign.com/2008/12/960-css-framework-learn-basics/
|
| 20 |
|
| 21 |
Write-up from Nettus:
|
| 22 |
http://nettuts.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
|
| 23 |
http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
|
| 24 |
|
| 25 |
General idea behind a CSS framework:
|
| 26 |
http://www.alistapart.com/articles/frameworksfordesigners
|
| 27 |
|
| 28 |
Extensive overview on working within grids:
|
| 29 |
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
|
| 30 |
|
| 31 |
==============================================================================
|
| 32 |
Modifications:
|
| 33 |
|
| 34 |
- The 960 Grid System package has been modified so it conforms to Drupal's
|
| 35 |
coding standards. Tabs were removed for double spaces and underscores
|
| 36 |
changed to hyphens.
|
| 37 |
|
| 38 |
- Additional .push-x and .pull-x classes have been added.
|
| 39 |
|
| 40 |
- Right-to-left languages are supported. It's not part of the 960 download.
|
| 41 |
It has been extended to support Drupal's rtl language system.
|
| 42 |
|
| 43 |
- Removed ".clear-fix" and ".clear" classes from 960.css. Drupal works with
|
| 44 |
".clearfix" which is basically the same technique used in .clear-fix. The
|
| 45 |
.clear class on the other hand is too commonly used as a class name and the
|
| 46 |
properties can cause confusion since anything with that property will
|
| 47 |
disappear. A standard <br /> tag can be used in its place.
|
| 48 |
|
| 49 |
- Removed the "outline:0;" rule from reset.css. Adding it back manually
|
| 50 |
prevents OS specific outline styles from being used. Specifically Webkit and
|
| 51 |
possibly others. Also removed the "a:focus {outline: 1px dotted invert;}"
|
| 52 |
from text.css where it's reapplied.
|
| 53 |
|
| 54 |
- Removed the large left margin for list items inside text.css. It interferes
|
| 55 |
in many places.
|
| 56 |
|
| 57 |
==============================================================================
|
| 58 |
Notes and rules to play nice with the grids:
|
| 59 |
|
| 60 |
- The class .container-[N] ([N] being a numeric value) is a subdivision of the
|
| 61 |
overall width (960 pixels). It can either be .container-12 or .container-16.
|
| 62 |
Depending on which is used, each grid unit (.grid-[N] class) will either be
|
| 63 |
in multiples of 80 pixels for 12 subdivisions or in multiple of 60 pixels for
|
| 64 |
16 subdivisions. All grid blocks include a 10 pixel margin on the left and
|
| 65 |
right side.
|
| 66 |
|
| 67 |
- Add a .show-grid class to the body tag to see the grid. It will add a
|
| 68 |
background graphic to guide you. This theme includes a printable sketch
|
| 69 |
sheet and templates for Photoshop and various other formats to guide you
|
| 70 |
from start to finish. See the "extras" folder within this theme.
|
| 71 |
|
| 72 |
- Do not add left or right margins or padding to anything that's assigned a
|
| 73 |
grid class or it may throw off the alignment.
|
| 74 |
|
| 75 |
- Use the .push-[N] and .pull-[N] classes so the order the layout is presented
|
| 76 |
does not depend on source order. For example, if the source order was this:
|
| 77 |
[content][side-1][side-2], and the desired presentation order was this:
|
| 78 |
[side-1][content][side-2]. Adding a .pull-[N] class to #side-1 with the same
|
| 79 |
numeric grid value as #content and adding a .push-[N] class to #content with
|
| 80 |
the same numeric grid value of #side-1 will swap their display. These classes
|
| 81 |
can also be used for the general shifting of content when needed.
|
| 82 |
|
| 83 |
<div class="container-16">
|
| 84 |
<div id="content" class="grid-9 push-4">
|
| 85 |
... \ /
|
| 86 |
</div> \/ Match numeric values to swap.
|
| 87 |
/\
|
| 88 |
<div id="side-1" class="grid-4 pull-9">
|
| 89 |
...
|
| 90 |
</div>
|
| 91 |
|
| 92 |
<div id="side-2" class="grid-3">
|
| 93 |
...
|
| 94 |
</div>
|
| 95 |
</div>
|
| 96 |
|
| 97 |
Any element assigned a .push-[N] or .pull-[N] class should also have a
|
| 98 |
.grid-[N] class. As an alternative, a "position:relative;" rule can be
|
| 99 |
applied to the element.
|
| 100 |
|
| 101 |
- Use the .prefix-[N] and .suffix-[N] classes if you need to fill empty space.
|
| 102 |
Do not confuse this with the .push/pull-[N] classes which can overlap
|
| 103 |
adjacent areas.
|
| 104 |
|
| 105 |
- Right to left languages will have the page reflow automatically. See
|
| 106 |
960-rtl.css inside the "styles" folder. As long as the theme uses the
|
| 107 |
positioning classes from this framework, it will be automatic.
|
| 108 |
|
| 109 |
- When embedding a grid within a grid, use .alpha and .omega classes. The
|
| 110 |
first block must be assigned .alpha and the last, .omega. This will chop off
|
| 111 |
the 10px margin so it fits neatly into the grid. This depends more on the
|
| 112 |
visual order than the source order when using the push/pull classes.
|
| 113 |
|
| 114 |
As long as you stay within the framework, any browser positioning quirks
|
| 115 |
_especially from IE_ should be minimal.
|
| 116 |
|
| 117 |
==============================================================================
|
| 118 |
To-dos:
|
| 119 |
|
| 120 |
- * Update: see next section *
|
| 121 |
Helper function to calculate grid classes based on context. The standard
|
| 122 |
$body_classes within page.tpl.php which contains the state of the sidebars
|
| 123 |
will be less useful in this grid system. It's often used to change the width
|
| 124 |
of the content region depending on the presence of sidebars. This new helper
|
| 125 |
function will need to replace that functionality. It also gives us an
|
| 126 |
opportunity to have a more flexible system. Instead of focusing on sidebars,
|
| 127 |
it can be more fine grained in its awareness of adjacent grids and push out
|
| 128 |
classes appropriately. This helper function must be as simple as possible to
|
| 129 |
*work with*.
|
| 130 |
|
| 131 |
- Separate issue but this can help add grid classes easier.
|
| 132 |
Add $classes to hook templates: http://drupal.org/node/306358
|
| 133 |
|
| 134 |
==============================================================================
|
| 135 |
Adding classes based on context:
|
| 136 |
|
| 137 |
The function "ns()" can be used to add classes contextually. The first argument
|
| 138 |
should be the default class with the highest possible unit. The rest of the
|
| 139 |
arguments are paired by a variable and its unit used in an adjacent block of
|
| 140 |
markup.
|
| 141 |
|
| 142 |
|
| 143 |
<div class="container-16">
|
| 144 |
<div id="main" class="<?php print ns('grid-16', $neighbor_a, 3, $neighbor_b, 4); ?>">
|
| 145 |
<?php print $main; ?> [default] | | | |
|
| 146 |
</div> |- pair -| |- pair -|
|
| 147 |
| | | |
|
| 148 |
<?php if ($neighbor_a): ?> <!-----------------------/ | | |
|
| 149 |
<div id="neighbor-a" class="grid-3"> <!----------------------/ | |
|
| 150 |
<?php print $neighbor_a; ?> | |
|
| 151 |
</div> | |
|
| 152 |
<?php endif; ?> | |
|
| 153 |
| |
|
| 154 |
<?php if ($neighbor_b)?> <!-----------------------------------------/ |
|
| 155 |
<div id="neighbor-b" class="grid-4"> <!--------------------------------------/
|
| 156 |
<?php print $neighbor_b; ?>
|
| 157 |
</div>
|
| 158 |
<?php endif; ?>
|
| 159 |
</div>
|
| 160 |
|
| 161 |
|------------ .container-16 -----------------------|
|
| 162 |
|---------------------------|---------|------------|
|
| 163 |
| | | |
|
| 164 |
| #main.grid-9 <.grid-12 <.grid-16 |
|
| 165 |
| -7 | -4 |[default] |
|
| 166 |
|---------------------------|---------|------------|
|
| 167 |
|
| 168 |
|
| 169 |
Note that the *default class* (first parameter) is the largest possible of
|
| 170 |
"grid-16" since it's the immediate child of "container-16". The variables
|
| 171 |
$neighbor_a and $neighbor_b can be any variable that exists inside a template.
|
| 172 |
The number arguments immediately after the variable argument is it's default
|
| 173 |
grid value placed in their own markup.
|
| 174 |
|
| 175 |
The function only checks if the variable contains anything and subtracts the
|
| 176 |
next numeric parameter from the default class. With the above example, if
|
| 177 |
$neighbor_a contains anything it will subtract "3" from "grid-16". Same with
|
| 178 |
$neighbor_b which will subtract "4". If both variables exists, "grid-9" will
|
| 179 |
output to make space for the adjacent areas.
|
| 180 |
|
| 181 |
There are no limits to the number of parameters but it must always be done in
|
| 182 |
pairs. The first part of the pair being the variable and second, the number to
|
| 183 |
subtract from the default class. This pairing excludes the first parameter.
|
| 184 |
|
| 185 |
If needed, subtraction can take place when the variable *is empty* by using
|
| 186 |
an exclamation mark before it. This is useful for pull/push and prefix/suffix
|
| 187 |
classes in some contexts.
|
| 188 |
|
| 189 |
|
| 190 |
<div class="container-16">
|
| 191 |
<div id="main" class="grid-10 <?php print ns('suffix-6', !$neighbor_c, 6); ?>">
|
| 192 |
... [default] | |
|
| 193 |
</div> |- pair -|
|
| 194 |
| |
|
| 195 |
<?php if ($neighbor_c): ?> <!---------------------------------/ |
|
| 196 |
<div id="neighbor-c" class="grid-6"> <!--------------------------------/
|
| 197 |
<?php print $neighbor_c; ?>
|
| 198 |
</div>
|
| 199 |
<?php endif; ?>
|
| 200 |
</div>
|
| 201 |
|
| 202 |
|--------------- .container-16 --------------------|
|
| 203 |
|------------------------------|-------------------|
|
| 204 |
| | |
|
| 205 |
| #main.grid-10 >.suffix-6 |
|
| 206 |
| |[padding fill] |
|
| 207 |
|------------------------------|-------------------|
|
| 208 |
|
| 209 |
|
| 210 |
The main points to remember are these:
|
| 211 |
- The first parameter (default class) starts at the largest value. The latter
|
| 212 |
parameters always work to subtract from the first.
|
| 213 |
- The first parameter can be any type of class. As long as it's delimited by
|
| 214 |
a hyphen "-" and ends in a numeric. (grid-[N], pull-[N], suffix-[N], etc.)
|
| 215 |
- Starting from the second parameter, variables and numeric parameters must
|
| 216 |
be set in pairs.
|
| 217 |
- If the variable contains a value, subtraction will occur by default. Use an
|
| 218 |
exclamation mark before the variable to subtract when it *does not* contain
|
| 219 |
a value.
|
| 220 |
|
| 221 |
==============================================================================
|
| 222 |
Problem with .clearfix and .clear-block in IE:
|
| 223 |
|
| 224 |
The .clearfix (aka .clear-block) method of clearing divs does not always play
|
| 225 |
well with 960.gs in IE6 (haven't tried IE7). The problem is twofold:
|
| 226 |
|
| 227 |
1. If a div is assigned a container-X class, you must add the clearfix class
|
| 228 |
after it, like so:
|
| 229 |
<div class="container-12 clearfix">
|
| 230 |
|
| 231 |
2. If a div is assigned a grid-X class, adding clearfix will break your
|
| 232 |
layout. You must used an "inner" div instead, like so:
|
| 233 |
<div class="grid-8"><div class="clearfix">My content</div></div>
|
| 234 |
|
| 235 |
This problem has been seen in IE6. IE7 has not yet been tested. Please see
|
| 236 |
this issue for more information: http://drupal.org/node/422240
|
| 237 |
|
| 238 |
==============================================================================
|
| 239 |
|
| 240 |
If you have any questions or suggestions. Please post in the group discussion.
|
| 241 |
http://groups.drupal.org/node/16457 or contact me @ joon at dvessel dot com.
|
| 242 |
|
Parent Directory
| 
Revision Log
| 
Revision Graph