Creating Modular Article Elements

Creating a modular code base is key to the extensibility of any web app. A modular code base requires involvement from both the design team and the development team as the interface should be designed in a way that promotes modularity. Today I will show you how to create a modular HTML and CSS component that is seen throughout the web.

article Element

article is an HTML5 element that can be found all over the web. It represents an independent item section of content. It’s often used as an element to represent blog post teasers among other things. These blog teasers can come in many sizes and shapes. This is exactly where modular components shine.

Going Modular

If the design team gives us three types of article layouts it is our job as Front End Developers to dissect the design and look for ways to create modular components.

A three article design mock

As you can see these three article layouts share the same design elements. A title, a post date, an author byline and an article image. The best way to code these components is by creating a HTML and CSS architecture that can be reused. There are many CSS naming conventions which I described in my article regarding modular CSS, but for this tutorial I will use a naming convention that resembles BEM.

Lets start!

When you look at this design you can start seeing the individual elements as Lego pieces that are used to comprise the entire component. With this mentality, lets start coding out our component and learn as we go.

See the Pen Modular Component by Adrian Eufracio (@adrianeufracio) on CodePen.

We have created our first component pretty easily using the article element. If another developer or designer looks at our HTML and CSS markup, they will be able to understand what they mean since it is written in a semantic manner. Our next task will be to create our second component using the same HTML structure while adding CSS classes when needed to help modify the look of the element.

See the Pen Modular Component 2 by Adrian Eufracio (@adrianeufracio) on CodePen.

As you can see, just by adding a one class to our existing element, .article-medium, we can alter the appearance of our component to create the modified component. Lets do the same for our last component.

See the Pen Modular Component 3 by Adrian Eufracio (@adrianeufracio) on CodePen.

This component was just as easy to make. Using the BEM inspired methodology it is a breeze to create modularized components. To wrap this tutorial up, I will place all the elements together and use the section element to help with the layout.

See the Pen Modular Component Complete by Adrian Eufracio (@adrianeufracio) on CodePen.

Modular Resources