SitePoint’s Tiles: A Case Study in Components, Theming and Flexbox

I have long been a writer for SitePoint, and I always found their article tiles quite appealing from a design perspective. They provide all the necessary information about articles: title, author, date, category and even community metrics (number of comments and likes).

I figured such a tile is probably an interesting component to build, both from the HTML and the CSS perspective. In this article, we will build this component step by step, trying to make it the best we can: accessible, maintenable, themable and SEO-friendly.

Starting With Content

A component should almost always be created following this order: content first, then markup, then styles, and finally JavaScript (if needed). We won’t depart from this rule and start with our content.

HTML & CSS

8 comments

A Tale of CSS and Sass Precision

by Hugo Giraudel

May 12, 2016

From there, we can start wrapping our content with HTML. The whole container will be an <article> element as this seems to be a correct use case for it. Inside of it, we’ll have a container for the top part, a container for the title (although that is not entirely mandatory), and a footer for the metadata.

[code language="html"]
<article class="c-article-tile">
<div class="c-article-tile__header">
HTML & CSS

8 comments
</div>
<div class="c-article-tile__body">
A Tale of CSS and Sass Precision
</div>
<footer class="c-article-tile__footer">
by Hugo Giraudel

May 12, 2016
</footer>
</article>
[/code]

Note: we use a BEM-flavored convention for naming classes, with namespaces; feel free to use whatever you prefer.

Next, we need sub-containers for our elements. One for the category, one for the comment count, a proper heading for the title, a container for the author, and one for the date. Let’s also add links.

[code language="html"]
<article class="c-article-tile">
<!-- Tile header -->
<div class="c-article-tile__header">
<a class="c-article-tile__category"
href="http://ift.tt/29FZC67">
HTML & CSS
</a>
<a class="c-article-tile__comment-count"
href="http://ift.tt/29yxRsx">
8 comments
</a>
</div>

<!-- Tile body -->
<div class="c-article-tile__body">
<h2 class="c-article-tile__title">
<a href="http://ift.tt/27GAfaV">
A Tale of CSS and Sass Precision
</a>
</h2>
</div>

<!-- Tile footer -->
<footer class="c-article-tile__footer">
<span class="c-article-tile__author">
by
<a href="http://ift.tt/29yxrCw">
Hugo Giraudel
</a>
</span>
<time class="c-article-tile__date"
datetime="2016-05-12T12:00">
May 12, 2016
</time>
</footer>
</article>
[/code]

It’s looking good! A few interesting things to note:

• We do not use a <header> element for the top part as a header typically contains a heading, which is not the case here.
• We use <span> elements rather than <p> elements as nothing here is a paragraph of content per sé.
• We use a proper <time> element and its datetime attribute rather than a <span> to describe the date.

Continue reading %SitePoint’s Tiles: A Case Study in Components, Theming and Flexbox%

by Hugo Giraudel via SitePoint