This tutorial is the quickest way to get started with Origami. By the end of it you should know enough to create disposable prototypes using Origami’s ui modules. If you want to know how to use Origami in production websites, you’ll need a bit more information than this tutorial includes.
We have a more detailed set of tutorials if you want a proper introduction. Take me to the proper guide.
First, let’s put some minimum viable HTML onto the page. This is not the HTML you would use in production, but for prototyping with the Build Service it’s fine.
<html> <head> <!-- build service links and scripts here --> </head> <body> Hello! <button>Here's a button</button> </body> </html>
OK, we’ve got a button there, but it’s completely unstyled. Let’s use the
o-buttons Origami module to style it.
We’re going to use the Build Service to provide the styles.
To do that we need to request the
o-buttons CSS from the Build Service:
This request says “give me the CSS for o-buttons at the latest version”
Let’s add that to our page in the
<head> as a
<link ...> tag
<link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-buttons" />
Next add the right classes to your HTML. Some Origami components are more complicated than
o-buttons. To help with this we provide example HTML already marked up with the right classes that you can copy into your project.
For this tutorial though, you need to add the class
o-buttons to the
o-buttons has some design variations. Let’s apply the
standout variation by the adding
<button class="o-buttons o-buttons--secondary">Here's a button</button>
Instead of using a
<link ...> tag, use a
<script ...> tag.
<html> <head> <!-- build service links and scripts here --> <script src="https://www.ft.com/__origami/service/build/v2/bundles/js?modules=o-buttons"></script> <link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-buttons" /> </head> <body> Hello! <button class="o-buttons o-buttons--secondary">Here's a button</button> </body> </html>
Well done! you’ve used an o-button on a page. Adding more components is very similar:
Some components, like
o-header have much more complicated HTML than
o-buttons. Where this is the case, you should copy and paste the HTML for those elements from the Origami Registry.
This tutorial is a very quick guide to Origami. It skipped over a few important concepts that you’ll need to know for using Origami modules in a live service. The next tutorial will take you through using Origami in more detail.