diff --git a/docs/ars-lib-docs/ars-lib-docs.md b/docs/ars-lib-docs/ars-lib-docs.md index 8a559406d9e150dcecbaf0dc5f8e8b4aff3aaa83..0fd69fa49db9011b928bbb65f99f8be615b1fdd6 100644 --- a/docs/ars-lib-docs/ars-lib-docs.md +++ b/docs/ars-lib-docs/ars-lib-docs.md @@ -313,13 +313,13 @@ Wrapper, currently used for Fullscreen-Dialogs or prototyping. </ars-screen> ``` -## ars-resp +### ars-resp -### Description +#### Description Creates a centered Wrapper, that automatically switches between dynamic and fixed layout. -### Input +#### Input - __width__: number - width of centered wrapper (fixed mode) @@ -327,7 +327,7 @@ Creates a centered Wrapper, that automatically switches between dynamic and fixe - left and right margin, of centered wrapper (dynamic mode) - margin does not effect width -### Example +#### Example ```html <ars-screen ars-flex-box> @@ -353,9 +353,338 @@ Creates a centered Wrapper, that automatically switches between dynamic and fixe  -## ars-scroll +### ars-scroll -### Description +#### Description Directive, to force a specific scrolling behaviour. Useful in combination with ars-resp. + +## Typography + +### ars-style-typography-material + +#### Description + +Consistent material typography for text-content. +Additional guidelines or styles for buttons, dialogs and more, will be added in the future. +Supports 165px width. + +Inspired by [material.io](https://material.io/) + +References (Tools): +- [Modular_Scale (8:9 - major second)](https://www.modularscale.com/?1&em&1.125) + +References (Placeholder-Text): +- [Material.io - Typography](https://material.io/design/typography/understanding-typography.html#type-properties) +- [Wikipedia - Roboto](https://de.wikipedia.org/wiki/Roboto) + +```html +<ars-style-typography-material> + <!--content here--> +</ars-style-typography-material> +``` + +__Note:__ `ars-style-typography-material` has no ViewEncapsulation. Multiple use in one component has no effect. Should be used as root component. Might affect child components. + +#### Structure + +- typo + - lead + - h (h1) + - p (subtitle for lead-h) + - main + - h (h2) + - page + - h (h3) + - p (normal paragraph) + +__Lead__, __main__ and __page__ have unique classes for distances. +These classes begin with 'space', followed by the class of the next sibling. + +__Note:__ `space-page-p` applied on `typo-lead-h` has different properties than `space-page-p` +applied on `typo-main-h`. + +#### Behaviour + +Font-size unit is __em__. +__em__ is an absolute unit, but dependent on the body font-size. +The body font-size depends on the screen width. + +| screen-width | body font-size | +|---|---| +| \>600px | 100% | +| \<600px | 70% | +| \<300px | 50% | + +The advantage of __em__ compared to __px__: +- body font-size can be changed, to scale the font, without changing the proportions. + +--- + +##### typo-lead + +Should be used as __h1__. (see typo-lead-h to typo-lead-p) +Can be used as __h2__, but without `typo-lead-p` (see typo-lead-h to typo-page-p) + +--- + +###### typo-lead-h to typo-lead-p + +```html +<h1 class="typo-lead-h space-lead-p"> + Roboto Typography +</h1> +<p class="typo-lead-p"> + Roboto is a neo-grotesque sans-serif typeface family developed by Google. +</p> +``` + + + +--- + +###### typo-lead-h to typo-page-p + +```html +<h1 class="typo-lead-h space-page-p"> + Roboto (/roʊˈbɒt.oʊ/) +</h1> +<p class="typo-page-p space-page-p"> + Roboto is the default font on Android, and since 2013, other Google services such as + Google+, Google Play, YouTube, Google Maps, and mobile Google Search. +</p> +<p class="typo-page-p space-page-p"> + In 2017 Roboto was used on the LCD countdown clocks of the New York City Subway's B + Division lines. +</p> +<p class="typo-page-p"> + Roboto Bold is the default font in Unreal Engine 4, and in Kodi. Roboto Condensed is used + to display Information on European versions of Nintendo Switch packaging, including + physical releases of games. +</p> +``` + + + +--- + +##### typo-main + +Should be used as __h2__. +Can be used as __h3__, depending on typo-lead, being used as __h2__. + +--- + +###### typo-main-h to typo-page-p + +```html +<h1 class="typo-main-h space-page-p"> + Development +</h1> +<p class="typo-page-p space-page-p"> + The font was designed entirely in-house by Christian Robertson who previously had released + an expanded Ubuntu-Title font through his personal type foundry Betatype. The font was + officially made available for free download on January 12, 2012, on the newly launched + Android Design website. +</p> +<p class="typo-page-p"> + Compared to Android's previous system font, the humanist sans-serif Droid, Roboto belongs + to the neo-grotesque genre of sans-serif typefaces. It includes Thin, Light, Regular, + Medium, Bold and Black weights with matching oblique styles rather than true italics. It + also includes condensed styles in Light, Regular and Bold, also with matching oblique + designs. +</p> +``` + + + +--- + +###### typo-main-h to typo-page-p (with following content) + +```html +<h1 class="typo-main-h space-page-p"> + Redesign +</h1> +<p class="typo-page-p space-page-p"> + In 2014, Matias Duarte announced at Google I/O that Roboto was significantly redesigned for + Android 5.0 "Lollipop". +</p> +<p class="typo-page-p space-page-p"> + Punctuation marks and the tittles in the lowercase "i" and "j" were changed from square to + rounded, and the entire typeface was made “slightly wider and rounder†with many changes in + details. +</p> +<ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row> +``` + + + +--- + +##### typo-page + +`typo-page-h` should be used as __h3__. +Can be used as __h4__, depending on typo-main being used as __h3__. + +`typo-page-p` for paragraphs. + +--- + +###### typo-page-h to typo-page-p (with following content) + +__Note:__ `typo-page-p`, followed by content, +for example pictures, can be spaced by adding `space-page-p` + +```html + +<h1 class="typo-page-h space-page-p"> + Reception +</h1> +<p class="typo-page-p space-page-p"> + Google developed the font to be "modern, yet approachable" and "emotional", but Roboto + received mixed reviews on its release. Joshua Topolsky, Editor-In-Chief of technology news + and media network The Verge, describes the font as<br> + <i>"clean and modern, but not overly futuristic– not a science fiction font".</i> +</p> +<ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row> +``` + + + +--- + +#### Complete Example + +__Note:__ +Don't use `ars-row` for spacing elements. +Don't use inline style. +This example uses `ars-row` for spacing elements and inline style to avoid confusing classes. + +##### HTML + +```html +<ars-style-typography-material> + <ars-screen ars-scroll> + <ars-resp [width]="750" [margin]="30"> + + <ars-row [height]="300"></ars-row> + + <!-- typo-lead-h to typo-lead-p --> + + <h1 class="typo-lead-h space-lead-p"> + Roboto Typography + </h1> + <p class="typo-lead-p"> + Roboto is a neo-grotesque sans-serif typeface family developed by Google. + </p> + + <ars-row [height]="160"></ars-row> + + <!-- typo-lead-h to typo-page-p --> + + <h1 class="typo-lead-h space-page-p"> + Roboto (/roʊˈbɒt.oʊ/) + </h1> + <p class="typo-page-p space-page-p"> + Roboto is the default font on Android, and since 2013, other Google services such as + Google+, Google Play, YouTube, Google Maps, and mobile Google Search. + </p> + <p class="typo-page-p space-page-p"> + In 2017 Roboto was used on the LCD countdown clocks of the New York City Subway's B + Division lines. + </p> + <p class="typo-page-p space-page-p"> + Roboto Bold is the default font in Unreal Engine 4, and in Kodi. Roboto Condensed is used + to display Information on European versions of Nintendo Switch packaging, including + physical releases of games. + </p> + + <ars-row [height]="160"></ars-row> + + <!-- typo-main-h to typo-page-p --> + + <h1 class="typo-main-h space-page-p"> + Development + </h1> + <p class="typo-page-p space-page-p"> + The font was designed entirely in-house by Christian Robertson who previously had released + an expanded Ubuntu-Title font through his personal type foundry Betatype. The font was + officially made available for free download on January 12, 2012, on the newly launched + Android Design website. + </p> + <p class="typo-page-p"> + Compared to Android's previous system font, the humanist sans-serif Droid, Roboto belongs + to the neo-grotesque genre of sans-serif typefaces. It includes Thin, Light, Regular, + Medium, Bold and Black weights with matching oblique styles rather than true italics. It + also includes condensed styles in Light, Regular and Bold, also with matching oblique + designs. + </p> + + <ars-row [height]="160"></ars-row> + + <!-- typo-main-h to typo-page-p (with box at bottom) --> + + <h1 class="typo-main-h space-page-p"> + Redesign + </h1> + <p class="typo-page-p space-page-p"> + In 2014, Matias Duarte announced at Google I/O that Roboto was significantly redesigned for + Android 5.0 "Lollipop". + </p> + <p class="typo-page-p space-page-p"> + Punctuation marks and the tittles in the lowercase "i" and "j" were changed from square to + rounded, and the entire typeface was made “slightly wider and rounder†with many changes in + details. + </p> + <ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row> + + <ars-row [height]="160"></ars-row> + + <!-- typo-page-h to typo-page-p (with box at bottom) --> + + <h1 class="typo-page-h space-page-p"> + Reception + </h1> + <p class="typo-page-p space-page-p"> + Google developed the font to be "modern, yet approachable" and "emotional", but Roboto + received mixed reviews on its release. Joshua Topolsky, Editor-In-Chief of technology news + and media network The Verge, describes the font as<br> + <i>"clean and modern, but not overly futuristic– not a science fiction font".</i> + </p> + <ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row> + + <ars-row [height]="160"></ars-row> + + <!-- typo-page-h to typo-page-p --> + + <h1 class="typo-page-h space-page-p"> + Measurement from the baseline + </h1> + <p class="typo-page-p"> + Specify distances from UI elements from the baseline. Baseline values are + software-agnostic, so they work in any design program, and work with the grid. On Android + and iOS, code can be translated from baseline-relative specs into padding. For the web, + automate the calculation using Sass or CSS. + </p> + + <ars-row [height]="160"></ars-row> + + </ars-resp> + </ars-screen> +</ars-style-typography-material> +``` + +##### On Desktop + + + +##### On Mobile (iPhone 4) + + + + + + + diff --git a/docs/ars-lib-docs/images/typography/typo-example-desk.png b/docs/ars-lib-docs/images/typography/typo-example-desk.png new file mode 100644 index 0000000000000000000000000000000000000000..f10c3a42ae76db9911a58075b22f73bd23476492 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-example-desk.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-example-mobile-micro.png b/docs/ars-lib-docs/images/typography/typo-example-mobile-micro.png new file mode 100644 index 0000000000000000000000000000000000000000..2063afe886ed2f93cb749c2830b63a236458ed68 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-example-mobile-micro.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-lead-1.png b/docs/ars-lib-docs/images/typography/typo-lead-1.png new file mode 100644 index 0000000000000000000000000000000000000000..16e2a72d9ae94dab88ee5fef0c4c072bca4af659 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-lead-1.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-lead-2.png b/docs/ars-lib-docs/images/typography/typo-lead-2.png new file mode 100644 index 0000000000000000000000000000000000000000..3561fd28d70ae2517da8dc857d0274150b882a4d Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-lead-2.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-main-1.png b/docs/ars-lib-docs/images/typography/typo-main-1.png new file mode 100644 index 0000000000000000000000000000000000000000..e7e97c5a26d39f74a4fdd759b870da144d28b061 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-main-1.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-main-2.png b/docs/ars-lib-docs/images/typography/typo-main-2.png new file mode 100644 index 0000000000000000000000000000000000000000..28ec458f5b89ccb9944d09755bf95189cd148c36 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-main-2.png differ diff --git a/docs/ars-lib-docs/images/typography/typo-page-1.png b/docs/ars-lib-docs/images/typography/typo-page-1.png new file mode 100644 index 0000000000000000000000000000000000000000..d65cb07ece6e2697e9005c5a973310f214f0bfa7 Binary files /dev/null and b/docs/ars-lib-docs/images/typography/typo-page-1.png differ