Skip to content

Instantly share code, notes, and snippets.

@nissoh
Created March 19, 2012 19:29
Show Gist options
  • Save nissoh/2125310 to your computer and use it in GitHub Desktop.
Save nissoh/2125310 to your computer and use it in GitHub Desktop.
CSS: Startup css
/* =============================================================================
==== Reset / Preset ====
========================================================================== */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:hover,a:active{outline:0;}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;}
button,input{*overflow:visible;line-height:normal;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#333333;background-color:#ffffff;}
a{color:#0088cc;text-decoration:none;}
a:hover{color:#005580;text-decoration:underline;}
:focus { outline : 0; }
::selection { color : #fff; background : #b8e4ea; }
::-moz-selection { color : #fff; background : #b8e4ea; }
::-webkit-selection { color : #fff; background : #b8e4ea; }
table { border-collapse: collapse; border-spacing: 0; width:100%; }
/* forms UI */
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
label { cursor: pointer; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
button, input { line-height: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; padding: 0; vertical-align: middle; *vertical-align: middle; }
button, .btn {
position:relative;
padding: 3px 8px;
cursor:pointer;
outline:0 none;
background-repeat:no-repeat;
text-decoration:none;
font-size:11px;
font-weight: bold;
text-align:center;
white-space: pre-line;
border:1px solid;
border-color:#c19d2f;
color: #a46b07;
background-color: #f8f8f0;
background-image: url("../images/btn.png");
background-position:left center;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 0px 0px 1px #fff inset;
-moz-box-shadow: 0px 0px 0px 1px #fff inset;
box-shadow: 0px 0px 0px 1px #fff inset;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
button:active, .btn:active, button.active {
background-color:#f1f1f1;
border-color:#b2b2b2 #c7c7c7 #c7c7c7 #b2b2b2;
-webkit-box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1);
}
button:active, .btn:active, button.active { top:1px;}
/* =============================================================================
extras
========================================================================== */
/* Typography */
h1, h2, h3, h4 {font-weight:normal;}
h1 {font-size:3em;line-height:1;}
h3 {font-size:1.5em;line-height:1;}
h4 {font-size:1.2em;line-height:1.25;}
h5 {font-size:1em;font-weight:bold;}
h6 {font-size:1em;font-weight:bold;}
.hugeF {font-size: 3em;}
.bigF {font-size: 2em;}
.medF {font-size: 1.5em;}
.normalF {font-size: 1.2em;}
.smallF {font-size: 1em;}
.greenColor { color:#547a2f;}
.blueColor { color: #036eb2;}
/* Icons */
[class^="icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../css/img/glyphs.png");
background-repeat: no-repeat;
}
[class^="icon-"]:last-child {
*margin-left: 0;
}
/* Center Align container */
.cc {display:table;overflow:hidden;margin:0px auto; height: 100%; }
.ccc {display:table-cell;vertical-align: middle;}
*:first-child+html .cc {position:relative;}/*ie7*/
*:first-child+html .ccc {position:absolute;top:50%;}/*ie7*/
*:first-child+html .c_content {position:relative;top:-50%;}/*ie7*/
/*
===== Primary Styles ========================================================
Author: Nissan Hanina
==========================================================================
*/
/* =============================================================================
Customized Grid System
========================================================================== */
.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";}
.row:after{clear:both;}
[class*="que"]{float:left;margin-left:20px;}
.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px;}
.gridMB { margin-bottom: 20px; margin-top: 10px; }
.que12{width:940px;}
.que11{width:860px;}
.que10{width:780px;}
.que9{width:700px;}
.que8{width:620px;}
.que7{width:540px;}
.que6{width:460px;}
.que5{width:380px;}
.que4{width:300px;}
.que3{width:220px;}
.que2{width:140px;}
.que1{width:60px;}
.offset12{margin-left:980px;}
.offset11{margin-left:900px;}
.offset10{margin-left:820px;}
.offset9{margin-left:740px;}
.offset8{margin-left:660px;}
.offset7{margin-left:580px;}
.offset6{margin-left:500px;}
.offset5{margin-left:420px;}
.offset4{margin-left:340px;}
.offset3{margin-left:260px;}
.offset2{margin-left:180px;}
.offset1{margin-left:100px;}
.row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";}
.row-fluid:after{clear:both;}
.row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574%;*margin-left:2.0744680846382977%;}
.row-fluid [class*="que"]:first-child{margin-left:0;}
.row-fluid .que12{width:99.99999998999999%;*width:99.94680850063828%;}
.row-fluid .que11{width:91.489361693%;*width:91.4361702036383%;}
.row-fluid .que10{width:82.97872339599999%;*width:82.92553190663828%;}
.row-fluid .que9{width:74.468085099%;*width:74.4148936096383%;}
.row-fluid .que8{width:65.95744680199999%;*width:65.90425531263828%;}
.row-fluid .que7{width:57.446808505%;*width:57.3936170156383%;}
.row-fluid .que6{width:48.93617020799999%;*width:48.88297871863829%;}
.row-fluid .que5{width:40.425531911%;*width:40.3723404216383%;}
.row-fluid .que4{width:31.914893614%;*width:31.8617021246383%;}
.row-fluid .que3{width:23.404255317%;*width:23.3510638276383%;}
.row-fluid .que2{width:14.89361702%;*width:14.8404255306383%;}
.row-fluid .que1{width:6.382978723%;*width:6.329787233638298%;}
.container{margin-right:auto;margin-left:auto;*zoom:1;}.container:before,.container:after{display:table;content:"";}
.container:after{clear:both;}
.container-fluid{padding-right:20px;padding-left:20px;*zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";}
.container-fluid:after{clear:both;}
@media (max-width:480px)
{.nav-collapse{-webkit-transform:translate3d(0, 0, 0);} .page-header h1 small{display:block;line-height:18px;} input[type="checkbox"],input[type="radio"]{border:1px solid #ccc;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:10px;padding-right:10px;} .modal{position:absolute;top:10px;left:10px;right:10px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;margin:-10px;} .carousel-caption{position:static;}}
@media (max-width:767px)
{body{padding-left:20px;padding-right:20px;} .navbar-fixed-top,.navbar-fixed-bottom{margin-left:-20px;margin-right:-20px;} .container-fluid{padding:0;} .dl-horizontal dt{float:none;clear:none;width:auto;text-align:left;} .dl-horizontal dd{margin-left:0;} .container{width:auto;} .row-fluid{width:100%;} .row,.thumbnails{margin-left:0;} [class*="que"],.row-fluid [class*="que"]{float:none;display:block;width:auto;margin-left:0;} .input-large,.input-xlarge,.input-xxlarge,input[class*="que"],select[class*="que"],textarea[class*="que"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} .input-prepend input,.input-append input,.input-prepend input[class*="que"],.input-append input[class*="que"]{display:inline-block;width:auto;}}
@media (min-width:768px) and (max-width:979px)
{.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="que"]{float:left;margin-left:20px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px;} .que12{width:724px;} .que11{width:662px;} .que10{width:600px;} .que9{width:538px;} .que8{width:476px;} .que7{width:414px;} .que6{width:352px;} .que5{width:290px;} .que4{width:228px;} .que3{width:166px;} .que2{width:104px;} .que1{width:42px;} .offset12{margin-left:764px;} .offset11{margin-left:702px;} .offset10{margin-left:640px;} .offset9{margin-left:578px;} .offset8{margin-left:516px;} .offset7{margin-left:454px;} .offset6{margin-left:392px;} .offset5{margin-left:330px;} .offset4{margin-left:268px;} .offset3{margin-left:206px;} .offset2{margin-left:144px;} .offset1{margin-left:82px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.762430939%;*margin-left:2.709239449638298%;} .row-fluid [class*="que"]:first-child{margin-left:0;} .row-fluid .que12{width:99.999999993%;*width:99.9468085036383%;} .row-fluid .que11{width:91.436464082%;*width:91.38327259263829%;} .row-fluid .que10{width:82.87292817100001%;*width:82.8197366816383%;} .row-fluid .que9{width:74.30939226%;*width:74.25620077063829%;} .row-fluid .que8{width:65.74585634900001%;*width:65.6926648596383%;} .row-fluid .que7{width:57.182320438000005%;*width:57.129128948638304%;} .row-fluid .que6{width:48.618784527%;*width:48.5655930376383%;} .row-fluid .que5{width:40.055248616%;*width:40.0020571266383%;} .row-fluid .que4{width:31.491712705%;*width:31.4385212156383%;} .row-fluid .que3{width:22.928176794%;*width:22.874985304638297%;} .row-fluid .que2{width:14.364640883%;*width:14.311449393638298%;} .row-fluid .que1{width:5.801104972%;*width:5.747913482638298%;} input,textarea,.uneditable-input{margin-left:0;} input.que12, textarea.que12, .uneditable-input.que12{width:714px;} input.que11, textarea.que11, .uneditable-input.que11{width:652px;} input.que10, textarea.que10, .uneditable-input.que10{width:590px;} input.que9, textarea.que9, .uneditable-input.que9{width:528px;} input.que8, textarea.que8, .uneditable-input.que8{width:466px;} input.que7, textarea.que7, .uneditable-input.que7{width:404px;} input.que6, textarea.que6, .uneditable-input.que6{width:342px;} input.que5, textarea.que5, .uneditable-input.que5{width:280px;} input.que4, textarea.que4, .uneditable-input.que4{width:218px;} input.que3, textarea.que3, .uneditable-input.que3{width:156px;} input.que2, textarea.que2, .uneditable-input.que2{width:94px;} input.que1, textarea.que1, .uneditable-input.que1{width:32px;}}
@media (min-width:1200px)
{.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="que"]{float:left;margin-left:30px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .que12{width:1170px;} .que11{width:1070px;} .que10{width:970px;} .que9{width:870px;} .que8{width:770px;} .que7{width:670px;} .que6{width:570px;} .que5{width:470px;} .que4{width:370px;} .que3{width:270px;} .que2{width:170px;} .que1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564%;*margin-left:2.510911074638298%;} .row-fluid [class*="que"]:first-child{margin-left:0;} .row-fluid .que12{width:100%;*width:99.94680851063829%;} .row-fluid .que11{width:91.45299145300001%;*width:91.3997999636383%;} .row-fluid .que10{width:82.905982906%;*width:82.8527914166383%;} .row-fluid .que9{width:74.358974359%;*width:74.30578286963829%;} .row-fluid .que8{width:65.81196581200001%;*width:65.7587743226383%;} .row-fluid .que7{width:57.264957265%;*width:57.2117657756383%;} .row-fluid .que6{width:48.717948718%;*width:48.6647572286383%;} .row-fluid .que5{width:40.170940171000005%;*width:40.117748681638304%;} .row-fluid .que4{width:31.623931624%;*width:31.5707401346383%;} .row-fluid .que3{width:23.076923077%;*width:23.0237315876383%;} .row-fluid .que2{width:14.529914530000001%;*width:14.4767230406383%;} .row-fluid .que1{width:5.982905983%;*width:5.929714493638298%;} input,textarea,.uneditable-input{margin-left:0;} input.que12, textarea.que12, .uneditable-input.que12{width:1160px;} input.que11, textarea.que11, .uneditable-input.que11{width:1060px;} input.que10, textarea.que10, .uneditable-input.que10{width:960px;} input.que9, textarea.que9, .uneditable-input.que9{width:860px;} input.que8, textarea.que8, .uneditable-input.que8{width:760px;} input.que7, textarea.que7, .uneditable-input.que7{width:660px;} input.que6, textarea.que6, .uneditable-input.que6{width:560px;} input.que5, textarea.que5, .uneditable-input.que5{width:460px;} input.que4, textarea.que4, .uneditable-input.que4{width:360px;} input.que3, textarea.que3, .uneditable-input.que3{width:260px;} input.que2, textarea.que2, .uneditable-input.que2{width:160px;} input.que1, textarea.que1, .uneditable-input.que1{width:60px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
/* =============================================================================
Non-Semantic Helper Classes
========================================================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment