README.txt

   1
   2 This "framework" theme is based on the 960 Grid System created by Nathan Smith.
   3 The CSS framework is licenced under GPL and MIT. This Drupal theme is licensed
   4 under GPL.
   5
   6 Homepage and download for 960:
   7   http://960.gs/
   8
   9 Background information on 960:
  10   http://sonspring.com/journal/960-grid-system
  11
  12 Write-up from DivitoDesign:
  13   http://www.divitodesign.com/2008/12/960-css-framework-learn-basics/
  14
  15 Write-up from Nettus:
  16   http://nettuts.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
  17   http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
  18
  19 General idea behind a CSS framework:
  20   http://www.alistapart.com/articles/frameworksfordesigners
  21
  22 Extensive overview on working within grids:
  23   http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
  24
  25 ==============================================================================
  26 Modifications:
  27
  28 - The 960 Grid System package has been modified so it conforms to Drupal's
  29   coding standards. Tabs were removed for double spaces and underscores
  30   changed to hyphens.
  31
  32 - Additional .push-x and .pull-x classes have been added.
  33   update: The push and pull classes have been incorporated into 960.gs source.
  34
  35 - Right-to-left languages are supported. It does not use the RTL styles
  36   included with 960.gs source due to the way Drupal core handles RTL styles.
  37
  38 - The ".clear" class from 960.css repurposed to clear blocks with content. The
  39   br.clear method can be used in its place while .clear can be applied to
  40   elements that contain content.
  41
  42 - Removed the "outline:0;" rule from reset.css. Adding it back manually
  43   prevents OS specific outline styles from being used. Specifically Webkit and
  44   possibly others. Also removed the "a:focus {outline: 1px dotted invert;}"
  45   from text.css where it's reapplied.
  46
  47 - Removed the large left margin for list items inside text.css. It interferes
  48   in many places.
  49
  50 - From this point forward, any modifications to the source 960.gs files will
  51   will be noted at the top of each file.
  52
  53 ==============================================================================
  54 Notes and rules to play nice with the grids:
  55
  56 - The class .container-[N] ([N] being a numeric value) is a subdivision of the
  57   overall width (960 pixels). It can be .container-12, .container-16 or
  58   .container-24. Depending on which is used, each grid unit (.grid-[N] class)
  59   will be a certain width:
  60
  61   .container-12
  62     .grid-1 =  80px [ 10px margin |  60px width  | 10px margin ]
  63     .grid-2 = 160px [ 10px margin | 140px width  | 10px margin ]
  64     .grid-3 = 240px [ 10px margin | 220px width  | 10px margin ]
  65
  66   .container-16
  67     .grid-1 =  60px [ 10px margin |  40px width  | 10px margin ]
  68     .grid-2 = 120px [ 10px margin | 100px width  | 10px margin ]
  69     .grid-3 = 180px [ 10px margin | 160px width  | 10px margin ]
  70
  71   .container-24
  72     .grid-1 =  40px [  5px margin |  30px width  |  5px margin ]
  73     .grid-2 =  80px [  5px margin |  70px width  |  5px margin ]
  74     .grid-3 = 120px [  5px margin | 110px width  |  5px margin ]
  75
  76   Note the progression of the inner width and the constant margins of the 12
  77   and 16 versions vs. what's used for the 24 column version.
  78
  79 - 12 and 16 columns can be used in tandem on a single page given that they
  80   stay within their own containers. The 24 column version encompasses both the
  81   12, 16 and beyond in terms of its ability to subdivide the layout so mixing
  82   .container-24 with the other two is not recommended. The margins also differ
  83   which will throw off your layout be 5 pixels.
  84
  85 - The default 960 style includes both 12 and 16 column containers. You can
  86   tell your theme to pick an alternate version with a simple .info entry in
  87   your theme.
  88
  89   settings[ns_columns_select] = 12
  90   settings[ns_columns_select] = 16
  91   settings[ns_columns_select] = 24
  92   settings[ns_columns_select] = 12+16 ; the default set by ninesixty base
  93
  94 - Use the .push-[N] and .pull-[N] classes so the order the layout is presented
  95   does not depend on source order. For example, if the source order was this:
  96   [content][side-1][side-2], and the desired presentation order was this:
  97   [side-1][content][side-2]. Adding a .pull-[N] class to #side-1 with the same
  98   numeric grid value as #content and adding a .push-[N] class to #content with
  99   the same numeric grid value of #side-1 will swap their positions. These
 100   classes can also be used for the general shifting of content when needed.
 101
 102   <div class="container-16">
 103     <div id="content" class="grid-9 push-4">
 104       ...                         \  /
 105     </div>                         \/ Match numeric values to swap.
 106                                    /\
 107     <div id="side-1"  class="grid-4 pull-9">
 108       ...
 109     </div>
 110
 111     <div id="side-2" class="grid-3">
 112       ...
 113     </div>
 114   </div>
 115
 116 - Use the .prefix-[N] and .suffix-[N] classes to pad an empty space. Do not
 117   confuse this with the push/pull classes which are for positioning.
 118
 119 - When embedding a grid within a grid, use .alpha and .omega classes. The
 120   first block must be assigned .alpha and the last, .omega. This will chop off
 121   the margin so it fits neatly into the grid.
 122
 123 - When using push/pull in combination with the alpha/omega classes, Which
 124   element you apply the alpha/omega classes depends more on the
 125   presentation order than the source order.
 126
 127 As long as you stay within the framework, any positioning quirks especially
 128 from Internet Explorer 6 and 7 should be minimal.
 129
 130 ==============================================================================
 131 Adding classes based on context:
 132
 133 The function "ns()" can be used to add classes contextually. The first argument
 134 should be the default class with the highest possible unit. The rest of the
 135 arguments are paired by a variable and its unit used in an adjacent block of
 136 markup.
 137
 138
 139 <div class="container-16">
 140   <div id="main" class="<?php print ns('grid-16', $neighbor_a, 3, $neighbor_b, 4); ?>">
 141     <?php print $main; ?>              [default]      |        |      |        |
 142   </div>                                              |- pair -|      |- pair -|
 143                                                       |        |      |        |
 144   <?php if ($neighbor_a): ?> <!-----------------------/        |      |        |
 145   <div id="neighbor-a" class="grid-3"> <!----------------------/      |        |
 146     <?php print $neighbor_a; ?>                                       |        |
 147   </div>                                                              |        |
 148   <?php endif; ?>                                                     |        |
 149                                                                       |        |
 150   <?php if ($neighbor_b)?> <!-----------------------------------------/        |
 151   <div id="neighbor-b" class="grid-4"> <!--------------------------------------/
 152     <?php print $neighbor_b; ?>
 153   </div>
 154   <?php endif; ?>
 155 </div>
 156
 157   |------------ .container-16 -----------------------|
 158   |---------------------------|---------|------------|
 159   |                           |         |            |
 160   |              #main.grid-9 <.grid-12 <.grid-16    |
 161   |                        -7 |      -4 |[default]   |
 162   |---------------------------|---------|------------|
 163
 164
 165 Note that the *default class* (first parameter) is the largest possible of
 166 "grid-16" since it's the immediate child of "container-16". The variables
 167 $neighbor_a and $neighbor_b can be any variable that exists inside a template.
 168 The number arguments immediately after the variable argument is it's default
 169 grid value placed in their own markup.
 170
 171 The function only checks if the variable contains anything and subtracts the
 172 next numeric parameter from the default class. With the above example, if
 173 $neighbor_a contains anything it will subtract "3" from "grid-16". Same with
 174 $neighbor_b which will subtract "4". If both variables exists, "grid-9" will
 175 output to make space for the adjacent areas.
 176
 177 There are no limits to the number of parameters but it must always be done in
 178 pairs. The first part of the pair being the variable and second, the number to
 179 subtract from the default class. This pairing excludes the first parameter.
 180
 181 If needed, subtraction can take place when the variable *is empty* by using
 182 an exclamation mark before it. This is useful for pull/push and prefix/suffix
 183 classes in some contexts.
 184
 185
 186 <div class="container-16">
 187   <div id="main" class="grid-10 <?php print ns('suffix-6', !$neighbor_c, 6); ?>">
 188     ...                                        [default]        |        |
 189   </div>                                                        |- pair -|
 190                                                                 |        |
 191   <?php if ($neighbor_c): ?> <!---------------------------------/        |
 192   <div id="neighbor-c" class="grid-6"> <!--------------------------------/
 193     <?php print $neighbor_c; ?>
 194   </div>
 195   <?php endif; ?>
 196 </div>
 197
 198   |--------------- .container-16 --------------------|
 199   |------------------------------|-------------------|
 200   |                              |                   |
 201   |                #main.grid-10 >.suffix-6          |
 202   |                              |[padding fill]     |
 203   |------------------------------|-------------------|
 204
 205
 206 The main points to remember are these:
 207   - The first parameter (default class) starts at the largest value. The latter
 208     parameters always work to subtract from the first.
 209   - The first parameter can be any type of class. As long as it's delimited by
 210     a hyphen "-" and ends in a numeric. (grid-[N], pull-[N], suffix-[N], etc.)
 211   - Starting from the second parameter, variables and numeric parameters must
 212     be set in pairs.
 213   - If the variable contains a value, subtraction will occur by default. Use an
 214     exclamation mark before the variable to subtract when it *does not* contain
 215     a value.
 216
 217 ==============================================================================
 218 Other notes:
 219
 220 - If you need to include a style above all others add this to your themes
 221   .info file.
 222
 223   ; first include it normally with the stylesheets key.
 224   stylesheets[all][] = STYLENAME.css
 225
 226   ; Now direct it to "float" or include it before other styles.
 227   settings[css_float][] = STYLENAME.css
 228
 229   The base NineSixty theme does this for reset.css and text.css. Setting your
 230   own floats will ignore what was set from NineSixty so be sure to include them
 231   too.
 232
 233 - Problem with .clearfix and .clear-block in IE:
 234
 235   The .clearfix (aka .clear-block) method of clearing divs does not always play
 236   well with 960.gs in IE6 (haven't tried IE7). The problem is twofold:
 237
 238     1. If a div is assigned a container-X class, you must add the clearfix class
 239        after it, like so:
 240
 241        <div class="container-12 clearfix">
 242
 243     2. If a div is assigned a grid-X class, adding clearfix will break your
 244        layout. You must used an "inner" div instead, like so:
 245
 246        <div class="grid-8"><div class="clearfix">My content</div></div>
 247
 248   This problem has been seen in IE6. IE7 has not yet been tested. Please see
 249   this issue for more information: http://drupal.org/node/422240
 250
 251 ==============================================================================
 252
 253 If you have any questions, suggestions, bug report or fixes, please post it in
 254 the issue queue. http://drupal.org/project/issues/ninesixty
 255