diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md index 0e8272ea93..f2182a9a2c 100644 --- a/site/content/docs/0.0/content/typography.md +++ b/site/content/docs/0.0/content/typography.md @@ -1,7 +1,7 @@ --- layout: docs title: Typography -description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, lists, and more. +description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, and more. group: content aliases: - "/docs/content/typography/" diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 71afde3a7c..f07894e4f1 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -34,7 +34,7 @@ From now on, OUDS Web won't embed Bootstrap elements that are not part of Orange ## Fonts -OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be different depending on the operating system and browser being used. +OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used. Technically, it means that you can get rid of the following things: - Helvetica Neue woff2 files: `fonts/HelvNeue55_W1G.woff2`, `fonts/HelvNeue75_W1G.woff2`, `fonts/HelveticaNeueW20-55Roman.woff2`, and `fonts/HelveticaNeueW20-75Bold.woff2`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 1eecae073b..3a457fcc84 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -11,7 +11,28 @@ toc: true ## v0.0.4 -### Contents +### Basic styles + +#### Default styles + +- New Default styles have be added to HTML elements: + - Default guidelines that guide our choices like spacing units, text `max-width`, or avoiding `margin-top` + - `box-sizing: border-box` set on every element + - Default font parameters using native font stack + - Default `background-color` + +#### Typography + +- New All typography global settings have been set for: + - Headings + - Display headings + - Regular text + - Inline text elements (``, ``, ``, ``, ``, ``, ``, ``, ``, `
`, ``, ``, ``, `
`) + - Code parts (inline, blocks) + - Abbreviations (``) + - Blockquotes + - Summaries (``) + - Hidden elements ### Layout @@ -26,6 +47,15 @@ toc: true ### Helpers +#### Icon + +- New Icons' sizes utilities are now available: + - Responsive icons' sizes in headings: + - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large + - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, `l` for large + - Responsive icons' sizes regular texts: `.b{size}-short-icon`, `.b{size}-medium-icon`, `.b{size}-tall-icon`, where size is one of `s` for small, `m` for medium, `l` for large + - Fixed icons' sizes for decorative standalone icons: `.decorative-{size}-icon` where size is one of `shortest|shorter|short|medium|tall|taller|tallest` + #### Position - New Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`. @@ -79,9 +109,12 @@ toc: true - New Shadows utilities: `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`. +#### Sizing +TODO + #### Spacings -- New fixed margin spacing utilities: +- New Fixed margin spacing utilities: - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc... - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc... - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc... @@ -96,7 +129,7 @@ toc: true - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc... - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc... -- New scaled margin spacing utilities: +- New Scaled margin spacing utilities: - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`, - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`, - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`, @@ -108,7 +141,7 @@ toc: true - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`, - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious` -- New fixed padding spacing utilities: +- New Fixed padding spacing utilities: - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc... - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc... - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc... @@ -122,7 +155,7 @@ toc: true - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc... - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc... -- New scaled padding spacing utilities: +- New Scaled padding spacing utilities: - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`, - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`, - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`, @@ -134,7 +167,7 @@ toc: true - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`, - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious` -- New fixed gap spacing utilities: +- New Fixed gap spacing utilities: - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc... - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc... - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc... @@ -148,7 +181,7 @@ toc: true - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc... - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc... -- New scaled gap spacing utilities: +- New Scaled gap spacing utilities: - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none` - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash` - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest` @@ -162,8 +195,30 @@ toc: true #### Text +- New Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|end|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl` + +- New Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap` + +- New Word break text utility: `.text-break` + +- New Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize` + +- New Font size text utilities: + - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds` + - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs` + - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs` + - **Labels**: `.fs-lxl`, `.fs-ll`, `.fs-lm`, `.fs-ls` + - **Code**: `.fs-cm`, `.fs-cs` + +- New Font weight text utilities: `.fw-normal` and `.fw-bold` + +- New Line height text utilities: `.fw-normal` and `.fw-bold` + + ### Examples +- New New [Font example]({{< docsref "/examples/font" >}}). + - New New [Grid example]({{< docsref "/examples/grid" >}}). - New New [Grid system example]({{< docsref "/examples/grid-system" >}}).