<?xml version="1.0" encoding="UTF-8"?>
 <rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:syn="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/">
  <channel rdf:about="http://pinboard.in">
    <title>Pinboard (sunpig)</title>
    <link>https://pinboard.in/u:sunpig/public/</link>
    <description>recent bookmarks from sunpig</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://css-tricks.com/interview-questions-css/"/>
	<rdf:li rdf:resource="http://alistapart.com/article/quantity-queries-for-css"/>
	<rdf:li rdf:resource="http://engineering.flipboard.com/2015/02/mobile-web/"/>
	<rdf:li rdf:resource="https://grack.com/blog/2015/01/11/css-selectors-4/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/"/>
	<rdf:li rdf:resource="http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/"/>
	<rdf:li rdf:resource="http://css-tricks.com/mega-list-svg-information/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2014/10/16/css-only-solution-for-ui-tracking/"/>
	<rdf:li rdf:resource="http://css-tricks.com/centering-css-complete-guide/"/>
	<rdf:li rdf:resource="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/"/>
	<rdf:li rdf:resource="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06"/>
	<rdf:li rdf:resource="http://csstriggers.com/"/>
	<rdf:li rdf:resource="https://kristopolous.github.io/BOOTSTRA.386/"/>
	<rdf:li rdf:resource="http://csspre.com/variables"/>
	<rdf:li rdf:resource="http://dev.opera.com/articles/css-will-change-property/"/>
	<rdf:li rdf:resource="https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/"/>
	<rdf:li rdf:resource="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/"/>
	<rdf:li rdf:resource="http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/"/>
	<rdf:li rdf:resource="http://www.heydonworks.com/article/tetris-the-power-of-css"/>
	<rdf:li rdf:resource="http://www.kapowaz.net/articles/cargo-cult-css"/>
	<rdf:li rdf:resource="http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/"/>
	<rdf:li rdf:resource="http://benvinegar.github.io/seamless-talk/#/"/>
	<rdf:li rdf:resource="http://brettjankord.com/projects/style-guide-boilerplate/"/>
	<rdf:li rdf:resource="http://philipwalton.github.io/solved-by-flexbox/"/>
	<rdf:li rdf:resource="http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/"/>
	<rdf:li rdf:resource="http://www.the-haystack.com/2013/09/24/responsive-scrollable-tables/"/>
	<rdf:li rdf:resource="http://www.barrelny.com/blog/text-align-justify-and-rwd/"/>
	<rdf:li rdf:resource="http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/"/>
	<rdf:li rdf:resource="http://css-tricks.com/html-for-icon-font-usage/"/>
	<rdf:li rdf:resource="http://gomakethings.com/icon-fonts/"/>
	<rdf:li rdf:resource="http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_overview"/>
	<rdf:li rdf:resource="http://csswizardry.com/2013/04/shame-css/"/>
	<rdf:li rdf:resource="http://www.impressivewebs.com/html-comments-indicate-pseudo-elements/"/>
	<rdf:li rdf:resource="http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/"/>
	<rdf:li rdf:resource="http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images"/>
	<rdf:li rdf:resource="http://taitems.github.com/Front-End-Development-Guidelines/"/>
	<rdf:li rdf:resource="http://philipwalton.com/articles/what-no-one-told-you-about-z-index/"/>
	<rdf:li rdf:resource="http://dev.opera.com/articles/view/native-css-feature-detection-via-the-supports-rule/"/>
	<rdf:li rdf:resource="http://csswizardry.com/2012/11/code-smells-in-css/"/>
	<rdf:li rdf:resource="http://laurakalbag.com/display-none/"/>
	<rdf:li rdf:resource="http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/"/>
	<rdf:li rdf:resource="http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning"/>
	<rdf:li rdf:resource="http://www.slideshare.net/maxdesign/line-height"/>
	<rdf:li rdf:resource="http://joshemerson.co.uk/blog/using-svg-graphics-today/"/>
	<rdf:li rdf:resource="http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow"/>
	<rdf:li rdf:resource="http://palantir.net/blog/responsive-design-s-dirty-little-secret"/>
	<rdf:li rdf:resource="http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/"/>
	<rdf:li rdf:resource="http://www.css-101.org/articles/focus_trick/outline-offset.php"/>
	<rdf:li rdf:resource="http://simurai.com/post/30451824480/media-query-splitting"/>
	<rdf:li rdf:resource="http://bootsnipp.com/"/>
	<rdf:li rdf:resource="http://blog.55minutes.com/2012/04/untangling-the-rails-asset-pipeline-part-4-troubleshooting/"/>
	<rdf:li rdf:resource="http://davidwalsh.name/css-flip"/>
	<rdf:li rdf:resource="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml"/>
	<rdf:li rdf:resource="https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI"/>
	<rdf:li rdf:resource="http://charliepark.org/css-only-sticky-headers/"/>
	<rdf:li rdf:resource="http://omgninjas.net/2012/09/01/quick-tip-easily-create-single-page-applications-with-sprockets/"/>
	<rdf:li rdf:resource="http://jakearchibald.github.com/sass-ie/"/>
	<rdf:li rdf:resource="http://css-tricks.com/dont-overthink-it-grids/"/>
	<rdf:li rdf:resource="http://css-tricks.com/css-style-guides/"/>
	<rdf:li rdf:resource="http://www.youtube.com/watch?v=hAzhayTnhEI"/>
	<rdf:li rdf:resource="http://m.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks"/>
	<rdf:li rdf:resource="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/"/>
	<rdf:li rdf:resource="http://css-tricks.com/circular-3d-buttons/"/>
	<rdf:li rdf:resource="http://zomigi.com/blog/hiding-and-revealing-portions-of-images/"/>
	<rdf:li rdf:resource="http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php"/>
	<rdf:li rdf:resource="http://dev.opera.com/articles/view/responsive-images-problem/"/>
	<rdf:li rdf:resource="http://webinthehat.com/2012/06/ie7-de-nieuwe-ie6/"/>
	<rdf:li rdf:resource="http://www.phpied.com/css-variables/"/>
	<rdf:li rdf:resource="http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/"/>
	<rdf:li rdf:resource="http://www.html5rocks.com/en/tutorials/filters/understanding-css/"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://css-tricks.com/interview-questions-css/">
    <title>Interview Questions and Exercises About CSS | CSS-Tricks</title>
    <dc:date>2015-04-15T17:35:11+00:00</dc:date>
    <link>https://css-tricks.com/interview-questions-css/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css html interview question</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:27d84b19b1e0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:interview"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:question"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://alistapart.com/article/quantity-queries-for-css">
    <title>Quantity Queries for CSS · An A List Apart Article</title>
    <dc:date>2015-03-05T13:07:59+00:00</dc:date>
    <link>http://alistapart.com/article/quantity-queries-for-css</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css design selectors webdesign webdev frontend quantity ala alistapart heydonpickering</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:f22b20adf84f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:selectors"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:quantity"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ala"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:alistapart"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:heydonpickering"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://engineering.flipboard.com/2015/02/mobile-web/">
    <title>60fps on the mobile web — Flipboard Engineering</title>
    <dc:date>2015-02-11T10:31:39+00:00</dc:date>
    <link>http://engineering.flipboard.com/2015/02/mobile-web/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>animation canvas css javascript react frontend mobile web webdev</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:1de8b1caf762/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:canvas"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:react"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://grack.com/blog/2015/01/11/css-selectors-4/">
    <title>What's new in CSS Selectors 4 | grack</title>
    <dc:date>2015-01-15T14:34:10+00:00</dc:date>
    <link>https://grack.com/blog/2015/01/11/css-selectors-4/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css design selectors html webdev frontend level 4</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:b5ee8013c0bf/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:selectors"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:level"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:4"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/">
    <title>Designing For Print With CSS - Smashing Magazine</title>
    <dc:date>2015-01-14T16:11:04+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2015/01/07/designing-for-print-with-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. I’ll explain how the selectors, properties and values that they introduce work. I’ll finish up with a working example that you can use as a starting point for your own experiments. For that example, we’ll need a user agent that supports this specialized CSS. I’ll be using Prince, which is a commercial product. However, Prince has a free version that can be used for non-commercial use, making it a good tool to try out these examples."]]></description>
<dc:subject>css design html print rachelandrew smashing magazine webdev page paged media</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:ab49b09afcee/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:print"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rachelandrew"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:smashing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:magazine"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:page"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:paged"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:media"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/">
    <title>Replacing Radio Buttons Without Replacing Radio Buttons</title>
    <dc:date>2014-10-20T13:46:06+00:00</dc:date>
    <link>http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["To think accessibly, you need to consider the HTML the interface and the CSS merely the appearance of that interface; the branding. Accordingly, we need to look for ways to seize control of UI aesthetics without relying on the recreation of the underlying markup that marks a departure from standards."]]></description>
<dc:subject>css form forms html5 radio input html webdev frontend label fieldset</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:79edd0970da7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:form"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:forms"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:radio"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:input"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:label"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fieldset"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/mega-list-svg-information/">
    <title>A Compendium of SVG Information | CSS-Tricks</title>
    <dc:date>2014-10-18T13:56:31+00:00</dc:date>
    <link>http://css-tricks.com/mega-list-svg-information/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css reference svg tricks compendium hub list webdev frontend vector tutorial help</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:97514a908516/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:reference"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tricks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:compendium"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:hub"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:list"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:vector"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:help"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2014/10/16/css-only-solution-for-ui-tracking/">
    <title>CSS-Only Solution For UI Tracking | Smashing Magazine</title>
    <dc:date>2014-10-17T11:08:12+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2014/10/16/css-only-solution-for-ui-tracking/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics."]]></description>
<dc:subject>analytics css design development tracking ga google googleanalytics image backgroundimage load</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:0dbda2d54c4d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:analytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tracking"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ga"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:google"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:googleanalytics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:backgroundimage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:load"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/centering-css-complete-guide/">
    <title>Centering in CSS: A Complete Guide | CSS-Tricks</title>
    <dc:date>2014-09-05T11:40:00+00:00</dc:date>
    <link>http://css-tricks.com/centering-css-complete-guide/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css frontend guide webdev style html center horizontal vertical</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:2e68fc5500af/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:center"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:horizontal"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:vertical"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">
    <title>Making SVGs Responsive with CSS</title>
    <dc:date>2014-09-02T17:30:38+00:00</dc:date>
    <link>http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Conceptually, making an SVG scale as its container scales should be as simple as removing any fixed height and/or width, and specifying a viewBox attribute value. However, due to different browser implementations and inconsistencies, the web isn’t all ponies and rainbows, and making SVGs fluid isn’t quite that straightforward, because the way browsers determine the dimensions of an SVG when embedded in different ways isn’t consistent across all of them."]]></description>
<dc:subject>css svg rwd responsive design webdev frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:dcd2a30538f5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">
    <title>Medium’s CSS is actually pretty f***ing good. — Medium</title>
    <dc:date>2014-09-01T16:43:41+00:00</dc:date>
    <link>https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["I’ve been meaning to write something about the CSS at Medium for a while because I’m not completely ashamed of it…

"So how did that happen? What did we do differently? OMG, how can you do the same thing? Or learn from us, or something?

"What follows are some notes on our CSS, the steps we’ve taken to get it to where it is, and the world we live in today."]]></description>
<dc:subject>css design frontend medium styleguide webdev less suit suitcss framework bem semantics</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:a4318f3176d5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:medium"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:styleguide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:less"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:suit"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:suitcss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bem"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:semantics"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://csstriggers.com/">
    <title>CSS Triggers</title>
    <dc:date>2014-07-28T09:50:22+00:00</dc:date>
    <link>http://csstriggers.com/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[Whether CSS properties trigger layout or paint]]></description>
<dc:subject>css layout performance webdev frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:0712214c850c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://kristopolous.github.io/BOOTSTRA.386/">
    <title>BOOTSTRA.386.</title>
    <dc:date>2014-07-04T07:58:24+00:00</dc:date>
    <link>https://kristopolous.github.io/BOOTSTRA.386/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>bootstrap css retro theme DOS</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:04e16d97e5c5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bootstrap"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:retro"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:theme"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:DOS"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://csspre.com/variables">
    <title>Variables | CSS PREprocessors</title>
    <dc:date>2014-06-29T19:18:01+00:00</dc:date>
    <link>http://csspre.com/variables</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Here is the basic syntax for variables."]]></description>
<dc:subject>css sass less stylus preprocessor variables</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:d080584e787f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:less"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stylus"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:preprocessor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:variables"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://dev.opera.com/articles/css-will-change-property/">
    <title>Dev.Opera — Everything You Need to Know About the CSS will-change Property</title>
    <dc:date>2014-06-11T18:40:42+00:00</dc:date>
    <link>http://dev.opera.com/articles/css-will-change-property/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The will-change property is a will help us write hack-free performance-optimized code, and emphasize the importance of speed and performance to our CSS operations."]]></description>
<dc:subject>css animation will-change property html webdev performance optimization smooth</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:9e455c09ffa9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:will-change"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:property"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:optimization"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:smooth"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/">
    <title>Script-injected &quot;async scripts&quot; considered harmful - igvita.com</title>
    <dc:date>2014-05-26T19:20:44+00:00</dc:date>
    <link>https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>async css javascript js performance script webdev</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:8a8d6dd57a2a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:async"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:script"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/">
    <title>Absolute Horizontal And Vertical Centering In CSS | Smashing Coding</title>
    <dc:date>2014-03-16T19:15:48+00:00</dc:date>
    <link>http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared height* and these styles..."]]></description>
<dc:subject>center css vertical webdesign webdev html centre</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:2d85bd6fcd2a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:center"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:vertical"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:centre"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/">
    <title>Ten reasons we switched from an icon font to SVG - Ian Feather</title>
    <dc:date>2014-01-08T13:57:41+00:00</dc:date>
    <link>http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["We use a lot of icons on lonelyplanet.com and recently went through the task of transferring them from an icon font to SVG files. I wanted to share why we did this along with some of the current limitations to SVG and how we got around them."]]></description>
<dc:subject>ianfeather css design svg font icon grunticon png fallback bug</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:c7f3cccbc26b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ianfeather"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:grunticon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:png"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fallback"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bug"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.heydonworks.com/article/tetris-the-power-of-css">
    <title>Tetris &amp; The Power Of CSS</title>
    <dc:date>2013-11-08T10:04:41+00:00</dc:date>
    <link>http://www.heydonworks.com/article/tetris-the-power-of-css</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Now, I'm the sort of designer who couldn't give a toss about "pixel perfection" so long as the page is usable and accessible. That said, this kind of blatant asymmetry is a bit jarring, even to me. What I need is a way to treat that last item — the orphan — differently. I'm sticking to the Tetris analogy, so I'd like to make that last item a full row (full width) and earn myself some points. (I know you can't change the width of blocks in Tetris; I'm just talking about making tidy rows, alright?)"]]></description>
<dc:subject>css block even nth-child nth selector last-child alignment styling html webdev</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:554e952474f3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:block"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:even"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:nth-child"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:nth"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:selector"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:last-child"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:alignment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:styling"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.kapowaz.net/articles/cargo-cult-css">
    <title>kapowaz: Cargo Cult CSS</title>
    <dc:date>2013-11-01T09:00:45+00:00</dc:date>
    <link>http://www.kapowaz.net/articles/cargo-cult-css</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["It is generally accepted that having a methodology for writing and managing CSS is preferable to having none at all. In spite of this, some of the practices developers have adopted are having a detrimental effect on the semantic quality and longterm maintainability of what we build. I’m going to talk about some of the problems with techniques being advocated by CSS ‘framework methodologies’ and how we, as web developers, can better solve these problems."]]></description>
<dc:subject>cargo css design semantic webdesign webdev object module sass separation oocss</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:6fec1f3aa9ee/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:cargo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:semantic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:object"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:module"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:separation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:oocss"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/">
    <title>Challenging CSS Best Practices | Smashing Coding</title>
    <dc:date>2013-11-01T09:00:08+00:00</dc:date>
    <link>http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle."]]></description>
<dc:subject>architecture css patterns webdev oocss object module thierrykoblenz smashing yahoo separation html</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:29fe0cbaf420/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:architecture"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:patterns"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:oocss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:object"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:module"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:thierrykoblenz"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:smashing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:yahoo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:separation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://benvinegar.github.io/seamless-talk/#/">
    <title>Seamless iframes: The future, today!</title>
    <dc:date>2013-10-29T12:11:52+00:00</dc:date>
    <link>http://benvinegar.github.io/seamless-talk/#/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>html html5 iframe seamless postmessage cross height style css js javascript</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:787abae904fc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:iframe"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:seamless"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:postmessage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:cross"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://brettjankord.com/projects/style-guide-boilerplate/">
    <title>Style Guide Boilerplate</title>
    <dc:date>2013-10-29T08:12:58+00:00</dc:date>
    <link>http://brettjankord.com/projects/style-guide-boilerplate/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[The minimal elements you need in a style guide]]></description>
<dc:subject>style guide styleguide boilerplate html css design webdev</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:1389663f8378/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:styleguide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:boilerplate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://philipwalton.github.io/solved-by-flexbox/">
    <title>Home — Solved By Flexbox</title>
    <dc:date>2013-09-26T10:00:39+00:00</dc:date>
    <link>http://philipwalton.github.io/solved-by-flexbox/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with Internet Explorer 11 and Safari 6.1 now in beta, Flexbox will soon be supported in every modern browser."]]></description>
<dc:subject>css css3 flexbox webdesign webdev layout problem hack vertical center grid addon</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:ad43b2d69b9c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:problem"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:hack"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:vertical"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:center"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:addon"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/">
    <title>Responsive scrollable tables | 456 Berea Street</title>
    <dc:date>2013-09-24T14:29:18+00:00</dc:date>
    <link>http://www.456bereastreet.com/archive/201309/responsive_scrollable_tables/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Every technique for making tables flexible (or “responsive”) that I have seen comes with its own set of drawbacks. That’s expected really – I don’t think this is a problem that can be solved perfectly, so we have to compromise somehow. But I do think that one of the simplest and least inelegant ways to handle data tables is to make them horizontally scrollable when necessary, and so I thought I’d describe how I do that."]]></description>
<dc:subject>stephenhay haystack responsive table scroll gradient edge rogerjohansson data html css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:b8d3dea94e61/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stephenhay"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:haystack"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:table"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scroll"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:gradient"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:edge"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rogerjohansson"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:data"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.the-haystack.com/2013/09/24/responsive-scrollable-tables/">
    <title>Another approach to responsive scrollable tables | The Haystack.</title>
    <dc:date>2013-09-24T14:28:39+00:00</dc:date>
    <link>http://www.the-haystack.com/2013/09/24/responsive-scrollable-tables/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["A few days ago, Roger Johansson posted his approach to creating responsive scrollable tables. As as is the case with most of what Roger publishes, I like the approach.

"I thought I’d share something similar I used on a client project I did earlier this year; an (imperfect) approach that is practically the same as Roger’s, but slightly different in how I’m dealing with shadows as a visual clue about the “scrollability” of the table."]]></description>
<dc:subject>stephenhay haystack responsive table scroll gradient edge rogerjohansson data html css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:d509ffd1eb9e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stephenhay"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:haystack"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:table"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scroll"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:gradient"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:edge"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rogerjohansson"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:data"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.barrelny.com/blog/text-align-justify-and-rwd/">
    <title>BARREL | Text-align: Justify and RWD</title>
    <dc:date>2013-06-05T19:22:46+00:00</dc:date>
    <link>http://www.barrelny.com/blog/text-align-justify-and-rwd/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Thinking about how “justified” text in Microsoft Word fills the entire width of the line by creating even word spacing, I wondered if the same principle could be applied to a menu of text links in HTML. Knowing that ‘text-align: justify’ was a long established CSS property (the descendent of HTML 4  attribute align=”justify”), I did some Googling for answers."]]></description>
<dc:subject>css fluid grid responsive rwd text-align justify</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:20fcbb0d6e8e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fluid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:text-align"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:justify"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/">
    <title>Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page | code.flickr.com</title>
    <dc:date>2013-06-05T11:42:19+00:00</dc:date>
    <link>http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-performance-and-the-new-flickr-home-page/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>flickr scottschiller js html css dom scroll parallax chrom devtools transform3d layer compositing gpu</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:f71386fbad6b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:flickr"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scottschiller"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:dom"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scroll"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:parallax"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chrom"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:devtools"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:transform3d"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:compositing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:gpu"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/html-for-icon-font-usage/">
    <title>HTML for Icon Font Usage | CSS-Tricks</title>
    <dc:date>2013-05-21T08:16:02+00:00</dc:date>
    <link>http://css-tricks.com/html-for-icon-font-usage/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best."]]></description>
<dc:subject>css font fonts icon icons chriscoyier iconfont csstricks html webdev frontend bestpractice</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:734d2340a9e1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chriscoyier"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:iconfont"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:csstricks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bestpractice"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://gomakethings.com/icon-fonts/">
    <title>Using Icon Fonts | Go Make Things</title>
    <dc:date>2013-05-19T21:54:07+00:00</dc:date>
    <link>http://gomakethings.com/icon-fonts/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Icon fonts are incredibly light weight. The one for this site is just 5kb in size. Because it’s a single font file instead of multiple images, it requires just one HTTP request, which is great for site performance. They can be scaled smoothly to any size, and styled easily using CSS."]]></description>
<dc:subject>css icons webdev font icon icomoon typoghraphy workflow frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:394eab1e0706/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icomoon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:typoghraphy"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:workflow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_overview">
    <title>smarter svg overview · svg · WPD · WebPlatform.org</title>
    <dc:date>2013-04-20T08:39:01+00:00</dc:date>
    <link>http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_overview</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["This guide shows you how to build a pair of animating eyeballs, providing a comprehensive tour of SVG features detailed in other tutorials. It shows how to maintain a set of reusable graphic components, and provides essential context on SVG transforms and coordinate spaces."]]></description>
<dc:subject>svg tutorial reference development coding eye eyeball guide webplatform html css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:da0382c5e1f4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:reference"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:coding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:eye"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:eyeball"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webplatform"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://csswizardry.com/2013/04/shame-css/">
    <title>shame.css – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts</title>
    <dc:date>2013-04-18T18:58:52+00:00</dc:date>
    <link>http://csswizardry.com/2013/04/shame-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. The code you have to write to get the release out on time, but the code that makes you ashamed."]]></description>
<dc:subject>css hack shame file</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:bfec68611796/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:hack"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:shame"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:file"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.impressivewebs.com/html-comments-indicate-pseudo-elements/">
    <title>Quick Tip: Use HTML Comments to Indicate Pseudo-elements | Impressive Webs</title>
    <dc:date>2013-04-02T09:56:39+00:00</dc:date>
    <link>http://www.impressivewebs.com/html-comments-indicate-pseudo-elements/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>html comment css pseudo element debugging trace hidden</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:7d3a13346e07/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:comment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pseudo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:element"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:debugging"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:trace"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:hidden"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/">
    <title>Trello uses an icon font and so can you! - Fog Creek Blog</title>
    <dc:date>2013-03-21T09:42:22+00:00</dc:date>
    <link>http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Inspired by Github’s Octicons and a desire to clean up our kludgy icon code, I set out to convert trello.com to use an icon font."]]></description>
<dc:subject>trello icon font frontend design glyphs editor css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:e7672eb0aa00/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:trello"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:icon"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:glyphs"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:editor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images">
    <title>Protip: All browsers that support SVG background images also supports multiple background images. - German for black</title>
    <dc:date>2013-02-26T09:00:23+00:00</dc:date>
    <link>http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[Say you want SVG with PNG fallback for IE8? Do this.]]></description>
<dc:subject>background css svg fallback image resolution support sass</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:39ce226baadc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:background"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fallback"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:resolution"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:support"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sass"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://taitems.github.com/Front-End-Development-Guidelines/">
    <title>Front End Development Guidelines</title>
    <dc:date>2013-02-12T08:32:56+00:00</dc:date>
    <link>http://taitems.github.com/Front-End-Development-Guidelines/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css guidelines html javascript webdev jquery style coding</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:a4da4b7a94b0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:guidelines"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:jquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:coding"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://philipwalton.com/articles/what-no-one-told-you-about-z-index/">
    <title>What No One Told You About Z-Index — Philip Walton</title>
    <dc:date>2013-01-17T15:57:39+00:00</dc:date>
    <link>http://philipwalton.com/articles/what-no-one-told-you-about-z-index/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you're setting a z-index of a billion on an element and it's not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn't going to do you any good."]]></description>
<dc:subject>css html z z-index 3d stacking order context opacity position</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:676769af3605/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:z"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:z-index"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:3d"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stacking"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:order"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:context"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:opacity"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:position"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://dev.opera.com/articles/view/native-css-feature-detection-via-the-supports-rule/">
    <title>Native CSS feature detection via the @supports rule - Dev.Opera</title>
    <dc:date>2012-11-29T08:23:17+00:00</dc:date>
    <link>http://dev.opera.com/articles/view/native-css-feature-detection-via-the-supports-rule/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["This article looks at the CSS @supports rule, part of the CSS3 Conditional Rules Module Level 3, which provides a perfect mechanism for selectively applying CSS based on feature support. Here we'll look at basic syntax, along with an applied example"]]></description>
<dc:subject>browser opera css css3 webdev supports rule conditional chrismills</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:dddd97f70163/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:browser"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:opera"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:supports"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rule"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:conditional"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chrismills"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://csswizardry.com/2012/11/code-smells-in-css/">
    <title>Code smells in CSS — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts</title>
    <dc:date>2012-11-21T07:22:03+00:00</dc:date>
    <link>http://csswizardry.com/2012/11/code-smells-in-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[“How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is?”]]></description>
<dc:subject>code css patterns webdev frontend smell antipattern refactor harryroberts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:dbcd134bf114/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:code"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:patterns"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:smell"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:antipattern"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:refactor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:harryroberts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://laurakalbag.com/display-none/">
    <title>display: none; | Laura Kalbag</title>
    <dc:date>2012-11-12T16:00:12+00:00</dc:date>
    <link>http://laurakalbag.com/display-none/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge."]]></description>
<dc:subject>laurakalbag css responsive display none learning writing knowledge</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:93e81fff9ab9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:laurakalbag"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:display"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:none"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:learning"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:writing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:knowledge"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">
    <title>Places It's Tempting To Use Display: None; But Don't | CSS-Tricks</title>
    <dc:date>2012-11-12T15:58:59+00:00</dc:date>
    <link>http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["But wait! By applying that class to an element you've immediately made that content "inaccessible" by screen readers. You've probably known this forever, but still the poison apple sneaks into our code once in a while."]]></description>
<dc:subject>css display none accessibility position slide jquery js javascript frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:4c1b9742d6f0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:display"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:none"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:position"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:slide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:jquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning">
    <title>A Simple Device Diagram for Responsive Design Planning | Metal Toad Media</title>
    <dc:date>2012-11-09T15:14:40+00:00</dc:date>
    <link>http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at."]]></description>
<dc:subject>css design psd breakpoint range devive mobile webdev frontend responsive diagram</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:bb5a8e6ca38a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:psd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:breakpoint"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:range"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:devive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:diagram"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.slideshare.net/maxdesign/line-height">
    <title>CSS Line Height</title>
    <dc:date>2012-10-17T18:20:54+00:00</dc:date>
    <link>http://www.slideshare.net/maxdesign/line-height</link>
    <dc:creator>sunpig</dc:creator><dc:subject>russweakley slide desck slideshare css line height line-height calculation leading box inline anonymous calcylation typography webdev frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:0752d7e3cd51/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:russweakley"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:slide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:desck"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:slideshare"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:line"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:line-height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:calculation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:leading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:box"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:inline"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:anonymous"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:calcylation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://joshemerson.co.uk/blog/using-svg-graphics-today/">
    <title>JoshEmerson.co.uk · Blog · Using SVG graphics today</title>
    <dc:date>2012-10-11T07:21:27+00:00</dc:date>
    <link>http://joshemerson.co.uk/blog/using-svg-graphics-today/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["[T]here are a few additional steps involved if you want to use SVG graphics today. I’m just going to talk through the steps for using SVG graphics inline here. Most of these steps can be used for CSS background images too."]]></description>
<dc:subject>joshemerson clearleft svg graphic image web webdev replace object png css html frontend design</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:3a9b2e8230d3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:joshemerson"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:clearleft"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:graphic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:replace"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:object"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:png"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow">
    <title>Bricss - box-shadow vs filter: drop-shadow</title>
    <dc:date>2012-10-09T07:13:39+00:00</dc:date>
    <link>http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Have you ever wanted a box-shadow that followed the shape of an element, including generated content, like a tooltip with an arrow? Or you wanted a box-shadow to take transparent parts of a .png into account? That’s exactly what filter: drop-shadow() does. It has the exact same syntax as the box-shadow property, except that inset drop-shadows are not supported (yet?)."]]></description>
<dc:subject>box-shadow css css3 filter drop-shadow shadow outline html frontend webdev</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:db42869a39a0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:box-shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:filter"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:drop-shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:outline"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://palantir.net/blog/responsive-design-s-dirty-little-secret">
    <title>Responsive Design’s Dirty Little Secret | Palantir.net</title>
    <dc:date>2012-10-08T07:14:23+00:00</dc:date>
    <link>http://palantir.net/blog/responsive-design-s-dirty-little-secret</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["How does this work? First, recall that percentage-based margins are relative to the containing block’s width, so “-100%” means we’re using the width of the container. Next recall that the right margin of floated items affects other items floated next to it. If you use were to use margin-right: -10px, adjacent floats would be relative to this right edge minus 10 pixels. Logically, “-100%” means adjacent floats would be relative to the right edge minus 100% of the container’s width. This should mean that the “relative edge” is well to the left of the container’s left edge. However, the container’s left edge will prevent adjacent floats from even seeing the relative edge when it is so far outside the container. Long story short, each adjacent float no longer sees the right edge of its siblings; it only sees the left inner edge of the container."]]></description>
<dc:subject>johnalbinwilkins palantir responsive css pixel grid percentage width margin padding box-sizing border-box rounding error flexible float absolute clear</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:bef79407e60f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:johnalbinwilkins"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:palantir"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pixel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:percentage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:width"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:margin"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:padding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:box-sizing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:border-box"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rounding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:error"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:flexible"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:float"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:absolute"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:clear"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/">
    <title>iOS6 html hardware acceleration changes and how to fix them | indiegamr</title>
    <dc:date>2012-10-03T10:01:22+00:00</dc:date>
    <link>http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["As probably many developers have already experience this over the past weeks: I had a phonegap application for iOS that contained some visually animated components  (a coverflow or a carousel for example). But after updating to iOS6 this is all flickring now and it feels horrible because it’s just stumbling and faltering on the new version of the OS. There are several reasons for this and I cannot say which were already there in iOS5, however here are the two main reasons and instructions on how to fix that:"]]></description>
<dc:subject>ios css translate transform hardware accelerate scrolling smooth performance frame rate</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:9370f06e7c82/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ios"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:translate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:transform"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:hardware"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:accelerate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scrolling"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:smooth"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frame"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rate"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.css-101.org/articles/focus_trick/outline-offset.php">
    <title>CSS trick based on outline-offset</title>
    <dc:date>2012-09-30T18:23:15+00:00</dc:date>
    <link>http://www.css-101.org/articles/focus_trick/outline-offset.php</link>
    <dc:creator>sunpig</dc:creator><dc:subject>css focus form outline trick lightbox shade transparent cover</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:d1b7381d1327/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:focus"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:form"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:outline"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:trick"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:lightbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:shade"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:transparent"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:cover"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://simurai.com/post/30451824480/media-query-splitting">
    <title>Media Query splitting | simurai</title>
    <dc:date>2012-09-28T11:42:56+00:00</dc:date>
    <link>http://simurai.com/post/30451824480/media-query-splitting</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["When Media Queries got introduced and people started out with Responsive Web Design, I used to overwrite my Desktop styles to make it fit on Mobile. Later I shifted to “Mobile first” where you start out with the Mobile styles and overwrite them for Desktop sizes. But on a recent project I’ve started using a different approach by splitting the styles instead of overwriting them. It goes something like this:"]]></description>
<dc:subject>css design responsive mq mediaquery viewport rwd webdev frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:7d6711b7ddd3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mq"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mediaquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:viewport"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bootsnipp.com/">
    <title>Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com</title>
    <dc:date>2012-09-26T21:37:20+00:00</dc:date>
    <link>http://bootsnipp.com/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Bootsnipp is an element gallery for web designers and web developers, anybody who is using Twitter Bootstrap will find this website essential in their craft."]]></description>
<dc:subject>bootstrap snippet pattern library design html element css twitter</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:79364299e347/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bootstrap"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:snippet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pattern"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:library"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:element"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:twitter"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.55minutes.com/2012/04/untangling-the-rails-asset-pipeline-part-4-troubleshooting/">
    <title>Untangling the Rails Asset Pipeline – Part 4: Troubleshooting | 55 Minutes Blog</title>
    <dc:date>2012-09-26T21:26:10+00:00</dc:date>
    <link>http://blog.55minutes.com/2012/04/untangling-the-rails-asset-pipeline-part-4-troubleshooting/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["In part due to the flexibility of the Rails asset pipeline, deployments to production can break in interesting and unexpected ways. In this final post of our asset pipeline series, we look at common error messages and problems we have encounted, and offer some quick solutions."]]></description>
<dc:subject>rails ruby asset pipeline sprockets compile js javascript css html webdev backend precompile</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:eccb65f6e64a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rails"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ruby"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:asset"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pipeline"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sprockets"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:compile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:backend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:precompile"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://davidwalsh.name/css-flip">
    <title>CSS Flip Animation</title>
    <dc:date>2012-09-26T12:57:00+00:00</dc:date>
    <link>http://davidwalsh.name/css-flip</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible."]]></description>
<dc:subject>davidwalsh css animation html flip css3 tutorial</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:c0b6361e3009/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:davidwalsh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:flip"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tutorial"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml">
    <title>CSS media queries: width versus device-width</title>
    <dc:date>2012-09-21T08:15:44+00:00</dc:date>
    <link>http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The table below shows the screen resolution and CSS media device dimensions of some of the popular devices out there"]]></description>
<dc:subject>css width device-width mobile screen resolution pixel density height</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:458df254d5e8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:width"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:device-width"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:screen"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:resolution"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pixel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:density"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:height"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI">
    <title>iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and &lt;canvas&gt;</title>
    <dc:date>2012-09-17T08:44:05+00:00</dc:date>
    <link>https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["The "Design" page for iPhone 5 includes an auto-playing video of the device being unlocked. But there's no <video> element, just a <canvas>. And if you check the "Network" tab of the inspector, you won't find any video there either.

"But you will find some strange JPEG images."]]></description>
<dc:subject>apple canvas css design video jpeg compression binary data js javascript weird</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:1e70d3608822/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:canvas"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:video"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:jpeg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:compression"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:binary"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:data"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:weird"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://charliepark.org/css-only-sticky-headers/">
    <title>CSS-Only Sticky Headers for Tables, Using ‘position: sticky’</title>
    <dc:date>2012-09-15T20:02:08+00:00</dc:date>
    <link>http://charliepark.org/css-only-sticky-headers/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["In the last few days, I’ve seen a few people talking about a new CSS property, position: sticky. The idea is straightforward, and neat: If an object has “position:sticky”, treat it as a normal position:relative block, as long as it’s on screen. If the user scrolls far enough that the object (let’s say it’s an h3) would be scrolled off the screen, but the h3’s parent div is still visible onscreen, treat the object as though it were position:fixed (at whatever top or left or right or bottom parameters you give it)."]]></description>
<dc:subject>css carliepark position sticky fixed table example</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:b683808825a8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:carliepark"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:position"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sticky"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fixed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:table"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:example"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://omgninjas.net/2012/09/01/quick-tip-easily-create-single-page-applications-with-sprockets/">
    <title>OMG, Ninjas! - Quick Tip: Easily create single page applications with Sprockets</title>
    <dc:date>2012-09-10T07:01:26+00:00</dc:date>
    <link>http://omgninjas.net/2012/09/01/quick-tip-easily-create-single-page-applications-with-sprockets/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["For a new side project, I needed an easier way to create (and serve) a Single Page Application. I was not going to have a server/api, so a rails application was a no-go. Since I was going to use Scss and Coffee-Script, and split the codebase into various files, using the CLI was not pratical. I really would love to have all the benefits of the assets pipeline, but was not willing to go full-circle and use Rails."

"The solution I’ve came up was this: using Sprockets to serve the assets, and a simple Sinatra application to serve the only html file."]]></description>
<dc:subject>css dev ruby sinatra rails js javascript sprockets assets compile concatenate</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:8a84df314e79/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:dev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ruby"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sinatra"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rails"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sprockets"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:assets"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:compile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:concatenate"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://jakearchibald.github.com/sass-ie/">
    <title>IE-friendly mobile-first CSS with Sass 3.2</title>
    <dc:date>2012-08-17T16:00:17+00:00</dc:date>
    <link>http://jakearchibald.github.com/sass-ie/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>jakearchibald css sass mobile stylesheet demo ie responsive layout</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:35ec1c9b20ad/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:jakearchibald"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stylesheet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:demo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ie"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/dont-overthink-it-grids/">
    <title>Don't Overthink It Grids | CSS-Tricks</title>
    <dc:date>2012-08-17T15:51:29+00:00</dc:date>
    <link>http://css-tricks.com/dont-overthink-it-grids/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>grid css chriscoyier tricks column padding gutter</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:9f71d775481d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chriscoyier"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tricks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:column"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:padding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:gutter"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/css-style-guides/">
    <title>CSS Style Guides | CSS-Tricks</title>
    <dc:date>2012-08-10T17:27:18+00:00</dc:date>
    <link>http://css-tricks.com/css-style-guides/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["I love pattern libraries. Think Twitter Bootstrap or GEL. I think they are a fantastic way to work particularly in large sites and web apps. This post isn't about those. We'll do a roundup of those some time, because I think that would be valuable too. This is about style guides for CSS itself."]]></description>
<dc:subject>chriscoyier style guide css reference design codingstandards standard code commit strict rule</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:4ab0f971f18f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chriscoyier"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:reference"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:codingstandards"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:standard"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:code"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:commit"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:strict"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rule"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.youtube.com/watch?v=hAzhayTnhEI">
    <title>Google I/O 2012 - Jank Busters: Building Performant Web Apps - YouTube</title>
    <dc:date>2012-08-06T10:02:59+00:00</dc:date>
    <link>http://www.youtube.com/watch?v=hAzhayTnhEI</link>
    <dc:creator>sunpig</dc:creator><dc:subject>jank buster performance js javascript css webdev optimization chrome tracing devtools</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:c11b84f91358/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:jank"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:buster"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:optimization"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:chrome"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tracing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:devtools"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://m.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">
    <title>Build a smart mobile navigation without hacks | .net magazine</title>
    <dc:date>2012-08-06T08:39:48+00:00</dc:date>
    <link>http://m.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[In the past, I’ve frequently advocated for converting traditional list-based navigation into a select for mobile (see example below). It’s a simple concept that is easy to implement and I love the elegance of the approach, but the fact that you need to rely on JavaScript to make it usable never really sat well with me. Being an ardent advocate of progressive enhancement, I knew there had to be a better way.]]></description>
<dc:subject>aarongustafson css mobile target link nav html webdev rwd responsive design layout menu dropdown z-index</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:675083a246a7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:aarongustafson"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobile"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:target"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:link"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:nav"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:menu"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:dropdown"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:z-index"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/">
    <title>How we learned to leave default font-size alone and embrace the em | Filament Group, Inc., Boston, MA</title>
    <dc:date>2012-07-19T06:40:54+00:00</dc:date>
    <link>http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["Building with em units in CSS brings benefits in flexibility to users and developers alike, but working with ems can be tedious for a number of reasons. Most famously, the value of 1em only vaguely correlates to pixel-based design; the inconvenience of translating fixed design comps into flexible CSS units has long driven web designers to declare a global font-size to make that math a bit easier to manage. But using contemporary responsive design principles is convincing us to leave global font-size alone and embrace the standard em."]]></description>
<dc:subject>filamentgroup frontend webdev em css pixel size font dimension browser width mediaquery media html design</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:34f396977637/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:filamentgroup"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:em"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:pixel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:size"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:dimension"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:browser"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:width"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mediaquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:media"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://css-tricks.com/circular-3d-buttons/">
    <title>Crafting Minimal Circular 3D Buttons with CSS | CSS-Tricks</title>
    <dc:date>2012-07-11T13:26:11+00:00</dc:date>
    <link>http://css-tricks.com/circular-3d-buttons/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>buttons 3d css3 tutorial css circle round border gradient shadow box edge rounded webdev frontend webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:4dd4729bf10c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:buttons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:3d"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:circle"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:round"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:border"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:gradient"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:box"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:edge"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rounded"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://zomigi.com/blog/hiding-and-revealing-portions-of-images/">
    <title>zomigi.com » Hiding and revealing portions of images</title>
    <dc:date>2012-07-11T13:02:26+00:00</dc:date>
    <link>http://zomigi.com/blog/hiding-and-revealing-portions-of-images/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["It’s possible to dynamically “crop” both background and foreground images as the layout changes in width, solving the problem of overflowing fixed-width images in a flexible page."]]></description>
<dc:subject>images layout html css image overflow crop resize responsive width size webdev frontend background</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:c9fde146b073/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:images"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:overflow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:crop"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:resize"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:width"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:size"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:background"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php">
    <title>Clearfix: the new way to do it!</title>
    <dc:date>2012-07-02T01:35:41+00:00</dc:date>
    <link>http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[New article: The shortest clearfix rules EVAR!  Go update your CSS reset or base styles sheets! :) #css #clearfix]]></description>
<dc:subject>css clearfix</dc:subject>
<dc:source>https://twitter.com/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:309d9649365d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:clearfix"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://dev.opera.com/articles/view/responsive-images-problem/">
    <title>Responsive images: what's the problem, and how do we fix it? - Dev.Opera</title>
    <dc:date>2012-06-19T12:43:30+00:00</dc:date>
    <link>http://dev.opera.com/articles/view/responsive-images-problem/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["As yet, there is no single perfect method that can answer all of the requirements of adapting a simple <img> to simple constraints like bandwidth or device size. There are no hacks that do a perfect job, and there is no clear way of standardising any such method that does not have its own problems. It's possible that a single grand solution will prove impossible, and we'll have to use a few techniques to achieve the things we want. It's possible that the only true solution will be patience while the "constrained bandwidth and poor device capabilities" problems slowly fade away — but while that may only be a few years away in privileged countries, the majority of the world will take a lot longer."]]></description>
<dc:subject>opera dev webdev frontent optimization picture image img srcset meta viewport responsive design layout scale size bandwidth css html rwd</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:5da8daa0c5fe/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:opera"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:dev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontent"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:optimization"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:picture"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:img"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:srcset"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:meta"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:viewport"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scale"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:size"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:bandwidth"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rwd"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webinthehat.com/2012/06/ie7-de-nieuwe-ie6/">
    <title>IE7, de nieuwe IE6? - Web in the Hat</title>
    <dc:date>2012-06-19T08:46:24+00:00</dc:date>
    <link>http://webinthehat.com/2012/06/ie7-de-nieuwe-ie6/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA["We zijn nu eindelijk een beetje van Internet Explorer 6 af, eindelijk af van de double margin bug, de transparent png bug, de hover bug en al die andere bugs. Geen IE6 meer dus, tijd voor de volgende zondebok. IE7."]]></description>
<dc:subject>browser ie internetexplorer ie7 ie8 support box-sizing css webdev frontend</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:840ea3e85fab/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:browser"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ie"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:internetexplorer"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ie7"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ie8"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:support"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:box-sizing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:frontend"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.phpied.com/css-variables/">
    <title>CSS variables / Stoyan's phpied.com</title>
    <dc:date>2012-06-14T08:40:29+00:00</dc:date>
    <link>http://www.phpied.com/css-variables/</link>
    <dc:creator>sunpig</dc:creator><dc:subject>stoyanstefanov phpied css variable var</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:e18a8dce326e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:stoyanstefanov"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:phpied"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:variable"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:var"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/">
    <title>Issues with position fixed &amp; scrolling on iOS</title>
    <dc:date>2012-06-13T13:53:41+00:00</dc:date>
    <link>http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[With the release of iOS 5, fixed positioned layout is said to be supported in MobileSafari.

The word supported needs to be taken with a pinch of salt, because there’s all kinds of issues which I intend to show you in the following post.]]></description>
<dc:subject>rem remysharp mobilesafari positionfixed position fixed css iphone ios scroll</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:abdc2690c8c5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:rem"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:remysharp"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:mobilesafari"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:positionfixed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:position"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:fixed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:iphone"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:ios"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:scroll"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">
    <title>Understanding CSS Filter Effects - HTML5 Rocks</title>
    <dc:date>2012-06-06T19:42:29+00:00</dc:date>
    <link>http://www.html5rocks.com/en/tutorials/filters/understanding-css/</link>
    <dc:creator>sunpig</dc:creator><description><![CDATA[Filters are a powerful tool that web authors can use to achieve interesting visual effects. In this article we’ll cover the history of filter effects, what they do and how to use them. We’ll cover examples of all the predefined filters defined for CSS with some examples. We’ll also cover performance considerations for using them on desktop and mobile devices since knowing the speed impact of filters is important for a good user experience. Finally we’ll review the current state of implementation in modern browsers. ]]></description>
<dc:subject>css css3 html html5 svg filter graphics image shadow blur saturation colour color webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:sunpig/b:479951dd0a44/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:filter"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:graphics"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:blur"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:saturation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:colour"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:color"/>
	<rdf:li rdf:resource="https://pinboard.in/u:sunpig/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>