An Origami component is a collection of styles and functionality. It provides reusable HTML, SCSS and JavaScript for a multitude of different products under the FT umbrella.
How you choose to include Origami components in your project will depend on your projects’ requirements:
Using the Origami Build Service:
The Build service is best for quick projects or static sites or things where performance is less of a concern. This build method will fetch the Origami CSS and JavaScript as external files for your webpage. Be aware that this will indiscriminately fetch all stylistic variations of a component, which will increase your file size.
If you would like help with this, you can visit the Origami Build Service tutorial.
Using a Package Manager (Bower/npm):
In order to customise your page and have more granular control over a components stylistic and behavioural features build Origami components manually. We currently do this by installing Origami components from the command line via the Bower or npm package manager. This process relies on a build step, which you may already have in your project.
If you would like help with this, you can visit the Package Manager (Bower/npm) tutorial.
Documentation on how to initialise Origami components when you're installing a component with a package manager (Bower/npm). Learn how to initialise a component
Decide if you should customise a component for your project, learn the ways a component may be customised, and avoid other approaches which may be unreliable. Read more about how to customise components
An explanation of how Origami components are versioned, how to request different versions and resolve conflicts. Read more about component versioning
Documentation about how Origami ensures compatibility across different browsers and devices, and how you can write code in a way that supports this. Read more about Origami's compatibility
Guidelines on how Origami users can help us improve our components and services. Learn how you can help
Documentation on how to use Origami's 'silent mode', which allows you to control the output size of a component's CSS. Learn about silent mode
When releasing major versions of low level components such as o-typography, o-colors, or o-buttons many projects and teams across different Financial Times groups are affected. This we call a Major Cascade. This page explores what we mean by a Major Cascade in more detail and notes areas to consider when releasing major versions of low level components. Read more about Major Cascades