Component Libraries with Fractal (and Twig)

In this course we’re going to build a component library using Fractal for the Crafty Coffee website. If you’ve been hanging out at CraftQuest for a while then you probably know the site pretty well.

This version of the site is completely redone with Tailwind and also built as a component library using Fractal.

Start Course
Ryan Irelan

I am the creator of CraftQuest, a web developer, and former software team manager. I spend most of my time improving CraftQuest with code and courses. When I'm not in front of the computer, I spend my time with my family, and running on the roads and trails of Austin, TX.

Component Libraries with Fractal (and Twig) is made up of the following videos:

1Introduction to FractalA brief introduction to Fractal and component libraries. 05:01
2What We're BuildingIn this course we're taking a rebuilt version of the Crafty Coffee templates and turning them into a component library. 07:15
3Installing FractalHow to install Fractal on your computer. 02:07
4Creating a Fractal ProjectWith Fractal installed, we create our first Fractal project. 01:54
5Touring the Fractal Files and DirectoriesWe'll spend a lot of time in the files and directories of our Fractal project, so let's get familiar with them. 02:43
6Adding Twig Support to FractalBy default Fractal uses Handlebars for template rendering but we are going to switch to using Twig. 4:00
7Building a Fractal ProjectWith a little sample code in place, let's test that our Fractal project will build before moving on with the rest of the project. 06:19
8Adding Tailwind and a Simple Build ChainWe are using Tailwind for our component library so we need to make it a dependency and add a simple build chain to build the Fractal files. 16:05
9Creating a Preview LayoutWe want our individual components to inherit the styles when we preview them on their own. To do this we create a preview layout. 03:19
10A Quick Review of the Project StructureBefore we jump into building, let's make sure we're on the same page with how the project is structured. 02:29
11Creating Component-specific Preview TemplateSometimes a component needs specific preview template code. Here's how to set a preview template on a per-component basis. 07:42
12Building Element ComponentsThe smallest component type in our project is the element component. Let's build some! 05:24
13Building Module ComponentsWhen we put elements together, we get modules. These are the components we use to build templates. 09:51
14Building Template ComponentsWe assemble a full template in Fractal. This is the final artifact we create in Fractal before the project is ready for implementation in a CMS or web application. 15:17
15Exporting Fractal to Static FilesWe create a couple of new scripts to handle a static export of the Fractal component library and Tailwind. 10:41
16Deploying Fractal Component Library to GitHub PagesWe set up a Git repository for our Fractal component library, configure a GitHub action to build and deploy the project to GitHub Pages. 18:02

More you should learn about HTML: