Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

359 lines (292 sloc) 17.249 kB
/* #Joel's Floating Pancake Grid
================================================== */
/* Base Grid */
/* Pattern for HTML
Create the rows in your document
<header>
...
</header>
<nav>
...
</nav>
etc.
Between the rows, you will need a continer <div class="container"> ... </div>
This needs to be in each row, this is what is centered in the site.
The default wordpress navigation system will be converted. Try and match the number
of columns and main nav items to make it look its best.
If you need columns, add "onecol" "twocol" etc. to the container div
e.g. <div class="container fivecol"> ... </div> In the div, add in the columns you need
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
one for each column. If you want them to span a couple or a few cols, add spantwo, spanthree etc. to the
col div.
e.g. <div class="col spanthree">...</div>
*/
/*
_______ _______ _______ _______
( ____ )( ___ )( ____ )( ___ )
| ( )|| ( ) || ( )|| ( ) |
| (____)|| (___) || (____)|| (___) |
| _____)| ___ || _____)| ___ |
| ( | ( ) || ( | ( ) |
| ) | ) ( || ) | ) ( |
|/ |/ \||/ |/ \|
*/
$margin_width:$master_margin_width;
$fullcontainer_width:$papawidth;
.main {width: $fullcontainer_width; margin: 0 auto; padding: 0; overflow: hidden;}
.container .col { float: left; margin: 0 0 $margin_width $margin_width; }
.container .nomargin { margin:0;}
.container .rowholder { margin:0;}
$onecol_width:($fullcontainer_width)-($margin_width*2);
$twocol_width:($fullcontainer_width/2)-($margin_width*3/2);
$threecol_width:($fullcontainer_width/3)-($margin_width*4/3);
$fourcol_width:($fullcontainer_width/4)-($margin_width*5/4);
$fivecol_width:($fullcontainer_width/5)-($margin_width*6/5);
$sixcol_width:($fullcontainer_width/6)-($margin_width*7/6);
.onecol .col {width: $onecol_width;}
.twocol .col {width: $twocol_width;}
.threecol .col {width: $threecol_width;}
.threecol .spantwo {width: $threecol_width * 2 + $margin_width;}
.threecol .spanthree {width: $threecol_width * 3 + $margin_width * 2;}
.fourcol .col {width: $fourcol_width;}
.fourcol .spantwo {width: $fourcol_width * 2 + $margin_width;}
.fourcol .spanthree {width: $fourcol_width * 3 + ($margin_width * 2);}
.fourcol .spanfour {width: $fourcol_width * 4 + ($margin_width * 3);}
.fivecol .col {width: $fivecol_width;}
.fivecol .spantwo {width: $fivecol_width * 2 + $margin_width;}
.fivecol .spanthree {width: $fivecol_width * 3 + ($margin_width * 2);}
.fivecol .spanfour {width: $fivecol_width * 4 + ($margin_width * 3);}
.fivecol .spanfive {width: $fivecol_width * 5 + ($margin_width * 4);}
.fivecol .spantwo.rowholder {width: $fivecol_width * 2 + ($margin_width * 2);}
.fivecol .spanthree.rowholder {width: $fivecol_width * 3 + ($margin_width * 3);}
.fivecol .spanfour.rowholder {width: $fivecol_width * 4 + ($margin_width * 4);}
.fivecol .spanfive.rowholder {width: $fivecol_width * 5 + ($margin_width * 5);}
.sixcol .col {width: $sixcol_width;}
.sixcol .spantwo {width: $sixcol_width * 2 + $margin_width;}
.sixcol .spanthree {width: $sixcol_width * 3 + ($margin_width * 2);}
.sixcol .spanfour {width: $sixcol_width * 4 + ($margin_width * 3);}
.sixcol .spanfive {width: $sixcol_width * 5 + ($margin_width * 4);}
.sixcol .spansix {width: $sixcol_width * 6 + ($margin_width * 5);}
.sixcol .spantwo.rowholder {width: $sixcol_width * 2 + ($margin_width * 2);}
.sixcol .spanthree.rowholder {width: $sixcol_width * 3 + ($margin_width * 3);}
.sixcol .spanfour.rowholder {width: $sixcol_width * 4 + ($margin_width * 4);}
.sixcol .spanfive.rowholder {width: $sixcol_width * 5 + ($margin_width * 5);}
.sixcol .spansix.rowholder {width: $sixcol_width * 6 + ($margin_width * 6);}
/* Incedentals
================================================== */
$menuitem_width:($fullcontainer_width * (($width_of_nav_in_columns/$number_of_columns)/$number_of_nav_items)) - ($margin_width * $number_of_nav_items / ($number_of_nav_items - 1) );
ul.menu {margin:0;
li {margin:0 $margin_width 0 0; width:$menuitem_width}
li:last-child{margin:0}
ul.sub-menu{ width:$menuitem_width * 2 + $margin_width;
}
}
/*
_______ _______ _______ _______
( )( ___ )( )( ___ )
| () () || ( ) || () () || ( ) |
| || || || (___) || || || || (___) |
| |(_)| || ___ || |(_)| || ___ |
| | | || ( ) || | | || ( ) |
| ) ( || ) ( || ) ( || ) ( |
|/ \||/ \||/ \||/ \|
*/
@media only screen and (min-width: $teenbreak) and (max-width: $mamabreak) {
$fullcontainer_width:$mamawidth;
$margin_width:($master_margin_width * ($mamawidth/$papawidth));
.main { width: $fullcontainer_width; margin: 0 auto; padding: 0; overflow: hidden;}
.container .col { float: left; margin: 0 0 $margin_width $margin_width;}
.container .nomargin { margin:0;}
.container .rowholder { margin:0;}
$onecol_width:($fullcontainer_width)-($margin_width*2);
$twocol_width:($fullcontainer_width/2)-($margin_width*3/2);
$threecol_width:($fullcontainer_width/3)-($margin_width*4/3);
$fourcol_width:($fullcontainer_width/4)-($margin_width*5/4);
$fivecol_width:($fullcontainer_width/5)-($margin_width*6/5);
$sixcol_width:($fullcontainer_width/6)-($margin_width*7/6);
.onecol .col {width: $onecol_width;}
.twocol .col {width: $twocol_width;}
.threecol .col {width: $threecol_width;}
.threecol .spantwo {width: $threecol_width * 2 + $margin_width;}
.threecol .spanthree {width: $threecol_width * 3 + $margin_width * 2;}
.fourcol .col {width: $fourcol_width;}
.fourcol .spantwo {width: $fourcol_width * 2 + $margin_width;}
.fourcol .spanthree {width: $fourcol_width * 3 + ($margin_width * 2);}
.fourcol .spanfour {width: $fourcol_width * 4 + ($margin_width * 3);}
.fivecol .col {width: $fivecol_width;}
.fivecol .spantwo {width: $fivecol_width * 2 + $margin_width;}
.fivecol .spanthree {width: $fivecol_width * 3 + ($margin_width * 2);}
.fivecol .spanfour {width: $fivecol_width * 4 + ($margin_width * 3);}
.fivecol .spanfive {width: $fivecol_width * 5 + ($margin_width * 4);}
.fivecol .spantwo.rowholder {width: $fivecol_width * 2 + ($margin_width * 2);}
.fivecol .spanthree.rowholder {width: $fivecol_width * 3 + ($margin_width * 3);}
.fivecol .spanfour.rowholder {width: $fivecol_width * 4 + ($margin_width * 4);}
.sixcol .col {width: $sixcol_width;}
.sixcol .spantwo {width: $sixcol_width * 2 + $margin_width;}
.sixcol .spanthree {width: $sixcol_width * 3 + ($margin_width * 2);}
.sixcol .spanfour {width: $sixcol_width * 4 + ($margin_width * 3);}
.sixcol .spanfive {width: $sixcol_width * 5 + ($margin_width * 4);}
.sixcol .spansix {width: $sixcol_width * 6 + ($margin_width * 5);}
.sixcol .spantwo.rowholder {width: $sixcol_width * 2 + ($margin_width * 2);}
.sixcol .spanthree.rowholder {width: $sixcol_width * 3 + ($margin_width * 3);}
.sixcol .spanfour.rowholder {width: $sixcol_width * 4 + ($margin_width * 4);}
.sixcol .spanfive.rowholder {width: $sixcol_width * 5 + ($margin_width * 5);}
.sixcol .spansix.rowholder {width: $sixcol_width * 6 + ($margin_width * 6);}
$menuitem_width:($fullcontainer_width * (($width_of_nav_in_columns/$number_of_columns)/$number_of_nav_items)) - ($margin_width * $number_of_nav_items / ($number_of_nav_items - 1) );
ul.menu {margin:0;
li {margin:0 $margin_width 0 0; width:$menuitem_width}
ul.sub-menu{ width:$menuitem_width * 2 + $margin_width;}
}
}
/* #Tablet (Portrait)
_________ _______ _______ _
\__ __/( ____ \( ____ \( ( /|
) ( | ( \/| ( \/| \ ( |
| | | (__ | (__ | \ | |
| | | __) | __) | (\ \) |
| | | ( | ( | | \ |
| | | (____/\| (____/\| ) \ |
)_( (_______/(_______/|/ )_)
*/
@media only screen and (min-width: $babybreak) and (max-width: $teenbreak) {
$fullcontainer_width:$teenwidth;
$margin_width:($master_margin_width * ($teenwidth/$mamawidth));
$onecol_width:($fullcontainer_width)-($margin_width*2);
$twocol_width:($fullcontainer_width/2)-($margin_width*3/2);
$threecol_width:($fullcontainer_width/3)-($margin_width*4/3);
$fourcol_width:($fullcontainer_width/4)-($margin_width*5/4);
$fivecol_width:($fullcontainer_width/5)-($margin_width*6/5);
$sixcol_width:($fullcontainer_width/6)-($margin_width*7/6);
.main {width: $fullcontainer_width; margin: 0 auto; padding: 0; overflow: hidden;}
.container .col { float: left; margin: 0 0 $margin_width $margin_width;}
.container .nomargin { margin:0;}
.container .rowholder { margin:0;}
.onecol .col {width: $onecol_width;}
.twocol .col {width: $twocol_width;}
.threecol .col {width: $threecol_width;}
.threecol .spantwo {width: $threecol_width * 2 + $margin_width;}
.threecol .spantwo {width: $threecol_width * 3 + $margin_width * 2;}
.fourcol .col {width: $fourcol_width;}
.fourcol .spantwo {width: $fourcol_width * 2 + $margin_width;}
.fourcol .spanthree {width: $fourcol_width * 3 + ($margin_width * 2);}
.fourcol .spanfour {width: $fourcol_width * 4 + ($margin_width * 3);}
.fivecol .col ,
.fivecol .spantwo ,
.fivecol .spanthree ,
.fivecol .spanfour ,
.fivecol .spanfive ,
.fivecol .spantwo.rowholder ,
.fivecol .spanthree.rowholder ,
.fivecol .spanfour.rowholder ,
.fivecol .spanfour.rowholder ,
.sixcol .col ,
.sixcol .spantwo ,
.sixcol .spanthree ,
.sixcol .spanfour ,
.sixcol .spanfive ,
.sixcol .spansix ,
.sixcol .spantwo.rowholder ,
.sixcol .spanthree.rowholder ,
.sixcol .spanfour.rowholder ,
.sixcol .spanfive.rowholder ,
.sixcol .spansix.rowholder ,
.container .fullwidth {width: $onecol_width;}
}
/* #Mobile (Portrait)
______ _______ ______
( ___ \ ( ___ )( ___ \ |\ /|
| ( ) )| ( ) || ( ) )( \ / )
| (__/ / | (___) || (__/ / \ (_) /
| __ ( | ___ || __ ( \ /
| ( \ \ | ( ) || ( \ \ ) (
| )___) )| ) ( || )___) ) | |
|/ \___/ |/ \||/ \___/ \_/
*/
@media only screen and (min-width:$tinybreak) and (max-width: $babybreak) {
$fullcontainer_width:$babywidth;
$margin_width:($master_margin_width * ($babywidth/$teenwidth));
$onecol_width:$fullcontainer_width - ($master_margin_width * 2);
.main { width: $fullcontainer_width; margin: 0 auto; padding: 0; overflow: hidden; }
.container .col { float: left; margin: 0 0 $margin_width $margin_width;}
.container .nomargin { margin:0;}
.container .rowholder { margin:0;}
.onecol .col ,
.twocol .col ,
.threecol .col ,
.threecol .spantwo ,
.fourcol .col ,
.fourcol .spantwo ,
.fourcol .spanthree ,
.fivecol .col ,
.fivecol .spantwo ,
.fivecol .spanthree ,
.fivecol .spanfour ,
.fivecol .spanfive ,
.fivecol .spantwo.rowholder ,
.fivecol .spanthree.rowholder ,
.fivecol .spanfour.rowholder ,
.fivecol .spanfour.rowholder ,
.sixcol .col ,
.sixcol .spantwo ,
.sixcol .spanthree ,
.sixcol .spanfour ,
.sixcol .spanfive ,
.sixcol .spansix ,
.sixcol .spantwo.rowholder ,
.sixcol .spanthree.rowholder ,
.sixcol .spanfour.rowholder ,
.sixcol .spanfive.rowholder ,
.sixcol .spansix.rowholder ,
.container .fullwidth {width: $onecol_width;}
}
/* #Mobile (Portrait)
__________________ _
\__ __/\__ __/( ( /||\ /|
) ( ) ( | \ ( |( \ / )
| | | | | \ | | \ (_) /
| | | | | (\ \) | \ /
| | | | | | \ | ) (
| | ___) (___| ) \ | | |
)_( \_______/|/ )_) \_/
*/
@media only screen and (min-width:0) and (max-width: $tinybreak) {
$fullcontainer_width:$tinywidth;
$margin_width:(0);
$onecol_width:$fullcontainer_width;
.main { width: $fullcontainer_width; margin: 0 auto; padding: 0; overflow: hidden; }
.container .col { float: left; margin: 0 0 $margin_width $margin_width;}
.container .nomargin { margin:0;}
.container .rowholder { margin:0;}
.onecol .col ,
.twocol .col ,
.threecol .col ,
.threecol .spantwo ,
.fourcol .col ,
.fourcol .spantwo ,
.fourcol .spanthree ,
.fivecol .col ,
.fivecol .spantwo ,
.fivecol .spanthree ,
.fivecol .spanfour ,
.fivecol .spanfive ,
.fivecol .spantwo.rowholder ,
.fivecol .spanthree.rowholder ,
.fivecol .spanfour.rowholder ,
.fivecol .spanfour.rowholder ,
.sixcol .col ,
.sixcol .spantwo ,
.sixcol .spanthree ,
.sixcol .spanfour ,
.sixcol .spanfive ,
.sixcol .spansix ,
.sixcol .spantwo.rowholder ,
.sixcol .spanthree.rowholder ,
.sixcol .spanfour.rowholder ,
.sixcol .spanfive.rowholder ,
.sixcol .spansix.rowholder ,
.container .fullwidth {width: $onecol_width;}
}
Jump to Line
Something went wrong with that request. Please try again.