Skip to content

Instantly share code, notes, and snippets.

@maban

maban/CSS

Last active August 29, 2015 14:05
Show Gist options
  • Save maban/1cec608913e66c2bb300 to your computer and use it in GitHub Desktop.
Save maban/1cec608913e66c2bb300 to your computer and use it in GitHub Desktop.
Download ZIP
Code refactoring for America
Raw
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/

Raw
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;
}
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment