522 lines
18 KiB
CSS
522 lines
18 KiB
CSS
/*
|
|
* Boots & Bones V0.1
|
|
* Lightweight responsive grid framework
|
|
* Joshua Beckman
|
|
* Free to use under the MIT license.
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* 11/11/2012
|
|
*/
|
|
|
|
|
|
/* Table of Contents
|
|
==================================================
|
|
#Fluid Grid
|
|
#Base 960 Grid
|
|
#Wide SCreens
|
|
#Tablet (Portrait)
|
|
#Mobile (Portrait)
|
|
#Mobile (Landscape)
|
|
#Clearing
|
|
*/
|
|
|
|
/* #Fluid Grid (Inspired by Bootstrap)
|
|
================================================== */
|
|
|
|
.row-fluid {
|
|
width: 100%;
|
|
*zoom: 1;
|
|
}
|
|
.row-fluid:before,
|
|
.row-fluid:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
.row-fluid:after {
|
|
clear: both;
|
|
}
|
|
.row-fluid [class*="span"] {
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
min-height: 30px;
|
|
margin-left: 2.564102564102564%;
|
|
*margin-left: 2.5109110747408616%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.row-fluid [class*="span"]:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.row-fluid .controls-row [class*="span"] + [class*="span"] {
|
|
margin-left: 2.564102564102564%;
|
|
}
|
|
.row-fluid .span12 {
|
|
width: 100%;
|
|
*width: 99.94680851063829%;
|
|
}
|
|
.row-fluid .span11 {
|
|
width: 91.45299145299145%;
|
|
*width: 91.39979996362975%;
|
|
}
|
|
.row-fluid .span10 {
|
|
width: 82.90598290598291%;
|
|
*width: 82.8527914166212%;
|
|
}
|
|
.row-fluid .span9 {
|
|
width: 74.35897435897436%;
|
|
*width: 74.30578286961266%;
|
|
}
|
|
.row-fluid .span8 {
|
|
width: 65.81196581196582%;
|
|
*width: 65.75877432260411%;
|
|
}
|
|
.row-fluid .span7 {
|
|
width: 57.26495726495726%;
|
|
*width: 57.21176577559556%;
|
|
}
|
|
.row-fluid .span6 {
|
|
width: 48.717948717948715%;
|
|
*width: 48.664757228587014%;
|
|
}
|
|
.row-fluid .span5 {
|
|
width: 40.17094017094017%;
|
|
*width: 40.11774868157847%;
|
|
}
|
|
.row-fluid .span4 {
|
|
width: 31.623931623931625%;
|
|
*width: 31.570740134569924%;
|
|
}
|
|
.row-fluid .span3 {
|
|
width: 23.076923076923077%;
|
|
*width: 23.023731587561375%;
|
|
}
|
|
.row-fluid .span2 {
|
|
width: 14.52991452991453%;
|
|
*width: 14.476723040552828%;
|
|
}
|
|
.row-fluid .span1 {
|
|
width: 5.982905982905983%;
|
|
*width: 5.929714493544281%;
|
|
}
|
|
.row-fluid .offset12 {
|
|
margin-left: 105.12820512820512%;
|
|
*margin-left: 105.02182214948171%;
|
|
}
|
|
.row-fluid .offset12:first-child {
|
|
margin-left: 102.56410256410257%;
|
|
*margin-left: 102.45771958537915%;
|
|
}
|
|
.row-fluid .offset11 {
|
|
margin-left: 96.58119658119658%;
|
|
*margin-left: 96.47481360247316%;
|
|
}
|
|
.row-fluid .offset11:first-child {
|
|
margin-left: 94.01709401709402%;
|
|
*margin-left: 93.91071103837061%;
|
|
}
|
|
.row-fluid .offset10 {
|
|
margin-left: 88.03418803418803%;
|
|
*margin-left: 87.92780505546462%;
|
|
}
|
|
.row-fluid .offset10:first-child {
|
|
margin-left: 85.47008547008548%;
|
|
*margin-left: 85.36370249136206%;
|
|
}
|
|
.row-fluid .offset9 {
|
|
margin-left: 79.48717948717949%;
|
|
*margin-left: 79.38079650845607%;
|
|
}
|
|
.row-fluid .offset9:first-child {
|
|
margin-left: 76.92307692307693%;
|
|
*margin-left: 76.81669394435352%;
|
|
}
|
|
.row-fluid .offset8 {
|
|
margin-left: 70.94017094017094%;
|
|
*margin-left: 70.83378796144753%;
|
|
}
|
|
.row-fluid .offset8:first-child {
|
|
margin-left: 68.37606837606839%;
|
|
*margin-left: 68.26968539734497%;
|
|
}
|
|
.row-fluid .offset7 {
|
|
margin-left: 62.393162393162385%;
|
|
*margin-left: 62.28677941443899%;
|
|
}
|
|
.row-fluid .offset7:first-child {
|
|
margin-left: 59.82905982905982%;
|
|
*margin-left: 59.72267685033642%;
|
|
}
|
|
.row-fluid .offset6 {
|
|
margin-left: 53.84615384615384%;
|
|
*margin-left: 53.739770867430444%;
|
|
}
|
|
.row-fluid .offset6:first-child {
|
|
margin-left: 51.28205128205128%;
|
|
*margin-left: 51.175668303327875%;
|
|
}
|
|
.row-fluid .offset5 {
|
|
margin-left: 45.299145299145295%;
|
|
*margin-left: 45.1927623204219%;
|
|
}
|
|
.row-fluid .offset5:first-child {
|
|
margin-left: 42.73504273504273%;
|
|
*margin-left: 42.62865975631933%;
|
|
}
|
|
.row-fluid .offset4 {
|
|
margin-left: 36.75213675213675%;
|
|
*margin-left: 36.645753773413354%;
|
|
}
|
|
.row-fluid .offset4:first-child {
|
|
margin-left: 34.18803418803419%;
|
|
*margin-left: 34.081651209310785%;
|
|
}
|
|
.row-fluid .offset3 {
|
|
margin-left: 28.205128205128204%;
|
|
*margin-left: 28.0987452264048%;
|
|
}
|
|
.row-fluid .offset3:first-child {
|
|
margin-left: 25.641025641025642%;
|
|
*margin-left: 25.53464266230224%;
|
|
}
|
|
.row-fluid .offset2 {
|
|
margin-left: 19.65811965811966%;
|
|
*margin-left: 19.551736679396257%;
|
|
}
|
|
.row-fluid .offset2:first-child {
|
|
margin-left: 17.094017094017094%;
|
|
*margin-left: 16.98763411529369%;
|
|
}
|
|
.row-fluid .offset1 {
|
|
margin-left: 11.11111111111111%;
|
|
*margin-left: 11.004728132387708%;
|
|
}
|
|
.row-fluid .offset1:first-child {
|
|
margin-left: 8.547008547008547%;
|
|
*margin-left: 8.440625568285142%;
|
|
}
|
|
.container-fluid {
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
*zoom: 1;
|
|
}
|
|
.container-fluid:before,
|
|
.container-fluid:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
.container-fluid:after {
|
|
clear: both;
|
|
}
|
|
.main-fluid {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding: 0 20px;
|
|
max-width: 1300px;
|
|
*zoom: 1;
|
|
}
|
|
.main-fluid:before,
|
|
.main-fluid:after {
|
|
display: table;
|
|
content: "";
|
|
line-height: 0;
|
|
}
|
|
.main-fluid:after {
|
|
clear: both;
|
|
}
|
|
|
|
/* #Base 960 Grid (Inspired by Skeleton)
|
|
================================================== */
|
|
|
|
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
|
.container .column,
|
|
.container .columns { float: left; display: inline; padding-left: 10px; padding-right: 10px; }
|
|
.row { margin-bottom: 20px; }
|
|
|
|
/* 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: 40px; }
|
|
.container .two.columns { width: 100px; }
|
|
.container .three.columns { width: 160px; }
|
|
.container .four.columns { width: 220px; }
|
|
.container .five.columns { width: 280px; }
|
|
.container .six.columns { width: 340px; }
|
|
.container .seven.columns { width: 400px; }
|
|
.container .eight.columns { width: 460px; }
|
|
.container .nine.columns { width: 520px; }
|
|
.container .ten.columns { width: 580px; }
|
|
.container .eleven.columns { width: 640px; }
|
|
.container .twelve.columns { width: 700px; }
|
|
.container .thirteen.columns { width: 760px; }
|
|
.container .fourteen.columns { width: 820px; }
|
|
.container .fifteen.columns { width: 880px; }
|
|
.container .sixteen.columns { width: 940px; }
|
|
|
|
.container .one-third.column { width: 300px; }
|
|
.container .two-thirds.column { width: 620px; }
|
|
|
|
/* Offsets */
|
|
.container .offset-by-one { margin-left: 60px; }
|
|
.container .offset-by-two { margin-left: 120px; }
|
|
.container .offset-by-three { margin-left: 180px; }
|
|
.container .offset-by-four { margin-left: 240px; }
|
|
.container .offset-by-five { margin-left: 300px; }
|
|
.container .offset-by-six { margin-left: 360px; }
|
|
.container .offset-by-seven { margin-left: 420px; }
|
|
.container .offset-by-eight { margin-left: 480px; }
|
|
.container .offset-by-nine { margin-left: 540px; }
|
|
.container .offset-by-ten { margin-left: 600px; }
|
|
.container .offset-by-eleven { margin-left: 660px; }
|
|
.container .offset-by-twelve { margin-left: 720px; }
|
|
.container .offset-by-thirteen { margin-left: 780px; }
|
|
.container .offset-by-fourteen { margin-left: 840px; }
|
|
.container .offset-by-fifteen { margin-left: 900px; }
|
|
|
|
/* #Wide screens
|
|
================================================== */
|
|
|
|
/* Note: Design for a width of 1200px */
|
|
|
|
@media only screen and (min-width: 1281px) {
|
|
body {
|
|
font-size: 18px/26px;
|
|
}
|
|
|
|
.container { width: 1280px; }
|
|
.container .column,
|
|
.container .columns { padding-left: 10px; padding-right: 10px; }
|
|
.column.alpha, .columns.alpha { padding-left: 0; padding-right: 10px; }
|
|
.column.omega, .columns.omega { padding-right: 0; padding-left: 10px; }
|
|
.alpha.omega { padding-left: 0; padding-right: 0; }
|
|
|
|
.container .one.column,
|
|
.container .one.columns { width: 60px; }
|
|
.container .two.columns { width: 140px; }
|
|
.container .three.columns { width: 220px; }
|
|
.container .four.columns { width: 300px; }
|
|
.container .five.columns { width: 380px; }
|
|
.container .six.columns { width: 460px; }
|
|
.container .seven.columns { width: 540px; }
|
|
.container .eight.columns { width: 620px; }
|
|
.container .nine.columns { width: 700px; }
|
|
.container .ten.columns { width: 780px; }
|
|
.container .eleven.columns { width: 860px; }
|
|
.container .twelve.columns { width: 940px; }
|
|
.container .thirteen.columns { width: 1020px; }
|
|
.container .fourteen.columns { width: 1100px; }
|
|
.container .fifteen.columns { width: 1180px; }
|
|
.container .sixteen.columns { width: 1260px; }
|
|
|
|
.container .one-third.column { width: 405px; }
|
|
.container .two-thirds.column { width: 825px; }
|
|
|
|
/* Offsets */
|
|
.container .offset-by-one { margin-left: 80px; }
|
|
.container .offset-by-two { margin-left: 160px; }
|
|
.container .offset-by-three { margin-left: 240px; }
|
|
.container .offset-by-four { margin-left: 320px; }
|
|
.container .offset-by-five { margin-left: 400px; }
|
|
.container .offset-by-six { margin-left: 480px; }
|
|
.container .offset-by-seven { margin-left: 560px; }
|
|
.container .offset-by-eight { margin-left: 640px; }
|
|
.container .offset-by-nine { margin-left: 720px; }
|
|
.container .offset-by-ten { margin-left: 800px; }
|
|
.container .offset-by-eleven { margin-left: 880px; }
|
|
.container .offset-by-twelve { margin-left: 960px; }
|
|
.container .offset-by-thirteen { margin-left: 1040px; }
|
|
.container .offset-by-fourteen { margin-left: 1120px; }
|
|
.container .offset-by-fifteen { margin-left: 1200px; }
|
|
}
|
|
|
|
/* #Tablet (Portrait)
|
|
================================================== */
|
|
|
|
/* Note: Design for a width of 768px */
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
|
.container { width: 768px; }
|
|
.container .column,
|
|
.container .columns { padding-left: 10px; padding-right: 10px; }
|
|
.column.alpha, .columns.alpha { padding-left: 0; padding-right: 10px; }
|
|
.column.omega, .columns.omega { padding-right: 0; padding-left: 10px; }
|
|
.alpha.omega { padding-left: 0; padding-right: 0; }
|
|
|
|
.container .one.column,
|
|
.container .one.columns { width: 28px; }
|
|
.container .two.columns { width: 76px; }
|
|
.container .three.columns { width: 124px; }
|
|
.container .four.columns { width: 172px; }
|
|
.container .five.columns { width: 220px; }
|
|
.container .six.columns { width: 268px; }
|
|
.container .seven.columns { width: 316px; }
|
|
.container .eight.columns { width: 364px; }
|
|
.container .nine.columns { width: 412px; }
|
|
.container .ten.columns { width: 460px; }
|
|
.container .eleven.columns { width: 508px; }
|
|
.container .twelve.columns { width: 556px; }
|
|
.container .thirteen.columns { width: 604px; }
|
|
.container .fourteen.columns { width: 652px; }
|
|
.container .fifteen.columns { width: 700px; }
|
|
.container .sixteen.columns { width: 748px; }
|
|
|
|
.container .one-third.column { width: 236px; }
|
|
.container .two-thirds.column { width: 492px; }
|
|
|
|
/* Offsets */
|
|
.container .offset-by-one { margin-left: 48px; }
|
|
.container .offset-by-two { margin-left: 96px; }
|
|
.container .offset-by-three { margin-left: 144px; }
|
|
.container .offset-by-four { margin-left: 192px; }
|
|
.container .offset-by-five { margin-left: 240px; }
|
|
.container .offset-by-six { margin-left: 288px; }
|
|
.container .offset-by-seven { margin-left: 336px; }
|
|
.container .offset-by-eight { margin-left: 384px; }
|
|
.container .offset-by-nine { margin-left: 432px; }
|
|
.container .offset-by-ten { margin-left: 480px; }
|
|
.container .offset-by-eleven { margin-left: 528px; }
|
|
.container .offset-by-twelve { margin-left: 576px; }
|
|
.container .offset-by-thirteen { margin-left: 624px; }
|
|
.container .offset-by-fourteen { margin-left: 672px; }
|
|
.container .offset-by-fifteen { margin-left: 720px; }
|
|
}
|
|
|
|
|
|
/* #Mobile (Portrait)
|
|
================================================== */
|
|
|
|
/* Note: Design for a width of 320px */
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
h1 {
|
|
font-size: 30px;
|
|
}
|
|
.only-wide { display: none;}
|
|
.underline-mobile { border-bottom: 1px solid #263239; }
|
|
.container { width: 300px; }
|
|
.container .columns,
|
|
.container .column { padding-left: 0; padding-right: 0; }
|
|
|
|
.row-fluid [class*="span"],
|
|
.row-fluid [class*="span"]:first-child { width: 96%; margin-left:2%;}
|
|
|
|
.row-fluid [class*="offset"],
|
|
.row-fluid [class*="offset"]:first-child { margin-left: 2%; }
|
|
|
|
.container .one.column,
|
|
.container .one.columns,
|
|
.container .two.columns,
|
|
.container .three.columns,
|
|
.container .four.columns,
|
|
.container .five.columns,
|
|
.container .six.columns,
|
|
.container .seven.columns,
|
|
.container .eight.columns,
|
|
.container .nine.columns,
|
|
.container .ten.columns,
|
|
.container .eleven.columns,
|
|
.container .twelve.columns,
|
|
.container .thirteen.columns,
|
|
.container .fourteen.columns,
|
|
.container .fifteen.columns,
|
|
.container .sixteen.columns,
|
|
.container .one-third.column,
|
|
.container .two-thirds.column { width: 300px; }
|
|
|
|
/* Offsets */
|
|
.container .offset-by-one,
|
|
.container .offset-by-two,
|
|
.container .offset-by-three,
|
|
.container .offset-by-four,
|
|
.container .offset-by-five,
|
|
.container .offset-by-six,
|
|
.container .offset-by-seven,
|
|
.container .offset-by-eight,
|
|
.container .offset-by-nine,
|
|
.container .offset-by-ten,
|
|
.container .offset-by-eleven,
|
|
.container .offset-by-twelve,
|
|
.container .offset-by-thirteen,
|
|
.container .offset-by-fourteen,
|
|
.container .offset-by-fifteen { margin-left: 0; }
|
|
|
|
}
|
|
|
|
|
|
/* #Mobile (Landscape)
|
|
================================================== */
|
|
|
|
/* Note: Design for a width of 480px */
|
|
|
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
|
|
.only-wide { display: none;}
|
|
.container { width: 420px; }
|
|
.container .columns,
|
|
.container .column { padding-left: 0; padding-right: 0; }
|
|
|
|
.row-fluid [class*="span"] { width: 96%; margin-left: 2%;}
|
|
|
|
.row-fluid [class*="offset"], .row-fluid [class*="offset"]:first-child { margin-left: 2%; }
|
|
|
|
.container .one.column,
|
|
.container .one.columns,
|
|
.container .two.columns,
|
|
.container .three.columns,
|
|
.container .four.columns,
|
|
.container .five.columns,
|
|
.container .six.columns,
|
|
.container .seven.columns,
|
|
.container .eight.columns,
|
|
.container .nine.columns,
|
|
.container .ten.columns,
|
|
.container .eleven.columns,
|
|
.container .twelve.columns,
|
|
.container .thirteen.columns,
|
|
.container .fourteen.columns,
|
|
.container .fifteen.columns,
|
|
.container .sixteen.columns,
|
|
.container .one-third.column,
|
|
.container .two-thirds.column { width: 420px; }
|
|
}
|
|
|
|
|
|
/* #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;
|
|
} |