From 525440c09b8ee961c3d9700dcd6a97dc07bc2e50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Inayaili=20de=20Le=C3=B3n=20Persson?= Date: Wed, 4 Oct 2017 17:38:59 +0100 Subject: [PATCH] Copy updates to anchor readme (#714) * Updates to get started - Removed purpose.md - Updated copy on contribute.md, faq.md and support.md * Remove file structure and update structure * Copy updates to anchors readme --- packages/ui-toolkit/src/text/Readme.md | 43 +++++++++++++------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md index b9eec31c..68cdef01 100644 --- a/packages/ui-toolkit/src/text/Readme.md +++ b/packages/ui-toolkit/src/text/Readme.md @@ -1,44 +1,46 @@ +Joyent's font is Libre Franklin, which is available to use at [Google Fonts](https://fonts.google.com/specimen/Libre+Franklin). + +The font sizes in the toolkit are based on an [augmented fourth modular scale](http://www.modularscale.com/?15,24&px&1.414), with base font size of **15px**. + ### Headings -The HTML `

–

` elements represent six levels of section headings.

is the highest section level and `

` is the lowest. -###### Usage Notes +Headings are available from `h1` through to `h4`. If demand is shown for `h5` and `h6`, these will be included in the toolkit. -* Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. -* Do not use lower levels to decrease heading font size: use the CSS font-size property instead. -* Avoid skipping heading levels: always start from `

`, next use `

` and so on. -You should consider avoiding using `

` more than once on a page. +To learn more about the correct usage of HTML headings, visit [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). #### Heading 1 ```jsx const H1 = require('/').H1;

Inspire the lazy

``` + #### Heading 2 ```jsx const H2 = require('/').H2;

Inspire the lazy

``` + #### Heading 3 ```jsx const H3 = require('/').H3;

Inspire the lazy

``` + #### Heading 4 ```jsx const H4 = require('/').H4;

Inspire the lazy

``` -### Paragraph -The HTML `

` element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements. +### Paragraph ```jsx const P = require('/').P;

Joyent experts provide 360 degree support for modern application architectures, including development frameworks, container orchestration tools, and hybrid cloud infrastructures.

``` ### Small +If you need to display content that is less important that the main body text, or where space is more constrained, you can use the `` element. This will reduce the text size to 13px. -The HTML `` element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation. ```jsx const Small = require('/').Small; @@ -47,8 +49,10 @@ Triton is 100% open source and designed to eliminate cloud provider lock-in. Wit ``` ### Label +The `