<?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 (fjordaan)</title>
    <link>https://pinboard.in/u:fjordaan/public/</link>
    <description>recent bookmarks from fjordaan</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://piccalil.li/blog/the-end-of-responsive-images/"/>
	<rdf:li rdf:resource="https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/"/>
	<rdf:li rdf:resource="https://paulmakeswebsites.com/writing/shadcn-radio-button/"/>
	<rdf:li rdf:resource="https://www.sarasoueidan.com/blog/css-scrollspy/"/>
	<rdf:li rdf:resource="https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/"/>
	<rdf:li rdf:resource="https://thecascade.dev/article/css-nesting/"/>
	<rdf:li rdf:resource="https://thecascade.dev/article/least-amount-of-css/"/>
	<rdf:li rdf:resource="https://adrianroselli.com/2019/05/periodic-table-of-the-elements.html"/>
	<rdf:li rdf:resource="https://css-tricks.com/almanac/properties/c/cursor/"/>
	<rdf:li rdf:resource="https://medium.com/@bestowensss/stop-using-100vh-the-ultimate-solution-for-mobile-viewport-height-6a27a63be887"/>
	<rdf:li rdf:resource="https://lyra.horse/blog/2025/08/you-dont-need-js/"/>
	<rdf:li rdf:resource="https://work.fjordaan.net/ksr/article-trial.html#FullRiskOfBiasAssessment"/>
	<rdf:li rdf:resource="https://borderradiuscalculator.vercel.app/"/>
	<rdf:li rdf:resource="https://ohhelloana.blog/"/>
	<rdf:li rdf:resource="https://verpex.com/blog/website-tips/a-text-reveal-animation-using-css"/>
	<rdf:li rdf:resource="https://medienbaecker.com/articles/focus-outlines"/>
	<rdf:li rdf:resource="https://css-tricks.com/abem-useful-adaptation-bem/"/>
	<rdf:li rdf:resource="https://simplecss.org/"/>
	<rdf:li rdf:resource="https://x.com/comi_CSS/status/1525278862866890752"/>
	<rdf:li rdf:resource="https://neat.joeldare.com/"/>
	<rdf:li rdf:resource="https://tobiasahlin.com/blog/previous-sibling-css-has/"/>
	<rdf:li rdf:resource="https://flexboxcss.com/"/>
	<rdf:li rdf:resource="https://cssgridgarden.com/"/>
	<rdf:li rdf:resource="https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/"/>
	<rdf:li rdf:resource="https://www.caniemail.com/"/>
	<rdf:li rdf:resource="https://cruncher.ch/blog/printing-music-with-css-grid/"/>
	<rdf:li rdf:resource="https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html"/>
	<rdf:li rdf:resource="https://www.tpgi.com/the-anatomy-of-visually-hidden/"/>
	<rdf:li rdf:resource="https://pagedjs.org/about/"/>
	<rdf:li rdf:resource="https://voussoir.net/writing/css_for_printing"/>
	<rdf:li rdf:resource="https://kombai.com/figma/converting-figma-prototype-to-css-animation/"/>
	<rdf:li rdf:resource="https://twitter.com/davidm_ml/status/1764256604407415210?s=43&amp;t=DcVppoW0WQoW2NMN_iXRZw"/>
	<rdf:li rdf:resource="https://nuejs.org/"/>
	<rdf:li rdf:resource="https://nuejs.org/blog/tailwind-vs-semantic-css/"/>
	<rdf:li rdf:resource="https://piccalil.li/blog/a-more-modern-css-reset/"/>
	<rdf:li rdf:resource="https://ishadeed.com/article/css-has-guide#file-download"/>
	<rdf:li rdf:resource="https://www.loadership.com/"/>
	<rdf:li rdf:resource="https://codepen.io/manjitkarve/pen/gvwyea"/>
	<rdf:li rdf:resource="https://adrianroselli.com/2019/03/under-engineered-toggles.html"/>
	<rdf:li rdf:resource="https://twitter.com/Pinboard/status/1683470281711706112"/>
	<rdf:li rdf:resource="https://scroll-driven-animations.style/"/>
	<rdf:li rdf:resource="https://oklch.com/#81.58050256196584,0.187,190.74037768509325,100"/>
	<rdf:li rdf:resource="https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl"/>
	<rdf:li rdf:resource="https://stackdiary.com/css-media-queries/"/>
	<rdf:li rdf:resource="https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/"/>
	<rdf:li rdf:resource="https://twitter.com/bramus/status/1365736836295974915"/>
	<rdf:li rdf:resource="https://www.thegoodlineheight.com/"/>
	<rdf:li rdf:resource="https://mxstbr.com/thoughts/tailwind/"/>
	<rdf:li rdf:resource="https://www.joshwcomeau.com/css/rules-of-margin-collapse/"/>
	<rdf:li rdf:resource="https://www.joshwcomeau.com/css/full-bleed/"/>
	<rdf:li rdf:resource="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features"/>
	<rdf:li rdf:resource="https://github.com/dbaron/container-queries-implementability"/>
	<rdf:li rdf:resource="https://ishadeed.com/article/grid-layout-flexbox-components/"/>
	<rdf:li rdf:resource="https://css-tricks.com/a-complete-guide-to-links-and-buttons/"/>
	<rdf:li rdf:resource="https://neumorphism.io/#55b9f3"/>
	<rdf:li rdf:resource="https://blog.prototypr.io/create-landing-pages-like-stripe-does-9d7b81e8babd"/>
	<rdf:li rdf:resource="https://stripe.com/gb"/>
	<rdf:li rdf:resource="https://www.gradientmagic.com/"/>
	<rdf:li rdf:resource="https://stackoverflow.com/questions/8449933/animation-css3-display-opacity/8450102"/>
	<rdf:li rdf:resource="https://testdriven.io/blog/css-grid/"/>
	<rdf:li rdf:resource="https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/"/>
	<rdf:li rdf:resource="https://github.com/twbs/bootstrap/issues/22815#issuecomment-308325578"/>
	<rdf:li rdf:resource="https://css-tricks.com/almanac/properties/b/box-decoration-break/"/>
	<rdf:li rdf:resource="https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35"/>
	<rdf:li rdf:resource="http://flexbox.malven.co/"/>
	<rdf:li rdf:resource="http://grid.malven.co/"/>
	<rdf:li rdf:resource="https://greensock.com/morphSVG"/>
	<rdf:li rdf:resource="https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/"/>
	<rdf:li rdf:resource="https://mayvendev.com/blog/inner-shadows-in-css-images-text-and-beyond"/>
	<rdf:li rdf:resource="https://erikrunyon.com/2018/06/designing-web-content-for-watchos/"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://piccalil.li/blog/the-end-of-responsive-images/">
    <title>The end of responsive images - Piccalilli</title>
    <dc:date>2026-05-15T08:36:04+00:00</dc:date>
    <link>https://piccalil.li/blog/the-end-of-responsive-images/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[I’ve been waiting for fourteen years to write this article. Fourteen years to tell you about one relatively new addition to the way images work on the web. For you, just a handful of characters will mean improvements to the fundamental ergonomics of working with images. For users, it will mean invisible, seamless, and potentially massive improvements to front-end performance, forever stitched into the fabric of the web. For me, it means the time has finally come to confess to my sinister machinations — a confession almost a decade and a half in the making.
Summary: https://chatgpt.com/share/6a06dab7-00a0-83eb-a72a-56e5f66aa72e]]></description>
<dc:subject>matmarquis marquis responsive images srcset lazy loading HTML CSS hero</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:927e6bd117ee/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:matmarquis"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:marquis"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:images"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:srcset"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:lazy"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:loading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:HTML"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:hero"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/">
    <title>Laying Out a Print Book With CSS | Ian G McDowell's Blog</title>
    <dc:date>2026-02-02T16:19:01+00:00</dc:date>
    <link>https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Last year I published my debut technothriller, The Anshar Gambit, as an eBook. Satisfying, yes, but I’ve spent entirely too much of my life peddling bits. I wanted to hold it. Unsurprisingly, in order to get my book printed, I first needed to submit a pixel-perfect PDF of all the pages. And like any self-respecting nerd, I approached the challenge in the most convoluted way possible.

There’s more of an ecosystem around Paged Media than I realized, and several people pointed out that I missed a major player, paged.js. This script runs in your browser and polyfills the missing features. The upshot is it does everything WeasyPrint does, without losing the browser’s JS interpreter.]]></description>
<dc:subject>ebooks coding CSS layout book typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:9b18580052cc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:ebooks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:coding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:book"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://paulmakeswebsites.com/writing/shadcn-radio-button/">
    <title>The Incredible Overcomplexity of the Shadcn Radio Button</title>
    <dc:date>2026-01-20T16:30:56+00:00</dc:date>
    <link>https://paulmakeswebsites.com/writing/shadcn-radio-button/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[The other day I was asked to update the visual design of radio buttons in a web app at work. I figured it couldn't be that complicated. It's just a radio button right?
via https://news.ycombinator.com/item?id=46688971]]></description>
<dc:subject>rant css shadcdn react frameworks hackernews</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:4248cb5b7c6a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:rant"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:shadcdn"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:react"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:frameworks"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:hackernews"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.sarasoueidan.com/blog/css-scrollspy/">
    <title>CSS-only scrollspy effect using scroll-marker-group and :target-current</title>
    <dc:date>2025-10-28T09:47:33+00:00</dc:date>
    <link>https://www.sarasoueidan.com/blog/css-scrollspy/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[The CSS Overflow Module Level 5 introduced a new CSS property which enriches HTML anchor elements with the capabilities of CSS scroll markers, allowing you to recreate the Bootstrap Scrollspy effect using a couple of lines of CSS only. In this post, we're going to look into how to use this property, as well as discuss accessibility expectations to ensure the feature is accessible and inclusive.]]></description>
<dc:subject>CSS sarasoueidan scrolling scrollspy anchor</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:0de53dd973f6/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sarasoueidan"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:scrolling"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:scrollspy"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:anchor"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/">
    <title>CSS to speech: alternative text for CSS-generated content</title>
    <dc:date>2025-10-28T09:44:38+00:00</dc:date>
    <link>https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[This is a 101 post on when and how to use the slash content property syntax in CSS to provide alt text for CSS-generated content, and why it is important.]]></description>
<dc:subject>CSS generated content accessibility sara soueidan sarasoueidan</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:e8477d142245/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:generated"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:content"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sara"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:soueidan"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sarasoueidan"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://thecascade.dev/article/css-nesting/">
    <title>The Cascade: Native CSS Nesting</title>
    <dc:date>2025-10-07T16:36:11+00:00</dc:date>
    <link>https://thecascade.dev/article/css-nesting/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Summary: A dive into what nesting is, some of the gotcha’s with it, a little bit of how it differs from Sass nesting, and more.]]></description>
<dc:subject>CSS nesting selector tips</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:0db9aa89292d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:nesting"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:selector"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tips"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://thecascade.dev/article/least-amount-of-css/">
    <title>The Cascade: The least amount of CSS for a decent looking site</title>
    <dc:date>2025-10-07T16:28:58+00:00</dc:date>
    <link>https://thecascade.dev/article/least-amount-of-css/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Summary: People often over-engineer solutions, and it leads to them running into problems with their CSS. In this article, we'll take a look at the least amount of CSS that you need to make a decent looking page.]]></description>
<dc:subject>css minimal template reset boilerplate tips responsive</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:971684ec5370/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:minimal"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:template"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reset"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:boilerplate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:responsive"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://adrianroselli.com/2019/05/periodic-table-of-the-elements.html">
    <title>Periodic Table of the Elements — Adrian Roselli</title>
    <dc:date>2025-09-23T16:32:27+00:00</dc:date>
    <link>https://adrianroselli.com/2019/05/periodic-table-of-the-elements.html</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[ My requirements were simple: responsive (print, small screens), accessible (beyond screen readers), and kinda fun. Since it relies on a JSON data source it already requires JavaScript to function, but it still incorporates progressive enhancement (such as IE10 grid support). It skimps on supporting RTL languages because I do not know how the real-life Periodic Table of the Elements adjusts for those languages. See, I am not a chemist. Nor scientist. ]]></description>
<dc:subject>adrian roselli periodic table CSS grid JSON modal</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:098614ec0f0e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:adrian"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:roselli"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:periodic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:table"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:JSON"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:modal"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/almanac/properties/c/cursor/">
    <title>cursor | CSS-Tricks</title>
    <dc:date>2025-09-11T11:22:27+00:00</dc:date>
    <link>https://css-tricks.com/almanac/properties/c/cursor/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it’s only relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the idea of certain functionality. So try not to break that affordance.]]></description>
<dc:subject>css cursor mouse</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:4330f146fe40/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cursor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:mouse"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/@bestowensss/stop-using-100vh-the-ultimate-solution-for-mobile-viewport-height-6a27a63be887">
    <title>Stop using 100vh! The ultimate solution for mobile viewport height | by bestcode | Jul, 2025 | Medium</title>
    <dc:date>2025-09-05T11:17:38+00:00</dc:date>
    <link>https://medium.com/@bestowensss/stop-using-100vh-the-ultimate-solution-for-mobile-viewport-height-6a27a63be887</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Responsive viewport units: lvh, svh, and dvh.]]></description>
<dc:subject>CSS responsive viewport units lvh svh dvh</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:a9c5453bf468/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:viewport"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:units"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:lvh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:svh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:dvh"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://lyra.horse/blog/2025/08/you-dont-need-js/">
    <title>You no longer need JavaScript Ʊ lyra's epic blog</title>
    <dc:date>2025-08-29T09:33:16+00:00</dc:date>
    <link>https://lyra.horse/blog/2025/08/you-dont-need-js/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[My goal with this article is to share my perspectives on the web, as well as introduce many aspects of modern HTML/CSS you may not be familiar with. I’m not trying to make you give up JavaScript, I’m just trying to show you everything that’s possible, leaving it up to you to pick what works best for whatever you’re working on.]]></description>
<dc:subject>webdev tutorial css javascript syntax modern cheatsheet flexbox variables media queries viewport height responsive units lvh svh dvh</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:128e8c1d6cd8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:syntax"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:modern"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cheatsheet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:variables"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:media"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:queries"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:viewport"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:units"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:lvh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:svh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:dvh"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://work.fjordaan.net/ksr/article-trial.html#FullRiskOfBiasAssessment">
    <title>Efficacy and safety of paracetamol for spinal pain and osteoarthritis: systematic review and meta-analysis of randomised placebo controlled trials | Kleijnen Systematic Reviews</title>
    <dc:date>2025-07-14T14:16:07+00:00</dc:date>
    <link>https://work.fjordaan.net/ksr/article-trial.html#FullRiskOfBiasAssessment</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>CSS target highlight francois anchor link toc contents</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:d76034cc1687/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:target"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:highlight"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:francois"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:anchor"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:link"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:toc"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:contents"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://borderradiuscalculator.vercel.app/">
    <title>Border Radius Calculator</title>
    <dc:date>2025-06-10T12:55:54+00:00</dc:date>
    <link>https://borderradiuscalculator.vercel.app/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Know the perfect balanced border-radius]]></description>
<dc:subject>CSS border radius</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:bf6d9cbffd20/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:border"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:radius"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://ohhelloana.blog/">
    <title>Oh Hello Ana - Blog</title>
    <dc:date>2025-02-13T11:33:20+00:00</dc:date>
    <link>https://ohhelloana.blog/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[OhHelloAna.blog
Jottings from Ana Rodrigues ]]></description>
<dc:subject>blog indieweb CSS</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c0782929b773/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:blog"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:indieweb"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://verpex.com/blog/website-tips/a-text-reveal-animation-using-css">
    <title>A Text Reveal Animation using CSS</title>
    <dc:date>2024-12-13T17:35:26+00:00</dc:date>
    <link>https://verpex.com/blog/website-tips/a-text-reveal-animation-using-css</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[In this article, we are going to build a simple but cool reveal animation that you can apply to your text. It will also work with multi-line of texts! All you have to do is to add a class and see the magic in play.]]></description>
<dc:subject>css text reveal animation transition collinson prototype cgi</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:3dada5c76024/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reveal"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:transition"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:collinson"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:prototype"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cgi"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medienbaecker.com/articles/focus-outlines">
    <title>Beautiful focus outlines · Medienbäcker Thomas Günther</title>
    <dc:date>2024-11-19T11:27:25+00:00</dc:date>
    <link>https://medienbaecker.com/articles/focus-outlines</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Focus outlines highlight the active interactive element on a web page. They’re crucial for accessibility, especially for keyboard users and those with motor impairments. If you ever tried navigating a website without a mouse, you can imagine how frustrating it is when you can’t see where you are. If not, imagine not seeing your cursor. Or just try it yourself by tabbing through your favorite website.]]></description>
<dc:subject>accessibility css focus focus-visible outlines</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:1cda6c390ae0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:focus"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:focus-visible"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:outlines"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/abem-useful-adaptation-bem/">
    <title>ABEM. A More Useful Adaptation Of BEM. | CSS-Tricks</title>
    <dc:date>2024-11-11T10:19:33+00:00</dc:date>
    <link>https://css-tricks.com/abem-useful-adaptation-bem/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[I’m personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of high specificity spread all throughout your stylesheet. However, there are a few problems I have with the syntax that can cause issues in production as well as cause confusion for developers. I prefer to use a slightly tweaked version of the syntax instead. I call it ABEM (Atomic Block Element Modifier):]]></description>
<dc:subject>css syntax atomic bem</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:6fdec2addfb7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:syntax"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:atomic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:bem"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://simplecss.org/">
    <title>Simple.css</title>
    <dc:date>2024-10-11T14:35:40+00:00</dc:date>
    <link>https://simplecss.org/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Simple.css is a CSS framework that makes semantic HTML look good, really quickly.
Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML and your site will look great. If you want to add some Simple Classes to Simple.css, we have them available.]]></description>
<dc:subject>css framework library simple</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:7a542a33b383/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:library"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:simple"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://x.com/comi_CSS/status/1525278862866890752">
    <title>comicss on X: &quot;New comic strip: justify-content https://t.co/V1Ug0s0Jyw See the code and live demo: https://t.co/MhnsKGxWbL And how it was coded: https://t.co/Cf2r7elJmB https://t.co/bkh8SqL3Ld&quot; / X</title>
    <dc:date>2024-09-06T15:43:04+00:00</dc:date>
    <link>https://x.com/comi_CSS/status/1525278862866890752</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>css flexbox flex demo funny eyes comic</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:80ae470ccfdb/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flex"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:demo"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:funny"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:eyes"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:comic"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://neat.joeldare.com/">
    <title>Neat CSS</title>
    <dc:date>2024-08-02T10:34:08+00:00</dc:date>
    <link>https://neat.joeldare.com/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Rapidly build efficient sites with Neat, the minimalist css framework. Neat is about 3Kb and that's before it's minified and compressed.
It's tiny, opinionated, and made to last. It's created by Joel Dare and heavily inspired by other minimalist sites like Hundred Rabbits and dozens of similar blogs.
via https://news.ycombinator.com/item?id=41131181]]></description>
<dc:subject>css framework minimal</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:830942e0a8a1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:minimal"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://tobiasahlin.com/blog/previous-sibling-css-has/">
    <title>Selecting previous siblings with CSS :has() | Tobias Ahlin</title>
    <dc:date>2024-07-17T13:40:16+00:00</dc:date>
    <link>https://tobiasahlin.com/blog/previous-sibling-css-has/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[…and we want to select and style the element that comes before the circle. The adjacent sibling combinator (+) can select an element that immediately follows another element, and we can combine it with :has() that to select only the .box that’s immediately followed by a .circle (or from the circle’s perspective, its previous sibling):]]></description>
<dc:subject>CSS previous sibling selector has</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:90996acff4a5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:previous"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sibling"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:selector"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:has"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://flexboxcss.com/">
    <title>Flexbox CSS - Effortlessly create flexible layouts</title>
    <dc:date>2024-06-03T14:50:13+00:00</dc:date>
    <link>https://flexboxcss.com/</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>flexbox CSS tutorial interactive demo</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:0730610f25f1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:interactive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:demo"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://cssgridgarden.com/">
    <title>Grid Garden - A game for learning CSS grid</title>
    <dc:date>2024-06-03T14:40:03+00:00</dc:date>
    <link>https://cssgridgarden.com/</link>
    <dc:creator>fjordaan</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.
See also comments: https://news.ycombinator.com/item?id=40559015]]></description>
<dc:subject>css game grid learning tutorial</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:77fc99c9e36e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:game"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:learning"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/">
    <title>Using the Popover API for HTML Tooltips – Frontend Masters Boost</title>
    <dc:date>2024-05-07T14:54:10+00:00</dc:date>
    <link>https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic tooltips experience, and we’ll do a bit of a review at the end where deviations happened.]]></description>
<dc:subject>popover HTML CSS tooltip</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:2b9d0bbe2a1f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:popover"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:HTML"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tooltip"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.caniemail.com/">
    <title>Can I email… Support tables for HTML and CSS in emails</title>
    <dc:date>2024-05-07T10:26:03+00:00</dc:date>
    <link>https://www.caniemail.com/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Like caniuse but for email content (caniemail.com)
Discussion: https://news.ycombinator.com/item?id=40280490]]></description>
<dc:subject>css compatibility email guide html caniuse support</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:47d1e8d9766e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:compatibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:email"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:caniuse"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:support"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://cruncher.ch/blog/printing-music-with-css-grid/">
    <title>Printing music with CSS Grid – Blog – Cruncher – web development agency in Lausanne</title>
    <dc:date>2024-05-01T10:13:46+00:00</dc:date>
    <link>https://cruncher.ch/blog/printing-music-with-css-grid/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web!
Discussion with Adrian Holovaty of Soundslice https://news.ycombinator.com/item?id=40216057]]></description>
<dc:subject>music notation css engine adrianh soundslice</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c36e928673e4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:music"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:notation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:engine"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:adrianh"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:soundslice"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html">
    <title>Inclusively Hidden | scottohara.me</title>
    <dc:date>2024-04-16T09:17:27+00:00</dc:date>
    <link>https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[There are various ways to hide content in web interfaces, but are you aware of the different ways they can impact the accessibility of the ‘hidden’ content? While some might think it’s strange to have various ways to hide content, there are use cases that each method is suited for.]]></description>
<dc:subject>accessibility css visually hidden a11y sr-only</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:ebfc16119c75/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:visually"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:hidden"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:a11y"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sr-only"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.tpgi.com/the-anatomy-of-visually-hidden/">
    <title>The anatomy of visually-hidden - TPGi</title>
    <dc:date>2024-04-16T09:16:32+00:00</dc:date>
    <link>https://www.tpgi.com/the-anatomy-of-visually-hidden/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Our industry has largely settled on a standard CSS pattern for this, refined over years of testing and iteration, by many people. This pattern:]]></description>
<dc:subject>accessibility css webdev a11y visually hidden sr-only visually-hidden</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:33d6ecfc6db8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:webdev"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:a11y"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:visually"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:hidden"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sr-only"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:visually-hidden"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://pagedjs.org/about/">
    <title>Paged.js — About Paged.js?</title>
    <dc:date>2024-03-04T14:22:19+00:00</dc:date>
    <link>https://pagedjs.org/about/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!]]></description>
<dc:subject>css layout pdf print printing</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:df64cec6f997/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:pdf"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:print"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:printing"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://voussoir.net/writing/css_for_printing">
    <title>CSS for printing to paper</title>
    <dc:date>2024-03-04T14:20:42+00:00</dc:date>
    <link>https://voussoir.net/writing/css_for_printing</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[This article explains some of the CSS basics that control how your webpages look when printed, and a couple of tips and tricks I've learned that might help you out.
via https://news.ycombinator.com/item?id=39584654]]></description>
<dc:subject>css print printing styles hackernews</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:d36c24a77238/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:print"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:printing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:styles"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:hackernews"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://kombai.com/figma/converting-figma-prototype-to-css-animation/">
    <title>Creating CSS Animations from Figma Prototypes</title>
    <dc:date>2024-03-04T11:40:52+00:00</dc:date>
    <link>https://kombai.com/figma/converting-figma-prototype-to-css-animation/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Understanding CSS Animations
A CSS animation is defined by two key components:
    @keyframes Rule: This rule defines the animation and specifies the animation's behavior at each stage (keyframe) of the sequence.
    Animation Properties: These are properties that control the animation's behavior when applied to an element. These properties include animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.]]></description>
<dc:subject>css animations keyframes Figma</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:769948117587/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animations"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:keyframes"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:Figma"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://twitter.com/davidm_ml/status/1764256604407415210?s=43&amp;t=DcVppoW0WQoW2NMN_iXRZw">
    <title>David Mraz on X: &quot;Create holy grail layout using CSS grid 🚀 Code in the comments 🧑‍💻 https://t.co/Xmm0Y69AzI&quot; / X</title>
    <dc:date>2024-03-04T10:34:18+00:00</dc:date>
    <link>https://twitter.com/davidm_ml/status/1764256604407415210?s=43&amp;t=DcVppoW0WQoW2NMN_iXRZw</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Create holy grail layout using CSS grid 🚀
Code in the comments]]></description>
<dc:subject>css holygrail column layout</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:28720ed278e5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:holygrail"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:column"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://nuejs.org/">
    <title>Nue: The content-first web framework</title>
    <dc:date>2024-02-29T14:53:57+00:00</dc:date>
    <link>https://nuejs.org/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Nue is a closer-to-metal framework embracing minimalism and web standards. It's structurally clean and stupidly fast.
The ultimate goal of Nue is to build a perfect web framework. A content-first alternative to Next.js, Vercel and Netlify, which is extremely fast and ridiculously easy to use.]]></description>
<dc:subject>framework frontend javascript opensource software css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:567dee70a9bc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:frontend"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:opensource"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:software"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://nuejs.org/blog/tailwind-vs-semantic-css/">
    <title>Tailwind vs Semantic CSS</title>
    <dc:date>2024-02-29T14:38:59+00:00</dc:date>
    <link>https://nuejs.org/blog/tailwind-vs-semantic-css/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS:]]></description>
<dc:subject>css semantic tailwind</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:59a0d478e8fb/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:semantic"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tailwind"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://piccalil.li/blog/a-more-modern-css-reset/">
    <title>A (more) Modern CSS Reset - Piccalilli</title>
    <dc:date>2024-02-29T14:38:34+00:00</dc:date>
    <link>https://piccalil.li/blog/a-more-modern-css-reset/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.
]]></description>
<dc:subject>css reset</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:2e03ba74e3e3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reset"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://ishadeed.com/article/css-has-guide#file-download">
    <title>CSS :has() Interactive Guide</title>
    <dc:date>2024-02-26T10:10:52+00:00</dc:date>
    <link>https://ishadeed.com/article/css-has-guide#file-download</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[An extensive guide to CSS :has() selector.]]></description>
<dc:subject>css has selector guide</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:24fca4bbb99f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:has"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:selector"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:guide"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.loadership.com/">
    <title>Loadership</title>
    <dc:date>2024-01-19T15:36:55+00:00</dc:date>
    <link>https://www.loadership.com/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[LoaderShip is the ultimate CSS-only loader configuration tool that allows you to effortlessly customize and generate stunning loaders for your website. Simply Copy & Paste without any installation or dependency hassle.]]></description>
<dc:subject>css loader throbber loading animation spinner</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:16e8cbc9627b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:loader"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:throbber"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:loading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:spinner"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://codepen.io/manjitkarve/pen/gvwyea">
    <title>Tilt and flip playing cards</title>
    <dc:date>2023-10-04T10:57:11+00:00</dc:date>
    <link>https://codepen.io/manjitkarve/pen/gvwyea</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Manjit Karve
Tilt and flip playing cards
Playing cards tilted and flipped using CSS transforms and transitions. A post with a walkthrough of the code is up on my blog at]]></description>
<dc:subject>CSS card tilt flip</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:70a8729cc117/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:card"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tilt"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flip"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://adrianroselli.com/2019/03/under-engineered-toggles.html">
    <title>Under-Engineered Toggles — Adrian Roselli</title>
    <dc:date>2023-07-31T15:24:47+00:00</dc:date>
    <link>https://adrianroselli.com/2019/03/under-engineered-toggles.html</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[ For this post, I am only going to provide styles to visually convert a standard checkbox into a visual toggle. No ARIA, no script, no special features. A progressively enhanced checkbox that will continue to work if the CSS file does not load, following in the approach of my post Under-Engineered Custom Radio Buttons and Checkboxen. ]]></description>
<dc:subject>accessibility css a11y checkbox toggle switch aardvark</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:34dcbf276377/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:a11y"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:checkbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:toggle"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:switch"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:aardvark"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://twitter.com/Pinboard/status/1683470281711706112">
    <title>Pinboard on Twitter: &quot;ArsTechnica could easily host their site on a 1u pizza box, but in 2023 almost no one has worked with unvirtualized modern hardware and these Rube Goldberg setups are considered best practice. It's like taking sex advice from someone</title>
    <dc:date>2023-07-28T14:55:09+00:00</dc:date>
    <link>https://twitter.com/Pinboard/status/1683470281711706112</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[ArsTechnica could easily host their site on a 1u pizza box, but in 2023 almost no one has worked with unvirtualized modern hardware and these Rube Goldberg setups are considered best practice. It's like taking sex advice from someone who has always worn 58 condoms and a wetsuit.]]></description>
<dc:subject>pinboard maciej HTML CSS simple complex</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:b98c3505adeb/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:pinboard"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:maciej"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:HTML"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:simple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:complex"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://scroll-driven-animations.style/">
    <title>Scroll-driven Animations</title>
    <dc:date>2023-07-27T15:07:37+00:00</dc:date>
    <link>https://scroll-driven-animations.style/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of scroll-driven animation is an animation that is linked to an element's position within its scroll container. With it, for example, elements can fade-in as they come into view.]]></description>
<dc:subject>css scrolling animation sticky scroll disappearing header</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:e2b5cec00f0a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:scrolling"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:sticky"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:scroll"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:disappearing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:header"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://oklch.com/#81.58050256196584,0.187,190.74037768509325,100">
    <title>OKLCH Color Picker &amp; Converter</title>
    <dc:date>2023-05-18T16:23:50+00:00</dc:date>
    <link>https://oklch.com/#81.58050256196584,0.187,190.74037768509325,100</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>color css colour p3 gamut</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:688f9aab62a3/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:color"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:colour"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:p3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:gamut"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl">
    <title>OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog</title>
    <dc:date>2023-05-18T16:23:31+00:00</dc:date>
    <link>https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[In CSS, we’ve been encoding colors with rgb() or hex (mostly for historical reasons). However, the new CSS Color 4 specification adds many better ways of declaring colors in CSS. Of these, oklch() is the most interesting one—this article explains why.]]></description>
<dc:subject>code color css gamut p3 colour</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c5bb23171bab/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:code"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:color"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:gamut"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:p3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:colour"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://stackdiary.com/css-media-queries/">
    <title>A Practical Guide to CSS Media Queries - Stack Diary</title>
    <dc:date>2022-12-09T17:34:31+00:00</dc:date>
    <link>https://stackdiary.com/css-media-queries/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[In this article, we'll take a closer look at what media queries are, how they work, and how to use them correctly, including for creating responsive designs. We'll also cover breakpoints, look at examples, and understand the different types of device types that can be specified directly with the @media property. ]]></description>
<dc:subject>css media queries tutorial reference responsive rwd</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:2c25521ccd42/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:media"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:queries"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reference"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:responsive"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:rwd"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/">
    <title>Styling And Animating SVGs With CSS — Smashing Magazine</title>
    <dc:date>2021-06-09T08:47:48+00:00</dc:date>
    <link>https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[This article by ‪@SaraSoueidan‬ explains how CSS and SVG interact. It also lists six ways of embedding an SVG image in an HTML page. Why is it so important to optimize your SVGs? Also, why even put in the effort to make them accessible? In this article, Sara Soueidan explais why, and also how to style and animate with CSS.]]></description>
<dc:subject>animation css svg embed HTML</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:5b1651e70904/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:embed"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:HTML"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://twitter.com/bramus/status/1365736836295974915">
    <title>@addyosmani This tool right here can help you determine the opacity to use for the overlay: https://t.co/n2QzAx7mt6&quot; / Twitter</title>
    <dc:date>2021-03-01T10:44:15+00:00</dc:date>
    <link>https://twitter.com/bramus/status/1365736836295974915</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[This tool right here can help you determine the opacity to use for the overlay]]></description>
<dc:subject>spotify text image background foreground overlay gradient CSS</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:182e94541df5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:spotify"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:image"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:background"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:foreground"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:overlay"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:gradient"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.thegoodlineheight.com/">
    <title>The good line-height</title>
    <dc:date>2021-01-04T17:53:30+00:00</dc:date>
    <link>https://www.thegoodlineheight.com/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale?]]></description>
<dc:subject>css font grid leading lineheight</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:256c40cdcb3f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:leading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:lineheight"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://mxstbr.com/thoughts/tailwind/">
    <title>Why I Love Tailwind</title>
    <dc:date>2020-12-10T11:01:04+00:00</dc:date>
    <link>https://mxstbr.com/thoughts/tailwind/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Many people think Tailwind is cool because it uses atomic CSS. Here is the thing though: Tailwind is awesome despite using atomic CSS, not because of it.]]></description>
<dc:subject>css framework atomic</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c7e9d3246f19/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:framework"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:atomic"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.joshwcomeau.com/css/rules-of-margin-collapse/">
    <title>The Rules of Margin Collapse</title>
    <dc:date>2020-12-10T10:13:59+00:00</dc:date>
    <link>https://www.joshwcomeau.com/css/rules-of-margin-collapse/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly.]]></description>
