Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/dabblet.css

Created August 15, 2012 07:42
Show Gist options
  • Save mr-stezz/3357418 to your computer and use it in GitHub Desktop.
Save mr-stezz/3357418 to your computer and use it in GitHub Desktop.
Download ZIP
search new vehicles list
Raw
dabblet.css
/* search new vehicles list */
/* -----------------------------
$GLOBAL
-------------------------------- */
*{
box-sizing:border-box;
padding:0;
margin:0;
}
html{
min-height:100%;
overflow-y:scroll;
}
body{
/* sets the base font-size to 13 and line-height to 22 */
font:81.25%/1.6923076923076923 sans-serif;
color:#666;
margin:0;
}
/*-- vertical rhythm --*/
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
.img{
margin-bottom:1.6923076923076923em; /* 22px = base line-height */
}
/*-- anchors --*/
a:focus{
outline:thin dotted;
}
a:hover,
a:active{
outline:0;
}
a{
text-decoration:none;
color:#353978;
-webkit-tap-highlight-color:rgba(53,57,120,.5);
}
a:hover{
color:#000;
}
/*-- headings --*/
h1,h2,h3,h4,h5,h6,
.heading{
font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans-serif;
/* font size adjust - 0.488 x 13 = 6.344 | lowercase x-height = 6.344px */
font-size-adjust:0.488;
color:#333;
}
h3,.gamma{
font-weight:300;
font-size:1.3846153846153846em;
line-height:1.4444444444444444;
margin-bottom:0.2222222222222222em;
}
/* header styling */
.emphasis{
font-weight:bold;
text-transform:uppercase;
}
/* morph spans into headings */
.heading,
.link-heading{
display:block;
}
.link-heading{
font-weight:bold;
color:#333;
}
.link-heading:hover{
color:#000;
}
/* style text abstractions */
small,
.mili{
font-size:0.8461538461538461em;
line-height:1.8181818181818181;
}
.muted{
color:#999;
}
/*-- lists --*/
ul,ol{
padding:0;
}
ul,ol,
dd{
margin-left:1.6923076923076923em;
}
li > ul,
li > ol{
margin-bottom:0;
}
/*--- unordered list ---*/
ul{
list-style:square;
list-style-position:inside;
}
ul.unstyled-list{
list-style:none;
margin-left:0;
}
ul.disc-list{
list-style-type:disc;
}
ul.numbered-list{
list-style:decimal outside;
}
/*--- ordered list ---*/
ol{
list-style:decimal;
}
/*--- definition list ---*/
dl{
margin-bottom:1.6923076923076923em;
}
dt{
font-weight:bold;
}
/*--- menu list ---*/
menu{
list-style:none;
margin-bottom:1.6923076923076923em;
}
menu > li{
text-align:center;
}
/* -----------------------------
$MISC
-------------------------------- */
/* push semantic, otherwise uneeded text offpage */
.accessibility{
position:absolute;
left:-769.1538461538462em;
}
/* push text off to replace with image */
.img-replace,
.btn-search,
span[class*="brand-"]{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
/* hide elements */
.hidden{
display:none;
}
/* micro clearfix */
.cf:before,
.cf:after{
content:" ";
display:table;
}
.cf:after{clear:both;}
.fl{float:left;}
.fr{float:right;}
.tl{text-align:left;}
.tr{text-align:right;}
.tc{text-align:center;}
/* -----------------------------
$LAYOUT
-------------------------------- */
/* boundaries */
.row:before,
.row:after{
content:"";
display:table;
}
.row:after{
clear:both;
}
.row{
max-width:75.6923076923077em;
position:relative;
margin:0 auto 0.8461538461538461em auto;
}
.row .row{
width:auto;
max-width:none;
min-width:0;
margin:0 -0.9230769230769231em;
}
/*-- island object --*/
.island,
.islet{
float:left;
padding:0 0.9230769230769231em;
}
/*-- splitter object --*/
/* side-by-side content */
.split{
text-align:right;
}
.term{
float:left;
clear:left;
}
/*-- typical nav abstraction --*/
/* As per csswizardry.com/2011/09/the-nav-abstraction */
.nav{
list-style:none;
/* margin-left:0; disabled for the sake of this demo */
}
.nav > li,
.nav a{
display:inline-block;
vertical-align:vertical-align;
}
/*-- segregate each list item --*/
.segregated > li{
display:inline;
}
.segregated > li:after{
content:' - ';
color:#888;
}
.segregated > li:last-child:after{
content:'';
}
/*-- stacked nav --*/
/* List a stacked nav, having items on top of eachother */
.stacked > li{
display:list-item;
}
.stacked a{
display:block;
}
/*-- media object --*/
.media{
display:block;
}
.complementary{
float:left;
margin-right:0.9230769230769231em;
}
/* Reversed image location */
.complementary.reverse{
float:right;
margin-left:0.9230769230769231em;
}
img.complementary,
.complementary img{
display:block;
}
.body{
overflow:hidden;
}
.body > :last-child{
margin-bottom:0;
}
/*-- sprite object --*/
.s{
background-image:url(../img/ui/list-sprites.png);
display:inline-block;
width:1.2307692307692308em;
height:1.2307692307692308em;
/* Hide text */
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
/*-- block anchor object --*/
.block:before,
.block:after{
content:"";
display:table;
}
.block:after{
clear:both;
}
.block{
display:block;
width:100%;
position:relative;
color:#666;
border-radius:0.23076923076923078em;
padding:0.46153846153846156em;
}
.block:hover{
background-color:rgba(0,0,0,.08);
}
.block > :last-child{
margin-bottom:0;
}
.pressable.block{
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.15),
0 2px 2px rgba(0,0,0,.04);
}
/* -----------------------------
$STRUCTURE
-------------------------------- */
/*-- listing object --*/
.listing{
margin-bottom:1.6923076923076923em;
}
.snapshot{
margin-bottom:0.8461538461538461em;
}
.snapshot .img,
.snapshot .body{
max-height:6.153846153846154em;
}
.snapshot .img{
margin-bottom:0;
}
.snapshot span,
.snapshot p{
display:block;
overflow:hidden;
text-overflow:ellipsis;
}
.snapshot span{
max-height:1.6923076923076923em;
white-space:nowrap;
}
.snapshot p{
max-height:3.3846153846153846em;
}
.profile .img{
display:block;
margin:0 auto;
}
.profile span{
display:block;
width:100%;
max-height:1.6923076923076923em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-weight:bold;
text-align:center;
}
/*-- search new vehicles layout --*/
.search-new-stock,
.search-used-stock{
margin-bottom:1.6923076923076923em;
}
.search-new-stock > .islet{
width:100%;
padding-top:1.6923076923076923em;
}
.search-new-stock > .listing + .listing{
border-top:1px solid #efefef;
}
.search-new-stock .img{
margin-bottom:0;
}
.vehicle-description > .island.vehicle-derivative{
width:75%;
}
.vehicle-description > .island.vehicle-price{
width:25%;
}
.vehicle-description > .island.vehicle-notice {width:100%;}
.vehicle-info > .island{
width:33.333%;
}
.vehicle-info dl{
margin-bottom:0;
}
.vehicle-info dd{
margin-bottom:4px;
}
/* search used vehicles */
.profile .img{
display:block;
margin:0 auto;
}
.search-used-stock .img{
min-height:12em;
}
.search-used-stock .vehicle-model{
font-weight:bold;
}
.search-used-stock .vehicle-location{
text-transform:uppercase;
}
.search-used-stock .emissions-rating{
float:left;
margin-right:3.1538461538461537em;
margin-bottom:0;
}
.search-used-stock .mgp{
color:#000;
}
.search-used-stock .segregated{
height:44px;
overflow:hidden;
margin:0;
}
.search-used-stock li{
-webkit-hyphens:manual;
-epub-hyphens:manual;
-moz-hyphens:manual;
hyphens:manual;
white-space:normal;
}
.featured-used-stock > .islet{
width:50%;
}
.new-brands-list > .islet,
.new-vehicle-list > .islet,
.new-vehicle-stock > .islet,
.used-vehicle-stock > .islet,
.search-used-stock > .islet,
.favourites-list > .islet,
.recently-viewed > .islet{
width:25%;
}
.non-brands-list > .islet{
width:16.6667%;
}
/*-- emissions rating --*/
.car-emissions{
overflow:hidden;
background-color:transparent;
background-image:-webkit-linear-gradient(left,rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%);
background-image:-moz-linear-gradient(left,rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%);
background-image:-o-linear-gradient(left,rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%);
background-image:linear-gradient(to right,rgba(0,0,0,.15) 50%,rgba(0,0,0,0) 100%);
border-radius:0.23076923076923078em;
margin:0.46153846153846156em 0;
}
.car-emissions span{
display:inline;
font-weight:bold;
line-height:2.1538461538461537;
}
.emissions-rating{
display:inline-block;
height:2.1538461538461537em;
position:relative;
font-weight:bold;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);
background-color:#bdd72f;
border-radius:0.23076923076923078em 0 0 0.23076923076923078em;
margin-right:1.2307692307692308em;
margin-bottom:0.46153846153846156em;
}
.emissions-rating:after{
content:"";
width:0;
height:0;
position:absolute;
top:0;
left:100%;
font-size:0;
line-height:0;
border-bottom:14px solid transparent;
border-top:14px solid transparent;
border-left:14px solid #bdd72f;
}
.emissions-rating span{
font-size:1.3846153846153846em;
line-height:1.5;
padding:0 0.3333333333333333em;
}
.emissions-rating.mini{
display:inline-block;
height:14px;
line-height:12px;
}
.emissions-rating.mini > span{
font-size:11px;
padding:0 3px;
}
.emissions-rating.mini:after{
border-width:7px;
}
.emissions-rating.big{
display:inline;
}
.emissions-rating.big > span{
font-size:14px;
}
.emissions-rating.big:after{
top:0;
border-width:7px;
}
.band-A{background-color:#00a44f;}
.band-A:after{border-left-color:#00a44f;}
.band-B,
.band-C{background-color:#52b74a;}
.band-B:after,
.band-C:after{border-left-color:#52b74a;}
.band-D,
.band-E{background-color:#bdd72f;color:#333;}
.band-D:after,
.band-E:after{border-left-color:#bdd72f;}
.band-F,
.band-G{background-color:#fcf100;color:#333;}
.band-F:after,
.band-G:after{border-left-color:#fcf100;}
.band-H,
.band-I{background-color:#fcb713;color:#333;}
.band-H:after,
.band-I:after{border-left-color:#fcb713;}
.band-J,
.band-K{background-color:#f27022;}
.band-J:after,
.band-K:after{border-left-color:#f27022;}
.band-L,
.band-M{background-color:#ec1b24;}
.band-L:after,
.band-M:after{border-left-color:#ec1b24;}
.band-{background-color:#333;}
.band-:after{border-left-color:#333;}
/* iOS style toggle */
.toggle-box,
.toggle,
.s-toggle-bg,
.s-toggle-slider{
width:3.6923076923076925em;
height:1.8461538461538463em;
position:absolute;
}
/* Need to give our sprites some scope. */
.toggle-box{
display:block;
position:relative;
margin:0 auto 0.15384615384615385em auto;
}
/* Lay an invisible checkbox over our stack of images. */
.toggle{
opacity:0;
cursor:pointer;
margin:0;
padding:0;
}
/* Set up our spriting element. */
.s{
display:inline-block;
background:url(https://dl.dropbox.com/u/2048066/toggle.png);
}
/* Slider sprite. */
.s-toggle-slider{
background-position:1.8461538461538463em -1.8461538461538463em;
}
.toggle-box > .s-toggle-slider{
z-index:-1;
-webkit-transition:0.1s;
-moz-transition:0.1s;
transition:0.1s;
}
/* toggle sprite. */
.toggle-box > .s-toggle-bg{
z-index:-2;
}
/* Move the backgrounds on the images when checked. */
.toggle:checked ~ .s-toggle-bg{
background-position:right top;
}
.toggle:checked ~ .s-toggle-slider{
background-position:left -1.8461538461538463em;
}
/* inline labels */
.vehicle-notice > .label{
margin:6px 0;
}
.label{
display:inline-block;
font-weight:bold;
font-size:11px;
line-height:1.5;
color:#fff;
text-shadow:0 0.1111111111111111em 0 rgba(0,0,0,.2);
text-transform:uppercase;
background-color:#666;
border-radius:0.3333333333333333em;
padding:2px 6px;
}
.label.important{
background-color:#c43c35;
}
@media screen and (max-width:61.4375em){
.row{
max-width:58.76923076923077em;
}
/* list widths */
.search-used-stock > .islet{
width:33.333%;
}
}
@media screen and (max-width:47.6875em){
/*-- brand list --*/
.new-range-list > .islet,
.new-brand-list > .islet,
.review-range-list > .islet{
width:33.333%;
}
.non-brand-list > .islet{
width:25%;
}
.vehicle-description > .island.vehicle-derivative,
.vehicle-description > .island.vehicle-price,
.vehicle-description > .island.vehicle-notice,
.vehicle-info > .island{
width:100%;
}
.vehicle-description > .island.vehicle-price{
text-align:center;
}
}
@media screen and (max-width:36.4375em){
.row{
max-width:100%;
}
.island,
.islet{
float:none;
clear:both;
width:auto;
margin:0 auto;
}
.new-range-list > .islet,
.new-brand-list > .islet,
.non-brand-list > .islet{
float:left;
clear:none;
margin-bottom:1em;
}
.new-range-list > .islet,
.new-brand-list > .islet{
width:50%;
}
.non-brand-list > .islet{
width:33.333%;
}
}
Raw
dabblet.html
<ul class="row nav search-new-stock">
<li class="islet listing media tabular">
<a href="" title="" class="complementary">
<img src="http://placehold.it/160x120" alt="" class="img">
</a>
<div class="body">
<div class="row vehicle-description">
<div class="island vehicle-derivative"><a href="" title="" class="heading gamma">Audi R8 Spyder Special Editions 5.2 FSI Quattro GT 2dr R Tronic</a></div>
<div class="island vehicle-price"><span class="heading gamma tr">&pound;157,090</span><span class="heading mili muted tr">inc. VAT</span></div>
<div class="island vehicle-notice"><span class="label important">Arrives March 2012</span></div>
</div>
<div class="row vehicle-info">
<div class="island vehicle-specs">
<dl class="split">
<dt class="term">Fuel</dt>
<dd>Petrol</dd>
<dt class="term">Transmission:</dt>
<dd>Manual</dd>
<dt class="term">Gears:</dt>
<dd>6</dd>
</dl>
</div>
<div class="island performance">
<dl class="split">
<dt class="term">CO<sub>2</sub></dt>
<dd><div class="emissions-rating big band-M"><span>M</span></div>332 <small>g/km</small> <span class="mili muted">(19.9 mpg)</span></dd>
<dt class="term">Power:</dt>
<dd>560 PS <span class="mili muted">(552 BHP)</span></dd>
<dt class="term">Engine Size:</dt>
<dd>5.2</dd>
</dl>
</div>
<div class="island cosmetic">
<dl class="split">
<dt class="term">Doors:</dt>
<dd>2</dd>
<dt class="term">Body:</dt>
<dd>Convertible</dd>
<dt class="term"></dt>
<dd></dd>
</dl>
</div>
</div>
</div>
</li>
</ul>
<ul class="row nav search-used-stock">
<li class="islet listing profile">
<a href="" title="" class="pressable block">
<img src="http://placehold.it/210x156" alt="" class="img">
<div class="body">
<span class="heading gamma tc vehicle-range">SEAT Leon</span>
<span class="heading tc vehicle-model">1.9 TDI SE 5dr</span>
<span class="heading tc vehicle-derivative">&pound;125,000 &ndash; 21,000 miles</span>
<span class="heading mili muted tc vehicle-location muted">Birmingham Audi</span>
</div>
<div class="car-emissions band-E" title="">
<div class="emissions-rating band-E">
<span>E</span>
<small>135 g/km</small>
</div>
<span class="mgp">56.5 mgp</span>
</div>
<ul class="nav segregated">
<li>2010 ‘10’</li>
<li>Phantom Black Pearl Effect</li>
<li>Petrol</li>
<li>2dr</li>
<li>Manual</li>
<li>Convertible</li>
</ul>
</a>
</li>
</ul>
<ul class="row nav featured-used-stock">
<li class="islet media listing snapshot">
<a href="" title="" class="pressable block">
<img src="http://placehold.it/120x80" alt="" class="complementary img">
<div class="body">
<span class="heading emphasis vehicle-model">Audi TT</span>
<span class="meta mili vehicle-derivative">RS Roadster 2.5T FSI TT RS Quattro 2dr</span>
<span class="vehicle-usage-stats">100 miles, Petrol</span>
<span class="vehicle-price">&pound;53,000</span>
</div>
</a>
</li>
</ul>
<ul class="row nav recently-viewed">
<li class="islet listing profile">
<div class="pressable block">
<img src="http://placehold.it/140x95" alt="" class="img">
<div class="body">
<span class="heading tc vehicle-derivative">New Audi R8 5.2 FSI Quattro GT 2dr R Tronic</span>
<span class="heading tc vehicle-price mili muted">from £157,090</span>
<div>
<label class="toggle-box" for="compareMe">
<input type="checkbox" class="toggle" name="HistoryCompareVehicles" id="Checkbox8"><i class="s s-toggle-bg"></i><i class="s s-toggle-slider"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
<!-- this is a new brand list, this will appear when looking for new vehicles -->
<ul class="row nav new-brands-list">
<li class="islet listing profile">
<a href="#" title="" class="pressable block">
<img src="http://placehold.it/175x120" alt="" class="img">
<div class="body">
<span class="">New Audi</span>
</div>
</a>
</li>
</ul>
<ul class="row nav new-vehicle-list">
<li class="islet listing profile">
<a href="#" title="" class="pressable block">
<img src="http://placehold.it/175x120" alt="" class="img">
<div class="body">
<span class="">Audi A1</span>
</div>
</a>
</li>
</ul>
<ul class="row nav non-brands-list">
<li class="islet listing profile">
<a href="" title="" class="pressable block">
<span class="non-brand">Vauxhall</span>
</a>
</li>
</ul>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment