From: RafiBomb Date: Fri, 12 May 2017 23:16:33 +0000 (-0700) Subject: adds base type links and vid times X-Git-Tag: v6.4.0-rc1~46^2~35^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=460275875e82d1ecd13ebfd221fd13f9efb3471b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds base type links and vid times --- diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md index c06ac656d..390ab1535 100644 --- a/docs/pages/typography-base.md +++ b/docs/pages/typography-base.md @@ -25,6 +25,8 @@ This is a paragraph. Paragraphs are preset with a font size, line height and spa

If the emphasis of a phrase is important, don't make the emphasis purely visual—use the `` or `` tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.

+edit on codepen button + ```html

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.

``` @@ -39,6 +41,12 @@ Foundation includes styles for all headings—they're balanced and sized alo

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

+
+ Watch this part in video + + edit on codepen button +
+ ```html_example

h1. This is a very large header.

h2. This is a large header.

@@ -54,6 +62,8 @@ Foundation includes styles for all headings—they're balanced and sized alo The framework includes two typographic scales—one uses a narrow range of sizes for small-sized screens, and the other uses a wider range of sizes for medium- and larger-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the `$header-styles` map in your project's Settings File. + Watch this part in video + Header | Default | Medium and up --------|---------|-------------- `

` | 24px | 48px @@ -70,7 +80,7 @@ In its most complete form the `$header-styles` map looks like this: ``` $header-styles: ( 'small': ( - 'h1': ('font-size': 24, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), + 'h1': ('font-size': 24, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), 'h2': ('font-size': 20, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), 'h3': ('font-size': 19, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), 'h4': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), @@ -94,7 +104,7 @@ Because this is a little bit lengthy we have also introduced a short form, that ``` $header-styles: ( 'small': ( - 'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), + 'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), 'h2': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), 'h3': ('fs': 19, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), 'h4': ('fs': 18, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), @@ -128,6 +138,12 @@ The value for `'line-height'`/`'lh'` is transformed into a unitless number, that By inserting a `` element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example

Foundation for Sites Version 6.3.1

``` @@ -142,6 +158,12 @@ Links are very standard, and the color is preset to the Foundation primary color

To make links screen reader-friendly, avoid using vague words like "here" or "read more" within link text. The text of the link itself should adequately describe where the link goes.

+
+ Watch this part in video + + edit on codepen button +
+ ```html

Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

``` @@ -152,6 +174,8 @@ Links are very standard, and the color is preset to the Foundation primary color Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the `
` tag. +edit on codepen button + ```html
``` @@ -162,6 +186,8 @@ Use dividers to define thematic breaks between paragraphs. To denote the end of Use an unordered list to... *list things*, if the order of the items doesn't matter. +edit on codepen button + ```html_example
  • List item with a much longer description or more content.
    • @@ -183,7 +209,7 @@ Use an unordered list to... *list things*, if the order of the items doesn't mat ## Ordered Lists -Use an `
      ` when creating a list where the order of the items is important, like ranking pizza toppings from best to worst. +edit on codepen button ```html_example
        @@ -207,6 +233,8 @@ Use an `
          ` when creating a list where the order of the items is important, li A definition list (`
          `) is used to display name-value pairs, like metadata or a dictionary definition. Each term (`
          `) is paired with one or more definitions (`
          `). +edit on codepen button + ```html_example
          Time
          @@ -223,6 +251,8 @@ A definition list (`
          `) is used to display name-value pairs, like metadata or Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered. +edit on codepen button + ```html_example
          Those people who think they know everything are a great annoyance to those of us who do. @@ -236,6 +266,8 @@ Sometimes other people say smart things, and you may want to mention those thing Use the `` tag to annotate a shortened term. Abbreviations must always have a `title` attribute which clarifies the full term. +edit on codepen button + ```html_example

          In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.

          ``` @@ -244,7 +276,9 @@ Use the `` tag to annotate a shortened term. Abbreviations must always hav ## Code -Format references to code with the `` tag. +Format references to code with the `` tag. In order for angle brackets `<>` to render correctly, you need to change them to `< and >`. + +edit on codepen button ```html_example Remember to escape angle brackets when printing HTML: <div> @@ -256,6 +290,8 @@ Remember to escape angle brackets when printing HTML: <div> Use the `` element to annotate a key stroke or combination. +edit on codepen button + ```html_example

          Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.

          ``` @@ -321,6 +357,8 @@ Foundation includes print styles developed by HTML5 Boilerplate to give you some On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach `.show-for-print` to an element to only show when printing, and `.hide-for-print` to hide something when printing. + Watch this part in video +

          Print styles use `!important` to ensure they aren't overriden by more specific selectors. This framework conscientiously avoids using `!important` declarations. This is one of the few components that does.

          +