Indieweb h-entry markup of blog article stream page

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

 #indieweb - #microformats 



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’m not sure that I’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 "Revisiting the Float Label pattern with CSS"</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’re going to get into sizing the grid tracks – which means the rows and columns of a grid container. There’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 "Grid Tidbits part 3: grid track sizing"</a></p>
        </div>
    </li>
    
</ul>
    </div>
</main>


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


<div
                    class="col-md-8 col-md-offset-2 h-entry idno-posts idno-object idno-content">
                    <div>
                        <div class="p-author author h-card vcard">
                            <a href="http://werd.io/profile/benwerd" class="u-url icon-container"><img class="u-photo"
                                                                                                src="http://werd.io/file/56c4b818bed7de5b507fa2a5/thumb.jpg"/></a>
                            <a class="p-name fn u-url url"
                               href="http://werd.io/profile/benwerd">Ben Werdmüller</a>
                            <a class="u-url" href="http://werd.io/profile/benwerd">
                                <!-- This is here to force the hand of your MF2 parser --></a>
                        </div>
                        <div class="break"> </div>
                    </div>
                    <div class="datestamp">
                        <p>
                            <a class="u-url url" href="http://werd.io/2016/we-all-work-in-massively-megalithic-open-plan-offices-now" rel="permalink">
                                <time class="dt-published"
                                      datetime="2016-02-29T17:18:05+00:00">2016-02-29T17:18:05+00:00</time>
                            </a>
                        </p>
                    </div>

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


<div class="h-entry">

  <div class="p-name"><a class="u-url" href="/microformats-are-amazing.html">Microformats are amazing</a></div>

  <div class="p-author">JR</div>
 
  <time class="dt-published" datetime="2013-06-13 12:00:00">Mar 20, 2016</time>

</div>
From JR's : articles
365 words - 4746 chars - 2 min read
created on Mar 20, 2016 at 08:16:41 am
updated on Mar 20, 2016 at 12:37:39 pm - #
source - versions