Below is a step by step walkthrough for building a page for an article about fruit, with FT.com colors and fonts, and we’ll include a few Origami components to do so.
We’ll need to start with some boilerplate markup.
In order to get that, we’ll need the foundation of our HTML to look like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First Origami Page</title> </head> <body class="o-colors-page-background"> <div class="o-grid-container o-typography-wrapper"> <div class="o-grid-row" data-o-grid-colspan="center 8"> </div> </div> </body> </html>
You won’t see anything yet, but the classes and the data attribute will be working together to center our content across a span of 8 columns when we add the CSS to our page.
For now, let’s finish putting together the content of our page.
First, we’re going to add some content for our article, so lets add a heading and some great information about fruit in our
<h1>Funky Fruit Facts</h1> <h2>Durian</h2> <p>Due to its overpowering smell, durian has been banned on many types of public transport across Thailand, Japan and Hong Kong. In Singapore, the fruit is banned across all types of public transportation and even taxis have signs to let you know they refuse to carry passengers transporting the smelly fruit.</p> <h2>Dragonfruit</h2> <p>The cactus flower that produces dragon fruit survives only a single night. It blooms in the evening, ready for pollination by bats and moths, and wilts the very next day. The very brief pollination period, however, is sufficient for the plant to bear fruits.</p> <h2>Naseberry, aka Sapodilla</h2> <p>The sapodilla tree supplies the building blocks for a number of products utilized by humans. Long ago, the Mayas and Aztecs would boil its ‘chicle’ sap, mold it into thick blocks and cut them into small pieces to chew. They were making the first chewing gum!</p>
Finally, we want to showcase the popularity of each fruit in a sortable table. To do that, we’re going to use the
All of the markup that comes with an Origami component is available on the components’ page in the Origami registry.
We can find the markup for the striped variation of o-table in the registry, and copy that HTML into our work from there.
Now we come to the second step in putting our page together, and a big part of what makes the Build Service a quick solution.
The Build Service will perform a number of build steps to compile and bundle up the SCSS that most Origami component styles are written in. Since it is all bundled for us to pick and choose from, let’s begin by styling our grid. This means we’ll have to add a
link tag to our
href of that link references the endpoint that serves all CSS bundles in the Build Service. The most important part of this url is the query parameter - it specifies what component and which version of it we’re after:
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-grid@^5.2.9"/>
Now, you should see all of your content snap to the center of the page. This means that we’ve successfully fetched the
o-grid CSS bundle from the Build Service.
But we also want to style our content and our table, and fetch the right color from our color palette.
It is important to highlight that you only need one link tag per page, regardless of how many components you are using. The Build Service can include more than one component in the bundle we ask for, meaning that we can add multiple components to the same URL. This avoids duplicating the CSS that is shared between components, because we are only downloading it all once.
So in order to add the styling for all of our other components, we need to add a few components (and versions!) to the query parameter of our original url:
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-grid@^5.2.9,o-colors@^5.3.0,o-typography@^6.4.5,o-table@^8.1.4"/>
And now, when we look at our page, we should have a styled table, different typography and a type of grid in place.
By default Origami components are tailored for public facing, ft.com products – these are known as “master brand” products. But Origami components offer tailored support for other contexts with component branding.
To choose a brand other than the default “master” brand, we append the
brand parameter to our CSS build service url e.g.
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-grid@^5.2.9,o-colors@^5.3.0,o-typography@^6.4.5,o-table@^8.1.4&brand=internal"/>
As the colour palette for the “internal” brand does not include “paper” (FT pink), the background we set with
o-colors classes has changed, as have the stripes of
o-table. Our typography set with
o-typography classes has also changed.
Now undo that by removing
&brand=internal from the build service url, allowing our project to default to the “master” brand again.
For a list of supported brands and their purpose see component brands.
So our final step involves providing our table with the ability to sort its content. Much like the
script tag. And, also like the url for the
link tag, the
script src expects a query parameter, which can also be more than one component.
For now though, let’s add the following to our
<script src="https://www.ft.com/__origami/service/build/v2/bundles/js?modules=o-table@^8.1.4" defer></script>
Now you can scroll down to your table, and sort fruit alphabetically by name or characteristic, or numerically by popularity.
We’ve stepped through a basic set up of components with the Build Service, and these are the fundamental steps for any component you might want to use within your product.
There are a few more aspects to the development of a product with Origami components that are important for compatibility and consistency, and we encourage you to read more about them: