Skip to content

Commit

Permalink
docs: Add brand and theming definitions. (#1281)
Browse files Browse the repository at this point in the history 
- Also adds some styles for a data list, we may want to move this to o-layout.
- Moves custom styles to the head, so it applies on all pages. Currently the logo is different on the homepage to other pages, for example.
- And adds the content which this commit is all about. This commit does multiple things. Fire me.
  • Loading branch information
@notlee
notlee authored Sep 15, 2023
1 parent 61da184 commit c1e9896
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 104 deletions.
37 changes: 37 additions & 0 deletions apps/astro-website/src/content/documentation/components/brand-definitions.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: Brands & Theme Definitions
description: Brands, themes, modes, oh-my. Learn Origami's definitions.
cta: Learn more about component variations

# Navigation config
nav_display: true
nav_label: Brands & Themes
nav_order: 11
collection_id: components
---

# Brands & Theme Definitions

The following all combine to change the look, feel, and function of a component:

<dl>
<dt>Brand</dt>
<dd>A brand applies to an entire product or suite of products. It applies the defining look and feel for the product. E.g "core" (otherwise know as our ft pink brand), "internal" (the ft, but for internal tools and products), the-banker (a specialist title brand).</dd>

<dt>Sub-Brand</dt>
<dd>A sub-brand inherits from a brand, but provides a point of differentiation. E.g. "professional" and "ft-live" both belong to the "core" brand, but offer their own distinct look and feel.</dd>

<dt>Theme</dt>
<dd>A branded product may make use of multiple themes within a page. E.g. an "inverse" theme may be used to provide emphasis or contrast within a section of a branded product.</dd>

<dt>Mode</dt>
<dd>A mode affects the entire product, like looking through a lens, to provide an alternate style for brand and theme. E.g. dark mode, high contrast mode.</dd>

<dt>Platform</dt>
<dd>Platform variations are made to keep a product consistent but in-keeping with its delivery mechanism, e.g. web, ios, android.</dd>

<dt>Variant</dt>
<dd>This is a generic term to refer to a theme, brand, or other differentiator that makes one instance of a component look different to another instance of the same component. E.g. "mono" and "inverse" themes for a button component are variants of the button, a "big" version of the button is also a variant of the button.</dd>
</dl>

To learn more about brands, other component variations, and how to customise them see [component customisation](/documentation/components/customisation/).
2 changes: 1 addition & 1 deletion apps/astro-website/src/content/documentation/components/code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ cta: Learn more about component code
# Navigation config
nav_display: true
nav_label: Code
nav_order: 12
nav_order: 13
collection_id: components
---

Expand Down
4 changes: 2 additions & 2 deletions apps/astro-website/src/content/documentation/components/customisation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ cta: Read more about how to customise components
# Navigation config
nav_display: true
nav_label: Customisation
nav_order: 11
nav_order: 12
collection_id: components
---

# Component Customisation

Origami aims to improve design consistency and reduce the time teams spend repeating work. Providing component APIs for customisation helps achieve those aims by allowing components to be used across different contexts and different brands, and to provide flexibility for novel projects which may introduce a more unique style.
Origami aims to improve design consistency and reduce the time teams spend repeating work. Providing component APIs for customisation helps achieve those aims by allowing components to be used across different contexts and different brands, and to provide flexibility for novel projects which may introduce a more unique style (see [Brands & Theme Definitions](/documentation/components/brand-definitions/)).

This document aims to help you decide if you should customise a component for your project, show the ways a component may be customised, and demonstrate why other approaches should be avoided.

Expand Down
111 changes: 111 additions & 0 deletions apps/astro-website/src/layouts/Head.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,117 @@ const origamiJs = [...jsAndCss].map(js => js.name + js.version).join(",")
}
</style>

<style lang="scss" is:global>
// NOTE
// Some temporary styles just to make this look less awful while
// we work on it. Remove these as soon as styling work begins

html,
body {
margin: 0;
height: 100%;
}

abbr {
text-decoration: none;
border-bottom: 1px dotted black;
}

.no-wrap {
white-space: nowrap;
}

aside.no-padding {
padding-left: 0;
grid-row: span 7;

p {
padding-left: 1em;
}
pre {
margin: 0;
}
}

iframe {
border: none;
margin-bottom: 1em;
width: 100%;
}

img {
display: inline-block;
max-width: 100%;
}

table.o-manifest__table {
width: auto;
}

.o-layout__hero:before {
background-image: url("/assets/images/home-page-hero.jpg");
}

.o-layout__hero svg {
display: none;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 490px) {
.o-website__hero--home {
padding: 0;

&.o-layout__hero:before {
content: none;
}

svg {
position: absolute;
display: block;
width: 100vw;
height: 100%;
}
}

.o-website__hero--text {
position: absolute;
pointer-events: none;
}
}

.o-header-services__logo {
background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:origami?format=svg&source=origami&width=55);
}

dl {
margin: 0 0 var(--o-spacing-s6) 0;
}

dd {
margin: var(--o-spacing-s2);
margin-bottom: var(--o-spacing-s4);
}

dt,
strong {
font-weight: 600;
}

// Charts

.chart {
width: 100%;
margin-bottom: 1em;
}

.chart-grid {
display: flex;
flex-wrap: wrap;
.chart {
width: 50%;
}
}
</style>

<!-- JS -->
<script
defer
Expand Down
101 changes: 0 additions & 101 deletions apps/astro-website/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,104 +95,3 @@ const description =
</div>
</div>
</Layout>

<style lang="scss" is:global>
// NOTE
// Some temporary styles just to make this look less awful while
// we work on it. Remove these as soon as styling work begins

html,
body {
margin: 0;
height: 100%;
}

abbr {
text-decoration: none;
border-bottom: 1px dotted black;
}

.no-wrap {
white-space: nowrap;
}

aside.no-padding {
padding-left: 0;
grid-row: span 7;

p {
padding-left: 1em;
}
pre {
margin: 0;
}
}

iframe {
border: none;
margin-bottom: 1em;
width: 100%;
}

img {
display: inline-block;
max-width: 100%;
}

table.o-manifest__table {
width: auto;
}

.o-layout__hero:before {
background-image: url("/assets/images/home-page-hero.jpg");
}

.o-layout__hero svg {
display: none;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 490px) {
.o-website__hero--home {
padding: 0;

&.o-layout__hero:before {
content: none;
}

svg {
position: absolute;
display: block;
width: 100vw;
height: 100%;
}
}

.o-website__hero--text {
position: absolute;
pointer-events: none;
}
}

.o-header-services__logo {
background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:origami?format=svg&source=origami&width=55);
}

strong {
font-weight: 600;
}

// Charts

.chart {
width: 100%;
margin-bottom: 1em;
}

.chart-grid {
display: flex;
flex-wrap: wrap;
.chart {
width: 50%;
}
}
</style>

0 comments on commit c1e9896

Please sign in to comment.