Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

138 lines (120 sloc) 4.47 kB
/* Here we define the standard styles that are applied all screens */
/* ================= GRID SETUP ==================
* This mixin sets up the foundation for your grid
* it is nescessary that this is called outside any
* element because it provides variables that must
* be in the global scope. Otherwise the grid system
* won't work as excpected.
* .grid_setup - MIXIN
* The core function of the grid module, that builds up
* the basic structure and provides you with any number of
* columns with custom gap size, min-width and max-width
*
* it's also the setup function for all other grid
* modules. So you can define most presets in one
* mixin call.
*
* @width - defines the width of the grid (any css unit)
* @columns - specifies the number of columns in the grid (plane number)
* @gap - The gap between elements in the grid (any css unit)
* @align - align the grid on left / center / right side of parent
* @min - minimal width of the grid (any css unit)
* @max - maximal width of the grid (any css unit)
*/
/* setup for all browsers that don't understand media queries */
.grid_setup(80%, 8, 2em, center, 740px, 960px);
/* The body element can be used to apply the vertical rhythm
* to your document or other type and color sheme related setups */
body {
padding-top: 40px; /* add a little spacing above */
}
/* convenient skip link functionality included in the nav module */
#skip-link {
.nav_skip_link();
}
@page-margin: 40px;
/* This is the wrapper element we declare as grid */
#page {
/* This mixin makes this element a grid */
.grid();
/* Here we define a linear gradient background for the whole
* grid element. You can see the effect at the second sidebar */
.css3_linear_gradient(#F1F1F1, #CCC );
/* This adds rounded corners to the page element */
.css3_border_radius();
/* add a smooth box shadow */
.css3_box_shadow(2px, 2px, 10px, #999);
/* add contrast to the page border */
border: 1px solid #036;
}
/* override grid settings for browsers that can react to small screen sizes */
@media only screen and (min-width: 0px) {
#page {
/* change min-width to 0px to allow smaller sizes */
.grid(@grid_width, @grid_columns, @grid_gap, @grid_align, 0px, 960px);
}
}
header {
/* the header element spans all 8 columns */
.grid_span(8);
/* add gaps on both sides */
.grid_gap_both;
}
/* set the background color variable for nav, article and sidebar 1 */
@bgColor: #A3CED7;
nav#main-menu {
/* the navigation spans all 8 columns */
.grid_span(8);
/* compose a horizontal navigation */
.nav_horizontal();
/* these are the colors for the states - normal, hover, active */
.nav_background(#E3E3E3, @bgColor, @bgColor);
.nav_text_color(black, black, black);
/* like css rounded corners: top-left, top-right, bottom-right, bottom-left */
.nav_rounded(0px 5px 0px 0px);
/* padding around the text */
.nav_padding(0.5em 1em);
/* define gaps left, right of each nav item */
.nav_gap(0, 0.3em);
}
/* this element is a wrapper for the equal columns used
* in this example. If you don't need equal columns, than
* you don't have to wrap them
*/
#content {
/* define this element as column wrapper */
.grid_col_wrap();
/* define it specifically as equal column wrapper */
.grid_col_equal_wrap();
}
article {
.grid_span(4); /* the article is 4 columns wide */
.grid_left(); /* it floats left */
.grid_gap_both; /* has gaps on both sides */
/* is shifted 2 columns to the right to swap
* position with the first sidebar although its
* the first element in markup ;-) */
.grid_shift_right(2);
/* make this column an equal height column */
.grid_col_equal();
background-color: @bgColor; /* add background color */
}
#sidebar-1 {
.grid_span(2); /* the sidebar is 2 columns wide */
.grid_left(); /* it floats left (but would be beside the article on the right) */
.grid_shift_left(4); /* if we didn't shift it to the left 4 columns */
.grid_gap_both; /* add gaps on both sides */
.grid_col_equal(); /* make this column an equal height column */
background-color: @bgColor; /* add background color */
}
#sidebar-2 {
.grid_span(2); /* the sidebar is 2 columns wide */
.grid_right(); /* last column always floats right */
.grid_gap_both; /* add gaps on both sides */
.grid_col_equal(); /* make this column an equal height column */
}
footer {
.grid_span(8); /* full 8 columns */
text-align:center;
border-top: 1px dashed #666;
}
Jump to Line
Something went wrong with that request. Please try again.