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:

1 Introduction to Fractal A brief introduction to Fractal and component libraries. 05:01
2 What We're Building In this course we're taking a rebuilt version of the Crafty Coffee templates and turning them into a component library. 07:15
3 Installing Fractal How to install Fractal on your computer. 02:07
4 Creating a Fractal Project With Fractal installed, we create our first Fractal project. 01:54
5 Touring the Fractal Files and Directories We'll spend a lot of time in the files and directories of our Fractal project, so let's get familiar with them. 02:43
6 Adding Twig Support to Fractal By default Fractal uses Handlebars for template rendering but we are going to switch to using Twig. 4:00
7 Building a Fractal Project With 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
8 Adding Tailwind and a Simple Build Chain We 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
9 Creating a Preview Layout We 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
10 A Quick Review of the Project Structure Before we jump into building, let's make sure we're on the same page with how the project is structured. 02:29
11 Creating Component-specific Preview Template Sometimes a component needs specific preview template code. Here's how to set a preview template on a per-component basis. 07:42
12 Building Element Components The smallest component type in our project is the element component. Let's build some! 05:24
13 Building Module Components When we put elements together, we get modules. These are the components we use to build templates. 09:51
14 Building Template Components We 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
15 Exporting Fractal to Static Files We create a couple of new scripts to handle a static export of the Fractal component library and Tailwind. 10:41
16 Deploying Fractal Component Library to GitHub Pages We 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: