LOCAL ENVIRONMENT SETUP:
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.
- NodeJS 10.x or later with NPM 5.x or later (https://nodejs.org/en/)
- Pattern Lab 3.0 Node version (https://patternlab.io/docs/installation.html). Choose Twig Edition and Twig Demo when prompted
- Drupal will not be used for these training series.
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.
- 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