Code refactoring for America

README.md

A code example from updates to the Code for America site, demonstrating how the complexity has been passed from the HTML to the CSS.

Explanation: http://adactio.com/journal/7276/

CSS

/* (Just a few examples) */

/* old */ .profile-small,
/* new */ .profile-grid > li {
    background-image: none;
    border-radius: 2px;
    border: 1px solid #e0dede;
    margin: 60px 0 16px 0;
    padding: 60px 0 0 0;
    position: relative;
    text-align: center;
}

/* old */ .profile-small .profile-photo,
/* new */ .profile-grid > li > img {
    border: 6px solid white; /* Adds a gap round the gray border */
    border-radius: 100px;
    height: 80px;
    left: 50%;
    margin-left: -46px; /* Half the width of the image and border */
    position: absolute;
    top: -45px;
    width: 80px;
}

/* old */ .profile-small .profile-name,
/* new */ .profile-grid > li > h3 {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 4px;
}

/* old */ .profile-small .link-more,
/* new */ .profile-grid > li > a {
    border-bottom: 1px solid transparent;
    color: #cf1b41;
    display: inline-block;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

/* old */ .list-social li,
/* new */ .profile-grid > li > ul li a {
    background-image: url("../images/sprite-20x20-social.png");
    background-position: 7px -38px;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    text-indent: -9999px;
    vertical-align: text-bottom;
}

/* old */ .list-social .social-twitter,
/* new */ .profile-grid > li > ul a[href*="twitter."] {
    background-position: -174px -38px;
}

/* old */ .list-social .social-twitter:hover,
         .list-social .social-twitter:focus,
         .list-social .social-twitter:active,
/* new */ .profile-grid > li > ul a[href*="twitter."]:hover,
         .profile-grid > li > ul a[href*="twitter."]:focus,
         .profile-grid > li > ul a[href*="twitter."]:active {
    background-position: -174px 2px;
}

New HTML

<ul class="profile-grid">

    <li>
        <h3>Cyd Harrell</h3>
        <img src="/../_media/images/avatar-cyd-harrell.jpg" />
        <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. <a href="#">Before its acquisition in June 2012</a>, she was VP of UX Research at Bolt Peters in San Francisco. </p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://cydharrell.com/">Website</a></li>
            <li><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
            <li><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
        </ul>
    </li>
    
    <li>
        <h3>Michal Migurski</h3>
        <img src="/../_media/images/avatar-michal-migurski.jpg" />
        <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="http://mike.teczno.com/">Website</a></li>
            <li><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
            <li><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
            <li><a href="https://github.com/migurski">GitHub</a></li>
            <li><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
        </ul>
    </li>

    <li>
        <h3>Dana Oshiro</h3>
        <img src="/../_media/images/avatar-dana-oshiro.jpg" />
        <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
        <a href="#">More</a>
        <ul>
            <li><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
            <li><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
            <li><a href="http://facebook.com/danaoshiro">Facebook</a></li>
            <li><a href="https://github.com/danaoshiro">Github</a></li>
        </ul>
    </li>

</ul>

Old HTML

<ul class="layout-grid">

    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Cyd Harrell</h3>
            <img class="u-photo profile-photo" src="/../_media/images/avatar-cyd-harrell.jpg" />
            <div class="p-note profile-note">
                <p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco. </p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://cydharrell.com/">Website</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
                </ul>    
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>
    
    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Michal Migurski</h3>
            <img class="u-photo profile-photo" src="/../_media/images/avatar-michal-migurski.jpg" />
            <div class="p-note profile-note">
                <p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-website"><a href="http://mike.teczno.com/">Website</a></li>
                    <li class="social-twitter"><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
                    <li class="social-linkedin"><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
                    <li class="social-github"><a href="https://github.com/migurski">GitHub</a></li>
                    <li class="social-flickr"><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
                </ul>     
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>

    <li class="layout-crotchet">
        <div class="h-card profile-small">
            <h3 class="p-name profile-name">Dana Oshiro</h3>
            <img class="u-photo profile-photo" src="/../_media/images/avatar-dana-oshiro.jpg" />
            <div class="p-note profile-note">
                <p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
                <p><a class="link-more" href="#">More</a></p>
                <ul class="list-social list-social-horizontal">
                    <li class="social-twitter"><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
                    <li class="social-linkedin"><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
                    <li class="social-facebook"><a href="http://facebook.com/danaoshiro">Facebook</a></li>
                    <li class="social-github"><a href="https://github.com/danaoshiro">Github</a></li>
                </ul>      
            </div><!-- .note -->
        </div><!-- .vcard -->
    </li>

</ul>