Added Base docs

tuckbarber · Jul 15, 2019 · 7290bc1 · 7290bc1
1 parent 300fe1c
commit 7290bc1
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 311 deletions.
diff --git a/docs/base-base.md b/docs/base-base.md
@@ -0,0 +1,24 @@
+---
+   id: base
+   title: Base
+---
+
+
+
+## Affected Type Selectors
+
+ * `body`: Sets body background color as a best practice.
+ * `img`:
+    * Sets alt text style to italic.
+    * Scales image fluidity with its container for rich text editor convenience.
+    * Align to middle to prevent white space created by aligning to text baseline.
+ * `iframe`: Removes the default border from iframes.
+ * `[role='button']`: Fixes clickability of issue for traditionally non-focusable elements with role='button'.
+ * `[tabindex='-1]`: Suppresses focus outline on non-focusable items.
+ * `a, area, button, [role='button'], input, label, select, summary, textarea`: Avoid 300ms click delay on devices that support the 'touch-action' CSS property.
+ * `button` : Work around a Firefox/IE bug where the transparent `button` background results in a loss of the default `button` focus styles.
+ * `hidden`: Always hiden an element with `hidden` HTML attribute.
+
+ ## Configurable Variables
+
+ * `--base-body-background`: The background color of the body of the document.
diff --git a/docs/base-code.md b/docs/base-code.md
@@ -0,0 +1,19 @@
+---
+   id: code
+   title: Code
+---
+
+## Affected Type Selectors
+
+* `code, kbd, pre, samp`: Sets custom styles for inline and block code elements.
+* `pre`: Adjusts margin for blocks of code or pre-formatted text.
+
+
+## Configurable variables
+
+* `--base-code-fontFamily`
+* `--base-code-fontSize`
+* `--base-code-fontWeight`
+* `--base-code-letterSpacing`
+* `--base-code-lineHeight`
+* `--base-code-spacing`
diff --git a/docs/base-forms.md b/docs/base-forms.md
@@ -0,0 +1,19 @@
+---
+   id: forms
+   title: Forms
+---
+
+## Affected Type Selectors
+
+* `fieldset`: Sets border, margin, padding to zero.
+* `label`: Allows margins to use magin for spacing.
+* `input, button, select, textarea`: 
+    * Removes rounded borders.
+    * Sets line-height to inherit.
+    * Removes all margin.
+* `textarea`: 
+    * Only allows for vertical resizing to prevent layouts from breaking.
+    * Easier to read default alignment.
+* `input[type='search']`: Overrides the extra rounded corners on search inputs in iOS.
+* `input[type='radio'], input[type='checkbox']`: Add right margin to radio buttons and checkboxes.
+* `html input[disabled], html input[readonly]`: Change background color.
diff --git a/docs/base-print.md b/docs/base-print.md
@@ -0,0 +1,19 @@
+---
+   id: print
+   title: Print
+---
+
+## Affected Type Selectors
+
+
+* `*`: Sets bagrounds to transparent, text to black, and removes shadows.
+* `a`: Adds underline to links.
+* `a[href]`: Adds value of href attribute in parentheses after link text.
+* `abbr[title]:after`: Adds value of title attribute in parentheses after abbr text.
+* `a[href^="#"]:after, a[href^="javascript:"]:after`: Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol.
+* `pre`: Sets white-space to pre-wrap.
+* `pre, blockquote`: Adds thin border and avoid having the page brak in the middle of element.
+* `thead`: Displays as table-header-group.
+* `tr, img`: Avoid page breaking in the middle of element.
+* `p, h2, h3`: Avoid page breaking from separating small pieces of text.
+* `h2, h3`: Avoid the page breaking after this element.
diff --git a/docs/base-tables.md b/docs/base-tables.md
@@ -0,0 +1,20 @@
+---
+   id: tables 
+   title: Tables
+---
+
+## Affected Type Selectors
+
+* `table`: 
+    * Ensures borders collapse
+    * Sets border spacing to zero.
+    * Sets margin bottom to zero.
+* `td, th`: Sets padding and vertical aligns top.
+* `th`: Sets text color.
+* `caption, th`: Align text to left.
+* `caption`: Places caption below table and gives it a top margin.
+
+## Configurable Variables
+* `--base-tables-heading-color`
+* `--base-tables-spacing`
+
diff --git a/docs/base-typography.md b/docs/base-typography.md
@@ -0,0 +1,74 @@
+---
+   id: base-typography 
+   title: Typography
+---
+
+Note: This sets the <html> element's font-size to 62.5%, which
+equals 10px (for default browser font size of 16px).
+This allows rem units to be calculated more intuitively.
+
+Font size strategy
+- <html> element font size set as a percentage so that font sizes are accessible
+  if the user resizes the text size in their browser.
+- Font size set on the <body> tag is a rem. A direct relation to the HTML element.
+- Font sizes for components should be rem. For example, the font size of the navigation
+  should be set as a rem. The relation is to the <html> tag, which by default is 10px.
+- Font sizes of elements within a component should be em to be relative to the component.
+  For example, a navigation link within the navigation menu would be set to an em font size,
+  which would then be in relation to the navigation component (assuming that a font size in rem
+  was set on the navigation item).
+
+References that influenced this approach:
+https://css-tricks.com/rem-global-em-local/
+http://clagnut.com/blog/2384/
+
+
+## Affected Type Selectors
+
+* `html`: Set the base font size to be a percentage so that it's more accessible to browser text zooming, and also scales down text on smaller screen.
+* `body`: Set body defaults based on configurable variables for other elements to inherit.
+* `address, blockquote, dl, figure, hr, ol, p, ul`: Adjust margins.
+* `blockquote`: Add left border and margins/padding.
+* `a`: Set link appearance based on configurable variables.
+* `a[href^=tel]`: Sets telephone links to default styling to not look like links.
+* `ol, ul`: Adjusts margins/padding.
+* `dt`: Sets font weight to heavy.
+* `dd`: Removes margin.
+* `abbr[title]`: Adds bottom border and help cursor to inline abbreviations.
+* `address`: Resets browser default.
+* `hr`: 
+    * Remove default hr shading.
+    * Inherit text or parent border color.
+* `h1, h2, h3, h4, h5, h6`: Sets styling from configurable variables.
+
+
+## Configurable Variables
+
+* `--base-typography-color`
+* `--base-typography-fontFamily`
+* `--base-typography-fontSize: `
+* `--base-typography-fontWeight`
+* `--base-typography-hrule-width`
+* `--base-typography-letterSpacing`
+* `--base-typography-lineHeight: `
+* `--base-typography-spacing: `
+* `--base-typography-link-color`
+* `--base-typography-link-colorHover`
+* `--base-typography-link-decoration`
+* `--base-typography-link-decorationHover`
+* `--base-typography-h1-fontSize`
+* `--base-typography-h2-fontSize`
+* `--base-typography-h3-fontSize`
+* `--base-typography-h4-fontSize`
+* `--base-typography-h5-fontSize`
+* `--base-typography-h6-fontSize`
+* `--base-typography-h1-lineHeight`
+* `--base-typography-h2-lineHeight`
+* `--base-typography-h3-lineHeight`
+* `--base-typography-h4-lineHeight`
+* `--base-typography-h5-lineHeight`
+* `--base-typography-h6-lineHeight`
+* `--base-typography-heading-color`
+* `--base-typography-heading-fontFamily`
+* `--base-typography-heading-fontWeight`
+* `--base-typography-heading-letterSpacing`
diff --git a/docs/util-flex.md b/docs/util-flex.md
@@ -73,4 +73,3 @@ Applies to flex container
   * `u-flexExpandRight`: Gives the element a margin-right value of auto.
   * `u-flexExpandTop`: Gives the element a margin-top value of auto.
 
