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.
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|