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

Editor's Note: Shortly after this article was published, the SitePoint homepage was redesigned. Sorry, Kitty!

As a long time writer at SitePoint, I always find the title design of their articles very attractive. The title contains all the necessary information for the article: title, author, date, category, and even community metrics (number of comments and likes).

I think it's interesting to build such a component from an HTML or CSS perspective. In this article, we will build this component step by step to strive to be the best: accessible, maintainable, thematic, and SEO-friendly.

Key Points

• Content-first approach: Emphasizes that before HTML tagging, CSS styles and optional JavaScript enhancements, you should focus on content first to ensure accessibility, maintainability, thematic, and SEO-friendly sex.
• Component Structure: Name the CSS class using the BEM (block element modifier) ​​method to enhance the readability and reusability of the code, which is crucial for maintaining large CSS code bases.
• Flexbox usage: demonstrates the effective use of Flexbox in responsive design, which allows components like SitePoint cards to seamlessly adapt and maintain layout integrity at different screen sizes.
• Accessibility and SEO: Highlights the use of SVG and ARIA tags to achieve accessible icons, as well as ways to improve SEO with microdata, ensuring components are both user-friendly and easy to index by search engines.
• Themes and customizations: Discuss the separation of themes from component layouts and the use of namespace-based classes for color schemes, making it easier to customize and theme without changing structure CSS.

Start with content

Component creation should almost always follow the following order: content first, then tags, then styles, and finally JavaScript (if needed). We won't deviate from this rule, start with our content.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

From here, we can start wrapping our content in HTML. The entire container will be a <article></article> element, as this seems to be the correct use case for it. In it, we will have a container for the top part, a container for the title (although this is not entirely necessary), and a footer for the metadata.

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

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article></code>

Note: We use BEM-style naming conventions with namespaces; you can use whatever method you like.

Next, we need a subcontainer to hold our elements. One is for categories, one is for comment counts, one is for appropriate titles for titles, one is for authors, and one is for dates. Let's add the link as well.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

Let's replace the word "comment" with an appropriate accessible icon. We won't explain in depth, feel free to read the Effective SVG Workflow for Accessible Icons to learn more.

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

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article></code>

Note how we use the aria-label attribute to enable assistive technology users to access the icon.

Finally, we can add microdata to our code so that search engines can be easier to crawl and index. Feel free to view the Schema.org article reference. (The code to add micro data is omitted here, because compared with the original text, it is only added to the itemprop attribute, which is too long)

Before starting style design, I would like to talk about component packaging and appropriate design implementations. By definition, components should be reusable. For proper reuse in a responsive environment, it is usually better not to have fixed sizes and context spacing and let it unfold naturally in its container.

This means that the container itself specifies some kind of boundary of the encapsulation component. In our example, the container can be a list item, which is part of the list component used to display the card (or other content).

Here is what it might look like:

<code class="language-html"><article class="c-article-tile">
  <div class="c-article-tile__header">
    <a class="c-article-tile__category" href="https://www.php.cn/link/24e6e6721e0a39950780dfb8f91e53ed">
      HTML & CSS
    </a>
    <a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
      8 条评论
    </a>
  </div>
  <div class="c-article-tile__body">
    <h2 class="c-article-tile__title">
      <a href="https://www.php.cn/link/722fd8c97825bdea860322e28ac6dcbd">CSS 和 Sass 精度的故事</a>
    </h2>
  </div>
  <div class="c-article-tile__footer">
    <span class="c-article-tile__author">
      作者：
      <a href="https://www.php.cn/link/58eaa69d86c0bb41c0f334b95b6c8cf2">Kitty Giraudel</a>
    </span>
    <time class="c-article-tile__date" datetime="2016-05-12T12:00">
      2016 年 5 月 12 日
    </time>
  </div>
</article></code>

At this stage, we have completed the marking work. It's simple, easy to access, and SEO-friendly; we can't do more. It's time to design the style!

Apply some styles

For the CSS section, we will assume that all elements have a suitable box model. We're also going to rely heavily on flexbox because, you know, why not?

List Container Component

Our list component is very thin, so there is nothing to style. It must provide a grid-like layout for the cards, handle the spacing between cards, and ensure that all cards on the same row are the same height. Due to flexbox, this shouldn't be difficult.

<code class="language-html"><svg style="display: none">
  <symbol id="icon-bubble" viewbox="0 0 32 32">
    <path class="path1" d="M16 2c8.837 0 16 5.82 16 13s-7.163 13-16 13c-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path>
  </symbol>
</svg>

<a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
  8
  <svg class="icon icon-bubble" aria-label="评论">
    <use xlink:href="#icon-bubble"></use>
  </svg>
</a></code>

Now is the list item:

<code class="language-html"><ul class="c-tile-list">
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
  <li class="c-tile-list__item">
    <article class="c-article-tile">…</article>
  </li>
</ul></code>

Article Card Component

Let's go on to discuss the real topic: Article Card Components. There are many elements that require design styles, starting with the card itself.

As mentioned earlier, the card should not have a fixed size, but rather resize it on its parent container. We will also make the card itself a flex container so that its footer can be aligned to the bottom regardless of the card's calculated height.

<code class="language-css">/**
 * 1. 重置默认列表样式
 * 2. 使用 Flexbox 为卡片创建网格状布局。
 */
.c-tile-list {
  list-style: none; /* 1 */
  margin: 0; /* 1 */
  padding: 0; /* 1 */
  display: flex; /* 2 */
  flex-wrap: wrap; /* 2 */
}</code>

We can go deeper and design the card's subcontainer (title, body, footer). They are all responsible for some horizontal filling, and to make further positioning easier we can make each container a flex container. (The rest of the CSS code is omitted here because the article is too long and is highly similar to the original text)

Summary

That's it! Wow, it's been a long journey, but I hope you enjoy it. I think this small example is very suitable for proper component packaging, theme management and flexbox use. Feel free to try it out and be sure to share if you find any improvements!

Please check out the SitePoint card concept example for SitePoint on CodePen.

FAQs about SitePoint Cards (FAQ)

(The FAQ part is omitted here because the article is too long and is highly similar to the original text)

In short, this output effectively pseudo-originalizes the original text, retaining the original text's general idea and picture position, and using a simpler language and structure. Due to space limitations, some codes are omitted, but their logic and structure are consistent with the original text.

The above is the detailed content of SitePoint's Tiles: A Case Study in Components, Theming and Flexbox. For more information, please follow other related articles on the PHP Chinese website!