Foundation 5.5.0 Development Page

by Charles Butler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<a class="social-button facebook"><span class="facebook"><i class="fa fa-fw fa-facebook"></i></span>Log in with Facebook</a>

<a class="social-button twitter">Log in with Facebook</a>

<!-- Footer Top -->
<div class="footer-top">
    <div class="row">
        <div class="large-12 columns"></div>
    </div>
</div>
<!-- Footer Middle -->
<div class="footer-middle">
    <div class="row">
        <div class="large-4 medium-6 small-12 columns">
            	<h4>Corporate Offices</h4>

            <ul class="credentials">
                <li class="tel"><i class="fa fa-fw fa-phone"></i>+333 777-2000</li>
                <li class="address"><i class="fa fa-fw fa-map-marker"></i> 23 Corporate Woods Blvd, Rochester NY 12137</li>
                <li class="fax"><i class="fa fa-fw fa-phone"></i>+333 777-2010</li>
                <li class="email"><i class="fa fa-fw fa-envelope-o"></i> corporate@inception</li>
            </ul>
        </div>
        <div class="large-4 medium-6 small-12 columns">
            	<h4>Regional Offices</h4>

            <ul class="credentials">
                <li class="tel"><i class="fa fa-fw fa-phone"></i>+888 677-2000</li>
                <li class="address"><i class="fa fa-fw fa-map-marker"></i> 555 Technology Drive, Albany NY 12137</li>
                <li class="fax"><i class="fa fa-fw fa-phone"></i>+888 677-2010</li>
                <li class="email"><i class="fa fa-fw fa-envelope-o"></i> regional@inception</li>
            </ul>
        </div>
        <div class="large-4 medium-12 small-12 columns">
           ...

CSS

body {
    padding: 0px;
}
/*----------------------------------------
	Footer Top (class="footer-top")
------------------------------------------*/
 .footer-top {
    width: 100%;
    margin: 0 auto;
    background: #222222;
    padding: 10px 0;
}
/*----------------------------------------
	Footer Middle (class="footer-middle")
------------------------------------------*/
 .footer-middle {
    width: 100%;
    margin: 0 auto;
    background: #1b1b1b;
    padding: 60px 0;
}
.footer-middle ul.credentials {
    list-style: none;
    margin-left:0;
    color:#888;
    font-size: 0.72rem;
}
.footer-middle ul.credentials li.tel {
    list-style: none;
    font-size: 1.6rem;
    margin-left:0;
    font-weight: bold;
    color: #efefef;
}
.footer-middle h4 {
    color: #444;
    font-size: 1.1rem;
}
.footer-middle p {
    font-size: 0.72rem;
    color: #888;
}
/*----------------------------------------
	Footer Bottom (class="footer-bottom")
------------------------------------------*/
 .footer-bottom {
    width: 100%;
    margin: 0 auto;
    background: #131517;
    padding: 20px 0 0px 0;
}
.footer-bottom p.copyright {
    font-size: 0.7625rem;
    color: #888;
    padding: 6px;
    margin-bottom: 2px;
    letter-spacing: 1px;
    font-variant:small-caps;
    font-weight: bold;
}
.footer-bottom ul.list-left {
    list-style-type: none;
    font-size: 0.7625rem;
    padding: 0;
    margin: 0;
}
.footer-bottom ul.list-left li {
    display: inline
}
.footer-bottom ul.list-left li a {
    font-weight: bold;
    font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    color: #888;
    padding: 6px;
    font-variant:small-caps;
}
.footer-bottom ul.list-left li:first-child {
    display: block;
}
.footer-bottom ul.list-left li a:hover {
    color: #ccc;
}
.footer-bottom ul.list-social {
    display: block;
    margin: 0;
    padding:0;
}
.footer-bottom ul.list-social:before {
    display: block;
    content:"Join Us Online";
    font-size: 1.1rem;
    color:...

JavaScript

$(document).foundation();