<dc:subject>css margin layout joshwcomeau collapse</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:e5076f5d024d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:margin"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:joshwcomeau"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:collapse"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.joshwcomeau.com/css/full-bleed/">
    <title>CSS Grid full-bleed layout tutorial</title>
    <dc:date>2020-12-10T10:12:13+00:00</dc:date>
    <link>https://www.joshwcomeau.com/css/full-bleed/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[As the web has evolved, I've discovered a new aspirational layout. It offers a fantastic user experience, especially for long-form text content like news articles or documentation. But, like its predecessor, it's been deceptively hard to achieve; most implementations require obscure hacks or counterintuitive tricks. I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!]]></description>
<dc:subject>columns css grid layout joshwcomeau holy grail wide</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:6b702b9b6ef2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:columns"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:joshwcomeau"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:holy"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grail"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:wide"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">
    <title>Using media queries - CSS: Cascading Style Sheets | MDN</title>
    <dc:date>2020-11-30T17:04:36+00:00</dc:date>
    <link>https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).]]></description>
<dc:subject>CSS media features detecting</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:8a146805c289/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:media"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:features"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:detecting"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/dbaron/container-queries-implementability">
    <title>dbaron/container-queries-implementability: Proposal for container queries designed to be implementable in web browsers</title>
    <dc:date>2020-11-06T16:16:57+00:00</dc:date>
    <link>https://github.com/dbaron/container-queries-implementability</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[The idea of Container Queries has been discussed widely, such as in WICG/container-queries and in w3c/csswg-drafts#3852. CSS authors want a way to use a feature like media queries on a part of the page. Many of the use cases underlying this desire relate to things that are component-like, that is, pieces of a web page that might be used in different webpages. Authors wish to construct a component whose appearance responds to its size, but they want this component to be a part of the webpage that contains it.]]></description>
<dc:subject>CSS container queries RWD</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:49e84282faac/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:container"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:queries"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:RWD"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://ishadeed.com/article/grid-layout-flexbox-components/">
    <title>Grid for layout, Flexbox for components</title>
    <dc:date>2020-07-28T09:40:20+00:00</dc:date>
    <link>https://ishadeed.com/article/grid-layout-flexbox-components/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Let me be clear about that, there is no direct way to decide between CSS grid and flexbox. Adding on that, there is no correct or incorrect way to use them. This article is a kind of guide that recommends using a technique for a specific use-case. I will explain the general concept, and then go into examples, and the rest is on you to explore and experiment more.]]></description>
<dc:subject>grid flexbox css layout Ahmad Shadeed</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:fe727a553d05/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:Ahmad"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:Shadeed"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/a-complete-guide-to-links-and-buttons/">
    <title>A Complete Guide to Links and Buttons | CSS-Tricks</title>
    <dc:date>2020-02-17T08:53:15+00:00</dc:date>
    <link>https://css-tricks.com/a-complete-guide-to-links-and-buttons/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.]]></description>
<dc:subject>accessibility buttons css html links guide</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c38df36788a5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:accessibility"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:buttons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:html"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:links"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:guide"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://neumorphism.io/#55b9f3">
    <title>Neumorphism/Soft UI CSS shadow generator</title>
    <dc:date>2020-02-10T10:10:56+00:00</dc:date>
    <link>https://neumorphism.io/#55b9f3</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Generate Soft-UI CSS code]]></description>
<dc:subject>css shadow tool generator css3 bevel emboss neomorphism skeuomorphism design bullshit</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:853b968d85e1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tool"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:generator"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:bevel"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:emboss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:neomorphism"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:skeuomorphism"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:bullshit"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://blog.prototypr.io/create-landing-pages-like-stripe-does-9d7b81e8babd">
    <title>Create landing pages like Stripe does - Prototypr</title>
    <dc:date>2019-09-07T09:55:18+00:00</dc:date>
    <link>https://blog.prototypr.io/create-landing-pages-like-stripe-does-9d7b81e8babd</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Every single time I get to open Stripes website, I can’t help but smile a little. A fast-loading, beautifully designed website which uses awe-inspiring animations and techniques to get the correct message to its users. My favourite pages include the ones about the enterprise, payments, or Sigma. There is so much you can learn from this website, and not just as a designer or developer.]]></description>
<dc:subject>stripe homepage landing CSS tips inspiration</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:f6c2a168f9c2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:stripe"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:homepage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:landing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tips"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:inspiration"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://stripe.com/gb">
    <title>Online payment processing for internet businesses - Stripe</title>
    <dc:date>2019-09-07T09:52:39+00:00</dc:date>
    <link>https://stripe.com/gb</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[ Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world. ]]></description>
<dc:subject>CSS ecommerce inspiration landing homepage layout</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:d2ce98f3cf06/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:ecommerce"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:inspiration"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:landing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:homepage"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.gradientmagic.com/">
    <title>Gradient Magic</title>
    <dc:date>2019-07-29T14:06:59+00:00</dc:date>
    <link>https://www.gradientmagic.com/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[A Gallery of Fantastic and Unique CSS Gradients]]></description>
<dc:subject>css gradients diagonal checkered stripes</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:d5caf2856dcf/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:gradients"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:diagonal"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:checkered"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:stripes"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://stackoverflow.com/questions/8449933/animation-css3-display-opacity/8450102">
    <title>css - Animation CSS3: display + opacity - Stack Overflow</title>
    <dc:date>2019-07-29T10:07:34+00:00</dc:date>
    <link>https://stackoverflow.com/questions/8449933/animation-css3-display-opacity/8450102</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[I want to change the display just after the hover but the opacity should be changed using the transition.]]></description>
