<?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 (Aetles)</title>
    <link>https://pinboard.in/u:Aetles/public/</link>
    <description>recent bookmarks from Aetles</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://tailwindcss-custom-forms.netlify.com/"/>
	<rdf:li rdf:resource="https://every-layout.dev/"/>
	<rdf:li rdf:resource="https://cssfx.dev/"/>
	<rdf:li rdf:resource="https://dev.to/michaeldscherr/switching-from-sass-to-postcss-4p0c"/>
	<rdf:li rdf:resource="https://css-tricks.com/more-unicode-patterns/"/>
	<rdf:li rdf:resource="http://animista.net/"/>
	<rdf:li rdf:resource="https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/"/>
	<rdf:li rdf:resource="https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-1-1j1k"/>
	<rdf:li rdf:resource="https://www.smashingmagazine.com/2018/05/guide-css-layout/"/>
	<rdf:li rdf:resource="https://www.lullabot.com/articles/css-pseudoelements-and-transforms-my-favorite-css-tools"/>
	<rdf:li rdf:resource="https://github.com/dwyl/learn-tachyons#why"/>
	<rdf:li rdf:resource="https://tachyons-tldr.now.sh/#/classes"/>
	<rdf:li rdf:resource="https://iraul.github.io/pushy-buttons/"/>
	<rdf:li rdf:resource="http://learncssgrid.com/"/>
	<rdf:li rdf:resource="https://cssgridgarden.com/"/>
	<rdf:li rdf:resource="https://gridbyexample.com/"/>
	<rdf:li rdf:resource="http://tholman.com/obnoxious/"/>
	<rdf:li rdf:resource="http://jonibologna.com/spring-into-css-grid/"/>
	<rdf:li rdf:resource="http://cssgridgarden.com/"/>
	<rdf:li rdf:resource="http://griddy.io/"/>
	<rdf:li rdf:resource="http://jensimmons.com/post/feb-27-2017/learn-css-grid"/>
	<rdf:li rdf:resource="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"/>
	<rdf:li rdf:resource="http://youmightnotneedjs.com/"/>
	<rdf:li rdf:resource="http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/"/>
	<rdf:li rdf:resource="http://www.heydonworks.com/article/on-writing-less-damn-code"/>
	<rdf:li rdf:resource="https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/"/>
	<rdf:li rdf:resource="https://css-tricks.com/comparison-animation-technologies/"/>
	<rdf:li rdf:resource="http://devbridge.github.io/Styleguide/"/>
	<rdf:li rdf:resource="https://flexbox.webflow.com/#how"/>
	<rdf:li rdf:resource="https://jonsuh.com/hamburgers/"/>
	<rdf:li rdf:resource="https://github.com/bradfrost/frontend-guidelines-questionnaire"/>
	<rdf:li rdf:resource="http://codepen.io/enxaneta/full/adLPwv/"/>
	<rdf:li rdf:resource="https://github.com/bryanbraun/after-dark-css"/>
	<rdf:li rdf:resource="https://github.com/10up/flexibility"/>
	<rdf:li rdf:resource="https://24ways.org/2015/animation-in-responsive-design/"/>
	<rdf:li rdf:resource="https://fourword.fourkitchens.com/article/use-gulp-and-uncss-slim-down-your-css-framework"/>
	<rdf:li rdf:resource="http://jonibologna.com/flexbox-cheatsheet/"/>
	<rdf:li rdf:resource="https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8"/>
	<rdf:li rdf:resource="http://codepen.io/CrocoDillon/pen/fBJxu"/>
	<rdf:li rdf:resource="http://cssbuttons.tumblr.com/"/>
	<rdf:li rdf:resource="http://alistapart.com/article/language-of-modular-design"/>
	<rdf:li rdf:resource="http://flexbox.io/#/"/>
	<rdf:li rdf:resource="http://hugeinc.github.io/styleguide/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/"/>
	<rdf:li rdf:resource="http://bradfrost.com/demo/ish/"/>
	<rdf:li rdf:resource="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/"/>
	<rdf:li rdf:resource="https://philipwalton.github.io/solved-by-flexbox/"/>
	<rdf:li rdf:resource="http://cssflexbox.com/"/>
	<rdf:li rdf:resource="https://medium.com/@patrickbrosset/do-you-really-understand-css-linear-gradients-631d9a895caf"/>
	<rdf:li rdf:resource="http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/"/>
	<rdf:li rdf:resource="http://rachievee.com/responsive-images-in-wordpress/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/"/>
	<rdf:li rdf:resource="http://semantic-ui.com/"/>
	<rdf:li rdf:resource="https://gridsetapp.com/"/>
	<rdf:li rdf:resource="https://discuss.atom.io/t/number-off-center-in-notification-bubble/14490/6"/>
	<rdf:li rdf:resource="http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/"/>
	<rdf:li rdf:resource="https://ianlunn.github.io/Hover/"/>
	<rdf:li rdf:resource="https://github.com/philipwalton/flexbugs"/>
	<rdf:li rdf:resource="https://github.com/legomushroom/modal-break"/>
	<rdf:li rdf:resource="http://daniel-lundin.github.io/snabbt.js/index.html"/>
	<rdf:li rdf:resource="http://codyhouse.co/gem/expandable-image-gallery/"/>
	<rdf:li rdf:resource="http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand"/>
	<rdf:li rdf:resource="http://zencode.in/lining.js/"/>
	<rdf:li rdf:resource="http://www.cssstats.com/"/>
	<rdf:li rdf:resource="https://github.com/petehunt/webpack-howto"/>
	<rdf:li rdf:resource="http://devtoolstips.com/"/>
	<rdf:li rdf:resource="http://thesassway.com/intermediate/using-source-maps-with-sass"/>
	<rdf:li rdf:resource="http://sudheerdev.github.io/Foundation5CheatSheet/"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/"/>
	<rdf:li rdf:resource="http://css-tricks.com/centering-css-complete-guide/"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://tailwindcss-custom-forms.netlify.com/">
    <title>Tailwind CSS Custom Forms</title>
    <dc:date>2019-06-23T19:34:10+00:00</dc:date>
    <link>https://tailwindcss-custom-forms.netlify.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Out of the box, selects, checkboxes, and radios look awful in Tailwind and the only way to make them look better is with custom CSS.

The goal of this project is to provide a better starting point for form elements that looks good out of the box but is still fairly neutral, and is easy to customize by adding utilities instead of having to write the complex CSS necessary to style form elements across browsers yourself.]]></description>
<dc:subject>css tailwindcss webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:cb013e87cfd6/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tailwindcss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://every-layout.dev/">
    <title>Relearn CSS layout: Every Layout</title>
    <dc:date>2019-06-17T11:55:05+00:00</dc:date>
    <link>https://every-layout.dev/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.]]></description>
<dc:subject>css layout webdesign webdevelopment responsivedesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:7ec5cad6c386/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:responsivedesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://cssfx.dev/">
    <title>CSSFX - Beautifully simple click-to-copy CSS effects</title>
    <dc:date>2019-05-09T21:21:41+00:00</dc:date>
    <link>https://cssfx.dev/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.]]></description>
<dc:subject>css design animation frontend webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:2a2679827d2a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://dev.to/michaeldscherr/switching-from-sass-to-postcss-4p0c">
    <title>Switching from SASS to PostCSS - DEV Community 👩‍💻👨‍💻</title>
    <dc:date>2019-04-02T21:40:32+00:00</dc:date>
    <link>https://dev.to/michaeldscherr/switching-from-sass-to-postcss-4p0c</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Ever since PostCSS came out, I've exclusively used it for Autoprefixer. I didn't really dig into the power of PostCSS and how it could actually be a comparable solution to SASS.

This article will go into depth about my skepticisms, and how I was able to find solutions using PostCSS.

The Push
What originally considered me to switch was my interest in Tailwind CSS. I love the ideas of utility libraries, but found it difficult to sell to other developers. However, we've been looking for ways to optimize development time, so Tailwind felt like a good choice. It's built with PostCSS in mind, so I at least wanted to give it a try.]]></description>
<dc:subject>sass css tailwind postcss webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:dc91b9c338b5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tailwind"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:postcss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/more-unicode-patterns/">
    <title>More Unicode Patterns | CSS-Tricks</title>
    <dc:date>2019-01-22T21:30:40+00:00</dc:date>
    <link>https://css-tricks.com/more-unicode-patterns/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>css unicode</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:76ef2b0fa645/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:unicode"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://animista.net/">
    <title>Animista</title>
    <dc:date>2019-01-10T21:03:31+00:00</dc:date>
    <link>http://animista.net/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>css webdesign animation tools</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:14eab1d98bee/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tools"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/">
    <title>CSS Grid in IE: Debunking Common IE Grid Misconceptions | CSS-Tricks</title>
    <dc:date>2018-11-28T13:22:24+00:00</dc:date>
    <link>https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this is some far off future that is many years away. If the only thing holding you back from that reality is IE11 (check caniuse.com), then you’re in luck! That day is today! Or at least it will be when you finish reading this series. 😉]]></description>
<dc:subject>css grid ie layout webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:38a761d9fa27/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:ie"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-1-1j1k">
    <title>How to create pure CSS illustrations and animate them - Part 1 - DEV Community 👩‍💻👨‍💻</title>
    <dc:date>2018-09-20T06:38:00+00:00</dc:date>
    <link>https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-1-1j1k</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS illustrations are great for:

Illustrators or designers hoping to use their designing skills to learn, or get more confident with html/css
Front-end developers hoping to work on their creativity and develop a good eye for design
Anyone wanting to have a bit of fun while strengthening their CSS skills
Anyone hoping to connect with a community, inspire and be inspired
Or anyone up for a good challenge
In this series, we'll learn how to create three CSS illustrations, ranging from simple to complex. We'll learn the basics of CSS animations and how to use them to animate our illustrations. Along the way, we'll find out what concepts, tools and techniques can help speed up our workflow.]]></description>
<dc:subject>css illustrations</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3a4860744ea8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:illustrations"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.smashingmagazine.com/2018/05/guide-css-layout/">
    <title>Getting Started With CSS Layout — Smashing Magazine</title>
    <dc:date>2018-08-08T21:13:31+00:00</dc:date>
    <link>https://www.smashingmagazine.com/2018/05/guide-css-layout/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.]]></description>
<dc:subject>css grid layout flexbox</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:a6ff00d34746/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.lullabot.com/articles/css-pseudoelements-and-transforms-my-favorite-css-tools">
    <title>CSS Pseudo-Elements and Transforms: My Favorite CSS Tools | Lullabot</title>
    <dc:date>2018-06-22T21:47:39+00:00</dc:date>
    <link>https://www.lullabot.com/articles/css-pseudoelements-and-transforms-my-favorite-css-tools</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Six years ago, if you would have asked me how much I used transform and pseudo-content, I would have told you ‘I don’t.’ Now, I use them a hundred times on large projects, and I can’t think of a project of any size in recent years when I haven’t used these tools to accomplish visual effects, animations, and slick, flexible layout solutions.]]></description>
<dc:subject>css webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:4d37ed558315/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/dwyl/learn-tachyons#why">
    <title>dwyl/learn-tachyons: Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!</title>
    <dc:date>2017-10-11T20:24:24+00:00</dc:date>
    <link>https://github.com/dwyl/learn-tachyons#why</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Learn how to use Tachyons to craft beautiful, 100% responsive, functional and fast User Interface/Experience (UI/UX) with minimal CSS in much less time.]]></description>
<dc:subject>tachyons css webdevelopment webdesign framework</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:1de3c8fbbb92/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tachyons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:framework"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://tachyons-tldr.now.sh/#/classes">
    <title>tachyons tldr</title>
    <dc:date>2017-10-10T21:36:09+00:00</dc:date>
    <link>https://tachyons-tldr.now.sh/#/classes</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[quick lookup for tachyon classes, scales and colour palette]]></description>
<dc:subject>code css framework webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:31bba6e0c59a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:code"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://iraul.github.io/pushy-buttons/">
    <title>Pushy Buttons</title>
    <dc:date>2017-07-21T08:19:20+00:00</dc:date>
    <link>https://iraul.github.io/pushy-buttons/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>css buttons webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:175c405d842e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:buttons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://learncssgrid.com/">
    <title>Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh</title>
    <dc:date>2017-05-26T10:43:01+00:00</dc:date>
    <link>http://learncssgrid.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.]]></description>
<dc:subject>css grid web webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:6c77b344c244/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://cssgridgarden.com/">
    <title>Grid Garden - A game for learning CSS grid</title>
    <dc:date>2017-05-26T10:42:37+00:00</dc:date>
    <link>https://cssgridgarden.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.]]></description>
<dc:subject>css grid web webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e0ff74b5aca4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://gridbyexample.com/">
    <title>Grid by Example</title>
    <dc:date>2017-05-26T10:42:17+00:00</dc:date>
    <link>https://gridbyexample.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Everything you need to learn CSS Grid Layout]]></description>
<dc:subject>css grid webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0b02f7330cdf/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://tholman.com/obnoxious/">
    <title>Obnoxious.css</title>
    <dc:date>2017-05-09T22:08:41+00:00</dc:date>
    <link>http://tholman.com/obnoxious/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Animations for the strong of heart, and weak of mind.]]></description>
<dc:subject>css animation fun webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:ebaa67099177/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fun"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://jonibologna.com/spring-into-css-grid/">
    <title>Spring Into CSS Grid 🌼</title>
    <dc:date>2017-05-02T12:03:19+00:00</dc:date>
    <link>http://jonibologna.com/spring-into-css-grid/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS Grid has been getting a lot of attention recently and I finally dedicated time this past weekend to sit down and get a basic understanding of how it works. It was an emotional rollercoaster of an experience (seriously, this is life changing stuff) but I was able put together some notes while creating my demo and wanted to share.

This post is by no means a thorough look at just how powerful this layout feature is, but hopefully it helps take the potential intimidation factor out of the mix to get started, or spring into, CSS Grid.]]></description>
<dc:subject>css grid webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:fd886b4958e1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://cssgridgarden.com/">
    <title>Grid Garden - A game for learning CSS grid</title>
    <dc:date>2017-04-19T22:58:24+00:00</dc:date>
    <link>http://cssgridgarden.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

For example, grid-column-start: 3; will water the area starting at the 3rd vertical grid line, which is another way of saying the 3rd vertical border from the left in the grid.]]></description>
<dc:subject>css grid games learning webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:2a9fa929df8f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:games"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:learning"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://griddy.io/">
    <title>Griddy</title>
    <dc:date>2017-04-11T19:14:22+00:00</dc:date>
    <link>http://griddy.io/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Learn the CSS Grid!]]></description>
<dc:subject>css grid webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:57d74d2c8ac3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://jensimmons.com/post/feb-27-2017/learn-css-grid">
    <title>Learn CSS Grid | Jen Simmons</title>
    <dc:date>2017-02-28T23:58:39+00:00</dc:date>
    <link>http://jensimmons.com/post/feb-27-2017/learn-css-grid</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:]]></description>
<dc:subject>css design grid webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:13eb317d9c1d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">
    <title>Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira</title>
    <dc:date>2017-02-17T21:28:20+00:00</dc:date>
    <link>http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height always the same or different? Is it really between 1 and 1.2? And vertical-align, what are its implications regarding line-height?
Deep dive into a not-so-simple CSS mechanism…]]></description>
<dc:subject>css font line-height typography webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:8ae59f6dd548/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:line-height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://youmightnotneedjs.com/">
    <title>You Might Not Need JavaScript</title>
    <dc:date>2016-10-11T20:39:50+00:00</dc:date>
    <link>http://youmightnotneedjs.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependency.

Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaSript created by @adamfschwartz and @zackbloom. But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all! (Note: these methods can all be accessible, but the demos may not be. Please take a moment to test these before using in production)]]></description>
<dc:subject>css html javascript web webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:375fe6e20629/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/">
    <title>Cool CSS Text Effects - 20 Amazing Examples</title>
    <dc:date>2016-09-01T09:18:14+00:00</dc:date>
    <link>http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS3 is considered to be a true revolution when it comes to web development. The new properties contained in CSS3 allow developers to visually enhance their designs in such a way that is not only impressive in a visual sense, but is also quick and easy.
Web typography is one major thing that has dramatically changed with CSS3. You can make your design look attractive with typography and make everything visually appealing.
When it comes to web design, CSS will help you to obtain many different font effects, including using such effects as animation and clipping to spice things up a bit.
To help further illustrate this, we’ve put together a list of effects that are visually stunning and beautiful, all of which are made possible through CSS, and some of them with a little bit of Javascript as well.]]></description>
<dc:subject>css text webdesign animation typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:197eb7109e4c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.heydonworks.com/article/on-writing-less-damn-code">
    <title>Writing Less Damn Code | HeydonWorks</title>
    <dc:date>2016-08-18T08:49:07+00:00</dc:date>
    <link>http://www.heydonworks.com/article/on-writing-less-damn-code</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Unlike aiming for ‘perceived’ performance gains — where you still send the same quantity of code but you chew it up first (ed: seriously) — you can actually make your Web Stuff cheaper to use. My data contract doesn’t care whether you send small chunks or one large chunk; it all adds up the same.
My favorite thing about aiming to have less stuff is this: you finish up with only the stuff you really need — only the stuff your user actually wants. Massive hero image of some dude drinking a latte? Lose it. Social media buttons which pull in a bunch of third-party code while simultaneously wrecking your page design? Give them the boot. That JavaScript thingy that hijacks the user’s right mouse button to reveal a custom modal? Ice moon prison.
It’s not just about what you pull in to destroy your UX or not, though. The way you write your (own) code is also a big part of having less of it. Here are a few tips and ideas that might help. I’ve written about some of them before, but in terms of accessibility and responsive design. It just happens that a flexible, accessible Web is one we try to exert little of our own control over; one we do less to break.]]></description>
<dc:subject>css html programming web webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:b0ef6f01410e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:programming"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/">
    <title>An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine</title>
    <dc:date>2016-05-09T09:42:26+00:00</dc:date>
    <link>https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Now that I am far more experienced, I want to share with you in a very friendly, casual, non-dogmatic way a CSS reference guide to pseudo-classes and pseudo-elements.
If you’re an experienced web designer or developer, you must know and have used most of the pseudo-classes and pseudo-elements discussed here. However, I encourage you to check the table of contents; you might not have heard of one or two of them before.]]></description>
<dc:subject>css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:49d230bd0c2f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/comparison-animation-technologies/">
    <title>A Comparison of Animation Technologies | CSS-Tricks</title>
    <dc:date>2016-05-04T21:53:36+00:00</dc:date>
    <link>https://css-tricks.com/comparison-animation-technologies/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.


There’s no possible way to go over every single animation library around, so I’m going to stick with the ones that I’ve either used or that interest me. Please keep in mind that these are my recommendations based on my own experiences, and the web has a lot of grey area, so you may have a different experience or opinion. That’s OK.

#]]></description>
<dc:subject>css javascript animation svg</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:47e3b5ed7973/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:svg"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://devbridge.github.io/Styleguide/">
    <title>Styleguide</title>
    <dc:date>2016-04-25T09:41:58+00:00</dc:date>
    <link>http://devbridge.github.io/Styleguide/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Living Styleguide Made Easy]]></description>
<dc:subject>css tools npm nodejs gulp webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:a5c1669f6eb2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tools"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:npm"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:nodejs"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:gulp"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://flexbox.webflow.com/#how">
    <title>Visual CSS flexbox builder | Webflow</title>
    <dc:date>2016-04-14T14:42:07+00:00</dc:date>
    <link>https://flexbox.webflow.com/#how</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Meet the first visual flexbox builder
Easily build flexible, responsive layouts—without writing code. Only in Webflow.]]></description>
<dc:subject>flexbox css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:49ca8d9d7ede/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://jonsuh.com/hamburgers/">
    <title>Hamburgers by Jonathan Suh</title>
    <dc:date>2016-03-07T10:28:42+00:00</dc:date>
    <link>https://jonsuh.com/hamburgers/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Tasty CSS-animated hamburgers]]></description>
<dc:subject>css design animation webdesign ux</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:adf769bd684b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:ux"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/bradfrost/frontend-guidelines-questionnaire">
    <title>bradfrost/frontend-guidelines-questionnaire</title>
    <dc:date>2016-01-25T10:07:27+00:00</dc:date>
    <link>https://github.com/bradfrost/frontend-guidelines-questionnaire</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together.]]></description>
<dc:subject>frontend css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:01d15021771a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://codepen.io/enxaneta/full/adLPwv/">
    <title>CodePen - Flexbox playgroung</title>
    <dc:date>2016-01-21T20:39:38+00:00</dc:date>
    <link>http://codepen.io/enxaneta/full/adLPwv/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>css tools flexbox webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:cd400fd65905/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tools"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/bryanbraun/after-dark-css">
    <title>bryanbraun/after-dark-css - CSS</title>
    <dc:date>2016-01-19T13:30:15+00:00</dc:date>
    <link>https://github.com/bryanbraun/after-dark-css</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?

If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.

The animations were made with CSS alone. No animated gifs or javascript.]]></description>
<dc:subject>apple css animation nostalgia mac</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:f07b21eb2ffd/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:nostalgia"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:mac"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/10up/flexibility">
    <title>10up/flexibility</title>
    <dc:date>2015-12-24T10:41:52+00:00</dc:date>
    <link>https://github.com/10up/flexibility</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Flexibility is a polyfill for Flexible Box Layout Module Level 1. Use it to design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.

Flexbox provides an efficient way to lay out, align, and distribute items in a container, even when their size is unknown or dynamic. To better understand Flexbox, take a moment to read Chris Coyier’s excellent Complete Guide to Flexbox.]]></description>
<dc:subject>webdevelopment css javascript flexbox</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:31bb1b9f1eb9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://24ways.org/2015/animation-in-responsive-design/">
    <title>Animation in Responsive Design ◆ 24 ways</title>
    <dc:date>2015-12-22T23:24:32+00:00</dc:date>
    <link>https://24ways.org/2015/animation-in-responsive-design/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Animation and responsive design can sometimes feel like they’re at odds with each other. Animation often needs space to do its thing, but RWD tells us that the amount of space we’ll have available is going to change a lot. Balancing that can lead to some tricky animation situations.

Embracing the squishiness of responsive design doesn’t have to mean giving up on your creative animation ideas. There are three general techniques that can help you balance your web animation creativity with your responsive design needs. One or all of these approaches might help you sneak in something just a little extra into your next project.]]></description>
<dc:subject>css design animation rwd responsivedesign javascript webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0ae77c6f8cf0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:responsivedesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://fourword.fourkitchens.com/article/use-gulp-and-uncss-slim-down-your-css-framework">
    <title>Use Gulp and UnCSS to slim down your CSS framework | Fourword: The Four Kitchens blog</title>
    <dc:date>2015-10-29T22:10:13+00:00</dc:date>
    <link>https://fourword.fourkitchens.com/article/use-gulp-and-uncss-slim-down-your-css-framework</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS frameworks are a nice way to get started with a project. You can tell by the name of many popular frameworks: Bootstrap, Foundation, and Skeleton just to name a few. All of these names evoke a starting point — problem is, unless you take time to eliminate the pieces you did not use, you’ll ship bloated code to your users.

Start with everything, ship what you need

When getting started on a project, it’s useful to have a wide variety of tools at your disposal. No matter which you choose, it’s pretty certain there will be several main tools: a layout mechanism, utilities to style forms, buttons and other CTAs, sidebars, and so forth. Having these at your fingertips gets development moving and allows you to focus on the specifics of your project.

However, once it’s time to ship, leaving the full framework in place means you’re delivering unnecessary bloat to every user. Maybe you used three of the six buttons they provide, or decided to implement your own grid system mid-project. Removing these by hand is tedious and a bit precarious, since you might accidentally remove something that’s being used.

UnCSS to the rescue

A common way to avoid this issue is to use UnCSS, a tool which will compare your HTML and CSS, removing the bits of CSS that it finds are unused. It uses PhantomJS under the hood to render a set of pages, including JavaScript. Once the page is rendered in memory, it compares all the selectors in the rendered page to the CSS source files. From there it can generate a new CSS file that contains the selectors you actually used and nothing else!]]></description>
<dc:subject>css webdevelopment gulp framework</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:8da0078d72db/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:gulp"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:framework"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://jonibologna.com/flexbox-cheatsheet/">
    <title>Flexbox Cheatsheet Cheatsheet</title>
    <dc:date>2015-09-21T14:46:45+00:00</dc:date>
    <link>http://jonibologna.com/flexbox-cheatsheet/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet...based on cheatsheets.]]></description>
<dc:subject>css flexbox webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:7a566d3d9e78/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8">
    <title>DevTools Tips For Sublime Text Users — Google Developers — Medium</title>
    <dc:date>2015-09-02T13:08:06+00:00</dc:date>
    <link>https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[In this quick write-up, we’ll cover how to take advantage of your existing knowledge of features in Sublime Text and apply them to another powerful tool in your arsenal — the Chrome DevTools.

Thanks to several modern tools including DevTools, JSBin and Codepen relying on the excellent CodeMirror editor, keyboard bindings like those in Sublime Text are more readily available elsewhere than they have been.]]></description>
<dc:subject>javascript chrome debugging css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:4670991529be/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:chrome"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:debugging"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://codepen.io/CrocoDillon/pen/fBJxu">
    <title>Mixing vw and vh in font-size</title>
    <dc:date>2015-08-27T14:23:57+00:00</dc:date>
    <link>http://codepen.io/CrocoDillon/pen/fBJxu</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Using calc in combination with vw and vh units for font-size to create text that always fills the viewport. No matter what ratio.]]></description>
<dc:subject>css typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3c4e30f186d7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://cssbuttons.tumblr.com/">
    <title>CSS Buttons</title>
    <dc:date>2015-08-22T21:21:23+00:00</dc:date>
    <link>http://cssbuttons.tumblr.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[100+ Hand-picked free HTML5/CSS3 and JavaScript buttons. Updated daily.]]></description>
<dc:subject>css interface html5 webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0d66ef52b7f0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:interface"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:html5"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://alistapart.com/article/language-of-modular-design">
    <title>The Language of Modular Design · An A List Apart Article</title>
    <dc:date>2015-08-12T20:33:43+00:00</dc:date>
    <link>http://alistapart.com/article/language-of-modular-design</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Start with language
Language is fundamental to collaboration. In her book How to Make Sense of Any Mess, Abby Covert says that the biggest obstacle teams face is the lack of a shared language. To help establish that shared language, she suggests that we discuss, vet, and document our ontological decisions in the form of “controlled vocabularies.”

In short, we should start with language, not interfaces.

For about a year now, our team at FutureLearn, an open education platform, has been experimenting with a modular approach. I’d like to share a few ways we have tried to hone a shared language to help our team transition into modular design.]]></description>
<dc:subject>css design webdesign webdevelopment ui</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:5f8755fda187/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:ui"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://flexbox.io/#/">
    <title>What The FlexBox?!</title>
    <dc:date>2015-08-02T21:08:00+00:00</dc:date>
    <link>http://flexbox.io/#/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A simple, free 20 video course that will help you master CSS Flexbox]]></description>
<dc:subject>css video tutorials flexbox webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:f2e7ee535444/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:video"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tutorials"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://hugeinc.github.io/styleguide/">
    <title>Styleguide</title>
    <dc:date>2015-07-24T12:31:44+00:00</dc:date>
    <link>http://hugeinc.github.io/styleguide/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A tool to make creating and maintaining styleguides easy.]]></description>
<dc:subject>css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:a4ac7626b27c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/">
    <title>Responsive Typography with Sass Maps</title>
    <dc:date>2015-06-25T20:11:06+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.
Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.]]></description>
<dc:subject>css design typography sass webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e8176ed91261/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bradfrost.com/demo/ish/">
    <title>ish. yet another viewport resizer.</title>
    <dc:date>2015-06-09T14:05:32+00:00</dc:date>
    <link>http://bradfrost.com/demo/ish/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[I’m happy to introduce ish. 2.0. For the uninitiated, ish. is yet another viewport resizing tool. It’s called “ish.” because it focuses on general ranges (small-ish. medium-ish. large-ish.), rather than popular device widths. It’s our jobs as web designers to make sure our interfaces look and function across all screen sizes, and ish. is here to help.]]></description>
<dc:subject>css design webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0fde3282c6a5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/">
    <title>Viewport units: vw, vh, vmin, vmax - Web Design Weekly</title>
    <dc:date>2015-05-27T09:13:37+00:00</dc:date>
    <link>https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Viewport-percentage lengths

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
Note: IE9 uses vm instead of vmin. It does not support vmax.

Just to clarify: 1vmax equals 1vh in portrait mode, whilst in landscape mode, 1vmax will equal 1vw.]]></description>
<dc:subject>css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:ee351a4696cf/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://philipwalton.github.io/solved-by-flexbox/">
    <title>Solved by Flexbox — Cleaner, hack-free CSS</title>
    <dc:date>2015-05-25T10:14:23+00:00</dc:date>
    <link>https://philipwalton.github.io/solved-by-flexbox/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.

Finally, thanks to Flexbox, we have a solution.

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 the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.

Check out the demos below. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become once Flexbox becomes mainstream.]]></description>
<dc:subject>css design layout flexbox webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:37bad05a8a28/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://cssflexbox.com/">
    <title>CSS Flexbox</title>
    <dc:date>2015-04-26T12:31:40+00:00</dc:date>
    <link>http://cssflexbox.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Curated collection of CSS Flexbox related articles, tips and resources]]></description>
<dc:subject>css css3 flexbox webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:fc1f259e4306/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/@patrickbrosset/do-you-really-understand-css-linear-gradients-631d9a895caf">
    <title>Do you really understand CSS linear-gradients? — Medium</title>
    <dc:date>2015-04-15T09:28:24+00:00</dc:date>
    <link>https://medium.com/@patrickbrosset/do-you-really-understand-css-linear-gradients-631d9a895caf</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Want a nice gradient background on your site?
background-image: linear-gradient(red, blue);
BOOM, done!

Ok, it’s a little boring. So if you want more, I recommend this css-tricks article and MDN page.

Still here? Alright, let’s go and have a look at some of the details of how linear-gradients actually work.]]></description>
<dc:subject>css css3 gradients webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:516bb9c83096/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:gradients"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/">
    <title>Motion Blur Effect with SVG | Codrops</title>
    <dc:date>2015-04-10T14:15:27+00:00</dc:date>
    <link>http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.]]></description>
<dc:subject>css design animation svg webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:925ebc97fe65/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://rachievee.com/responsive-images-in-wordpress/">
    <title>Responsive Images in WordPress with Foundation's Interchange • RachieVee: Rachel's Blog</title>
    <dc:date>2015-03-15T12:38:54+00:00</dc:date>
    <link>http://rachievee.com/responsive-images-in-wordpress/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[So the problem was, how do I properly code responsive images in WordPress without one, torturing users with slower internet connections and two, still maintaining good practices?]]></description>
<dc:subject>wordpress foundation responsivedesign images webdevelopment rwd css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:eda9e2135414/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:wordpress"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:foundation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:responsivedesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:images"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:rwd"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/">
    <title>Harnessing Flexbox For Today's Web Apps - Smashing Magazine</title>
    <dc:date>2015-03-12T20:54:39+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.]]></description>
<dc:subject>css css3 design flexbox webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:494ad7a200b4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://semantic-ui.com/">
    <title>Semantic UI</title>
    <dc:date>2015-02-27T10:50:23+00:00</dc:date>
    <link>http://semantic-ui.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Semantic is a UI component framework based around useful principles from natural language.]]></description>
<dc:subject>css design framework webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3b8eb5a18f6e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://gridsetapp.com/">
    <title>Gridset | Fully-custom grids for responsive layouts</title>
    <dc:date>2015-02-12T13:01:26+00:00</dc:date>
    <link>https://gridsetapp.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Gridset for design
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.
Gridset for prototyping
Put the calculator back in the drawer. By simply adding classes to your HTML, Gridset allows you to build responsive prototypes fast, without doing any maths.
Gridset for production
Gridset provides all the measurements and tools you’ll need to integrate with your existing markup, without the need for any new classes or HTML.]]></description>
<dc:subject>css design grid webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:9afc35effc54/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://discuss.atom.io/t/number-off-center-in-notification-bubble/14490/6">
    <title>Number off-center in notification bubble - meta - Atom Discussion</title>
    <dc:date>2015-02-07T11:13:40+00:00</dc:date>
    <link>https://discuss.atom.io/t/number-off-center-in-notification-bubble/14490/6</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[braver11d
Yeah, this is basically just a nightmare in CSS. Most fonts are made to sit on a line, not in the middle of a box. CSS however somehow wants to have them in the middle of the "line-height", a concept that didn't previously exist. So while fonts are drawn in a box, that box doesn't need to be filled fully and there was previously no reason for that box to have the same amount of space at the top as it has at the bottom: as long as it sits on the baseline it used to be fine. Most fonts we still use, like Helvetica (1957) or Courier (1955), are pretty much ancient.
This creates problems: a font might not visually sit in the vertical middle of a box in CSS. In fact, it may vary wildely between fonts (i.e. Helvetica,Arial,sans-serif could go all over the place depending on the font selected).
In my experience Safari on OS X is very reliable, perhaps because compensates for a lot of fonts. The rest is basically a crap-shoot and you're left making presumptions about sizes and relative amounts of padding required.

So there is no right way, frustratingly. Safari implements it in accordance with the intention of CSS in a way you can actually make stuff look right. Font rendering on Apple software is still ages beyond the rest in every possible way. The others are perhaps more "straight" but in a way that's almost impossible to work with.]]></description>
<dc:subject>webfonts fonts css design webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:2aa520257a7d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/">
    <title>Inspiration for Text Input Effects | Codrops</title>
    <dc:date>2015-01-12T10:47:26+00:00</dc:date>
    <link>http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.]]></description>
<dc:subject>css design forms webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:8359c70fbd27/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:forms"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://ianlunn.github.io/Hover/">
    <title>Hover.css - A collection of CSS3 powered hover effects</title>
    <dc:date>2015-01-12T07:51:05+00:00</dc:date>
    <link>https://ianlunn.github.io/Hover/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.]]></description>
<dc:subject>css animation webdevelopment css3</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:c5ac8692a28f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/philipwalton/flexbugs">
    <title>philipwalton/flexbugs</title>
    <dc:date>2015-01-06T16:48:33+00:00</dc:date>
    <link>https://github.com/philipwalton/flexbugs</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[This repo aims to be a community curated list of cross-browser flexbox issues and known workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.

As the spec continues to evolve and vendors nail down their implementations, this repo will be updated with newly discovered issues and remove old issues as they're fixed or become obsolete.]]></description>
<dc:subject>css flexbox webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:6edb4112ca31/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/legomushroom/modal-break">
    <title>legomushroom/modal-break</title>
    <dc:date>2015-01-03T13:59:37+00:00</dc:date>
    <link>https://github.com/legomushroom/modal-break</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[just a small experiment on how to blow any html element]]></description>
