README.txt

   1 // $Id$
   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   ".clear-block" which uses the same technique used in .clear-fix. The .clear
  45   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