Introduction to building and styling components - Part I

ECT 123

If you would like to follow along with exercises during this mini-workshop, please have the following tools installed and setup. NOTE: In the interest of time I will not be able to assist with local setups.


With the component-based approach becoming the standard for web development we’re beginning to see some slick front-end environments show up. The demand for designers and developers with experience in components continues to grow day by day.

In this hands-on mini-workshop, we will put into practice one of the latest trends in development: components. Building a website using a component-based approach can help make code more reusable, dramatically improve collaboration among teams, while improving flexibility and long-term maintenance of your project. We will work on building a living style guide which will become the single source of truth for markup, styles, and behaviors.

This class will cover the following topics/technologies:

  • HTML: Writing the proper markup for your components sets you in a path to success. Proper and semantic markup improves website performance, accessibility as well as responsive design.
  • CSS: We will use the BEM methodology for naming our CSS classes. This will allows us to establish relationship on the components we build which in turn makes it easier to know where we find styles and rules as our component libraries increase.
  • Styleguide: A living styleguide is critical when working with components. The premise of components is that are the single source of thruth for markup, styles and javascript. This means anytime you need to update a component on your website, you do this in the styleguide. For the purpose of this training we will use Pattern Lab as this is one of the most popular design systems nowadays.
  • Twig: We will build the components using the power of Twig's logic, for loops and more to avoid repeating code and build more dynamic components.

Be sure to attend part II

Front End
One hour
Session Tags: