Chapter 3
Topics covered in this chapter
This workshop is hands-on and we have put together a series of exercises which will help you ease into the component based development process. We'll start with basic exercises for creating simple components and from there we'll dive into more advanced tasks in which we will integrate the components with Drupal.
Build the following components
Working theme
All exercises will be done in the nitflex_dev_theme theme. If you built your project using the provided Lando workflow, nitflex_dev_theme should already be your default theme. If you setup Drupal on your own, follow the steps at the bottom of the README in the project's repo under Not using Lando?.
Generating a styleguide
Before we can build components, we need to generate a living styleguide using KSS Node to host our components.
KSS Node is a methodology for documenting CSS and generating styleguides. Fortunately, Mediacurrent's theme generator already provides KSS Node fully integrated when a new Drupal 8 thme is created.
If you already created a new theme or used the provided nitflex_dev_theme theme, and compiled the theme, you already have a styleguide in place. You can view the styleguide by going
http://nitflex.lndo.site:8000/themes/custom/nitflex_dev_theme/dist/style-guide/index.html
or custom URL if you're not using the provided lando setup.
If you have not compiled your project yet, do the following:
In your terminal or command line navigate to
/themes/custom/nitflex_dev_theme/Run:
lando npm install. This will install the required front end tools (Node, Gulp, etc.)View the styleguide by going to
http://nitflex.lndo.site:8000/themes/custom/nitflex_dev_theme/dist/style-guide/index.html
Depending on your setup, you may not need to enter ":8000". Also if you did not use the provided Lando setup, ensure you are using your own custom URL.