Check out the video above for our first in a series for getting started with the website component theming tool Mannequin.
Video Transcript:
[bright synthetic music]
Silas: Hi there, welcome to Getting Started with Mannequin, where we explore the component theming tool, Mannequin. Here’s the homepage at “mannequin.io.”
Silas: So what is this component theming thing all about anyways? Well, what Mannequin gives you is a system to show your templates in an isolated environment. These templates could be anything. They could be a slideshow, or a call-out button, or a menu. What we’ll be working on today is something really basic, just the header element. By working on your site at this granular level you’ll be encouraging reusability, and with reusability, of course, you get a more a more maintainable code base. Also you’ll be separating back-end from front-end development. Your front-end developers can work on the basic elements, they can just, say, work on a menu. They don’t have to worry about getting a full site set up on their local system. Additionally, Mannequin is extensible. We’ll be using the most basic extension which is the HTML extension, but there are also plugins for Drupal and Twig, and other plugins for other frameworks or CMSs could easily be written as well.
Silas: So let’s get started!
Silas: We start by creating directory for our code. “Change directory” into there, and run “composer” to get the project, “mannequin-html.” After a little bit of time, it’ll download the code along with the dependencies which includes Symfony. And here we’ll see if we list the files, we see “vendor,” inside of which has Symfony, and some other helpful projects which Mannequin uses.
Silas: Alright, here we are in our editor. We’re using VS Code, let’s open up that directory, and now we create a new file called “.Mannequin.php.” Here we’ll create a php file, which executes the code required to set up Mannequin. We first set up a class, a finder class, from Symfony, to search through a directory. This directory we’ll call “html” as shown here, and we’ll instruct the finder class to look for any file that ends in “*.html.” Once that’s set up, we can configure the html extension class provided by “mannequin-html.” This class is easy to set up it just requires the finder, which we set up above, and the directory where the component are located, which will be the current working directory.
Silas: Next, we return the “MannequinConfig” class, and we configure it to load foundation Java Script and CSS. Lastly, we add our extension, which we configured above, and Mannequin is all set.
Silas: Now we just have to create our components. We create the HTML directory, and create our first component file for headers, “headers.html.” Here I’ll create elements for “h1” through “h5.”
Silas: While I set these elements up, I’ll just explain that the foundation Java Script and CSS, which we instructed Mannequin to load, is just something we decided to use for this project. For your project, you would tell Mannequin to load the CSS and Java Script which you’re using.
Silas: Here I’m copying the elements and adding the class “subheader,” which is from Foundation and is just a different way to show the headers a bit later, each one later than the next. Okay, now we have to create the “headings.yml” file, “.yml.” This is what’s going to instruct Mannequin on how to show this component in the user interface. We’ll give it name “headings,” and we’ll put it in group “Typography>Base Styles.”
Silas: Finally, it’s time to start up Mannequin. Just run “vendor/bin/mannequin start.” And it’s running at “local host, port:8000.”
Silas: Alright, now let’s load it up in the browser. We’ll go to “0.0.0.0:8000,” and we’ll see the Mannequin user interface and on the right we have the menu, which we defined in the “.yml” file, and here are our headers. Here’s a view outside of the Mannequin user interface, and below we can get info about the template that we’re viewing right now.
Silas: And that’s it, thanks for joining us on the first installment of this series. In the weeks to come, we’ll be creating more videos showing more complicated components, and also showing Mannequin’s support of Twig and Drupal.
Silas: See you soon. [bright synthetic music]