<dc:subject>css javascript webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:64c0565400c3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://daniel-lundin.github.io/snabbt.js/index.html">
    <title>snabbt.js</title>
    <dc:date>2015-01-02T14:54:13+00:00</dc:date>
    <link>http://daniel-lundin.github.io/snabbt.js/index.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.

snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.

Note: For convenience, width and height are animatable too, but beware since they may cause page reflows and slow down your animations.]]></description>
<dc:subject>css javascript jquery js animation</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:f4628194400a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:jquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://codyhouse.co/gem/expandable-image-gallery/">
    <title>Expandable Image Gallery in CSS and jQuery | CodyHouse</title>
    <dc:date>2014-12-14T00:46:42+00:00</dc:date>
    <link>http://codyhouse.co/gem/expandable-image-gallery/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[An image that expands on click, going full-width and turning into a gallery.]]></description>
<dc:subject>gallery webdevelopment css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:cd7eac1d8d62/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:gallery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand">
    <title>Referencing parent selectors using the ampersand character</title>
    <dc:date>2014-11-26T15:32:24+00:00</dc:date>
    <link>http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Referencing parent selectors by using the ampersand (&) can be a powerful tool, if used right. There are simple uses of this feature as well as some very complex uses of this feature. In this post we will cover the basic uses of the ampersand (&) as well as link you to a post by Joel Oliveira that goes much deeper on the subject.]]></description>
<dc:subject>css sass scss webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:4e171a084d59/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:scss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://zencode.in/lining.js/">
    <title>Lining.js</title>
    <dc:date>2014-11-26T14:45:10+00:00</dc:date>
    <link>http://zencode.in/lining.js/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line. Then I read an article A Call for ::nth-everything from CSS tricks. ::nth-line() is actually really useful in some situation.

There comes LINING.JS. It offers you complete DOWN-TO-THE-LINE control like this:]]></description>
<dc:subject>css javascript typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:53cc56801040/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.cssstats.com/">
    <title>CSS Stats</title>
    <dc:date>2014-11-25T22:33:08+00:00</dc:date>
    <link>http://www.cssstats.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Parse CSS]]></description>
<dc:subject>css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:959198aedb73/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/petehunt/webpack-howto">
    <title>petehunt/webpack-howto · GitHub</title>
    <dc:date>2014-10-27T21:50:23+00:00</dc:date>
    <link>https://github.com/petehunt/webpack-howto</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[This is a cookbook of how to get things done with webpack. This includes most things we use at Instagram and nothing we don't use.

My advice: start with this as your webpack docs, then look at the official docs for clarification.]]></description>
<dc:subject>css javascript webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:66beadb6355e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://devtoolstips.com/">
    <title>DevTools Tips</title>
    <dc:date>2014-10-08T20:47:44+00:00</dc:date>
    <link>http://devtoolstips.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A curated list of Chrome DevTools tips and tricks]]></description>
<dc:subject>css development chrome debugging inspector</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:444421335778/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:development"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:chrome"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:debugging"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:inspector"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://thesassway.com/intermediate/using-source-maps-with-sass">
    <title>Using source maps with Sass 3.3</title>
    <dc:date>2014-10-07T14:48:47+00:00</dc:date>
    <link>http://thesassway.com/intermediate/using-source-maps-with-sass</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[One of the exciting new features in Sass 3.3 that every developer should take advantage of is source maps.

As CSS pre-processors, minifiers, and JavaScript transpilers have become mainstream it is increasingly difficult to debug the code running in the browser because of differences with the original source code.]]></description>
<dc:subject>css sass webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:335c07d929dd/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://sudheerdev.github.io/Foundation5CheatSheet/">
    <title>Foundation CheatSheet</title>
    <dc:date>2014-09-23T07:20:30+00:00</dc:date>
    <link>http://sudheerdev.github.io/Foundation5CheatSheet/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>foundation css webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:1de0aebd92c2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:foundation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/">
    <title>Improving Smashing Magazine's Performance: A Case Study | Smashing Magazine</title>
    <dc:date>2014-09-08T20:50:25+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Today Smashing Magazine turns eight years old. Eight years is a long time on the web, yet for us it really doesn’t feel like a long journey at all. Things have changed, evolved and moved on, and we gratefully take on new challenges one at a time. To mark this special little day, we’d love to share a few things that we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. – Ed.
Improvement is a matter of steady, ongoing iteration. When we redesigned Smashing Magazine back in 2012, our main goal was to establish trustworthy branding that would reflect the ambitious editorial direction of the magazine. We did that primarily by focusing on crafting a delightful reading experience. Over the years, our focus hasn’t changed a bit; however, that very asset that helped to establish our branding turned into a major performance bottleneck.]]></description>
<dc:subject>performance css js javascript webfonts optimization webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0d69d53a2675/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:performance"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:js"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:optimization"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</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-04T10:14:44+00:00</dc:date>
    <link>http://css-tricks.com/centering-css-complete-guide/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.


I need to center...]]></description>
<dc:subject>css guide webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:d354d7de5302/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>