Listings
by ritcheyer
HTML
<div style="width: 320px;">
<div class="listing-group listing-group-slim">
<h3 class="listing-title">Recent Searches</h3>
<div itemscope="" itemtype="http://schema.org/SingleFamilyResidence/RealEstate" class="listing listing-compact group">
<a href="#" title="Homes for Sale in San Jose, CA" class="listing-photo">
<img src="http://placehold.it/40x30/" alt="" width="40" height="30">
</a>
<ul class="listing-summary">
<li class="listing-location" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<a href="#" title="Homes for Sale in San Jose, CA">
<b itemprop="streetAddress" class="ellipsis">
<span class="listing-city" itemprop="addressLocality">San Jose,</span>
<span class="listing-region" itemprop="addressRegion">CA</span>
</b>
<p class="listing-meta ellipsis">
<span class="listing-property-type">Single Family Homes,</span>
<span class="listing-beds">3 Bd, </span>
<span class="listing-baths">3.5 Ba</span>
</p>
</a>
</li>
<li class="listing-meta listing-save pull-right">
<span><strong><a href="/path/to/save/this/listing" title="Save this Search" class="icon icon-fav-sm saveListing">Save</a></strong></span>
</li>
</ul>
</div>
<div itemscope="" itemtype="http://schema.org/SingleFamilyResidence/RealEstate" class="listing listing-compact group">
<a href="#" title="Homes for Sale in San Jose, CA" class="listing-photo">
<img src="http://placehold.it/40x30/" alt="" width="40" height="30">
</a>
<ul class="listing-summary">
<li...CSS
/* ----------------------------------------------------------
Title: foundation.css
Description: Within this file, you will find our site(s)-
wide reset, typography, base widget styling,
Versions:
- 0.1 - 2011-03-08 - Initial Creation and Development
- 0.2 - 2012-02-07 - Adding box-sizing per Paul Irish
Author(s)/Editor(s):
- Eric Ritchey <[email protected]>
- Nick Cairns <[email protected]>
- Jason Burachenski <[email protected]>
---------------------------------------------------------- */
/* 1. Reset ------------- */
/* apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* http://maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased;}
body, div,
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, pre, code,
form, fieldset, legend, input, button, textarea, blockquote,
table, thead, tfoot, tbody, th, td, caption { margin: 0; padding: 0; }
article, aside, footer, header, hgroup, nav, section {display: block;}
body {
font: normal 62.5%/1.5 Helvetica, Arial, sans-serif;
color: #444;
}
iframe { background-color: transparent; border: 0; }
p { margin: 0 0 10px 0; font-size: 120%; }
a { color: #0369b2; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }
/* Default Styling for Typographical Goodness */
h1,h2,h3,h4,h5,h6 { margin: 0; } /* explicitly need to setup margin with classes */
h1,h2 { font-weight: normal;}
h4 { font-size: 120%;}
fieldset { border: 0; }
em,i { font-style: normal; }
input[type="text"], select, textarea {
border: 1px solid #000;
padding: 2px;
width: 150px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: ...