Skip to content

Commit

Permalink
Or not
Browse files Browse the repository at this point in the history
  • Loading branch information
@bwsewell
bwsewell committed Mar 27, 2012
1 parent ce96513 commit de5e98a
Showing 1 changed file with 44 additions and 69 deletions.
113 changes: 44 additions & 69 deletions readme.md
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -8,70 +8,48 @@ This particular framework utilizes a 12 column grid for the desktop version and
When shrinking from a larger grid to a smaller grid, any column greater than the max grid level for that layout be shrunk to the size of the max grid size... When shrinking from a larger grid to a smaller grid, any column greater than the max grid level for that layout be shrunk to the size of the max grid size...


Sample code: Sample code:
``` <div class="wrapper">
<div class="wrapper"> <div class="col col1">1</div>
<div class="col col1">1</div> <div class="col col1">1</div>
<div class="col col1">1</div> <div class="col col1">1</div>
<div class="col col1">1</div> <div class="col col1">1</div>
<div class="col col1">1</div> <div class="col col4">4</div>
<div class="col col4">4</div> <div class="col col2">2</div>
<div class="col col2">2</div> <div class="col col2">2</div>
<div class="col col2">2</div> </div>
</div>
```


This is how the sample code snippet above would translate as a responsive template: This is how the sample code snippet above would translate as a responsive template:


DESKTOP VERSION DESKTOP VERSION
|----|----|----|----|----------------|--------|--------| |----|----|----|----|----------------|--------|--------|
| | | | | | | |
| 1 | 1 | 1 | 1 | 4 | 2 | 2 | | 1 | 1 | 1 | 1 | 4 | 2 | 2 |
| | | | | | | |
|----|----|----|----|----------------|--------|--------| |----|----|----|----|----------------|--------|--------|


TABLET VERSION TABLET VERSION
|---|---|---|---|------------|------|------| |---|---|---|---|------------|------|------|
| | | | | | | |
| 1 | 1 | 1 | 1 | 4 | 2 | 2 | | 1 | 1 | 1 | 1 | 4 | 2 | 2 |
| | | | | | | |
|---|---|---|---|------------|------|------| |---|---|---|---|------------|------|------|


LANDSCAPE MOBILE LANDSCAPE MOBILE
|---|---|---|---| |---|---|---|---|
| | | | |
| 1 | 1 | 1 | 1 | | 1 | 1 | 1 | 1 |
| | | | |
|---|---|---|---| |---|---|---|---|
| |
| 4 | | 4 |
| |
|-------|-------| |-------|-------|
| | |
| 2 | 2 | | 2 | 2 |
| | |
|-------|-------| |-------|-------|


PORTRAIT MOBILE PORTRAIT MOBILE
|---|---| |---|---|
| | |
| 1 | 1 | | 1 | 1 |
| | |
|---|---| |---|---|
| | |
| 1 | 1 | | 1 | 1 |
| | |
|---|---| |---|---|
| |
| 4 | | 4 |
| |
|-------| |-------|
| |
| 2 | | 2 |
| |
|-------| |-------|
| |
| 2 | | 2 |
| |
|-------| |-------|




Expand All @@ -95,27 +73,25 @@ Every column should have two classes... `col` and `col#` where # is replaced wit
`col#` determines the width of the column. `col#` determines the width of the column.


Every column has a 10 pixel margin on the left and the right. These margins can cause layout probelms if you have nested columns like this: Every column has a 10 pixel margin on the left and the right. These margins can cause layout probelms if you have nested columns like this:
``` <div class="wrapper">
<div class="wrapper"> <div class="col col12">
<div class="col col12"> <div class="col col6"</div>
<div class="col col6"</div> <div class="col col3"</div>
<div class="col col3"</div> <div class="col col3"</div>
<div class="col col3"</div> </div>
</div> </div>
</div>
```
This presents a tiny issue... every nested column will add more padding to the container column. We can account for this by getting rid of the left or right padding of a column by adding the class `alpha` or `omega` respectively. These naming conventions were adopted from the widely popular [960 Grid System](http://www.960.gs). This presents a tiny issue... every nested column will add more padding to the container column. We can account for this by getting rid of the left or right padding of a column by adding the class `alpha` or `omega` respectively. These naming conventions were adopted from the widely popular [960 Grid System](http://www.960.gs).


So the correct way to do nesting would be as follows: So the correct way to do nesting would be as follows:
``` <div class="wrapper">
<div class="wrapper"> <div class="col col12">
<div class="col col12"> <div class="col col6 alpha"</div>
<div class="col col6 alpha"</div> <div class="col col3"</div>
<div class="col col3"</div> <div class="col col3 omega"</div>
<div class="col col3 omega"</div> </div>
</div> </div>
</div>
```
That way, we get rid of the excess margins on the first and last elements of the nested columns. That way, we get rid of the excess margins on the first and last elements of the nested columns.


Conditional Responsiveness Conditional Responsiveness
Expand All @@ -133,34 +109,33 @@ The following classes will allow you to hide/show certain elements in specific l
* `.hide-mobile` -- Will hide element on a mobile device only (Landscape or Portrait) * `.hide-mobile` -- Will hide element on a mobile device only (Landscape or Portrait)


These styles can come in handy: These styles can come in handy:
``` <div class="wrapper">
<div class="wrapper"> <div class="col col12">
<div class="col col12"> <div id="banner-ad" class="hide-mobile">
<div id="banner-ad" class="hide-mobile"> // AD CODE
// AD CODE </div>
<ul class="nav">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div> </div>
<ul class="nav">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div> </div>
</div>
```
The code above would show the banner ad on a desktop and tablet only and hide it on a mobile device. The code above would show the banner ad on a desktop and tablet only and hide it on a mobile device.


Media Queries Media Queries
----- -----
CSS3 media queries are useful for setting specific styling for elements on specific devices. If the conditional classes discussed in the previous section aren't enough, you can add more specific styling in the `style_r.css` file under the appropriate media query: CSS3 media queries are useful for setting specific styling for elements on specific devices. If the conditional classes discussed in the previous section aren't enough, you can add more specific styling in the `style_r.css` file under the appropriate media query:
``` <style type="text/css" media="screen">
/* Mobile Layout */ /* Mobile Layout */
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
#logo { #logo {
width:300px; width:300px;
height:40px; height:40px;
background-image:url('logo_small.png'); background-image:url('logo_small.png');
} }
} }
``` </style>


The snippet above would replace the background image for the `#logo` div on a mobile device. The snippet above would replace the background image for the `#logo` div on a mobile device.

0 comments on commit de5e98a

Please sign in to comment.