Issue #1416950: Added new classes added to grid stylesheets for .sg-wrapper and ...
[project/squaregrid.git] / readme.txt
1 Square Grid Theme http://drupal.org/project/squaregrid
2 by Laura Scott http://drupal.org/user/18973
3
4 Development and maintenance sponsored by PINGV http://pingv.com.
5
6
7 ======== About This Project ====================================================
8
9 Square Grid theme is intended as a very lean, lightweight grid theme that provides a framework for you page layout ... and that's it. It incorporates responsive design principles that are configurable via your theme's settings, to present usable layouts for various screen sizes. That's it. We want your theme to load quickly, with as little grid framework css as possible.
10
11 The Square Grid theme is inspired by the Square Grid CSS Framework by Avraham Cornfeld.
12
13 -------- Version 1.x
14
15 This is the plain squargrid. It is intended as a Drupalification of the Square Grid CSS framework by Avraham Cornfeld.
16
17 -------- Version 2.x
18
19 This branch employs some more sophisticated approaches to make possible more semantic page loading, plus the responsive design options.
20
21 -------- Version 3.x
22
23 This is the HTML5 branch. Because HTML5 support is absent from Drupal 7 core and is in active development in Drupal 7 contrib, and because HTML5 itself is a living, evolving specification, this branch should be considered closer to the bleeding edge.
24
25
26 ========  Description  =========================================================
27
28 The concept of this theme is simple: To provide a base theme defined by the Square Grid framework, for designers and front-end developers to use as a parent theme for a Square Grid-based design.
29
30 Grids are fabulous tools for rapid design and development of interactive CSS-driven interfaces. There are many grids out there. The Square Grid is relatively new.
31
32 The Square Grid has some nice advantages over other grids:
33
34 * Its 35-column breakdown of space allows great flexibility in grid selection, including popular favorites 960 and Golden Ratio.
35
36 * It has wider gutters between "columns," providing more whitespace.
37
38 * Its algorithm is easily adapted to other screen sizes.
39
40
41 ========  Installation  ========================================================
42
43 1. Install the Square Grid theme in your Drupal site under /sites/all/themes (or, if on a multisite configuration, /sites/[example.com]/themes, as appropriate).
44
45 2. Create a new theme. In your new theme's info file, declare 'squaregrid' as the base theme.
46
47 3. Copy in and modify templates and create stylesheets as desired.
48
49
50 ========  General Tips  ========================================================
51
52 * Be sure to visit your theme configration settings to check that the Square Grid configurations available to your theme suit your needs.
53
54 * Use the Sqaure Grid templates to provide the basis for your design. This will provide the basis for quick conversion from flat mock-up to html components. Square Grid templates for design can be downloaded at http://thesquaregrid.com. There are 35 squares across to define the grid. Each square is 28px wide. In this approach, a grid square can serve to define the width of a block element. Margins between block elements add up to one square as well. This makes every block element line up with the grid, while allowing for comfortable whitespace between each block element.
55
56 * Each grid definition has left and right margins of half of a grid width (e.g., in the 980px-wide layout, 14px on each side, adding up to a 28px grid square's width). You will want to compensate in your theme if you are adding borders or your design has visual components bleeding into these margins. **NOTE: This approach may be deprecated in branch 7.x-3.x.
57
58 * The theme utilizes three kinds of classes: "sg-x", "push-x" and "pull-x".  This approach, borrowed from 960.gs, is used to enable visual display of sidebar content to the left of main content without having to rearrange semantic order of content in your page.tpl.php template.
59
60   - "sg-x" defines the width of a region. The integer value of x determines how may grid squares wide the region will display.
61   
62   - "push-x" defines a "left" position value in numbers of grid squares. Define a region's push value by the number of grid squares you want to *add* to the left of the region.
63   
64   - "pull-x" defines a "left" position value in numbers of grid squares, but in the negative. Define a region's pull value by the number of grid squares you want to *subtract* from the left side of the region's position.
65   
66   *** Example:
67       main content => .sg-17 .push-11
68       first sidebar => .sg-10 .pull-18
69       second sidebar => sg-8
70       
71       Note that the content and sidebar regions are pulled/pushed one square grid's value greater than the width of the region it's swappig with. This is to accommodate the 1 square grid of white space between the regions. If you try this with the visible square grid, you can count the square grids and see that this makes sense.
72       
73 * You can define your own region widths and positions by copying "example.template.php.txt" to your own theme, renaming it "template.php" and replacing in the function names "YOURTHEMENAME" with your theme name, then editing the sg-x, push-x and pull-x values.
74
75 * [ADDED 2012 March 17:] New class definitions were added to the basic grid stylesheets for .sg-wrapper and .sg-container. These can be useful if you have a design that requires multiple wrappers and containers on the same page (for example, if you have stacked full-screen-width backgrounds that underlay different grid areas). Since the #wrapper and #container values are IDs, these identically-defined classes can give you more flexibility in design implementation without having to define these yourself.
76