Origami

Documentation site

Origami

Unifying branding across FT digital products.

Making development better, faster, stronger.

Origami is a group of services, modules and tools to help build websites. Origami aspires to create a unified style and experience for FT websites, and make web development at the FT faster.

Origami modules and services

At the heart of Origami are its services and modules.

Origami’s modules are bits of HTML, CSS and JavaScript to include in your page. Some of them, like gallery, come with a fully formed look and feel. Some of them, like colors or tracking provide a foundation for building your own interfaces, or provide useful services without any interface at all.

Regardless of what they’re made of, these modules have been comprehensively tested, comply with web accessibility standards, work or degrade gracefully in all of the browsers we support, and provide a consistent experience of the FT brand. To see a complete list of the modules visit registry.origami.ft.com/components.

As well as modules, Origami provides the following services:

  • Polyfill.io - Upgrade the web automatically, code using the latest standards when writing JavaScript applications
  • The Image Service - Deliver pictures in many formats and sizes; optimised and delivered over a CDN.

Origami services and modules all comply with the Origami Spec and Coding Standards to ensure they are high quality and interoperable. All modules are developed in the open on GitHub.

Using Origami

There are three ways to include Origami in your project:

1) Origami Build Service - the simplest way. Pull in the Origami CSS and Javascript as external files into your webpage. See tutorial.

2) Origami Build Tools - using this Origami-created tool as your build tool is more complex than using the Build Service, but it lets you install Origami components from the command line. See tutorial.

3) Bower - adding third-party build tool Bower to your project, lets you have a custom build process (using eg. Webpack) and install Origami components from the command line. See Bower tutorial.

To figure out which Origami components you will need, browse through The Registry.

The Spec

Origami is built according to the Origami Spec. This ensures high quality and interoperability across modules. If you want to contribute to Origami modules or services, reading The Spec is a good place to begin.

Who is using Origami?

Origami is used widely throughout the FT and by a range of third parties:

If your team is using or plans to use Origami, let us know: we’re here to help.