Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

394 lines (355 sloc) 9.461 kb
// ==============================
// === THE CHOREOGRAPHIC GRID ===
// ==============================
// GRID CALCULATIONS
// GRID SETUP
// MEDIA QUERIES
// - ALPHA
// - BETA
// GRID UTILITIES
// CENTRED COLUMNS
// BLOCK GRIDS
// =========================
// === GRID CALCULATIONS ===
// =========================
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.shunt(@shuntSpan: 1) {
margin-right: (@gridColumnWidth * @shuntSpan) + (@gridGutterWidth * (@shuntSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * @columnOffset) + @gridGutterWidth;
}
.offsetFirstChild(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * @columnOffset);
}
.push(@pushOffset: 1) {
left: (@gridColumnWidth * @pushOffset) + (@gridGutterWidth * @pushOffset);
}
.pull(@pullOffset: 1) {
right: (@gridColumnWidth * @pullOffset) + (@gridGutterWidth * @pullOffset);
}
.gridColumn() {
margin-left: @gridGutterWidth;
float: left;
min-height: 1px;
position: relative;
clear: none;
&:first-child { margin-left: 0; }
}
.media-query(@mq-title, @bgcolor: fadeout(yellow, 40%)) {
content: @mq-title;
position: fixed;
top: 0;
right: 0;
left: 0;
height: 30px;
line-height: 30px;
background-color: @bgcolor;
display: block;
text-align: center;
font-weight: bold;
z-index: 1000;
}
// ==================
// === GRID SETUP ===
// ==================
@gridColumnWidth: 4.3%;
@gridGutterWidth: 4.4%;
@gridMaxWidth: 1200px;
@gridMargin: 32px; // === Space outside the grid
.container {
padding-left: @gridMargin;
padding-right: @gridMargin;
width: 95%;
max-width: 1500px;
margin: 0 auto;
}
// body:before {
// .media-query("mobile", fadeout(yellow, 40%));
// }
.row {
width: 100%;
margin: 0 auto;
}
// To fix the grid into a certain size, set max-width to width
.row .row {
min-width: 0;
}
img, object, embed { max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
#map_canvas img, .map_canvas img {max-width: none!important;}
// ===========================================
// === Media queries for responsive design ===
// ===========================================
// === 768> ===
@media screen and (min-width: 768px) {
// body:before {
// .media-query("mq-alpha", fadeout(green, 40%));
// }
.col {
.gridColumn;
}
// HACK/FIX FOR WEBKIT'S INADEQUATE SUBPIXEL PERCENTAGE CALCULATIONS
// In order to work around browsers' different rounding behaviours, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns you can tag the last column with class="end" in order to override that behaviour.
[class*="col"] + [class*="col"]:last-child, .mq-alpha-end { float: right; }
[class*="col"] + [class*="col"].end { float: left; }
.span1 , .mq-alpha-resize-to1 { .columns(1); }
.span2 , .mq-alpha-resize-to2 { .columns(2); }
.span3 , .mq-alpha-resize-to3 { .columns(3); }
.span4 , .mq-alpha-resize-to4 { .columns(4); }
.span5 , .mq-alpha-resize-to5 { .columns(5); }
.span6 , .mq-alpha-resize-to6 { .columns(6); }
.span7 , .mq-alpha-resize-to7 { .columns(7); }
.span8 , .mq-alpha-resize-to8 { .columns(8); }
.span9 , .mq-alpha-resize-to9 { .columns(9); }
.span10, .mq-alpha-resize-to10 { .columns(10); }
.span11, .mq-alpha-resize-to11 { .columns(11); }
.span12, .mq-alpha-resize-to12 { .columns(12); }
// ==============================================
// === OFFSET & SOURCE ORDERING (PUSH & PULL) ===
// ==============================================
.row {
> .offset1 {
.offset(1);
&:first-child {
.offsetFirstChild(1);
}
}
> .offset2 {
.offset(2);
&:first-child {
.offsetFirstChild(2);
}
}
> .offset3 {
.offset(3);
&:first-child {
.offsetFirstChild(3);
}
}
> .offset4 {
.offset(4);
&:first-child {
.offsetFirstChild(4);
}
}
> .offset5 {
.offset(5);
&:first-child {
.offsetFirstChild(5);
}
}
> .offset6 {
.offset(6);
&:first-child {
.offsetFirstChild(6);
}
}
> .offset7 {
.offset(7);
&:first-child {
.offsetFirstChild(7);
}
}
> .offset8 {
.offset(8);
&:first-child {
.offsetFirstChild(8);
}
}
> .offset9 {
.offset(9);
&:first-child {
.offsetFirstChild(9);
}
}
> .offset10 {
.offset(10);
&:first-child {
.offsetFirstChild(10);
}
}
> .offset11 {
.offset(11);
&:first-child {
.offsetFirstChild(11);
}
}
> .offset12 {
.offset(12);
&:first-child {
.offsetFirstChild(12);
}
}
> .push2 { .push(2); }
> .push3 { .push(3); }
> .push4 { .push(4); }
> .push5 { .push(5); }
> .push6 { .push(6); }
> .push7 { .push(7); }
> .push8 { .push(8); }
> .push9 { .push(9); }
> .push10 { .push(10); }
> .pull2 { .pull(2); }
> .pull3 { .pull(3); }
> .pull4 { .pull(4); }
> .pull5 { .pull(5); }
> .pull6 { .pull(6); }
> .pull7 { .pull(7); }
> .pull8 { .pull(8); }
> .pull9 { .pull(9); }
> .pull10 { .pull(10); }
}
// ====================================
// === SPLITTING COLUMNS & SHUNTING ===
// ====================================
.split .col, .shunt {
float:none;
margin-left: 0;
min-height: 1px;
position: relative;
width: 100%;
clear: both;
}
}
// === end 768> ===
// === 992> ===
@media screen and (min-width: 992px){
// body:before {
// .media-query("mq-beta", fadeout(teal, 40%));
// }
// ====================
// === CHOREOGRAPHY ===
// ====================
.split .col, .shunt {
.gridColumn;
}
// ============
// === INFO ===
// ============
// I need to restate the grid widths & offsets in this media-query because of the cascade. For example, if I add .mq-alpha-resize-to8 to a column in mq-alpha & I need the the same column to return to it's 'natural' width (.span6 for example) in the wider media-query, there is no other way, that I can see, to do that. One thought I had was to add a body class, using javascript, stating which media-query is currently being viewed, then I can just use that to apply the relevant class. Not sure about this though.
.span1 , .mq-beta-resize-to1 , .split .span1 { .columns(1); }
.span2 , .mq-beta-resize-to2 , .split .span2 { .columns(2); }
.span3 , .mq-beta-resize-to3 , .split .span3 { .columns(3); }
.span4 , .mq-beta-resize-to4 , .split .span4 { .columns(4); }
.span5 , .mq-beta-resize-to5 , .split .span5 { .columns(5); }
.span6 , .mq-beta-resize-to6 , .split .span6 { .columns(6); }
.span7 , .mq-beta-resize-to7 , .split .span7 { .columns(7); }
.span8 , .mq-beta-resize-to8 , .split .span8 { .columns(8); }
.span9 , .mq-beta-resize-to9 , .split .span9 { .columns(9); }
.span10, .mq-beta-resize-to10, .split .span10 { .columns(10); }
.span11, .mq-beta-resize-to11, .split .span11 { .columns(11); }
.span12, .mq-beta-resize-to12, .split .span12 { .columns(12); }
.row {
> .offset1 {
.offset(1);
&:first-child {
.offsetFirstChild(1);
}
}
> .offset2 {
.offset(2);
&:first-child {
.offsetFirstChild(2);
}
}
> .offset3 {
.offset(3);
&:first-child {
.offsetFirstChild(3);
}
}
> .offset4 {
.offset(4);
&:first-child {
.offsetFirstChild(4);
}
}
> .offset5 {
.offset(5);
&:first-child {
.offsetFirstChild(5);
}
}
> .offset6 {
.offset(6);
&:first-child {
.offsetFirstChild(6);
}
}
> .offset7 {
.offset(7);
&:first-child {
.offsetFirstChild(7);
}
}
> .offset8 {
.offset(8);
&:first-child {
.offsetFirstChild(8);
}
}
> .offset9 {
.offset(9);
&:first-child {
.offsetFirstChild(9);
}
}
> .offset10 {
.offset(10);
&:first-child {
.offsetFirstChild(10);
}
}
> .offset11 {
.offset(11);
&:first-child {
.offsetFirstChild(11);
}
}
> .offset12 {
.offset(12);
&:first-child {
.offsetFirstChild(12);
}
}
> .mq-beta-push2, .push2 { .push(2); }
> .mq-beta-push3, .push3 { .push(3); }
> .mq-beta-push4, .push4 { .push(4); }
> .mq-beta-push5, .push5 { .push(5); }
> .mq-beta-push6, .push6 { .push(6); }
> .mq-beta-push7, .push7 { .push(7); }
> .mq-beta-push8, .push8 { .push(8); }
> .mq-beta-push9, .push9 { .push(9); }
> .mq-beta-push10, .push10 { .push(10); }
> .mq-beta-pull2, .pull2 { .pull(2); }
> .mq-beta-pull3, .pull3 { .pull(3); }
> .mq-beta-pull4, .pull4 { .pull(4); }
> .mq-beta-pull5, .pull5 { .pull(5); }
> .mq-beta-pull6, .pull6 { .pull(6); }
> .mq-beta-pull7, .pull7 { .pull(7); }
> .mq-beta-pull8, .pull8 { .pull(8); }
> .mq-beta-pull9, .pull9 { .pull(9); }
> .mq-beta-pull10, .pull10 { .pull(10); }
}
.mq-beta-end { float: right; }
.mq-alpha-end { float: left; }
}
// === end 992> ===
// === 1382> ===
@media screen and (min-width: 1382px){
}
// === end 1382> ===
// ======================
// === GRID UTILITIES ===
// ======================
// Nicolas Gallagher's micro clearfix
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
// =======================
// === CENTRED COLUMNS ===
// =======================
.centered.col, .centred.col { float: none; margin: 0 auto; }
Jump to Line
Something went wrong with that request. Please try again.