106 lines
3.1 KiB
CSS
106 lines
3.1 KiB
CSS
/*
|
|
* Skeleton V1.2
|
|
* Copyright 2011, Dave Gamache
|
|
* www.getskeleton.com
|
|
* Free to use under the MIT license.
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* 6/20/2012
|
|
*/
|
|
|
|
|
|
/* Table of Contents
|
|
==================================================
|
|
#Base 960 Grid
|
|
#Tablet (Portrait)
|
|
#Mobile (Portrait)
|
|
#Mobile (Landscape)
|
|
#Clearing */
|
|
|
|
|
|
|
|
/* #Base 960 Grid
|
|
================================================== */
|
|
|
|
.container { position: relative; max-width: 960px; margin: 0 auto; padding: 0; }
|
|
.container .column,
|
|
.container .columns { float: left; margin-left: 4%; box-sizing: border-box;}
|
|
.row { margin-bottom: 20px; }
|
|
.row .column:first-child,
|
|
.row .columns:first-child { margin-left: 0; }
|
|
|
|
|
|
/* Nested Column Classes */
|
|
.column.alpha, .columns.alpha { margin-left: 0; }
|
|
.column.omega, .columns.omega { margin-right: 0; }
|
|
|
|
/* Base Grid */
|
|
.container .one.column,
|
|
.container .one.columns { width: 4.66666666667%; }
|
|
.container .two.columns { width: 13.3333333333%; }
|
|
.container .three.columns { width: 22%; }
|
|
.container .four.columns { width: 30.6666666667%; }
|
|
.container .five.columns { width: 39.3333333333%; }
|
|
.container .six.columns { width: 48%; }
|
|
.container .seven.columns { width: 56.6666666667%; }
|
|
.container .eight.columns { width: 65.3333333333%; }
|
|
.container .nine.columns { width: 74.0%; }
|
|
.container .ten.columns { width: 82.6666666667%; }
|
|
.container .eleven.columns { width: 91.3333333333%; }
|
|
.container .twelve.columns { width: 100%; }
|
|
|
|
.container .one-third.column { width: 30.6666666667%; }
|
|
.container .two-thirds.column { width: 48%; }
|
|
|
|
|
|
|
|
/* #Tablet (Portrait)
|
|
================================================== */
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
.container {
|
|
width: 85%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.container {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
|
|
/* #Clearing
|
|
================================================== */
|
|
|
|
/* Self Clearing Goodness */
|
|
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
|
|
|
/* Use clearfix class on parent to clear nested columns,
|
|
or wrap each row of columns in a <div class="row"> */
|
|
.clearfix:before,
|
|
.clearfix:after,
|
|
.row:before,
|
|
.row:after {
|
|
content: '\0020';
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0; }
|
|
.row:after,
|
|
.clearfix:after {
|
|
clear: both; }
|
|
.row,
|
|
.clearfix {
|
|
zoom: 1; }
|
|
|
|
/* You can also use a <br class="clear" /> to clear columns */
|
|
.clear {
|
|
clear: both;
|
|
display: block;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
}
|