Removes old links and refs in readme to sites not using tachyons

Revert "V5 final final"

.npmrc

@@ -0,0 +1 @@
+package-lock=false

README.md

@@ -0,0 +1,118 @@
+# TACHYONS
+
+Functional CSS for humans.
+
+Quickly build and design new UI without writing CSS.
+
+## Principles
+
+* Everything should be 100% responsive
+* Everything should be readable on any device
+* Everything should be as fast as possible
+* Designing in the browser should be easy
+* It should be easy to change any interface or part of an interface without breaking any existing interfaces
+* Doing one thing extremely well promotes reusability and reduces repetition
+* Documentation helps promote reusability and shared knowledge
+* CSS shouldn't impede accessibility or the default functionality of HTML
+* You should send the smallest possible amount of code to the user
+
+## Features
+
+* Mobile-first CSS architecture
+* 490 accessible color combinations
+* 8px baseline grid
+* Multiple debugging utilities to reduce layout struggles
+* Single-purpose class structure
+* Optimized for maximum gzip compression
+* Lightweight (~14kB)
+* Usable across projects
+* Growing open source component library
+* Works well with plain HTML, React, Ember, Angular, Rails and more
+* Infinitely nestable responsive grid system
+* Built with PostCSS
+
+## Getting Started
+
+Docs can be found at http://tachyons.io/docs
+The modules are generally pretty small and thus quick and easy to read.
+
+### Use the CDN
+
+The quickest and easiest way to start using Tachyons is to include a reference
+to the minified file in the head of your HTML file.
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
+```
+
+### Local Setup
+
+Clone the repo from Github and install dependencies through npm.
+
+```
+git clone https://github.com/tachyons-css/tachyons.git
+cd tachyons
+npm install
+```
+
+#### Dev
+
+If you want to just use everything in tachyons/src as a jumping off point and
+edit all the code yourself, you can compile all of your wonderful changes by
+running:
+
+```npm start```
+
+This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes.
+It's aliased to the command:
+
+```npm run build:watch```
+
+If you'd like to just build the CSS once without watching the src directory, run:
+
+```npm run build```
+
+If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
+
+```npm run mutations```
+
+## Docs
+
+The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io
+
+You can clone the docs and use them as a template for documenting your own design system / patterns / components.
+While not everything is automated, the component library generation makes it extremely easy to
+generate and organize the documentation for components as demonstrated at http://tachyons.io/components
+
+### Community Resources
+
+- [DWYL Learn Tachyons](https://github.com/dwyl/learn-tachyons): Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
+- [Tachyons TLDR](https://tachyons-tldr.now.sh/#/classes): Quick lookup for Tachyons classes, scales and color palette
+- [Tachyons Pro](https://tachyonspro.netlify.app/): Fun quiz for memorizing class names
+
+## Contributing
+
+Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors.
+
+## Tachyons in Production
+
+A longer list of sites that use tachyons in production can be found in sites.md
+We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
+
+**Featured Sites**
+
+* https://npmjs.com
+* http://www.philipyoungg.com
+* https://gitpoint.co
+* https://purple3.herokuapp.com
+* http://blunt.af/tachy.app/
+* https://fenderdigital.github.io/css-utilities/intro/
+* https://play.cash
+* https://bitmidi.com
+
+And of course...
+* http://tachyons.io
+
+## Help
+
+If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).

build.js

@@ -1,70 +0,0 @@
-var pkg = require('./package.json')
-var tachyonsModules = require('tachyons-modules')
-var copy = require('copy-files')
-
-tachyonsModules().then(function (cssModules) {
-  var filteredModules = cssModules.filter(function (module) {
-    return [
-      // TODO: Fix me : (
-      'tachyons-colors',
-      'tachyons-base',
-      'tachyons-webpack',
-      'tachyons-display-verbose'
-    ].indexOf(module.name) == -1
-  }).map(function (cssModule) {
-    return cssModule.name
-  })
-
-  filteredModules.push('normalize.css')
-  var files = constructFiles(filteredModules)
-
-  copy({
-    files: files,
-    dest: __dirname + '/src',
-    overwrite: true
-  }, function (err) {
-    if (err) {
-      console.error('Error occurred copying files')
-      console.error(err)
-      process.exit(1)
-    }
-  })
-})
-
-function constructFiles (modules) {
-  var files = {}
-  modules.forEach(function (module) {
-    console.log('Copying ' + module)
-    var moduleLocation = getModuleCssLocation(module)
-    var moduleName = getModuleKey(module)
-    files['_' + moduleName + '.css'] = moduleLocation
-  })
-
-  return files
-}
-
-function isTachyonsModule (module) {
-  return module.indexOf('tachyons') !== -1
-}
-
-function isNormalizeModule (module) {
-  return module === 'normalize.css'
-}
-
-function getModuleCssLocation (module) {
-  try {
-    if (isTachyonsModule(module)) {
-      return 'node_modules/' + module + '/' + require('./node_modules/' + module + '/package.json').style
-    } else if (isNormalizeModule(module)) {
-      return 'node_modules/' + module + '/' + module
-    } else {
-      console.error('Unknown module: ' + module)
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-function getModuleKey (module) {
-  return module.replace(/(tachyons-|\.css)/ig, '')
-}

license

@@ -1,5 +1,7 @@
 The MIT License (MIT)
 
+Copyright © 2020 Adam Morse & John Otander 
+
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

llms.txt

@@ -0,0 +1,321 @@
+# Tachyons CSS
+
+> Functional CSS for humans. Quickly build and design new UI without writing CSS.
+
+Tachyons is a functional/atomic CSS framework that provides single-purpose utility classes. Instead of writing custom CSS, you compose classes directly in HTML to style elements. The framework is mobile-first, lightweight (~14kB), and optimized for maximum gzip compression.
+
+## Project Structure
+
+```
+/css/                 # Compiled CSS output
+  tachyons.css        # Full compiled CSS
+  tachyons.min.css    # Minified production CSS
+
+/src/                 # Source CSS modules (PostCSS)
+  tachyons.css        # Main entry point that imports all modules
+  _*.css              # Individual module files (prefixed with underscore)
+```
+
+## Core Principles
+
+- Everything should be 100% responsive
+- Single-purpose class structure (one class = one CSS property)
+- Mobile-first CSS architecture
+- 8px baseline grid for spacing
+- Designing in the browser should be easy
+- Changes to one interface shouldn't break others
+
+## Naming Conventions
+
+Tachyons uses abbreviated class names following consistent patterns:
+
+### Base + Modifier Pattern
+Classes follow the pattern: `{property}{value}` or `{property}{direction}{value}`
+
+Examples:
+- `pa3` = padding-all: 1rem
+- `mt2` = margin-top: 0.5rem  
+- `f4` = font-size: 1.25rem
+- `w-50` = width: 50%
+
+### Responsive Suffixes
+All classes support responsive variants via breakpoint suffixes:
+
+| Suffix | Breakpoint | Description |
+|--------|------------|-------------|
+| (none) | All | Mobile-first base styles |
+| `-ns`  | ≥30em (480px) | Not small (medium and up) |
+| `-m`   | 30em–60em | Medium only |
+| `-l`   | ≥60em (960px) | Large and up |
+
+Example: `dn db-ns` = display:none on mobile, display:block on medium+
+
+## Spacing Scale
+
+Uses powers of two scale (8px baseline):
+
+| Step | Value | CSS Variable |
+|------|-------|--------------|
+| 0 | 0 | --spacing-none |
+| 1 | 0.25rem (4px) | --spacing-extra-small |
+| 2 | 0.5rem (8px) | --spacing-small |
+| 3 | 1rem (16px) | --spacing-medium |
+| 4 | 2rem (32px) | --spacing-large |
+| 5 | 4rem (64px) | --spacing-extra-large |
+| 6 | 8rem (128px) | --spacing-extra-extra-large |
+| 7 | 16rem (256px) | --spacing-extra-extra-extra-large |
+
+### Spacing Classes
+- **Padding**: `pa`, `pl`, `pr`, `pt`, `pb`, `pv` (vertical), `ph` (horizontal)
+- **Margin**: `ma`, `ml`, `mr`, `mt`, `mb`, `mv` (vertical), `mh` (horizontal)
+
+Examples: `pa3`, `mt4`, `ph2-ns`, `mb0-l`
+
+## Type Scale
+
+| Class | Size |
+|-------|------|
+| `.f-headline`, `.f-6` | 6rem |
+| `.f-subheadline`, `.f-5` | 5rem |
+| `.f1` | 3rem |
+| `.f2` | 2.25rem |
+| `.f3` | 1.5rem |
+| `.f4` | 1.25rem |
+| `.f5` | 1rem |
+| `.f6` | 0.875rem |
+| `.f7` | 0.75rem (use sparingly) |
+
+## Width Scale
+
+### Fixed Widths (powers of 2)
+| Class | Width |
+|-------|-------|
+| `.w1` | 1rem |
+| `.w2` | 2rem |
+| `.w3` | 4rem |
+| `.w4` | 8rem |
+| `.w5` | 16rem |
+
+### Percentage Widths
+`.w-10`, `.w-20`, `.w-25`, `.w-30`, `.w-33`, `.w-34`, `.w-40`, `.w-50`, `.w-60`, `.w-70`, `.w-75`, `.w-80`, `.w-90`, `.w-100`
+
+Also: `.w-third`, `.w-two-thirds`, `.w-auto`
+
+## Color System
+
+### Grayscale
+`black`, `near-black`, `dark-gray`, `mid-gray`, `gray`, `silver`, `light-silver`, `moon-gray`, `light-gray`, `near-white`, `white`
+
+### Transparency
+- Black: `black-90` through `black-05` (90% to 5% opacity)
+- White: `white-90` through `white-10`
+
+### Colors
+`dark-red`, `red`, `light-red`, `orange`, `gold`, `yellow`, `light-yellow`, `purple`, `light-purple`, `dark-pink`, `hot-pink`, `pink`, `light-pink`, `dark-green`, `green`, `light-green`, `navy`, `dark-blue`, `blue`, `light-blue`, `lightest-blue`, `washed-blue`, `washed-green`, `washed-yellow`, `washed-red`
+
+### Color Classes
+- **Text color**: Use color name directly (e.g., `blue`, `dark-gray`)
+- **Background**: Prefix with `bg-` (e.g., `bg-blue`, `bg-dark-gray`)
+- **Border**: Prefix with `b--` (e.g., `b--blue`, `b--dark-gray`)
+
+## Common Class Categories
+
+### Display
+`dn` (none), `di` (inline), `db` (block), `dib` (inline-block), `dt` (table), `dtc` (table-cell), `flex`, `inline-flex`
+
+### Flexbox
+- Container: `flex`, `inline-flex`, `flex-column`, `flex-row`, `flex-wrap`
+- Alignment: `items-center`, `items-start`, `items-end`, `items-baseline`, `items-stretch`
+- Justify: `justify-center`, `justify-start`, `justify-end`, `justify-between`, `justify-around`
+- Self: `self-center`, `self-start`, `self-end`
+- Flex: `flex-auto`, `flex-none`, `flex-grow-0`, `flex-grow-1`, `flex-shrink-0`, `flex-shrink-1`
+- Order: `order-0` through `order-8`, `order-last`
+
+### Position
+`static`, `relative`, `absolute`, `fixed`, `sticky`
+
+### Coordinates
+`top-0`, `right-0`, `bottom-0`, `left-0`, `top-1`, `top-2`, etc.
+
+### Border Radius
+`br0`, `br1`, `br2`, `br3`, `br4`, `br-100` (circle), `br-pill` (rounded pill)
+Directional: `br--top`, `br--bottom`, `br--left`, `br--right`
+
+### Borders
+- Width: `bw0`, `bw1`, `bw2`, `bw3`, `bw4`, `bw5`
+- Style: `b--solid`, `b--dashed`, `b--dotted`, `b--none`
+- Sides: `ba` (all), `bt` (top), `br` (right), `bb` (bottom), `bl` (left), `bn` (none)
+
+### Typography
+- Weight: `fw1` (100) through `fw9` (900), `normal`, `b` (bold)
+- Style: `i` (italic), `fs-normal`
+- Alignment: `tl` (left), `tr` (right), `tc` (center), `tj` (justify)
+- Transform: `ttc` (capitalize), `ttl` (lowercase), `ttu` (uppercase), `ttn` (none)
+- Decoration: `no-underline`, `underline`, `strike`
+- Line height: `lh-solid` (1), `lh-title` (1.25), `lh-copy` (1.5)
+- Letter spacing: `tracked`, `tracked-tight`, `tracked-mega`
+
+### Visibility
+`o-0` through `o-100` (opacity), `v-hidden`, `v-visible`, `clip` (visually hidden)
+
+### Overflow
+`overflow-visible`, `overflow-hidden`, `overflow-scroll`, `overflow-auto`
+X/Y: `overflow-x-visible`, `overflow-y-hidden`, etc.
+
+### Heights
+Fixed: `h1`, `h2`, `h3`, `h4`, `h5` (1rem to 16rem)
+Percentage: `h-25`, `h-50`, `h-75`, `h-100`
+Viewport: `vh-25`, `vh-50`, `vh-75`, `vh-100`, `min-vh-100`
+
+### Max Width
+`mw1` through `mw9`, `mw-100`, `mw-none`
+
+### Z-Index
+`z-0`, `z-1`, `z-2`, `z-3`, `z-4`, `z-5`, `z-999`, `z-9999`, `z-max`, `z-inherit`, `z-initial`, `z-unset`
+
+### Floats & Clears
+`fl` (left), `fr` (right), `fn` (none), `cf` (clearfix)
+
+### Lists
+`list` (removes default styling)
+
+### Box Sizing
+`border-box` (applied globally via `*`)
+
+### Hovers
+Prefix with `hover-` for hover states: `hover-bg-blue`, `hover-black`, etc.
+
+## Usage Examples
+
+### Card Component
+```html
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="avatar.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2">
+    <h1 class="f3 mb2">Jane Doe</h1>
+    <h2 class="f5 fw4 gray mt0">Designer</h2>
+  </div>
+</article>
+```
+
+### Responsive Navigation
+```html
+<nav class="flex flex-column flex-row-ns justify-between items-center pa3">
+  <a class="f4 fw6 link black">Logo</a>
+  <div class="flex flex-column flex-row-ns">
+    <a class="link black pa2">About</a>
+    <a class="link black pa2">Work</a>
+    <a class="link black pa2">Contact</a>
+  </div>
+</nav>
+```
+
+### Button
+```html
+<a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue">
+  Click Me
+</a>
+```
+
+### Responsive Grid
+```html
+<div class="cf">
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 1</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 2</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 3</div>
+  <div class="fl w-100 w-50-m w-25-l pa2">Column 4</div>
+</div>
+```
+
+### Flexbox Grid
+```html
+<div class="flex flex-wrap">
+  <div class="w-100 w-50-m w-25-l pa2">Column 1</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 2</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 3</div>
+  <div class="w-100 w-50-m w-25-l pa2">Column 4</div>
+</div>
+```
+
+## Build Commands
+
+```bash
+npm install           # Install dependencies
+npm start             # Build and watch for changes
+npm run build         # Build CSS once
+npm run mutations     # Check for class mutations/redefinitions
+```
+
+## CDN Usage
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
+```
+
+## Source Modules
+
+The source is organized into focused single-responsibility modules:
+
+| Module | Description |
+|--------|-------------|
+| `_normalize.css` | CSS reset/normalization |
+| `_box-sizing.css` | Border-box sizing |
+| `_spacing.css` | Margin and padding |
+| `_type-scale.css` | Font sizes |
+| `_typography.css` | Font families, measures |
+| `_widths.css` | Width utilities |
+| `_heights.css` | Height utilities |
+| `_max-widths.css` | Max-width utilities |
+| `_display.css` | Display properties |
+| `_flexbox.css` | Flexbox utilities |
+| `_position.css` | Position utilities |
+| `_coordinates.css` | Top/right/bottom/left |
+| `_floats.css` | Float utilities |
+| `_colors.css` | CSS color variables |
+| `_skins.css` | Text and background colors |
+| `_border-colors.css` | Border colors |
+| `_borders.css` | Border utilities |
+| `_border-radius.css` | Border radius |
+| `_border-widths.css` | Border widths |
+| `_border-style.css` | Border styles |
+| `_box-shadow.css` | Box shadows |
+| `_opacity.css` | Opacity utilities |
+| `_overflow.css` | Overflow utilities |
+| `_visibility.css` | Visibility utilities |
+| `_z-index.css` | Z-index scale |
+| `_hovers.css` | Hover state utilities |
+| `_font-family.css` | Font stacks |
+| `_font-weight.css` | Font weights |
+| `_font-style.css` | Italic/normal |
+| `_line-height.css` | Line heights |
+| `_letter-spacing.css` | Letter spacing |
+| `_text-align.css` | Text alignment |
+| `_text-transform.css` | Text transforms |
+| `_text-decoration.css` | Underlines, etc. |
+| `_vertical-align.css` | Vertical alignment |
+| `_white-space.css` | White space handling |
+| `_word-break.css` | Word breaking |
+| `_aspect-ratios.css` | Aspect ratio containers |
+| `_images.css` | Image utilities |
+| `_background-size.css` | Background sizing |
+| `_background-position.css` | Background positioning |
+| `_lists.css` | List styling |
+| `_tables.css` | Table utilities |
+| `_forms.css` | Form element resets |
+| `_utilities.css` | Misc utilities |
+| `_negative-margins.css` | Negative margin utilities |
+| `_debug.css` | Layout debugging |
+| `_debug-children.css` | Debug children outlines |
+| `_debug-grid.css` | Grid overlay debugging |
+| `_media-queries.css` | Breakpoint definitions |
+
+## Key CSS Variables
+
+Spacing, colors, and breakpoints are defined as CSS custom properties in their respective modules. Override these in your own CSS to customize the design system.
+
+## Documentation
+
+Full documentation: http://tachyons.io/docs
+Component library: http://tachyons.io/components
+GitHub: https://github.com/tachyons-css/tachyons
+