<dc:subject>CSS CSS3 animate transition animation display none</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:689692364e5a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animate"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:transition"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:display"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:none"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://testdriven.io/blog/css-grid/">
    <title>CSS Grid: No Nonsense Layouts | TestDriven.io</title>
    <dc:date>2019-06-06T15:26:40+00:00</dc:date>
    <link>https://testdriven.io/blog/css-grid/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[The intent of this article is to expose the power behind CSS Grid. You'll learn how to create grid-based layouts through a practical, example-based approach.]]></description>
<dc:subject>css grid tutorial</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:5bc1adfb107e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/">
    <title>How To Set Weights And Styles With The @font-face Declaration — Smashing Magazine</title>
    <dc:date>2019-02-14T11:27:12+00:00</dc:date>
    <link>https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Another way to set weights and styles is to use the same font-family name multiple times, setting the weights and styles in each @font-face declaration to match the weight and style of the Web font file being accessed. This approach is called style linking.]]></description>
<dc:subject>css fonts webfonts style linking bold italic</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:1c58e611dee4/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:style"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:linking"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:bold"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:italic"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://github.com/twbs/bootstrap/issues/22815#issuecomment-308325578">
    <title>Why so many !important css declarations? #22815</title>
    <dc:date>2019-02-11T13:58:26+00:00</dc:date>
    <link>https://github.com/twbs/bootstrap/issues/22815#issuecomment-308325578</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[They're there to ensure you can apply those styles as utilities no matter what. It's a necessary evil that's only present for utility classes, and nothing else.]]></description>
<dc:subject>bootstrap css important cascade mdo</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:4b37ef7b3de9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:bootstrap"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:important"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cascade"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:mdo"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://css-tricks.com/almanac/properties/b/box-decoration-break/">
    <title>box-decoration-break | CSS-Tricks</title>
    <dc:date>2019-01-25T14:19:16+00:00</dc:date>
    <link>https://css-tricks.com/almanac/properties/b/box-decoration-break/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Another common case is inline text that breaks into multiple lines. Styles applied to those can look weird/bad unless you clone the styles:]]></description>
<dc:subject>inline text box wrap padding CSS soundcloud</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:eac0dc0b6ec2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:inline"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:box"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:wrap"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:padding"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:CSS"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:soundcloud"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35">
    <title>The Complete Illustrated Flexbox Tutorial – freeCodeCamp</title>
    <dc:date>2018-08-10T14:03:14+00:00</dc:date>
    <link>https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[When I started to learn flex I wanted to see everything it was capable of. But when it came to examples of all properties, visually I wasn’t able to find a thorough tutorial. So, I created these diagrams that offer a bird’s 🐦 eye view.]]></description>
<dc:subject>css guide layout tutorial flexbox reference flex</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:e9e6df99c016/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:guide"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reference"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flex"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://flexbox.malven.co/">
    <title>FLEX: A simple visual cheatsheet for flexbox</title>
    <dc:date>2018-08-10T13:58:47+00:00</dc:date>
    <link>http://flexbox.malven.co/</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>flex flexbox css layout cheatsheet reference</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:eb3a81d6ba97/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flex"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:flexbox"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cheatsheet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reference"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://grid.malven.co/">
    <title>GRID: A simple visual cheatsheet for CSS Grid Layout</title>
    <dc:date>2018-08-10T13:54:45+00:00</dc:date>
    <link>http://grid.malven.co/</link>
    <dc:creator>fjordaan</dc:creator><dc:subject>cheatsheet css grid layout reference</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:42cf635b5a4a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:cheatsheet"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:grid"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:layout"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:reference"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://greensock.com/morphSVG">
    <title>MorphSVG plugin | GSAP from GreenSock | JavaScript HTML5 Animation</title>
    <dc:date>2018-08-06T10:12:13+00:00</dc:date>
    <link>https://greensock.com/morphSVG</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[MorphSVGPlugin provides advanced control over tweens that morph SVG paths.]]></description>
<dc:subject>morph tween svg shapes path animation css</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:6098526ee965/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:morph"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tween"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:svg"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:shapes"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:path"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/">
    <title>12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack</title>
    <dc:date>2018-07-09T13:53:06+00:00</dc:date>
    <link>https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.]]></description>
<dc:subject>text-shadow css shadow emboss letterpress double</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:690046310fd1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:text-shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:emboss"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:letterpress"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:double"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://mayvendev.com/blog/inner-shadows-in-css-images-text-and-beyond">
    <title>Inner Shadows in CSS: Images, Text and Beyond - Top Digital Agency | San Francisco &amp; Austin</title>
    <dc:date>2018-07-02T09:20:17+00:00</dc:date>
    <link>https://mayvendev.com/blog/inner-shadows-in-css-images-text-and-beyond</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.]]></description>
<dc:subject>css shadow box-shadow text syntax tutorial</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:c1c3fd2fd349/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:box-shadow"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:syntax"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:tutorial"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://erikrunyon.com/2018/06/designing-web-content-for-watchos/">
    <title>Designing Web Content for watchOS | Erik Runyon</title>
    <dc:date>2018-06-19T09:26:58+00:00</dc:date>
    <link>https://erikrunyon.com/2018/06/designing-web-content-for-watchos/</link>
    <dc:creator>fjordaan</dc:creator><description><![CDATA[On Monday Apple announced that it was bringing Webkit to the Apple Watch with WatchOS 5. This will allow users to open links from the Mail and Messages apps directly on their watches. Naturally, as web developers, we wonder how this will work with our already responsive websites. Well here’s the basics.]]></description>
<dc:subject>apple css watchos watch</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:fjordaan/b:f611e11cd4a6/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:watchos"/>
	<rdf:li rdf:resource="https://pinboard.in/u:fjordaan/t:watch"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>