h1. indieweb h-entry markup of blog article stream page

 #indieweb - #microformats 

code=yes

https://adactio.com

<article class="xfolkentry h-entry">

<div class="e-content">

<h2>
<a class="taggedlink p-name" href="http://mrmrs.io/writing/2016/03/17/webfonts/">
Webfonts
</a>
</h2>

<p>I love good typography but I have to agree with the sentiment expressed here.</p>

<blockquote>
  <p>System fonts <strong>can</strong> be beautiful.
  Webfonts are <strong>not</strong> a requirement for great typography.</p>
</blockquote>

</div>

<footer>
<p class="meta">
<a rel="bookmark" class="u-url" href="/links/10391">
<time class="dt-published" datetime="2016-03-18T16:29:42Z">
4:29pm
</time>
</a>
</p>
<p class="meta">
Tagged with
<a rel="tag" class="p-category" href="/links/tags/webfonts">webfonts</a>
<a rel="tag" class="p-category" href="/links/tags/typography">typography</a>
<a rel="tag" class="p-category" href="/links/tags/type">type</a>
<a rel="tag" class="p-category" href="/links/tags/reading">reading</a>
<a rel="tag" class="p-category" href="/links/tags/performance">performance</a>
</p>
</footer>

</article>


=========================

http://thatemil.com/blog/


<main role="main">
    <div class="wrap">
        <h1>Blog</h1>

        
<ul class="h-feed ui-list">
    
    <li class="h-entry entry">
        
        <h2 class="p-name"><a class="u-url" href="/blog/2016/01/23/floating-label-no-js-pure-css/" rel="bookmark" class="entry-title">Revisiting the Float Label pattern with CSS</a></h2>

        <p class="entry-meta"><time class="dt-published" datetime="2016-01-23T11:55:37+01:00">January 23 2016</time></p>
        
        <div class="entry-summary entry-body p-summary prose">
            <p>The <a href="http://mds.is/float-label-pattern/">float label pattern</a> is a slick pattern that designers seem to love. I&rsquo;m not sure that I&rsquo;m 100% in love with it, but I couldn't resist cooking up a quick demo implementation. This version uses a few nice form-styling tricks using modern CSS that I've seen recently, particularly the <code>::placeholder-shown</code> selector. </p>

            <p><a class="u-url" href="/blog/2016/01/23/floating-label-no-js-pure-css/">Read the whole post &amp;quot;Revisiting the Float Label pattern with CSS&amp;quot;</a></p>
        </div>
    </li>
    
    <li class="h-entry entry">
        
        <h2 class="p-name"><a class="u-url" href="/blog/2015/08/24/grid-tidbits-3-track-sizing/" rel="bookmark" class="entry-title">Grid Tidbits part 3: grid track sizing</a></h2>

        <p class="entry-meta"><time class="dt-published" datetime="2015-08-24T13:45:54+02:00">August 24 2015</time></p>
        
        <div class="entry-summary entry-body p-summary prose">
            <p>In this Grid Tidbit, we&rsquo;re going to get into sizing the grid tracks &ndash; which means the rows and columns of a grid container. There&rsquo;s all sorts of special functions and tricks that help us do so in a flexible way.</p>

            <p><a class="u-url" href="/blog/2015/08/24/grid-tidbits-3-track-sizing/">Read the whole post &amp;quot;Grid Tidbits part 3: grid track sizing&amp;quot;</a></p>
        </div>
    </li>
    
</ul>
    </div>
</main>