package.json

@@ -1,9 +1,9 @@
 {
   "name": "tachyons",
-  "version": "4.0.0-beta.32",
+  "version": "4.12.0",
   "description": "Functional CSS for humans",
   "author": "mrmrs",
-  "style": "css/tachyons.css",
+  "style": "css/tachyons.min.css",
   "main": "css/tachyons.css",
   "files": [
     "css",
@@ -12,93 +12,38 @@
   "repository": "tachyons-css/tachyons",
   "keywords": [
     "css",
-    "sass",
     "oocss",
+    "postcss",
+    "functional css",
+    "design",
+    "responsive",
     "performance"
   ],
   "license": "MIT",
   "devDependencies": {
     "copy-files": "^0.1.0",
     "immutable-css-cli": "^1.1.1",
-    "normalize.css": "^4.1.1",
-    "tachyons-cli": "^0.6.0",
-    "tachyons-modules": "^1.1.3",
-    "watch": "^0.18.0"
+    "normalize.css": "^8.0.0",
+    "tachyons-modules": "^1.1.10",
+    "tachyons-cli": "^1.3.2",
+    "watch": "^1.0.2"
   },
   "contributors": [
     {
       "name": "adam morse",
       "email": "hi@mrmrs.cc"
     },
-    {
-      "name": "robert forloine",
-      "url": "http://www.sndsgn.com"
-    },
-    {
-      "name": "david potsiadlo",
-      "url": "http://www.davidpots.com/"
-    },
-    {
-      "name": "tyler benziger",
-      "url": "http://tybenz.com"
-    },
     {
       "name": "john otander",
       "url": "http://johnotander.com"
     }
   ],
   "scripts": {
-    "start": "npm run build:css && npm run build:minify",
+    "start": "npm run build:watch",
     "mutations": "immutable-css src/tachyons.css --strict",
-    "build": "node build.js && npm run build:css && npm start",
+    "build": "npm run build:css && npm run build:minify",
     "build:css": "tachyons src/tachyons.css > css/tachyons.css",
-    "build:minify": "tachyons src/tachyons.css -m > css/tachyons.min.css",
-    "build:watch": "watch 'npm start' ./src/"
-  },
-  "dependencies": {
-    "tachyons-background-size": "^3.0.3",
-    "tachyons-border-colors": "^4.0.5",
-    "tachyons-border-radius": "^4.1.2",
-    "tachyons-border-style": "^3.0.2",
-    "tachyons-border-widths": "^2.0.2",
-    "tachyons-borders": "^2.1.0",
-    "tachyons-box-sizing": "^3.1.2",
-    "tachyons-box-shadow": "^1.1.0",
-    "tachyons-clears": "^2.2.0",
-    "tachyons-colors": "^5.1.2",
-    "tachyons-coordinates": "^3.0.1",
-    "tachyons-debug": "^1.1.2",
-    "tachyons-display": "^4.1.0",
-    "tachyons-floats": "^2.0.4",
-    "tachyons-font-family": "^4.1.2",
-    "tachyons-font-style": "^3.0.1",
-    "tachyons-font-weight": "^4.0.3",
-    "tachyons-forms": "^3.0.0",
-    "tachyons-heights": "^5.0.0",
-    "tachyons-hovers": "^2.3.1",
-    "tachyons-images": "^1.0.3",
-    "tachyons-letter-spacing": "^2.1.2",
-    "tachyons-line-height": "^2.0.4",
-    "tachyons-links": "^3.0.1",
-    "tachyons-lists": "^2.0.4",
-    "tachyons-max-widths": "^3.1.1",
-    "tachyons-opacity": "^1.1.0",
-    "tachyons-outlines": "^1.0.0",
-    "tachyons-overflow": "^3.0.1",
-    "tachyons-position": "^5.0.1",
-    "tachyons-skins": "^3.1.5",
-    "tachyons-spacing": "^5.0.10",
-    "tachyons-tables": "^1.0.0",
-    "tachyons-text-align": "^2.0.4",
-    "tachyons-text-decoration": "^3.1.1",
-    "tachyons-text-transform": "^3.0.5",
-    "tachyons-type-scale": "^5.0.3",
-    "tachyons-typography": "^2.3.0",
-    "tachyons-utilities": "^1.2.1",
-    "tachyons-vertical-align": "^2.0.3",
-    "tachyons-visibility": "^1.0.4",
-    "tachyons-white-space": "^3.0.1",
-    "tachyons-widths": "^4.0.2",
-    "tachyons-word-break": "1.0.1"
+    "build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css",
+    "build:watch": "watch \"npm run build\" ./src/"
   }
 }

readme.md

@@ -1,127 +0,0 @@
-# TACHYONS
-
-Functional CSS for humans.
-
-Quickly build and design new UI without writing CSS.
-
-## Principles
-
-* Everything should be 100% responsive
-* Everything should be readable on any device
-* Everything should be as performant as possible
-* Designing in the browser should be easy
-* It should be easy to change any interface or part of an interface without breaking any existing interfaces
-* Doing one thing extremely well promotes reusability and reduces repetition
-* CSS is global. HTML is not. Send the smallest amount of code to the user as possible.
-
-## Features
-
-* Mobile-first css
-* Single-purpose class structure
-* Optimized for maximum gzip compression
-* 7.2kB when minified and gzipped
-* Usable across projects
-* Infinitely nestable responsive grid system
-* Built with Postcss
-
-## Getting started
-
-Docs can be found at http://tachyons.io/docs
-The modules are generally pretty small and thus easy to read and grock if you're familiar with css at all.
-
-### Use the CDN
-
-The quickest and easiest way to start using tachyons is to include a reference
-to the minified file in the head of your html file.
-
-Currently the latest version is 4.0.0-beta.28
-```html
-<link rel="stylesheet" href="https://npmcdn.com/tachyons@4.0.0-beta.28/css/tachyons.min.css">
-```
-
-### Local Setup
-
-Clone the repo from github and install dependencies through npm.
-
-```
-git clone https://github.com/tachyons-css/tachyons.git
-cd tachyons
-npm install
-```
-
-#### Build
-
-##### First time
-
-Tachyons is available as a series of small self contained css modules. They aren't dependent on eachother but
-are designed to play well together. But tachyons is also just css. And you should feel free to edit css
-that is in your project. The first time you build tachyons all of the css gets installed via npm, but the modules
-then get copied over to your local src directory and then the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli)
-uses a series of postcss plugins to compile the source down to vanilla css.
-
-##### Updating
-
-If you want to update a tachyons partial, install the desired module version via npm and run the build command again. Note
-this will copy over all source files, so if you've modified src/ your changes might will be overwritten but you can use version control (like git!) to undo these changes.
-```npm run build```
-
-#### Dev
-
-If you want to just use src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running
-
-```npm start```
-
-This will output both minified and unminified versions of the css to the css directory.
-
-If you want to recompile everything from src everytime you save a change - you can run the following command, which will compile and minify the css
-
-```npm run build:watch```
-
-If you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command
-
-```npm run mutations```
-
-## Contributing
-
-If you want to make a PR to change part of the css source for tachyons, make sure you make the PR on the corresponding module
-that can be found in the [tachyons org](http://github.com/tachyons-css/). Those modules get copied into the main repo so
-any changes you make to the css in this repo would get overridden.
-
-Also please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors.
-
-## Some websites that use modules from the tachyons project
-(if you have a project that uses tachyons feel free to make a PR to add it to this list)
-
-* http://spenhar.com
-* http://www.csspurge.com
-* http://bluebottlecoffee.com
-* http://aboutlife.com
-* http://clrs.cc
-* http://mrmrs.io/gradients
-* http://joinoneroom.com
-* https://www.getnoodl.es
-* https://natwelch.com
-* http://mrmrs.io/profile/
-* http://mn-ml.cc
-* http://pesticide.io
-* http://mrmrs.io/btns/
-* http://zachhurd.com
-* http://mrmrs.cc
-* http://mrmrs.io/up/
-* http://mrmrs.io/beats/
-* http://mrmrs.io/writing
-* http://fade.pics
-* http://gfffs.com
-* https://wordpress.org/themes/vanilla-milkshake/
-* http://comics.hongkonggong.com/
-
-And of course...
-* http://tachyons.io
-
-## Help
-
-If you have a question feel free to open an issue here or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
-
-## License
-
-MIT

sites.md

@@ -0,0 +1,111 @@
+* https://gohugo.io
+* https://npmjs.com
+* https://www.offen.dev
+* https://interfacelovers.com
+* https://friendstalkfrontend.com
+* http://www.philipyoungg.com
+* https://antonsten.com
+* https://enbytech.github.io
+* https://fontawesome.com
+* https://asay.io
+* https://detroitjs.com
+* https://purple3.herokuapp.com
+* https://watsonmulkey.github.io
+* http://vuenosair.es
+* http://www.codeblocq.com
+* http://blunt.af/tachy.app/
+* https://aframevr-userland.github.io/mainframe/
+* https://coralproject.net
+* https://goldenstaterecord.com
+* http://www.sogol.co
+* http://lastjapan.com
+* https://segment.com
+* http://hicuties.com
+* https://urlbox.io
+* https://loronarecords.com
+* https://community.algolia.com/wordpress/
+* http://studiocraft.cc
+* http://samueldregan.com
+* https://filmstrip.cf
+* https://voteplz.com
+* http://bluebottlecoffee.com
+* http://cyclelove.cc
+* http://topher.design
+* http://kerem.co
+* http://iheanyi.com/
+* http://johnotander.com
+* https://vimgifs.com
+* http://jon.gold/txt
+* http://rene.jon.gold
+* https://tinychime.github.io/jekyons/
+* http://prnt.cc
+* http://spenhar.com
+* http://randoma11y.com
+* http://www.csspurge.com
+* http://clrs.cc
+* https://cljsjs.github.io
+* https://www.getnoodl.es
+* https://natwelch.com
+* http://pesticide.io
+* http://zachhurd.com
+* http://gfffs.com
+* https://wordpress.org/themes/vanilla-milkshake/
+* http://comics.hongkonggong.com/
+* https://accessmyinfo.hk/#/
+* https://accessmyinfo.org/#/
+* http://rene.jon.gold
+* http://randoma11y.com
+* http://designbytyping.com
+* http://colepeters.com
+* https://atmin.github.io/funponent/
+* http://blog.colepeters.com
+* http://aboutlife.com
+* http://joinoneroom.com
+* http://filipaonunes.com
+* https://vakra.band
+* http://tylernford.com
+* https://adventuretron.org
+* https://uptimeumbrella.com
+* http://www.talbs.me
+* https://podviaznikov.com
+* http://seanoshea.me
+* https://www.hiaida.com
+* http://maxogden.github.io/screencat/
+* http://numenta.com
+* https://windtoday.co
+* https://crunchbangplusplus.org
+* http://claudio.netlify.com
+* http://devday-ar.com
+* https://zoneii.github.io
+* http://kow.fm
+* http://jonshort.me
+* https://nuxtjs.org
+* http://devgame.surge.sh
+* https://scottmathson.com
+* https://podviaznikov.com
+* https://hero-patterns.lowmess.com
+* https://colinwilson.uk
+* https://grodziski.com
+* https://hatchloyalty.com
+* http://www.spokesman.com/
+* https://enveloop.studio
+* http://tylerdeitz.com
+* https://www.dcdesignweek.org/
+* https://tribekampala.com
+* https://www.classaction.org
+* https://gaest.com
+* https://aravindh.net
+* https://www.starklabs.io/
+* https://pylon.design
+* https://lasttramfrom.com/
+* https://www.stepahead.de
+* https://cryptocurrencyjobs.co/
+* https://foundlo.st
+* https://jjude.com
+* http://www.spokesman.com
+* https://beta.observablehq.com/
+* https://www.medienblau.de
+* https://c.atet.in
+* https://tools.kaklabs.com
+* https://eppendocs.de
+* https://sparrowmobile.com/

src/_aspect-ratios.css

@@ -0,0 +1,135 @@
+/*
+
+   ASPECT RATIOS
+
+*/
+
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ * <div class="aspect-ratio aspect-ratio--16x9">
+ *  <iframe class="aspect-ratio--object"></iframe>
+ * </div>
+ *
+ * */
+
+.aspect-ratio {
+  height: 0;
+  position: relative;
+}
+
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+
+.aspect-ratio--4x3 {  padding-bottom: 75%; }
+.aspect-ratio--3x4 {  padding-bottom: 133.33%; }
+
+.aspect-ratio--6x4 {  padding-bottom: 66.6%; }
+.aspect-ratio--4x6 {  padding-bottom: 150%; }
+
+.aspect-ratio--8x5 {  padding-bottom: 62.5%; }
+.aspect-ratio--5x8 {  padding-bottom: 160%; }
+
+.aspect-ratio--7x5 {  padding-bottom: 71.42%; }
+.aspect-ratio--5x7 {  padding-bottom: 140%; }
+
+.aspect-ratio--1x1 {  padding-bottom: 100%; }
+
+.aspect-ratio--object {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+@media (--breakpoint-not-small){
+    .aspect-ratio-ns {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-ns {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-ns {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-ns {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-ns {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-ns {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-ns {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-ns {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-ns {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-ns {  padding-bottom: 100%; }
+    .aspect-ratio--object-ns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media (--breakpoint-medium){
+    .aspect-ratio-m {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-m {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-m {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-m {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-m {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-m {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-m {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-m {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-m {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-m {  padding-bottom: 100%; }
+    .aspect-ratio--object-m {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media (--breakpoint-large){
+    .aspect-ratio-l {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-l {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-l {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-l {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-l {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-l {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-l {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-l {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-l {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-l {  padding-bottom: 100%; }
+    .aspect-ratio--object-l {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}

src/_background-position.css

@@ -0,0 +1,126 @@
+/*
+
+    BACKGROUND POSITION
+
+    Base:
+    bg = background
+
+    Modifiers:
+    -center = center center
+    -top = top center
+    -right = center right
+    -bottom = bottom center
+    -left = center left
+
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
+ */
+
+.bg-center { 
+  background-repeat: no-repeat;
+  background-position: center center; 
+}
+
+.bg-top {    
+  background-repeat: no-repeat; 
+  background-position: top center;    
+}
+
+.bg-right {  
+  background-repeat: no-repeat; 
+  background-position: center right;  
+}
+
+.bg-bottom { 
+  background-repeat: no-repeat; 
+  background-position: bottom center; 
+}
+
+.bg-left {   
+  background-repeat: no-repeat; 
+  background-position: center left;   
+}
+
+@media (--breakpoint-not-small) {
+  .bg-center-ns { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-ns {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-ns {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-ns { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-ns {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media (--breakpoint-medium) {
+  .bg-center-m { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-m {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-m {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-m { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-m {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media (--breakpoint-large) {
+  .bg-center-l { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-l {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-l {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-l { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-l {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}

src/_background-size.css

@@ -1,17 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    BACKGROUND SIZE
-
-   Base:
-    bg = background-size
-
-   Modifiers:
-    -cv = cover
-    -cn = contain
+   Docs: http://tachyons.io/docs/themes/background-size/
 
    Media Query Extensions:
      -ns = not-small
@@ -25,20 +15,20 @@
   on an html element.
 */
 
-  .bg-cv  {               background-size: cover; }
-  .bg-cn  {               background-size: contain; }
+  .cover { background-size: cover!important; }
+  .contain { background-size: contain!important; }
 
 @media (--breakpoint-not-small) {
-  .bg-cv-ns {             background-size: cover; }
-  .bg-cn-ns {             background-size: contain; }
+  .cover-ns { background-size: cover!important; }
+  .contain-ns { background-size: contain!important; }
 }
 
 @media (--breakpoint-medium) {
-  .bg-cv-m {              background-size: cover; }
-  .bg-cn-m {              background-size: contain; }
+  .cover-m { background-size: cover!important; }
+  .contain-m { background-size: contain!important; }
 }
 
 @media (--breakpoint-large) {
-  .bg-cv-l {              background-size: cover; }
-  .bg-cn-l {              background-size: contain; }
+  .cover-l { background-size: cover!important; }
+  .contain-l { background-size: contain!important; }
 }

src/_border-colors.css

@@ -1,57 +1,20 @@
-/*
-
-   Tachyons
-   COLOR VARIABLES
-
-   Grayscale
-   - Solids
-   - Transparencies
-*/
-
-:root {
-  --black: #000;
-  --near-black: #111;
-  --dark-gray:#333;
-  --mid-gray:#555;
-  --gray: #777;
-  --silver: #999;
-  --light-silver: #aaa;
-  --moon-gray: #ccc;
-  --light-gray: #eee;
-  --near-white: #f4f4f4;
-  --white: #fff;
-
-  --transparent: transparent;
-
-  --black-90: rgba(0,0,0,.9);
-  --black-80: rgba(0,0,0,.8);
-  --black-70: rgba(0,0,0,.7);
-  --black-60: rgba(0,0,0,.6);
-  --black-50: rgba(0,0,0,.5);
-  --black-40: rgba(0,0,0,.4);
-  --black-30: rgba(0,0,0,.3);
-  --black-20: rgba(0,0,0,.2);
-  --black-10: rgba(0,0,0,.1);
-  --black-05: rgba(0,0,0,.05);
-  --black-025: rgba(0,0,0,.025);
-  --black-0125: rgba(0,0,0,.0125);
-
-  --white-90: rgba(255,255,255,.9);
-  --white-80: rgba(255,255,255,.8);
-  --white-70: rgba(255,255,255,.7);
-  --white-60: rgba(255,255,255,.6);
-  --white-50: rgba(255,255,255,.5);
-  --white-40: rgba(255,255,255,.4);
-  --white-30: rgba(255,255,255,.3);
-  --white-20: rgba(255,255,255,.2);
-  --white-10: rgba(255,255,255,.1);
-  --white-05: rgba(255,255,255,.05);
-  --white-025: rgba(255,255,255,.025);
-  --white-0125: rgba(255,255,255,.0125);
-}
 /*
 
    BORDER COLORS
+   Docs: http://tachyons.io/docs/themes/borders/
+
+   Border colors can be used to extend the base
+   border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+   The base border class by default will set the color of the border
+   to that of the current text color. These classes are for the cases
+   where you desire for the text and border colors to be different.
+
+   Base:
+     b = border
+
+   Modifiers:
+   --color-name = each color variable name is also a border color name
 
 */
 
@@ -62,6 +25,7 @@
 .b--gray {         border-color: var(--gray); }
 .b--silver {       border-color: var(--silver); }
 .b--light-silver { border-color: var(--light-silver); }
+.b--moon-gray {    border-color: var(--moon-gray); }
 .b--light-gray {   border-color: var(--light-gray); }
 .b--near-white {   border-color: var(--near-white); }
 .b--white {        border-color: var(--white); }
@@ -92,4 +56,33 @@
 .b--black-025 {   border-color: var(--black-025); }
 .b--black-0125 {   border-color: var(--black-0125); }
 
+.b--dark-red { border-color: var(--dark-red); }
+.b--red { border-color: var(--red); }
+.b--light-red { border-color: var(--light-red); }
+.b--orange { border-color: var(--orange); }
+.b--gold { border-color: var(--gold); }
+.b--yellow { border-color: var(--yellow); }
+.b--light-yellow { border-color: var(--light-yellow); }
+.b--purple { border-color: var(--purple); }
+.b--light-purple { border-color: var(--light-purple); }
+.b--dark-pink { border-color: var(--dark-pink); }
+.b--hot-pink { border-color: var(--hot-pink); }
+.b--pink { border-color: var(--pink); }
+.b--light-pink { border-color: var(--light-pink); }
+.b--dark-green { border-color: var(--dark-green); }
+.b--green { border-color: var(--green); }
+.b--light-green { border-color: var(--light-green); }
+.b--navy { border-color: var(--navy); }
+.b--dark-blue { border-color: var(--dark-blue); }
+.b--blue { border-color: var(--blue); }
+.b--light-blue { border-color: var(--light-blue); }
+.b--lightest-blue { border-color: var(--lightest-blue); }
+.b--washed-blue { border-color: var(--washed-blue); }
+.b--washed-green { border-color: var(--washed-green); }
+.b--washed-yellow { border-color: var(--washed-yellow); }
+.b--washed-red { border-color: var(--washed-red); }
+
 .b--transparent { border-color: var(--transparent); }
+.b--inherit { border-color: inherit; }
+.b--initial { border-color: initial; }
+.b--unset { border-color: unset; }

src/_border-radius.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    BORDER RADIUS
+   Docs: http://tachyons.io/docs/themes/border-radius/
 
    Base:
      br   = border-radius
@@ -15,8 +12,10 @@
      2    = 2nd step in scale
      3    = 3rd step in scale
      4    = 4th step in scale
-     -100 = 100%
 
+   Literal values:
+     -100 = 100%
+     -pill = 9999px
 
    Media Query Extensions:
      -ns = not-small
@@ -31,6 +30,7 @@
   .br3 {        border-radius: .5rem; }
   .br4 {        border-radius: 1rem; }
   .br-100 {     border-radius: 100%; }
+  .br-pill {    border-radius: 9999px; }
   .br--bottom {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -39,6 +39,17 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br--right {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br-inherit { border-radius: inherit; }
+  .br-initial { border-radius: initial; }
+  .br-unset { border-radius: unset; }
 
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
@@ -47,6 +58,7 @@
   .br3-ns {     border-radius: .5rem; }
   .br4-ns {     border-radius: 1rem; }
   .br-100-ns {  border-radius: 100%; }
+  .br-pill-ns { border-radius: 9999px; }
   .br--bottom-ns {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -55,6 +67,17 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br--right-ns {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-ns {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br-inherit-ns { border-radius: inherit; }
+  .br-initial-ns { border-radius: initial; }
+  .br-unset-ns { border-radius: unset; }
 }
 
 @media (--breakpoint-medium) {
@@ -64,6 +87,7 @@
   .br3-m {     border-radius: .5rem; }
   .br4-m {     border-radius: 1rem; }
   .br-100-m {  border-radius: 100%; }
+  .br-pill-m { border-radius: 9999px; }
   .br--bottom-m {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -72,6 +96,17 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br--right-m {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-m {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br-inherit-m { border-radius: inherit; }
+  .br-initial-m { border-radius: initial; }
+  .br-unset-m { border-radius: unset; }
 }
 
 @media (--breakpoint-large) {
@@ -81,12 +116,24 @@
   .br3-l {     border-radius: .5rem; }
   .br4-l {     border-radius: 1rem; }
   .br-100-l {  border-radius: 100%; }
+  .br-pill-l { border-radius: 9999px; }
   .br--bottom-l {
-      border-radius-top-left: 0;
-      border-radius-top-right: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
   }
   .br--top-l {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
   }
+  .br--right-l {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-l {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br-inherit-l { border-radius: inherit; }
+  .br-initial-l { border-radius: initial; }
+  .br-unset-l { border-radius: unset; }
 }

src/_border-style.css

@@ -1,19 +1,18 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    BORDER STYLES
+   Docs: http://tachyons.io/docs/themes/borders/
+
+   Depends on base border module in _borders.css
 
    Base:
-     bs = border-style
+     b = border-style
 
    Modifiers:
-     none   = none
-     dotted = dotted
-     dashed = dashed
-     solid  = solid
+     --none   = none
+     --dotted = dotted
+     --dashed = dashed
+     --solid  = solid
 
    Media Query Extensions:
      -ns = not-small
@@ -22,28 +21,28 @@
 
  */
 
-.b--none {   border-style: none; }
 .b--dotted { border-style: dotted; }
 .b--dashed { border-style: dashed; }
 .b--solid {  border-style: solid; }
+.b--none {   border-style: none; }
 
 @media (--breakpoint-not-small) {
-  .b--none-ns {   border-style: none; }
   .b--dotted-ns { border-style: dotted; }
   .b--dashed-ns { border-style: dashed; }
   .b--solid-ns {  border-style: solid; }
+  .b--none-ns {   border-style: none; }
 }
 
 @media (--breakpoint-medium) {
-  .b--none-m {   border-style: none; }
   .b--dotted-m { border-style: dotted; }
   .b--dashed-m { border-style: dashed; }
   .b--solid-m {  border-style: solid; }
+  .b--none-m {   border-style: none; }
 }
 
 @media (--breakpoint-large) {
-  .b--none-l {   border-style: none; }
   .b--dotted-l { border-style: dotted; }
   .b--dashed-l { border-style: dashed; }
   .b--solid-l {  border-style: solid; }
+  .b--none-l {   border-style: none; }
 }

src/_border-widths.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    BORDER WIDTHS
+   Docs: http://tachyons.io/docs/themes/borders/
 
    Base:
      bw = border-width
@@ -31,6 +28,12 @@
 .bw4 { border-width: 1rem; }
 .bw5 { border-width: 2rem; }
 
+/* Resets */
+.bt-0 { border-top-width: 0; }
+.br-0 { border-right-width: 0; }
+.bb-0 { border-bottom-width: 0; }
+.bl-0 { border-left-width: 0; }
+
 @media (--breakpoint-not-small) {
   .bw0-ns { border-width: 0; }
   .bw1-ns { border-width: .125rem; }
@@ -38,6 +41,10 @@
   .bw3-ns { border-width: .5rem; }
   .bw4-ns { border-width: 1rem; }
   .bw5-ns { border-width: 2rem; }
+  .bt-0-ns { border-top-width: 0; }
+  .br-0-ns { border-right-width: 0; }
+  .bb-0-ns { border-bottom-width: 0; }
+  .bl-0-ns { border-left-width: 0; }
 }
 
 @media (--breakpoint-medium) {
@@ -47,6 +54,10 @@
   .bw3-m { border-width: .5rem; }
   .bw4-m { border-width: 1rem; }
   .bw5-m { border-width: 2rem; }
+  .bt-0-m { border-top-width: 0; }
+  .br-0-m { border-right-width: 0; }
+  .bb-0-m { border-bottom-width: 0; }
+  .bl-0-m { border-left-width: 0; }
 }
 
 @media (--breakpoint-large) {
@@ -56,4 +67,8 @@
   .bw3-l { border-width: .5rem; }
   .bw4-l { border-width: 1rem; }
   .bw5-l { border-width: 2rem; }
+  .bt-0-l { border-top-width: 0; }
+  .br-0-l { border-right-width: 0; }
+  .bb-0-l { border-bottom-width: 0; }
+  .bl-0-l { border-left-width: 0; }
 }

src/_borders.css

@@ -1,18 +1,23 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
-   BORDER BASE
+    BORDERS
+    Docs: http://tachyons.io/docs/themes/borders/
 
-   Legend
+    Base:
+      b = border
 
-   a = all
-   t = top
-   r = right
-   b = bottom
-   l = left
+    Modifiers:
+      a = all
+      t = top
+      r = right
+      b = bottom
+      l = left
+      n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 
@@ -23,6 +28,7 @@
   .bl { border-left-style: solid; border-left-width: 1px; }
   .bn { border-style: none; border-width: 0; }
 
+
 @media (--breakpoint-not-small) {
   .ba-ns { border-style: solid; border-width: 1px; }
   .bt-ns { border-top-style: solid; border-top-width: 1px; }

src/_box-shadow.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
   BOX-SHADOW
+  Docs: http://tachyons.io/docs/themes/box-shadow/
 
   Media Query Extensions:
    -ns = not-small

src/_box-sizing.css

@@ -1,19 +1,26 @@
 /*
-  Box Sizing
+ 
+  BOX SIZING
+
 */
 
 html,
 body,
 div,
 article,
+aside,
 section,
 main,
+nav,
 footer,
 header,
 form,
 fieldset,
+legend,
 pre,
 code,
+a,
+h1,h2,h3,h4,h5,h6,
 p,
 ul,
 ol,
@@ -21,7 +28,14 @@ li,
 dl,
 dt,
 dd,
+blockquote,
+figcaption,
+figure,
 textarea,
+table, 
+td,
+th,
+tr,
 input[type="email"],
 input[type="number"],
 input[type="password"],

src/_clears.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    CLEARFIX
+   http://tachyons.io/docs/layout/clearfix/
 
 */
 

src/_colors.css

@@ -6,6 +6,8 @@
    Grayscale
    - Solids
    - Transparencies
+   Colors
+
 */
 
 :root {
@@ -48,4 +50,31 @@
  --white-05: rgba(255,255,255,.05);
  --white-025: rgba(255,255,255,.025);
  --white-0125: rgba(255,255,255,.0125);
+
+  --dark-red:  #e7040f;
+  --red:  #ff4136;
+  --light-red:  #ff725c;
+  --orange:  #ff6300;
+  --gold:  #ffb700;
+  --yellow:  #ffd700;
+  --light-yellow:  #fbf1a9;
+  --purple:  #5e2ca5;
+  --light-purple:  #a463f2;
+  --dark-pink:  #d5008f;
+  --hot-pink: #ff41b4;
+  --pink:  #ff80cc;
+  --light-pink:  #ffa3d7;
+  --dark-green:  #137752;
+  --green:  #19a974;
+  --light-green:  #9eebcf;
+  --navy:  #001b44;
+  --dark-blue:  #00449e;
+  --blue:  #357edd;
+  --light-blue:  #96ccff;
+  --lightest-blue:  #cdecff;
+  --washed-blue:  #f6fffe;
+  --washed-green:  #e8fdf5;
+  --washed-yellow:  #fffceb;
+  --washed-red:  #ffdfdf;
+
 }

src/_coordinates.css

@@ -1,13 +1,28 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    COORDINATES
+   Docs: http://tachyons.io/docs/layout/position/
 
    Use in combination with the position module.
 
+   Base:
+     top
+     bottom
+     right
+     left
+
+   Modifiers:
+     -0  = literal value 0
+     -1  = literal value 1
+     -2  = literal value 2
+     --1 = literal value -1
+     --2 = literal value -2
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .top-0    { top:    0; }

src/_debug-children.css

@@ -1,6 +1,7 @@
 /*
 
   DEBUG CHILDREN
+  Docs: http://tachyons.io/docs/debug/
 
   Just add the debug class to any element to see outlines on its
   children.
@@ -8,4 +9,6 @@
 */
 
 .debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
 

src/_debug-grid.css

@@ -0,0 +1,26 @@
+/*
+
+   DEBUG GRID
+   http://tachyons.io/docs/debug-grid/
+
+   Can be useful for debugging layout issues
+   or helping to make sure things line up perfectly.
+   Just tack one of these classes onto a parent element.
+
+*/
+
+.debug-grid {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-16 {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-8-solid {
+  background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
+}
+
+.debug-grid-16-solid {
+  background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
+}

src/_debug.css

@@ -1,3 +1,15 @@
+/* 
+ 
+  DEBUG (PESTICIDE)
+  Docs: http://tachyons.io/docs/debug/
+
+  This is a partial you have to manually include in your
+  build file. It places a different colored outline on 
+  each element which can help you debug layout issues.
+  There is also a handy chrome extension that can 
+  be found at http://pesticide.io
+
+*/
 
 body {        outline: 1px solid  #2980B9!important; }
 article {     outline: 1px solid  #3498DB!important; }

src/_display.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    DISPLAY
+   Docs: http://tachyons.io/docs/layout/display
 
    Base:
     d = display
@@ -16,9 +13,9 @@
     it    = inline-table
     t     = table
     tc    = table-cell
-    tr    = table-row
-    tcol  = table-column
-    tcolg = table-column-group
+    t-row          = table-row
+    t-columm       = table-column
+    t-column-group = table-column-group
 
    Media Query Extensions:
      -ns = not-small

src/_flexbox.css

@@ -0,0 +1,250 @@
+/*
+
+  FLEXBOX
+
+  Media Query Extensions:
+   -ns = not-small
+   -m  = medium
+   -l  = large
+
+*/
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+
+/* 1. Fix for Chrome 44 bug.
+ * https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+  flex: 1 1 auto;
+  min-width: 0; /* 1 */
+  min-height: 0; /* 1 */
+}
+
+.flex-none { flex: none; }
+
+.flex-column  { flex-direction: column; }
+.flex-row     { flex-direction: row; }
+.flex-wrap    { flex-wrap: wrap; }
+.flex-nowrap    { flex-wrap: nowrap; }
+.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
+.flex-column-reverse  { flex-direction: column-reverse; }
+.flex-row-reverse     { flex-direction: row-reverse; }
+
+.items-start    { align-items: flex-start; }
+.items-end      { align-items: flex-end; }
+.items-center   { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch  { align-items: stretch; }
+
+.self-start    { align-self: flex-start; }
+.self-end      { align-self: flex-end; }
+.self-center   { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch  { align-self: stretch; }
+
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+
+.content-start   { align-content: flex-start; }
+.content-end     { align-content: flex-end; }
+.content-center  { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around  { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+.order-0 { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-last { order: 99999; }
+
+.flex-grow-0 { flex-grow: 0; }
+.flex-grow-1 { flex-grow: 1; }
+
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+
+@media (--breakpoint-not-small) {
+  .flex-ns { display: flex; }
+  .inline-flex-ns { display: inline-flex; }
+  .flex-auto-ns {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-ns { flex: none; }
+  .flex-column-ns { flex-direction: column; }
+  .flex-row-ns { flex-direction: row; }
+  .flex-wrap-ns { flex-wrap: wrap; }
+  .flex-nowrap-ns { flex-wrap: nowrap; }
+  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-ns { flex-direction: column-reverse; }
+  .flex-row-reverse-ns { flex-direction: row-reverse; }
+  .items-start-ns { align-items: flex-start; }
+  .items-end-ns { align-items: flex-end; }
+  .items-center-ns { align-items: center; }
+  .items-baseline-ns { align-items: baseline; }
+  .items-stretch-ns { align-items: stretch; }
+
+  .self-start-ns { align-self: flex-start; }
+  .self-end-ns { align-self: flex-end; }
+  .self-center-ns { align-self: center; }
+  .self-baseline-ns { align-self: baseline; }
+  .self-stretch-ns { align-self: stretch; }
+
+  .justify-start-ns { justify-content: flex-start; }
+  .justify-end-ns { justify-content: flex-end; }
+  .justify-center-ns { justify-content: center; }
+  .justify-between-ns { justify-content: space-between; }
+  .justify-around-ns { justify-content: space-around; }
+
+  .content-start-ns { align-content: flex-start; }
+  .content-end-ns { align-content: flex-end; }
+  .content-center-ns { align-content: center; }
+  .content-between-ns { align-content: space-between; }
+  .content-around-ns { align-content: space-around; }
+  .content-stretch-ns { align-content: stretch; }
+
+  .order-0-ns { order: 0; }
+  .order-1-ns { order: 1; }
+  .order-2-ns { order: 2; }
+  .order-3-ns { order: 3; }
+  .order-4-ns { order: 4; }
+  .order-5-ns { order: 5; }
+  .order-6-ns { order: 6; }
+  .order-7-ns { order: 7; }
+  .order-8-ns { order: 8; }
+  .order-last-ns { order: 99999; }
+
+  .flex-grow-0-ns { flex-grow: 0; }
+  .flex-grow-1-ns { flex-grow: 1; }
+
+  .flex-shrink-0-ns { flex-shrink: 0; }
+  .flex-shrink-1-ns { flex-shrink: 1; }
+}
+@media (--breakpoint-medium) {
+  .flex-m { display: flex; }
+  .inline-flex-m { display: inline-flex; }
+  .flex-auto-m {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-m { flex: none; }
+  .flex-column-m { flex-direction: column; }
+  .flex-row-m     { flex-direction: row; }
+  .flex-wrap-m { flex-wrap: wrap; }
+  .flex-nowrap-m { flex-wrap: nowrap; }
+  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-m { flex-direction: column-reverse; }
+  .flex-row-reverse-m { flex-direction: row-reverse; }
+  .items-start-m { align-items: flex-start; }
+  .items-end-m { align-items: flex-end; }
+  .items-center-m { align-items: center; }
+  .items-baseline-m { align-items: baseline; }
+  .items-stretch-m { align-items: stretch; }
+
+  .self-start-m { align-self: flex-start; }
+  .self-end-m { align-self: flex-end; }
+  .self-center-m { align-self: center; }
+  .self-baseline-m { align-self: baseline; }
+  .self-stretch-m { align-self: stretch; }
+
+  .justify-start-m { justify-content: flex-start; }
+  .justify-end-m { justify-content: flex-end; }
+  .justify-center-m { justify-content: center; }
+  .justify-between-m { justify-content: space-between; }
+  .justify-around-m { justify-content: space-around; }
+
+  .content-start-m { align-content: flex-start; }
+  .content-end-m { align-content: flex-end; }
+  .content-center-m { align-content: center; }
+  .content-between-m { align-content: space-between; }
+  .content-around-m { align-content: space-around; }
+  .content-stretch-m { align-content: stretch; }
+
+  .order-0-m { order: 0; }
+  .order-1-m { order: 1; }
+  .order-2-m { order: 2; }
+  .order-3-m { order: 3; }
+  .order-4-m { order: 4; }
+  .order-5-m { order: 5; }
+  .order-6-m { order: 6; }
+  .order-7-m { order: 7; }
+  .order-8-m { order: 8; }
+  .order-last-m { order: 99999; }
+
+  .flex-grow-0-m { flex-grow: 0; }
+  .flex-grow-1-m { flex-grow: 1; }
+
+  .flex-shrink-0-m { flex-shrink: 0; }
+  .flex-shrink-1-m { flex-shrink: 1; }
+}
+
+@media (--breakpoint-large) {
+  .flex-l { display: flex; }
+  .inline-flex-l { display: inline-flex; }
+  .flex-auto-l {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-l { flex: none; }
+  .flex-column-l { flex-direction: column; }
+  .flex-row-l { flex-direction: row; }
+  .flex-wrap-l { flex-wrap: wrap; }
+  .flex-nowrap-l { flex-wrap: nowrap; }
+  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-l { flex-direction: column-reverse; }
+  .flex-row-reverse-l { flex-direction: row-reverse; }
+
+  .items-start-l { align-items: flex-start; }
+  .items-end-l { align-items: flex-end; }
+  .items-center-l { align-items: center; }
+  .items-baseline-l { align-items: baseline; }
+  .items-stretch-l { align-items: stretch; }
+
+  .self-start-l { align-self: flex-start; }
+  .self-end-l { align-self: flex-end; }
+  .self-center-l { align-self: center; }
+  .self-baseline-l { align-self: baseline; }
+  .self-stretch-l { align-self: stretch; }
+
+  .justify-start-l { justify-content: flex-start; }
+  .justify-end-l { justify-content: flex-end; }
+  .justify-center-l { justify-content: center; }
+  .justify-between-l { justify-content: space-between; }
+  .justify-around-l { justify-content: space-around; }
+
+  .content-start-l { align-content: flex-start; }
+  .content-end-l { align-content: flex-end; }
+  .content-center-l { align-content: center; }
+  .content-between-l { align-content: space-between; }
+  .content-around-l { align-content: space-around; }
+  .content-stretch-l { align-content: stretch; }
+
+  .order-0-l { order: 0; }
+  .order-1-l { order: 1; }
+  .order-2-l { order: 2; }
+  .order-3-l { order: 3; }
+  .order-4-l { order: 4; }
+  .order-5-l { order: 5; }
+  .order-6-l { order: 6; }
+  .order-7-l { order: 7; }
+  .order-8-l { order: 8; }
+  .order-last-l { order: 99999; }
+
+  .flex-grow-0-l { flex-grow: 0; }
+  .flex-grow-1-l { flex-grow: 1; }
+
+  .flex-shrink-0-l { flex-shrink: 0; }
+  .flex-shrink-1-l { flex-shrink: 1; }
+}

src/_floats.css

@@ -1,13 +1,7 @@
-
-/* Media Query Variables */
-
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    FLOATS
+   http://tachyons.io/docs/layout/floats/
 
    1. Floated elements are automatically rendered as block level elements.
       Setting floats to display inline will fix the double margin bug in
@@ -32,24 +26,24 @@
 
 
 
-.fl { float: left;  display: inline; }
-.fr { float: right; display: inline; }
+.fl { float: left;  _display: inline; }
+.fr { float: right; _display: inline; }
 .fn { float: none; }
 
 @media (--breakpoint-not-small) {
-  .fl-ns { float: left; display: inline; }
-  .fr-ns { float: right;display: inline; }
+  .fl-ns { float: left; _display: inline; }
+  .fr-ns { float: right; _display: inline; }
   .fn-ns { float: none; }
 }
 
 @media (--breakpoint-medium) {
-  .fl-m { float: left; display: inline; }
-  .fr-m { float: right;  display: inline; }
+  .fl-m { float: left; _display: inline; }
+  .fr-m { float: right; _display: inline; }
   .fn-m { float: none; }
 }
 
 @media (--breakpoint-large) {
-  .fl-l { float: left; display: inline; }
-  .fr-l { float: right;  display: inline; }
+  .fl-l { float: left; _display: inline; }
+  .fr-l { float: right; _display: inline; }
   .fn-l { float: none; }
 }

src/_font-family.css

@@ -1,6 +1,7 @@
 /*
 
    FONT FAMILY GROUPS
+   Docs: http://tachyons.io/docs/typography/font-family/
 
 */
 
@@ -8,7 +9,7 @@
 .sans-serif {
   font-family: -apple-system, BlinkMacSystemFont,
                'avenir next', avenir,
-               helvetica, 'helvetica neue',
+               'helvetica neue', helvetica,
                ubuntu,
                roboto, noto,
                'segoe ui', arial,
@@ -39,6 +40,12 @@ code, .code {
                monospace;
 }
 
+.courier {
+  font-family: 'Courier Next',
+               courier,
+               monospace;
+}
+
 
 /* Sans-Serif Typefaces */
 
@@ -47,9 +54,20 @@ code, .code {
                sans-serif;
 }
 
+.avenir {
+  font-family: 'avenir next', avenir,
+               sans-serif;
+}
+
 
 /* Serif Typefaces */
 
+.athelas {
+  font-family: athelas,
+               georgia,
+               serif;
+}
+
 .georgia {
   font-family: georgia,
                serif;
@@ -75,3 +93,8 @@ code, .code {
                serif;
 }
 
+.baskerville {
+  font-family: baskerville,
+               serif;
+}
+

src/_font-style.css

@@ -1,10 +1,12 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    FONT STYLE
+   Docs: http://tachyons.io/docs/typography/font-style/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_font-weight.css

@@ -1,10 +1,26 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    FONT WEIGHT
+   Docs: http://tachyons.io/docs/typography/font-weight/
+
+   Base
+     fw = font-weight
+
+   Modifiers:
+     1 = literal value 100
+     2 = literal value 200
+     3 = literal value 300
+     4 = literal value 400
+     5 = literal value 500
+     6 = literal value 600
+     7 = literal value 700
+     8 = literal value 800
+     9 = literal value 900
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_forms.css

@@ -1,7 +1,7 @@
 /*
 
    FORMS
-
+   
 */
 
 .input-reset {
@@ -9,3 +9,8 @@
   -moz-appearance: none;
 }
 
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}

src/_gradients.css

@@ -1,22 +0,0 @@
-/*
-
-   GRADIENTS
-
-
-*/
-
-.gradient-blue { 
-  background-image: linear-gradient(#4570B0, #0081C2);
-}
-
-.gradient-blue-reversed { 
-  background-image: linear-gradient(#0081C2, #4570B0);
-}
-
-.gradient-light-blue { 
-  background-image: linear-gradient(#76D3FE, #008AE0);
-}
-
-.gradient-light-blue-reversed { 
-  background-image: linear-gradient(#008AE0, #76D3FE);
-}

src/_heights.css

@@ -1,10 +1,33 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    HEIGHTS
+   Docs: http://tachyons.io/docs/layout/heights/
+
+   Base:
+     h = height
+     min-h = min-height
+     min-vh = min-height vertical screen height
+     vh = vertical screen height
+
+   Modifiers
+     1 = 1st step in height scale
+     2 = 2nd step in height scale
+     3 = 3rd step in height scale
+     4 = 4th step in height scale
+     5 = 5th step in height scale
+
+     -25   = literal value 25%
+     -50   = literal value 50%
+     -75   = literal value 75%
+     -100  = literal value 100%
+
+     -auto = string value of auto
+     -inherit = string value of inherit
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 
@@ -16,13 +39,25 @@
 .h4 { height: 8rem; }
 .h5 { height: 16rem; }
 
-/* Height Percentages */
+/* Height Percentages - Based off of height of parent */
 
 .h-25 {  height:  25%; }
 .h-50 {  height:  50%; }
 .h-75 {  height:  75%; }
 .h-100 { height: 100%; }
 
+.min-h-100 { min-height: 100%; }
+
+/* Screen Height Percentage */
+
+.vh-25 {  height:  25vh; }
+.vh-50 {  height:  50vh; }
+.vh-75 {  height:  75vh; }
+.vh-100 { height: 100vh; }
+
+.min-vh-100 { min-height: 100vh; }
+
+
 /* String Properties */
 
 .h-auto {     height: auto; }
@@ -38,6 +73,12 @@
   .h-50-ns { height: 50%; }
   .h-75-ns { height: 75%; }
   .h-100-ns { height: 100%; }
+  .min-h-100-ns { min-height: 100%; }
+  .vh-25-ns {  height:  25vh; }
+  .vh-50-ns {  height:  50vh; }
+  .vh-75-ns {  height:  75vh; }
+  .vh-100-ns { height: 100vh; }
+  .min-vh-100-ns { min-height: 100vh; }
   .h-auto-ns { height: auto; }
   .h-inherit-ns { height: inherit; }
 }
@@ -52,6 +93,12 @@
   .h-50-m { height: 50%; }
   .h-75-m { height: 75%; }
   .h-100-m { height: 100%; }
+  .min-h-100-m { min-height: 100%; }
+  .vh-25-m {  height:  25vh; }
+  .vh-50-m {  height:  50vh; }
+  .vh-75-m {  height:  75vh; }
+  .vh-100-m { height: 100vh; }
+  .min-vh-100-m { min-height: 100vh; }
   .h-auto-m { height: auto; }
   .h-inherit-m { height: inherit; }
 }
@@ -66,6 +113,12 @@
   .h-50-l { height: 50%; }
   .h-75-l { height: 75%; }
   .h-100-l { height: 100%; }
+  .min-h-100-l { min-height: 100%; }
+  .vh-25-l {  height:  25vh; }
+  .vh-50-l {  height:  50vh; }
+  .vh-75-l {  height:  75vh; }
+  .vh-100-l { height: 100vh; }
+  .min-vh-100-l { min-height: 100vh; }
   .h-auto-l { height: auto; }
   .h-inherit-l { height: inherit; }
 }

src/_hovers.css

@@ -1,10 +1,15 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
 /*
 
   HOVER EFFECTS
+  Docs: http://tachyons.io/docs/themes/hovers/
 
+    - Dim
+    - Glow
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
 
 */
 
@@ -26,6 +31,20 @@
   opacity: .8; transition: opacity .15s ease-out;
 }
 
+/*
+
+  Animate opacity to 100% on hover by adding the glow class.
+
+*/
+.glow {
+  transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
 /*
 
   Hide child & reveal on hover:
@@ -61,24 +80,81 @@
  * even if you are using background-size: cover */
 
 .grow {
-  transition: transform .2s;
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform 0.25s ease-out;
 }
 
-.grow:hover {
+.grow:hover,
+.grow:focus {
   transform: scale(1.05);
 }
 
-.grow-large {
-  transition: transform .2s;
+.grow:active {
+  transform: scale(.90);
 }
 
-.grow-large:hover {
+.grow-large {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform .25s ease-in-out;
+}
+
+.grow-large:hover,
+.grow-large:focus {
   transform: scale(1.2);
 }
 
+.grow-large:active {
+  transform: scale(.95);
+}
+
 /* Add pointer on hover */
 
 .pointer:hover {
   cursor: pointer;
 }
 
+/* 
+   Add shadow on hover.
+
+   Performant box-shadow animation pattern from 
+   http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
+*/
+
+.shadow-hover {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover::after {
+  content: '';
+  box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
+  border-radius: inherit;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+  opacity: 1;
+}
+
+/* Combine with classes in skins and skins-pseudo for 
+ * many different transition possibilities. */
+
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+  transition: background-color .15s ease-in-out; 
+}
+

src/_images.css

@@ -1,6 +1,7 @@
 /*
 
    IMAGES
+   Docs: http://tachyons.io/docs/elements/images/
 
 */
 

src/_letter-spacing.css

@@ -1,31 +1,33 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    LETTER SPACING
+   Docs: http://tachyons.io/docs/typography/tracking/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 
-.tracked       { letter-spacing:  .16em; }
+.tracked       { letter-spacing:  .1em; }
 .tracked-tight { letter-spacing: -.05em; }
-.tracked-mega  { letter-spacing:  .32em; }
+.tracked-mega  { letter-spacing:  .25em; }
 
 @media (--breakpoint-not-small) {
-  .tracked-ns       { letter-spacing:  .16em; }
+  .tracked-ns       { letter-spacing:  .1em; }
   .tracked-tight-ns { letter-spacing: -.05em; }
-  .tracked-mega-ns  { letter-spacing:  .32em; }
+  .tracked-mega-ns  { letter-spacing:  .25em; }
 }
 
 @media (--breakpoint-medium) {
-  .tracked-m       { letter-spacing:  .16em; }
+  .tracked-m       { letter-spacing:  .1em; }
   .tracked-tight-m { letter-spacing: -.05em; }
-  .tracked-mega-m  { letter-spacing:  .32em; }
+  .tracked-mega-m  { letter-spacing:  .25em; }
 }
 
 @media (--breakpoint-large) {
-  .tracked-l       { letter-spacing:  .16em; }
+  .tracked-l       { letter-spacing:  .1em; }
   .tracked-tight-l { letter-spacing: -.05em; }
-  .tracked-mega-l  { letter-spacing:  .32em; }
+  .tracked-mega-l  { letter-spacing:  .25em; }
 }

src/_line-height.css

@@ -1,33 +1,34 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
-
 /*
 
    LINE HEIGHT / LEADING
+   Docs: http://tachyons.io/docs/typography/line-height
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 
   .lh-solid { line-height: 1; }
-  .lh-title { line-height: 1.3; }
-  .lh-copy  { line-height: 1.6; }
+  .lh-title { line-height: 1.25; }
+  .lh-copy  { line-height: 1.5; }
 
 @media (--breakpoint-not-small) {
   .lh-solid-ns { line-height: 1; }
-  .lh-title-ns { line-height: 1.3; }
-  .lh-copy-ns  { line-height: 1.6; }
+  .lh-title-ns { line-height: 1.25; }
+  .lh-copy-ns  { line-height: 1.5; }
 }
 
 @media (--breakpoint-medium) {
   .lh-solid-m { line-height: 1; }
-  .lh-title-m { line-height: 1.3; }
-  .lh-copy-m  { line-height: 1.6; }
+  .lh-title-m { line-height: 1.25; }
+  .lh-copy-m  { line-height: 1.5; }
 }
 
 @media (--breakpoint-large) {
   .lh-solid-l { line-height: 1; }
-  .lh-title-l { line-height: 1.3; }
-  .lh-copy-l  { line-height: 1.6; }
+  .lh-title-l { line-height: 1.25; }
+  .lh-copy-l  { line-height: 1.5; }
 }
 

src/_links.css

@@ -1,6 +1,7 @@
 /*
 
    LINKS
+   Docs: http://tachyons.io/docs/elements/links/
 
 */
 
@@ -21,5 +22,6 @@
 }
 .link:focus   {
   transition: color .15s ease-in;
+  outline: 1px dotted currentColor;
 }
 

src/_lists.css

@@ -1,6 +1,7 @@
 /*
 
    LISTS
+   http://tachyons.io/docs/elements/lists/
 
 */
 

src/_max-widths.css

@@ -1,10 +1,31 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    MAX WIDTHS
+   Docs: http://tachyons.io/docs/layout/max-widths/
+
+   Base:
+     mw = max-width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+     6 = 6st step in width scale
+     7 = 7nd step in width scale
+     8 = 8rd step in width scale
+     9 = 9th step in width scale
+
+     -100 = literal value 100%
+
+     -none  = string value none
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_media-queries.css

@@ -5,7 +5,8 @@
   Media query values can be changed to fit your own content.
   There are no magic bullets when it comes to media query width values.
   They should be declared in em units - and they should be set to meet
-  the needs of your content.
+  the needs of your content. You can also add additional media queries,
+  or remove some of the existing ones.
 
   These media queries can be referenced like so:
 
@@ -22,20 +23,14 @@
   }
 
   @media (--breakpoint-large) {
-    .large-screen-specific-style {
-      background-color: red;
-    }
-  }
-
-  @media (--breakpoint-extra-large) {
-    .extra-large-screen-specific-style {
+    .large-and-larger-screen-specific-style {
       background-color: red;
     }
   }
 
 */
 
+/* Media Queries */
 @custom-media --breakpoint-not-small screen and (min-width: 30em);
 @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
 @custom-media --breakpoint-large screen and (min-width: 60em);
-@custom-media --breakpoint-extra-large screen and (min-width: 120em);

src/_module-template.css

@@ -1,6 +1,6 @@
 /*
 
-   MEDIA QUERIES
+  MODULE NAME
 
   Use this scaffolding to create or extend your own modules with tachyons
   style architecture.

src/_negative-margins.css

@@ -0,0 +1,199 @@
+/*
+   NEGATIVE MARGINS
+
+   Base:
+     n = negative
+
+   Modifiers:
+     a = all
+     t = top
+     r = right
+     b = bottom
+     l = left
+
+     1 = 1st step in spacing scale
+     2 = 2nd step in spacing scale
+     3 = 3rd step in spacing scale
+     4 = 4th step in spacing scale
+     5 = 5th step in spacing scale
+     6 = 6th step in spacing scale
+     7 = 7th step in spacing scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+
+.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
+.na2 { margin: calc(-1 * var(--spacing-small)); }
+.na3 { margin: calc(-1 * var(--spacing-medium)); }
+.na4 { margin: calc(-1 * var(--spacing-large)); }
+.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
+.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
+.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
+.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
+.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
+.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
+.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
+.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
+.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
+.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
+.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
+.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
+.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
+.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
+.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
+.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
+.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
+.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
+.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
+.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+@media (--breakpoint-not-small) {
+
+  .na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-ns { margin: calc(-1 * var(--spacing-small)); }
+  .na3-ns { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-ns { margin: calc(-1 * var(--spacing-large)); }
+  .na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+}
+
+@media (--breakpoint-medium) {
+  .na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-m { margin: calc(-1 * var(--spacing-small)); }
+  .na3-m { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-m { margin: calc(-1 * var(--spacing-large)); }
+  .na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+}
+
+@media (--breakpoint-large) {
+  .na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
+  .na2-l { margin: calc(-1 * var(--spacing-small)); }
+  .na3-l { margin: calc(-1 * var(--spacing-medium)); }
+  .na4-l { margin: calc(-1 * var(--spacing-large)); }
+  .na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
+  .na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+  .na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
+  .nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
+  .nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
+  .nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
+  .nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
+  .nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
+  .nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
+  .nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
+  .nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
+  .nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
+  .nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+  .nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
+  .nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
+  .nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
+  .nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+  .nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+  .nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
+  .nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
+  .nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
+  .nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
+  .nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
+  .nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+  .nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+}
+

src/_nested.css

@@ -0,0 +1,57 @@
+/*
+
+    NESTED
+    Tachyons module for styling nested elements
+    that are generated by a cms.
+
+*/
+
+.nested-copy-line-height p,
+.nested-copy-line-height ul,
+.nested-copy-line-height ol {
+  line-height: 1.5;
+}
+
+.nested-headline-line-height h1,
+.nested-headline-line-height h2,
+.nested-headline-line-height h3,
+.nested-headline-line-height h4,
+.nested-headline-line-height h5,
+.nested-headline-line-height h6 {
+  line-height: 1.25;
+}
+
+.nested-list-reset ul,
+.nested-list-reset ol {
+  padding-left: 0;
+  margin-left: 0;
+  list-style-type: none;
+}
+
+.nested-copy-indent p+p {
+  text-indent: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.nested-copy-separator p+p {
+  margin-top: 1.5em;
+}
+
+.nested-img img {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.nested-links a {
+  color: var(--blue);
+  transition: color .15s ease-in;
+}
+
+.nested-links a:hover,
+.nested-links a:focus {
+  color: var(--light-blue);
+  transition: color .15s ease-in;
+}
+

src/_normalize.css

@@ -1,149 +1,29 @@
-/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
 
 /**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
- * Remove the margin in all browsers (opinionated).
+ * Remove the margin in all browsers.
  */
 
 body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-article,
-aside,
-details, /* 1 */
-figcaption,
-figure,
-footer,
-header,
-main, /* 2 */
-menu,
-nav,
-section,
-summary { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-
-template, /* 1 */
-[hidden] {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
@@ -154,13 +34,71 @@ h1 {
   margin: 0.67em 0;
 }
 
+/* Grouping content
+   ========================================================================== */
+
 /**
- * Add the correct background and color in IE 9-.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
 
-mark {
-  background-color: #ff0;
-  color: #000;
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
@@ -196,80 +134,32 @@ sup {
    ========================================================================== */
 
 /**
- * Remove the border on images inside links in IE 10-.
+ * Remove the border on images inside links in IE 10.
  */
 
 img {
   border-style: none;
 }
 
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
 /* Forms
    ========================================================================== */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
 
 button,
 input,
+optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }
 
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
@@ -291,16 +181,14 @@ select { /* 1 */
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 
 button,
-html [type="button"], /* 1 */
+[type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
 }
 
 /**
@@ -327,13 +215,11 @@ button:-moz-focusring,
 }
 
 /**
- * Change the border, margin, and padding in all browsers (opinionated).
+ * Correct the padding in Firefox.
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -353,7 +239,15 @@ legend {
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
  */
 
 textarea {
@@ -361,8 +255,8 @@ textarea {
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
  */
 
 [type="checkbox"],
@@ -391,23 +285,13 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -417,3 +301,41 @@ textarea {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/_opacity.css

@@ -1,6 +1,7 @@
 /*
 
-  Opacity
+    OPACITY
+    Docs: http://tachyons.io/docs/themes/opacity/
 
 */
 

src/_outlines.css

@@ -1,10 +1,11 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
-  OUTLINES
+   OUTLINES
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 
@@ -24,7 +25,7 @@
   .outline-0-m { outline: 0; }
 }
 
-@media (--breakpoint-medium) {
+@media (--breakpoint-large) {
   .outline-l { outline: 1px solid; }
   .outline-transparent-l { outline: 1px solid transparent; }
   .outline-0-l { outline: 0; }

src/_overflow.css

@@ -1,11 +1,12 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
     OVERFLOW
 
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
  */
 
 .overflow-visible { overflow: visible; }

src/_position.css

@@ -1,12 +1,14 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
-    POSITIONING
+   POSITIONING
+   Docs: http://tachyons.io/docs/layout/position/
 
- */
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
 
 .static { position: static; }
 .relative  { position: relative; }

src/_rotations.css

@@ -0,0 +1,43 @@
+/*
+
+   ROTATIONS
+
+*/
+
+.rotate-45 { transform: rotate(45deg); }
+.rotate-90 { transform: rotate(90deg); }
+.rotate-135 { transform: rotate(135deg); }
+.rotate-180 { transform: rotate(180deg); }
+.rotate-225 { transform: rotate(225deg); }
+.rotate-270 { transform: rotate(270deg); }
+.rotate-315 { transform: rotate(315deg); }
+
+@media (--breakpoint-not-small){
+  .rotate-45-ns { transform: rotate(45deg); }
+  .rotate-90-ns { transform: rotate(90deg); }
+  .rotate-135-ns { transform: rotate(135deg); }
+  .rotate-180-ns { transform: rotate(180deg); }
+  .rotate-225-ns { transform: rotate(225deg); }
+  .rotate-270-ns { transform: rotate(270deg); }
+  .rotate-315-ns { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-medium){
+  .rotate-45-m { transform: rotate(45deg); }
+  .rotate-90-m { transform: rotate(90deg); }
+  .rotate-135-m { transform: rotate(135deg); }
+  .rotate-180-m { transform: rotate(180deg); }
+  .rotate-225-m { transform: rotate(225deg); }
+  .rotate-270-m { transform: rotate(270deg); }
+  .rotate-315-m { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-large){
+  .rotate-45-l { transform: rotate(45deg); }
+  .rotate-90-l { transform: rotate(90deg); }
+  .rotate-135-l { transform: rotate(135deg); }
+  .rotate-180-l { transform: rotate(180deg); }
+  .rotate-225-l { transform: rotate(225deg); }
+  .rotate-270-l { transform: rotate(270deg); }
+  .rotate-315-l { transform: rotate(315deg); }
+}

src/_skins-pseudo.css

@@ -0,0 +1,236 @@
+/* 
+  
+   SKINS:PSEUDO
+
+   Customize the color of an element when
+   it is focused or hovered over.
+ 
+ */
+
+.hover-black:hover, 
+.hover-black:focus { color: var(--black); }
+.hover-near-black:hover, 
+.hover-near-black:focus { color: var(--near-black); }
+.hover-dark-gray:hover, 
+.hover-dark-gray:focus { color: var(--dark-gray); }
+.hover-mid-gray:hover, 
+.hover-mid-gray:focus { color: var(--mid-gray); }
+.hover-gray:hover, 
+.hover-gray:focus { color: var(--gray); }
+.hover-silver:hover, 
+.hover-silver:focus { color: var(--silver); }
+.hover-light-silver:hover, 
+.hover-light-silver:focus { color: var(--light-silver); }
+.hover-moon-gray:hover, 
+.hover-moon-gray:focus { color: var(--moon-gray); }
+.hover-light-gray:hover, 
+.hover-light-gray:focus { color: var(--light-gray); }
+.hover-near-white:hover, 
+.hover-near-white:focus { color: var(--near-white); }
+.hover-white:hover, 
+.hover-white:focus { color: var(--white); }
+
+.hover-black-90:hover,
+.hover-black-90:focus { color: var(--black-90); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: var(--black-80); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: var(--black-70); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: var(--black-60); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: var(--black-50); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: var(--black-40); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: var(--black-30); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: var(--black-20); }
+.hover-black-10:hover,
+.hover-black-10:focus { color: var(--black-10); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: var(--white-90); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: var(--white-80); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: var(--white-70); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: var(--white-60); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: var(--white-50); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: var(--white-40); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: var(--white-30); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: var(--white-20); }
+.hover-white-10:hover,
+.hover-white-10:focus { color: var(--white-10); }
+.hover-inherit:hover,
+.hover-inherit:focus { color: inherit; }
+
+.hover-bg-black:hover, 
+.hover-bg-black:focus { background-color: var(--black); }
+.hover-bg-near-black:hover, 
+.hover-bg-near-black:focus { background-color: var(--near-black); }
+.hover-bg-dark-gray:hover, 
+.hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
+.hover-bg-mid-gray:hover, 
+.hover-bg-mid-gray:focus { background-color: var(--mid-gray); }
+.hover-bg-gray:hover, 
+.hover-bg-gray:focus { background-color: var(--gray); }
+.hover-bg-silver:hover, 
+.hover-bg-silver:focus { background-color: var(--silver); }
+.hover-bg-light-silver:hover, 
+.hover-bg-light-silver:focus { background-color: var(--light-silver); }
+.hover-bg-moon-gray:hover, 
+.hover-bg-moon-gray:focus { background-color: var(--moon-gray); }
+.hover-bg-light-gray:hover, 
+.hover-bg-light-gray:focus { background-color: var(--light-gray); }
+.hover-bg-near-white:hover, 
+.hover-bg-near-white:focus { background-color: var(--near-white); }
+.hover-bg-white:hover, 
+.hover-bg-white:focus { background-color: var(--white); }
+.hover-bg-transparent:hover, 
+.hover-bg-transparent:focus { background-color: var(--transparent); }
+
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: var(--black-90); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: var(--black-80); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: var(--black-70); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: var(--black-60); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: var(--black-50); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: var(--black-40); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: var(--black-30); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: var(--black-20); }
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: var(--black-10); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: var(--white-90); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: var(--white-80); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: var(--white-70); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: var(--white-60); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: var(--white-50); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: var(--white-40); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: var(--white-30); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: var(--white-20); }
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: var(--white-10); }
+
+.hover-dark-red:hover,
+.hover-dark-red:focus { color: var(--dark-red); }
+.hover-red:hover,
+.hover-red:focus { color: var(--red); }
+.hover-light-red:hover,
+.hover-light-red:focus { color: var(--light-red); }
+.hover-orange:hover,
+.hover-orange:focus { color: var(--orange); }
+.hover-gold:hover,
+.hover-gold:focus { color: var(--gold); }
+.hover-yellow:hover,
+.hover-yellow:focus { color: var(--yellow); }
+.hover-light-yellow:hover,
+.hover-light-yellow:focus { color: var(--light-yellow); }
+.hover-purple:hover,
+.hover-purple:focus { color: var(--purple); }
+.hover-light-purple:hover,
+.hover-light-purple:focus { color: var(--light-purple); }
+.hover-dark-pink:hover,
+.hover-dark-pink:focus { color: var(--dark-pink); }
+.hover-hot-pink:hover,
+.hover-hot-pink:focus { color: var(--hot-pink); }
+.hover-pink:hover,
+.hover-pink:focus { color: var(--pink); }
+.hover-light-pink:hover,
+.hover-light-pink:focus { color: var(--light-pink); }
+.hover-dark-green:hover,
+.hover-dark-green:focus { color: var(--dark-green); }
+.hover-green:hover,
+.hover-green:focus { color: var(--green); }
+.hover-light-green:hover,
+.hover-light-green:focus { color: var(--light-green); }
+.hover-navy:hover,
+.hover-navy:focus { color: var(--navy); }
+.hover-dark-blue:hover,
+.hover-dark-blue:focus { color: var(--dark-blue); }
+.hover-blue:hover,
+.hover-blue:focus { color: var(--blue); }
+.hover-light-blue:hover,
+.hover-light-blue:focus { color: var(--light-blue); }
+.hover-lightest-blue:hover,
+.hover-lightest-blue:focus { color: var(--lightest-blue); }
+.hover-washed-blue:hover,
+.hover-washed-blue:focus { color: var(--washed-blue); }
+.hover-washed-green:hover,
+.hover-washed-green:focus { color: var(--washed-green); }
+.hover-washed-yellow:hover,
+.hover-washed-yellow:focus { color: var(--washed-yellow); }
+.hover-washed-red:hover,
+.hover-washed-red:focus { color: var(--washed-red); }
+
+.hover-bg-dark-red:hover,
+.hover-bg-dark-red:focus { background-color: var(--dark-red); }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: var(--red); }
+.hover-bg-light-red:hover,
+.hover-bg-light-red:focus { background-color: var(--light-red); }
+.hover-bg-orange:hover,
+.hover-bg-orange:focus { background-color: var(--orange); }
+.hover-bg-gold:hover,
+.hover-bg-gold:focus { background-color: var(--gold); }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: var(--yellow); }
+.hover-bg-light-yellow:hover,
+.hover-bg-light-yellow:focus { background-color: var(--light-yellow); }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: var(--purple); }
+.hover-bg-light-purple:hover,
+.hover-bg-light-purple:focus { background-color: var(--light-purple); }
+.hover-bg-dark-pink:hover,
+.hover-bg-dark-pink:focus { background-color: var(--dark-pink); }
+.hover-bg-hot-pink:hover,
+.hover-bg-hot-pink:focus { background-color: var(--hot-pink); }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: var(--pink); }
+.hover-bg-light-pink:hover,
+.hover-bg-light-pink:focus { background-color: var(--light-pink); }
+.hover-bg-dark-green:hover,
+.hover-bg-dark-green:focus { background-color: var(--dark-green); }
+.hover-bg-green:hover,
+.hover-bg-green:focus { background-color: var(--green); }
+.hover-bg-light-green:hover,
+.hover-bg-light-green:focus { background-color: var(--light-green); }
+.hover-bg-navy:hover,
+.hover-bg-navy:focus { background-color: var(--navy); }
+.hover-bg-dark-blue:hover,
+.hover-bg-dark-blue:focus { background-color: var(--dark-blue); }
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: var(--blue); }
+.hover-bg-light-blue:hover,
+.hover-bg-light-blue:focus { background-color: var(--light-blue); }
+.hover-bg-lightest-blue:hover,
+.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); }
+.hover-bg-washed-blue:hover,
+.hover-bg-washed-blue:focus { background-color: var(--washed-blue); }
+.hover-bg-washed-green:hover,
+.hover-bg-washed-green:focus { background-color: var(--washed-green); }
+.hover-bg-washed-yellow:hover,
+.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
+.hover-bg-washed-red:hover,
+.hover-bg-washed-red:focus { background-color: var(--washed-red); }
+.hover-bg-inherit:hover,
+.hover-bg-inherit:focus { background-color: inherit; }

src/_skins.css

@@ -1,62 +1,14 @@
-/*
-
-   COLOR VARIABLES
-
-   Variables to set colors for
-   color, background-color, and border-color
-
-*/
-
-/* variables */
-:root {
-
-  --black-90: rgba(0,0,0,.9);
-  --black-80: rgba(0,0,0,.8);
-  --black-70: rgba(0,0,0,.7);
-  --black-60: rgba(0,0,0,.6);
-  --black-50: rgba(0,0,0,.5);
-  --black-40: rgba(0,0,0,.4);
-  --black-30: rgba(0,0,0,.3);
-  --black-20: rgba(0,0,0,.2);
-  --black-10: rgba(0,0,0,.1);
-  --black-05: rgba(0,0,0,.05);
-
-  --white-90: rgba(255,255,255,.9);
-  --white-80: rgba(255,255,255,.8);
-  --white-70: rgba(255,255,255,.7);
-  --white-60: rgba(255,255,255,.6);
-  --white-50: rgba(255,255,255,.5);
-  --white-40: rgba(255,255,255,.4);
-  --white-30: rgba(255,255,255,.3);
-  --white-20: rgba(255,255,255,.2);
-  --white-10: rgba(255,255,255,.1);
-
-  --transparent: transparent;
-
-  --black: #000;
-  --near-black: #111;
-  --dark-gray:#333;
-  --mid-gray:#555;
-  --gray: #777;
-  --silver: #999;
-  --light-silver: #aaa;
-  --moon-gray: #ccc;
-  --light-gray: #eee;
-  --near-white: #f4f4f4;
-  --white: #fff;
-
-}
-
-
 /*
 
    SKINS
+   Docs: http://tachyons.io/docs/themes/skins/
+
+   Classes for setting foreground and background colors on elements.
+   If you haven't declared a border color, but set border on an element, it will 
+   be set to the current text color. 
 
 */
 
-
-
-
 /* Text colors */
 
 .black-90 {         color: var(--black-90); }
@@ -70,17 +22,6 @@
 .black-10 {         color: var(--black-10); }
 .black-05 {         color: var(--black-05); }
 
-.bg-black-90 {         background-color: var(--black-90); }
-.bg-black-80 {         background-color: var(--black-80); }
-.bg-black-70 {         background-color: var(--black-70); }
-.bg-black-60 {         background-color: var(--black-60); }
-.bg-black-50 {         background-color: var(--black-50); }
-.bg-black-40 {         background-color: var(--black-40); }
-.bg-black-30 {         background-color: var(--black-30); }
-.bg-black-20 {         background-color: var(--black-20); }
-.bg-black-10 {         background-color: var(--black-10); }
-.bg-black-05 {         background-color: var(--black-05); }
-
 .white-90 {         color: var(--white-90); }
 .white-80 {         color: var(--white-80); }
 .white-70 {         color: var(--white-70); }
@@ -91,16 +32,6 @@
 .white-20 {         color: var(--white-20); }
 .white-10 {         color: var(--white-10); }
 
-.bg-white-90 {        background-color: var(--white-90); }
-.bg-white-80 {        background-color: var(--white-80); }
-.bg-white-70 {        background-color: var(--white-70); }
-.bg-white-60 {        background-color: var(--white-60); }
-.bg-white-50 {        background-color: var(--white-50); }
-.bg-white-40 {        background-color: var(--white-40); }
-.bg-white-30 {        background-color: var(--white-30); }
-.bg-white-20 {        background-color: var(--white-20); }
-.bg-white-10 {        background-color: var(--white-10); }
-
 .black {         color: var(--black); }
 .near-black {    color: var(--near-black); }
 .dark-gray {     color: var(--dark-gray); }
@@ -113,9 +44,57 @@
 .near-white {    color: var(--near-white); }
 .white {         color: var(--white); }
 
+.dark-red { color: var(--dark-red); }
+.red { color: var(--red); }
+.light-red { color: var(--light-red); }
+.orange { color: var(--orange); }
+.gold { color: var(--gold); }
+.yellow { color: var(--yellow); }
+.light-yellow { color: var(--light-yellow); }
+.purple { color: var(--purple); }
+.light-purple { color: var(--light-purple); }
+.dark-pink { color: var(--dark-pink); }
+.hot-pink { color: var(--hot-pink); }
+.pink { color: var(--pink); }
+.light-pink { color: var(--light-pink); }
+.dark-green { color: var(--dark-green); }
+.green { color: var(--green); }
+.light-green { color: var(--light-green); }
+.navy { color: var(--navy); }
+.dark-blue { color: var(--dark-blue); }
+.blue { color: var(--blue); }
+.light-blue { color: var(--light-blue); }
+.lightest-blue { color: var(--lightest-blue); }
+.washed-blue { color: var(--washed-blue); }
+.washed-green { color: var(--washed-green); }
+.washed-yellow { color: var(--washed-yellow); }
+.washed-red { color: var(--washed-red); }
+.color-inherit { color: inherit; }
+
+
 
 /* Background colors */
 
+.bg-black-90 {         background-color: var(--black-90); }
+.bg-black-80 {         background-color: var(--black-80); }
+.bg-black-70 {         background-color: var(--black-70); }
+.bg-black-60 {         background-color: var(--black-60); }
+.bg-black-50 {         background-color: var(--black-50); }
+.bg-black-40 {         background-color: var(--black-40); }
+.bg-black-30 {         background-color: var(--black-30); }
+.bg-black-20 {         background-color: var(--black-20); }
+.bg-black-10 {         background-color: var(--black-10); }
+.bg-black-05 {         background-color: var(--black-05); }
+.bg-white-90 {        background-color: var(--white-90); }
+.bg-white-80 {        background-color: var(--white-80); }
+.bg-white-70 {        background-color: var(--white-70); }
+.bg-white-60 {        background-color: var(--white-60); }
+.bg-white-50 {        background-color: var(--white-50); }
+.bg-white-40 {        background-color: var(--white-40); }
+.bg-white-30 {        background-color: var(--white-30); }
+.bg-white-20 {        background-color: var(--white-20); }
+.bg-white-10 {        background-color: var(--white-10); }
+
 .bg-black {         background-color: var(--black); }
 .bg-near-black {    background-color: var(--near-black); }
 .bg-dark-gray {     background-color: var(--dark-gray); }
@@ -129,54 +108,29 @@
 .bg-white {         background-color: var(--white); }
 .bg-transparent {   background-color: var(--transparent); }
 
-
-/* Skins for specific pseudoclasses */
-.focus-black:focus { color: var(--black); }
-.focus-near-black:focus { color: var(--near-black); }
-.focus-dark-gray:focus { color: var(--dark-gray); }
-.focus-mid-gray:focus { color: var(--mid-gray); }
-.focus-gray:focus { color: var(--gray); }
-.focus-silver:focus { color: var(--silver); }
-.focus-light-silver:focus { color: var(--light-silver); }
-.focus-moon-gray:focus { color: var(--moon-gray); }
-.focus-light-gray:focus { color: var(--light-gray); }
-.focus-near-white:focus { color: var(--near-white); }
-.focus-white:focus { color: var(--white); }
-
-.bg-focus-black:focus { background-color: var(--black); }
-.bg-focus-near-black:focus { background-color: var(--near-black); }
-.bg-focus-dark-gray:focus { background-color: var(--dark-gray); }
-.bg-focus-mid-gray:focus { background-color: var(--mid-gray); }
-.bg-focus-gray:focus { background-color: var(--gray); }
-.bg-focus-silver:focus { background-color: var(--silver); }
-.bg-focus-light-silver:focus { background-color: var(--light-silver); }
-.bg-focus-moon-gray:focus { background-color: var(--moon-gray); }
-.bg-focus-light-gray:focus { background-color: var(--light-gray); }
-.bg-focus-near-white:focus { background-color: var(--near-white); }
-.bg-focus-white:focus { background-color: var(--white); }
-.bg-focus-transparent:focus { background-color: var(--transparent); }
-
-.hover-black:hover { color: var(--black); }
-.hover-near-black:hover { color: var(--near-black); }
-.hover-dark-gray:hover { color: var(--dark-gray); }
-.hover-mid-gray:hover { color: var(--mid-gray); }
-.hover-gray:hover { color: var(--gray); }
-.hover-silver:hover { color: var(--silver); }
-.hover-light-silver:hover { color: var(--light-silver); }
-.hover-moon-gray:hover { color: var(--moon-gray); }
-.hover-light-gray:hover { color: var(--light-gray); }
-.hover-near-white:hover { color: var(--near-white); }
-.hover-white:hover { color: var(--white); }
-
-.bg-hover-black:hover { background-color: var(--black); }
-.bg-hover-near-black:hover { background-color: var(--near-black); }
-.bg-hover-dark-gray:hover { background-color: var(--dark-gray); }
-.bg-hover-mid-gray:hover { background-color: var(--mid-gray); }
-.bg-hover-gray:hover { background-color: var(--gray); }
-.bg-hover-silver:hover { background-color: var(--silver); }
-.bg-hover-light-silver:hover { background-color: var(--light-silver); }
-.bg-hover-moon-gray:hover { background-color: var(--moon-gray); }
-.bg-hover-light-gray:hover { background-color: var(--light-gray); }
-.bg-hover-near-white:hover { background-color: var(--near-white); }
-.bg-hover-white:hover { background-color: var(--white); }
-.bg-hover-transparent:hover { background-color: var(--transparent); }
+.bg-dark-red { background-color: var(--dark-red); }
+.bg-red { background-color: var(--red); }
+.bg-light-red { background-color: var(--light-red); }
+.bg-orange { background-color: var(--orange); }
+.bg-gold { background-color: var(--gold); }
+.bg-yellow { background-color: var(--yellow); }
+.bg-light-yellow { background-color: var(--light-yellow); }
+.bg-purple { background-color: var(--purple); }
+.bg-light-purple { background-color: var(--light-purple); }
+.bg-dark-pink { background-color: var(--dark-pink); }
+.bg-hot-pink { background-color: var(--hot-pink); }
+.bg-pink { background-color: var(--pink); }
+.bg-light-pink { background-color: var(--light-pink); }
+.bg-dark-green { background-color: var(--dark-green); }
+.bg-green { background-color: var(--green); }
+.bg-light-green { background-color: var(--light-green); }
+.bg-navy { background-color: var(--navy); }
+.bg-dark-blue { background-color: var(--dark-blue); }
+.bg-blue { background-color: var(--blue); }
+.bg-light-blue { background-color: var(--light-blue); }
+.bg-lightest-blue { background-color: var(--lightest-blue); }
+.bg-washed-blue { background-color: var(--washed-blue); }
+.bg-washed-green { background-color: var(--washed-green); }
+.bg-washed-yellow { background-color: var(--washed-yellow); }
+.bg-washed-red { background-color: var(--washed-red); }
+.bg-inherit { background-color: inherit; }

src/_spacing.css

@@ -1,6 +1,5 @@
 /* Variables */
 
-/* Spacing Scale - based on a ratio of 1:2 */
 :root {
   --spacing-none: 0;
   --spacing-extra-small: .25rem;
@@ -12,39 +11,38 @@
   --spacing-extra-extra-extra-large: 16rem;
 }
 
-/* Media Queries */
-
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
    SPACING
+   Docs: http://tachyons.io/docs/layout/spacing/
 
    An eight step powers of two scale ranging from 0 to 16rem.
-   Namespaces are composable and thus highly grockable - check the legend below
 
-   Legend:
+   Base:
+     p = padding
+     m = margin
 
-   p = padding
-   m = margin
+   Modifiers:
+     a = all
+     h = horizontal
+     v = vertical
+     t = top
+     r = right
+     b = bottom
+     l = left
 
-   a = all
-   h = horizontal
-   v = vertical
-   t = top
-   r = right
-   b = bottom
-   l = left
+     0 = none
+     1 = 1st step in spacing scale
+     2 = 2nd step in spacing scale
+     3 = 3rd step in spacing scale
+     4 = 4th step in spacing scale
+     5 = 5th step in spacing scale
+     6 = 6th step in spacing scale
+     7 = 7th step in spacing scale
 
-   0 = none
-   1 = 1st step in spacing scale
-   2 = 2nd step in spacing scale
-   3 = 3rd step in spacing scale
-   4 = 4th step in spacing scale
-   5 = 5th step in spacing scale
-   6 = 6th step in spacing scale
-   7 = 7th step in spacing scale
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_tables.css

@@ -1,22 +1,16 @@
 /*
 
   TABLES
+  Docs: http://tachyons.io/docs/elements/tables/
 
 */
 
-:root {
-  --light-silver: #aaa;
-  --moon-gray: #ccc;
-  --light-gray: #eee;
-  --near-white: #f4f4f4;
-}
-
 .collapse {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
-.striped--moon-gray:nth-child(odd) {
+.striped--light-silver:nth-child(odd) {
   background-color: var(--light-silver);
 }
 
@@ -31,3 +25,11 @@
 .striped--near-white:nth-child(odd) {
   background-color: var(--near-white);
 }
+
+.stripe-light:nth-child(odd) {
+  background-color: var(--white-10);
+}
+
+.stripe-dark:nth-child(odd) {
+  background-color: var(--black-10);
+}

src/_text-align.css

@@ -1,32 +1,47 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
   TEXT ALIGN
+  Docs: http://tachyons.io/docs/typography/text-align/
+
+  Base
+    t = text-align
+
+  Modifiers
+    l = left
+    r = right
+    c = center
+    j = justify
+
+  Media Query Extensions:
+    -ns = not-small
+    -m  = medium
+    -l  = large
 
 */
 
 .tl  { text-align: left; }
 .tr  { text-align: right; }
 .tc  { text-align: center; }
+.tj  { text-align: justify; }
 
 @media (--breakpoint-not-small) {
   .tl-ns  { text-align: left; }
   .tr-ns  { text-align: right; }
   .tc-ns  { text-align: center; }
+  .tj-ns  { text-align: justify; }
 }
 
 @media (--breakpoint-medium) {
   .tl-m  { text-align: left; }
   .tr-m  { text-align: right; }
   .tc-m  { text-align: center; }
+  .tj-m  { text-align: justify; }
 }
 
 @media (--breakpoint-large) {
   .tl-l  { text-align: left; }
   .tr-l  { text-align: right; }
   .tc-l  { text-align: center; }
+  .tj-l  { text-align: justify; }
 }
 

src/_text-decoration.css

@@ -1,10 +1,13 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    TEXT DECORATION
+   Docs: http://tachyons.io/docs/typography/text-decoration/
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_text-transform.css

@@ -1,10 +1,21 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    TEXT TRANSFORM
+   Docs: http://tachyons.io/docs/typography/text-transform/
+
+   Base:
+     tt = text-transform
+
+   Modifiers
+     c = capitalize
+     l = lowercase
+     u = uppercase
+     n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_type-scale.css

@@ -1,14 +1,33 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    TYPE SCALE
+   Docs: http://tachyons.io/docs/typography/scale/
 
+   Base:
+    f = font-size
+
+   Modifiers
+     1 = 1st step in size scale
+     2 = 2nd step in size scale
+     3 = 3rd step in size scale
+     4 = 4th step in size scale
+     5 = 5th step in size scale
+     6 = 6th step in size scale
+     7 = 7th step in size scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 */
 
-/* For Hero Titles */
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+
 .f-6,
 .f-headline {
   font-size: 6rem;
@@ -18,13 +37,16 @@
   font-size: 5rem;
 }
 
+
 /* Type Scale */
+
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }
 .f4 { font-size: 1.25rem; }
 .f5 { font-size: 1rem; }
 .f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
 
 @media (--breakpoint-not-small){
   .f-6-ns,
@@ -37,6 +59,7 @@
   .f4-ns { font-size: 1.25rem; }
   .f5-ns { font-size: 1rem; }
   .f6-ns { font-size: .875rem; }
+  .f7-ns { font-size: .75rem; }
 }
 
 @media (--breakpoint-medium) {
@@ -50,6 +73,7 @@
   .f4-m { font-size: 1.25rem; }
   .f5-m { font-size: 1rem; }
   .f6-m { font-size: .875rem; }
+  .f7-m { font-size: .75rem; }
 }
 
 @media (--breakpoint-large) {
@@ -67,4 +91,5 @@
   .f4-l { font-size: 1.25rem; }
   .f5-l { font-size: 1rem; }
   .f6-l { font-size: .875rem; }
+  .f7-l { font-size: .75rem; }
 }

src/_typography.css

@@ -1,10 +1,12 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    TYPOGRAPHY
+   http://tachyons.io/docs/typography/measure/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_utilities.css

@@ -2,28 +2,14 @@
 
    UTILITIES
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
-.aspect-ratio {
-  height: 0;
-  position: relative;
-}
-
-.aspect-ratio--16x9 { padding-bottom: 56.25%; }
-.aspect-ratio--4x3 {  padding-bottom: 75%; }
-.aspect-ratio--8x5 {  padding-bottom: 62.5%; }
-
-.aspect-ratio--object {
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 100%;
-    z-index: 100;
-}
-
+/* Equivalent to .overflow-y-scroll */
 .overflow-container {
   overflow-y: scroll;
 }
@@ -32,3 +18,33 @@
   margin-right: auto;
   margin-left: auto;
 }
+
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left:  auto; }
+
+@media (--breakpoint-not-small){
+  .center-ns {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-ns { margin-right: auto; }
+  .ml-auto-ns { margin-left:  auto; }
+}
+
+@media (--breakpoint-medium){
+  .center-m {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-m { margin-right: auto; }
+  .ml-auto-m { margin-left:  auto; }
+}
+
+@media (--breakpoint-large){
+  .center-l {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-l { margin-right: auto; }
+  .ml-auto-l { margin-left:  auto; }
+}

src/_vertical-align.css

@@ -1,28 +1,21 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    VERTICAL ALIGN
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .v-base     { vertical-align: baseline; }
-.v-sub      { vertical-align: sub; }
-.v-sup      { vertical-align: super; }
-.v-txt-top  { vertical-align: text-top; }
-.v-txt-btm  { vertical-align: text-bottom; }
 .v-mid      { vertical-align: middle; }
 .v-top      { vertical-align: top; }
 .v-btm      { vertical-align: bottom; }
 
 @media (--breakpoint-not-small) {
   .v-base-ns     { vertical-align: baseline; }
-  .v-sub-ns      { vertical-align: sub; }
-  .v-sup-ns      { vertical-align: super; }
-  .v-txt-top-ns  { vertical-align: text-top; }
-  .v-txt-btm-ns  { vertical-align: text-bottom; }
   .v-mid-ns      { vertical-align: middle; }
   .v-top-ns      { vertical-align: top; }
   .v-btm-ns      { vertical-align: bottom; }
@@ -30,10 +23,6 @@
 
 @media (--breakpoint-medium) {
   .v-base-m     { vertical-align: baseline; }
-  .v-sub-m      { vertical-align: sub; }
-  .v-sup-m      { vertical-align: super; }
-  .v-txt-top-m  { vertical-align: text-top; }
-  .v-txt-btm-m  { vertical-align: text-bottom; }
   .v-mid-m      { vertical-align: middle; }
   .v-top-m      { vertical-align: top; }
   .v-btm-m      { vertical-align: bottom; }
@@ -41,10 +30,6 @@
 
 @media (--breakpoint-large) {
   .v-base-l     { vertical-align: baseline; }
-  .v-sub-l      { vertical-align: sub; }
-  .v-sup-l      { vertical-align: super; }
-  .v-txt-top-l  { vertical-align: text-top; }
-  .v-txt-btm-l  { vertical-align: text-bottom; }
   .v-mid-l      { vertical-align: middle; }
   .v-top-l      { vertical-align: top; }
   .v-btm-l      { vertical-align: bottom; }

src/_visibility.css

@@ -1,11 +1,12 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    VISIBILITY
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

src/_white-space.css

@@ -1,11 +1,12 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    WHITE SPACE
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

src/_widths.css

@@ -1,10 +1,7 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
    WIDTHS
+   Docs: http://tachyons.io/docs/layout/widths/
 
    Base:
      w = width
@@ -19,16 +16,21 @@
      -10  = literal value 10%
      -20  = literal value 20%
      -25  = literal value 25%
+     -30  = literal value 30%
      -33  = literal value 33%
      -34  = literal value 34%
      -40  = literal value 40%
      -50  = literal value 50%
      -60  = literal value 60%
+     -70  = literal value 70%
      -75  = literal value 75%
      -80  = literal value 80%
+     -90  = literal value 90%
      -100 = literal value 100%
 
-     -auto  = string value auto
+     -third      = 100% / 3 (Not supported in opera mini or IE8)
+     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
+     -auto       = string value auto
 
 
    Media Query Extensions:
@@ -49,15 +51,20 @@
 .w-10 {  width:  10%; }
 .w-20 {  width:  20%; }
 .w-25 {  width:  25%; }
+.w-30 {  width:  30%; }
 .w-33 {  width:  33%; }
 .w-34 {  width:  34%; }
 .w-40 {  width:  40%; }
 .w-50 {  width:  50%; }
 .w-60 {  width:  60%; }
+.w-70 {  width:  70%; }
 .w-75 {  width:  75%; }
 .w-80 {  width:  80%; }
+.w-90 {  width:  90%; }
 .w-100 { width: 100%; }
 
+.w-third { width: calc(100% / 3); }
+.w-two-thirds { width: calc(100% / 1.5); }
 .w-auto { width: auto; }
 
 @media (--breakpoint-not-small) {
@@ -69,14 +76,19 @@
   .w-10-ns { width:  10%; }
   .w-20-ns { width:  20%; }
   .w-25-ns { width:  25%; }
+  .w-30-ns { width:  30%; }
   .w-33-ns { width:  33%; }
   .w-34-ns { width:  34%; }
   .w-40-ns { width:  40%; }
   .w-50-ns { width:  50%; }
   .w-60-ns { width:  60%; }
+  .w-70-ns { width:  70%; }
   .w-75-ns { width:  75%; }
   .w-80-ns { width:  80%; }
+  .w-90-ns { width:  90%; }
   .w-100-ns { width: 100%; }
+  .w-third-ns { width: calc(100% / 3); }
+  .w-two-thirds-ns { width: calc(100% / 1.5); }
   .w-auto-ns { width: auto; }
 }
 
@@ -89,14 +101,19 @@
   .w-10-m { width:  10%; }
   .w-20-m { width:  20%; }
   .w-25-m { width:  25%; }
+  .w-30-m { width:  30%; }
   .w-33-m { width:  33%; }
   .w-34-m { width:  34%; }
   .w-40-m { width:  40%; }
   .w-50-m { width:  50%; }
   .w-60-m { width:  60%; }
+  .w-70-m { width:  70%; }
   .w-75-m { width:  75%; }
   .w-80-m { width:  80%; }
+  .w-90-m { width:  90%; }
   .w-100-m { width: 100%; }
+  .w-third-m { width: calc(100% / 3); }
+  .w-two-thirds-m { width: calc(100% / 1.5); }
   .w-auto-m {    width: auto; }
 }
 
@@ -109,13 +126,18 @@
   .w-10-l {    width:  10%; }
   .w-20-l {    width:  20%; }
   .w-25-l {    width:  25%; }
+  .w-30-l {    width:  30%; }
   .w-33-l {    width:  33%; }
   .w-34-l {    width:  34%; }
   .w-40-l {    width:  40%; }
   .w-50-l {    width:  50%; }
   .w-60-l {    width:  60%; }
+  .w-70-l {    width:  70%; }
   .w-75-l {    width:  75%; }
   .w-80-l {    width:  80%; }
+  .w-90-l {    width:  90%; }
   .w-100-l {   width: 100%; }
+  .w-third-l { width: calc(100% / 3); }
+  .w-two-thirds-l { width: calc(100% / 1.5); }
   .w-auto-l {    width: auto; }
 }

src/_word-break.css

@@ -1,31 +1,35 @@
-@custom-media --breakpoint-not-small screen and (min-width: 48em);
-@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
-@custom-media --breakpoint-large screen and (min-width: 64em);
-
 /*
 
   WORD BREAK
 
+   Base:
+     word = word-break
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
-.wb-normal { word-break: normal; }
+.word-normal { word-break: normal; }
 .word-wrap { word-break: break-all; }
 .word-nowrap { word-break: keep-all; }
 
 @media (--breakpoint-not-small) {
-  .wb-normal-ns { word-break: normal; }
+  .word-normal-ns { word-break: normal; }
   .word-wrap-ns { word-break: break-all; }
   .word-nowrap-ns { word-break: keep-all; }
 }
 
 @media (--breakpoint-medium) {
-  .wb-normal-m { word-break: normal; }
+  .word-normal-m { word-break: normal; }
   .word-wrap-m { word-break: break-all; }
   .word-nowrap-m { word-break: keep-all; }
 }
 
 @media (--breakpoint-large) {
-  .wb-normal-l { word-break: normal; }
+  .word-normal-l { word-break: normal; }
   .word-wrap-l { word-break: break-all; }
   .word-nowrap-l { word-break: keep-all; }
 }

src/_z-index.css

@@ -0,0 +1,53 @@
+/*
+
+  Z-INDEX
+
+  Base
+    z = z-index
+
+  Modifiers
+    -0 = literal value 0
+    -1 = literal value 1
+    -2 = literal value 2
+    -3 = literal value 3
+    -4 = literal value 4
+    -5 = literal value 5
+    -999 = literal value 999
+    -9999 = literal value 9999
+
+    -max = largest accepted z-index value as integer
+
+    -inherit = string value inherit
+    -initial = string value initial
+    -unset = string value unset
+
+  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
+  Spec: http://www.w3.org/TR/CSS2/zindex.html
+  Articles:
+    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+
+  Tips on extending:
+  There might be a time worth using negative z-index values.
+  Or if you are using tachyons with another project, you might need to
+  adjust these values to suit your needs.
+
+*/
+
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
+.z-5 { z-index: 5; }
+
+.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+
+.z-max {
+  z-index: 2147483647;
+}
+
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: initial; }
+.z-unset { z-index: unset; }
+

src/tachyons.css

@@ -1,20 +1,40 @@
+/*! TACHYONS v4.12.0 | http://tachyons.io */
+
 /*
-
-  TACHYONS
-
-*/
+ *
+ *      ________            ______
+ *      ___  __/_____ _________  /______  ______________________
+ *      __  /  _  __ `/  ___/_  __ \_  / / /  __ \_  __ \_  ___/
+ *      _  /   / /_/ // /__ _  / / /  /_/ // /_/ /  / / /(__  )
+ *      /_/    \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
+ *                                 /____/
+ *
+ *    TABLE OF CONTENTS
+ *
+ *    1. External Library Includes
+ *       - Normalize.css | http://normalize.css.github.io
+ *    2. Tachyons Modules
+ *    3. Variables
+ *       - Media Queries
+ *       - Colors
+ *    4. Debugging
+ *       - Debug all
+ *       - Debug children
+ *
+ */
 
 
-/* Variables */
-
+/* External Library Includes */
 @import './_normalize';
-@import './_media-queries';
-@import './_colors';
+
 
 /* Modules */
-
 @import './_box-sizing';
+@import './_aspect-ratios';
+@import './_images';
 @import './_background-size';
+@import './_background-position';
+@import './_outlines';
 @import './_borders';
 @import './_border-colors';
 @import './_border-radius';
@@ -25,6 +45,7 @@
 @import './_coordinates';
 @import './_clears';
 @import './_display';
+@import './_flexbox';
 @import './_floats';
 @import './_font-family';
 @import './_font-style';
@@ -40,8 +61,11 @@
 @import './_overflow';
 @import './_position';
 @import './_opacity';
+@import './_rotations';
 @import './_skins';
+@import './_skins-pseudo';
 @import './_spacing';
+@import './_negative-margins';
 @import './_tables';
 @import './_text-decoration';
 @import './_text-align';
@@ -53,10 +77,18 @@
 @import './_white-space';
 @import './_vertical-align';
 @import './_hovers';
+@import './_z-index';
+@import './_nested';
 @import './_styles';
 
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
+@import './_colors';
+@import './_media-queries';
 
-@import './_debug_children';
+/* Debugging */
+@import './_debug-children';
+@import './_debug-grid';
 
-/* Uncomment out this line if you want to debug your layout */
+/* Uncomment out the line below to help debug layout issues */
 /* @import './_debug'; */