-
diff --git a/docs/util-layout.md b/docs/util-layout.md
@@ -19,7 +19,7 @@ contains all floated children. Will clip overflowing content.
 
 <style>
 .example-divider{
-    margin-bottom: 300px;
+    height: 400px;
 }
 .example-divider:last-child{
     margin-bottom: 0;
@@ -31,6 +31,9 @@ contains all floated children. Will clip overflowing content.
     padding: 10px;
     width: 80%;
 }
+.example-parent img{
+    margin: 10px;
+}
 </style>
 
 <div class="code-sample">
@@ -57,6 +60,38 @@ Using u-cf utility on container to keep it from collapsing.
         <img src="https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1
                           &ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=150&q=80" 
              alt="Image" width="150" height="150" class="u-floatRight">
+                </div>
+</div>
+Using u-nbfc utility on container to contain floated children.
+<div class="example-divider">
+    <div class="example-parent u-nbfc">
+            <!-- Photo by Hannah Busing on Unsplash -->
+        <img src="https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1
+                  &ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=150&q=80" 
+             alt="Image" width="150" height="150" class="u-floatLeft">
+        <img src="https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1
+                          &ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=150&q=80" 
+             alt="Image" width="150" height="150" class="u-floatRight">
+            <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi augue, facilisis vitae elit at, tincidunt semper lorem. Phasellus interdum aliquet vehicula. Praesent tristique lectus tellus, sed hendrerit leo consequat eget. In hac habitasse platea dictumst. Morbi ac scelerisque ipsum. Nullam id eros at mauris consequat laoreet.    
+            </p>
+    </div>
+</div>
+
+Using u-nbfc utility on container to contain floated children, and u-nbfc used on child &lt;p&gt; element to prevent its text from wrapping under floated elements.
+<div class="example-divider">
+    <div class="example-parent u-nbfc">
+            <!-- Photo by Hannah Busing on Unsplash -->
+        <img src="https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1
+                  &ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=150&q=80" 
+             alt="Image" width="150" height="150" class="u-floatLeft">
+        <img src="https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1
+                          &ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=150&q=80" 
+             alt="Image" width="150" height="150" class="u-floatRight">
+            <p class="u-nbfc">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi augue, facilisis vitae elit at, tincidunt semper lorem. Phasellus interdum aliquet vehicula. Praesent tristique lectus tellus, sed hendrerit leo consequat eget. In hac habitasse platea dictumst. Morbi ac scelerisque ipsum. Nullam id eros at mauris consequat laoreet.    
+            </p>
     </div>
 </div>
+
 </div>
diff --git a/docs/util-pull.md b/docs/util-pull.md
@@ -31,7 +31,7 @@ For shifting an element to the left an amount relative to its parent.
 
 ### Large screen
 
-Only apply to viewports defined as large.
+Only applies to viewports defined as large or smaller.
 
 * `u-lg-pullNone`
 * `u-lg-pull1of12` / `u-lg-pull1of10` / `u-lg-pull1of8`
@@ -59,7 +59,7 @@ Only apply to viewports defined as large.
 
 ### Medium screen
 
-Only apply to viewports defined as medium.
+Only applies to viewports defined as medium or smaller.
 
 * `u-md-pullNone`
 * `u-md-pull1of12` / `u-md-pull1of10` / `u-md-pull1of8`
@@ -86,7 +86,7 @@ Only apply to viewports defined as medium.
 
 ### Small screen
 
-Only apply to viewports defined as small.
+Only applies to viewports defined as small or smaller.
 
 * `u-sm-pullNone`
 * `u-sm-pull1of12` / `u-sm-pull1of10` / `u-sm-pull1of8`
@@ -134,6 +134,7 @@ Only apply to viewports defined as small.
 
 <div class="code-sample">
     <div class="example-parent">
+        <div>No Utility</div>
         <div class="u-pull1of12">u-pull1of12</div>
         <div class="u-pull1of6">u-pull1of6</div>
         <div class="u-pull1of5">u-pull1of5</div>

diff --git a/docs/util-push.md b/docs/util-push.md
@@ -31,7 +31,7 @@ For shifting an element to the right an amount relative to its parent.
 
 ### Large screen
 
-Only apply to viewports defined as large.
+Only applies to viewports defined as large or smaller.
 
 * `u-lg-pushNone`
 * `u-lg-push1of12` / `u-lg-push1of10` / `u-lg-push1of8`
@@ -58,7 +58,7 @@ Only apply to viewports defined as large.
 
 ### Medium screen
 
-Only apply to viewports defined as medium.
+Only applies to viewports defined as medium or smaller.
 
 * `u-md-push[ratio]` 
   * `u-md-pushNone`
@@ -86,7 +86,7 @@ Only apply to viewports defined as medium.
 
 ### Small screen
 
-Only apply to viewports defined as small.
+Only applies to viewports defined as small or smaller.
 
 * `u-sm-pushNone`
 * `u-sm-push1of12` / `u-sm-push1of10` / `u-sm-push1of8`
@@ -134,6 +134,7 @@ Only apply to viewports defined as small.
 
 <div class="code-sample">
     <div class="example-parent">
+        <div>No Utility</div>
         <div class="u-push1of12">u-push1of12</div>
         <div class="u-push1of6">u-push1of6</div>
         <div class="u-push1of5">u-push1of5</div>

diff --git a/docs/util-radius.md b/docs/util-radius.md
@@ -20,7 +20,7 @@ For changing how round the corners of an element are with the border radius.
 .example-element {
     background-color: #329A5C;
     color: #FFF;
-    padding: 10px 20px;
+    padding: 30px 20px;
     width: 100%;
     display: block;
     text-align: center;

diff --git a/docs/util-size.md b/docs/util-size.md
@@ -43,7 +43,7 @@ Distributes space based on the initial width and height of the element
 
 ### Large screen
 
-Only apply to viewports defined as large.
+Only applies to viewports defined as large or smaller.
 
 * `u-lg-size1of12` / `u-lg-size1of10` / `u-lg-size1of8`
 * `u-lg-size1of6` / `u-lg-size2of12`
@@ -70,7 +70,7 @@ Only apply to viewports defined as large.
 
 ### Medium screen
 
-Only apply to viewports defined as medium.
+Only applies to viewports defined as medium or smaller.
 
 * `u-md-size1of12` / `u-md-size1of10` / `u-md-size1of8`
 * `u-md-size1of6` / `u-md-size2of12`
@@ -97,7 +97,7 @@ Only apply to viewports defined as medium.
 
 ### Small screen
 
-Only apply to viewports defined as small.
+Only applies to viewports defined as small or smaller.
 
 * `u-sm-size1of12` / `u-sm-size1of10` / `u-sm-size1of8`
 * `u-sm-size1of6` / `u-sm-size2of12`
@@ -125,7 +125,7 @@ Only apply to viewports defined as small.
 
 ### Extra small screen
 
-Only apply to viewports defined as extra small.
+Only applies to viewports defined as extra small.
 
   * `u-xs-size1of12` / `u-xs-size1of10` / `u-xs-size1of8`
   * `u-xs-size1of6` / `u-xs-size2of12`

diff --git a/docs/util-typography.md b/docs/util-typography.md
@@ -1,5 +1,5 @@
 ---
-   id: typography 
+   id: util-typography 
    title: Typography
 ---
 
@@ -58,23 +58,23 @@
 
 ### Large Typography
 
-Only apply to viewports defined as large. 
+Only applies to viewports defined as large or smaller. 
 
 *  `u-lg-textCenter`: Center align text.
 *  `u-lg-textLeft`: Left align text.
 *  `u-lg-textRight`: Right align text.
 
 ### Medium typography
 
-Only apply to viewports defined as medium. 
+Only applies to viewports defined as medium or smaller. 
 
 *  `u-md-textCenter`: Center align text.
 *  `u-md-textLeft`: Left align text.
 *  `u-md-textRight`: Right align text.
 
 ### Small typography
 
-Only apply to viewports defined as small. 
+Only applies to viewports defined as small or smaller. 
 
 *  `u-sm-textCenter`: Center align text.
 *  `u-sm-textLeft`: Left align text.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -73,4 +73,3 @@ Applies to flex container
		* `u-flexExpandRight`: Gives the element a margin-right value of auto.
		* `u-flexExpandTop`: Gives the element a margin-top value of auto.