Repository: basscss/addons
Branch: master
Commit: 3567d575ecf4
Files: 198
Total size: 124.9 KB

Directory structure:
gitextract_ri0z3_40/

├── LICENSE.md
├── README.md
├── modules/
│   ├── all/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── background-colors/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── background-images/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── border-colors/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── btn/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── btn-outline/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── btn-primary/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── btn-sizes/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── colors/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── darken/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── debug-grid/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── forms/
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── highlight/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── highlight-dark/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── input-range/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── legacy/
│   │   ├── README.md
│   │   ├── base-forms/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── base-reset/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── base-tables/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── base-typography/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── color-base/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── color-forms/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── color-input-range/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── color-progress/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── color-tables/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── defaults/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   └── package.json
│   │   ├── flex-object/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   ├── lib/
│   │   │   │   ├── flex.css
│   │   │   │   ├── lg-flex.css
│   │   │   │   ├── md-flex.css
│   │   │   │   └── sm-flex.css
│   │   │   └── package.json
│   │   ├── responsive-white-space/
│   │   │   ├── README.md
│   │   │   ├── index.css
│   │   │   ├── lib/
│   │   │   │   ├── lg-margins.css
│   │   │   │   ├── lg-padding.css
│   │   │   │   ├── md-margins.css
│   │   │   │   ├── md-padding.css
│   │   │   │   ├── sm-margins.css
│   │   │   │   └── sm-padding.css
│   │   │   └── package.json
│   │   └── utility-headings/
│   │       ├── .gitignore
│   │       ├── .npmignore
│   │       ├── README.md
│   │       ├── index.css
│   │       └── package.json
│   ├── lighten/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── media-object/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── progress/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   └── package.json
│   ├── responsive-border/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-border.css
│   │   │   ├── md-border.css
│   │   │   └── sm-border.css
│   │   └── package.json
│   ├── responsive-layout/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-layout.css
│   │   │   ├── md-layout.css
│   │   │   └── sm-layout.css
│   │   └── package.json
│   ├── responsive-margin/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-margin.css
│   │   │   ├── md-margin.css
│   │   │   └── sm-margin.css
│   │   └── package.json
│   ├── responsive-padding/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-padding.css
│   │   │   ├── md-padding.css
│   │   │   └── sm-padding.css
│   │   └── package.json
│   ├── responsive-position/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-position.css
│   │   │   ├── md-position.css
│   │   │   └── sm-position.css
│   │   └── package.json
│   ├── responsive-type-scale/
│   │   ├── .gitignore
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── index.css
│   │   ├── lib/
│   │   │   ├── lg-type-scale.css
│   │   │   ├── md-type-scale.css
│   │   │   └── sm-type-scale.css
│   │   └── package.json
│   └── responsive-typography/
│       ├── README.md
│       ├── css/
│       │   └── responsive-typography.css
│       ├── index.css
│       ├── lib/
│       │   ├── lg-typography.css
│       │   ├── md-typography.css
│       │   └── sm-typography.css
│       └── package.json
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE.md
================================================

# The MIT License (MIT)
Copyright (c) 2013 – 2016 Brent Jackson

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.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



================================================
FILE: README.md
================================================

# basscss-addons

Optional modules to extend [Basscss](http://basscss.com)

Each module is independently published to npm.

## Example npm installation

```
npm i -D basscss-responsive-margin
```

## CDN Links

Using https://unpkg.com, each module is available in compiled format.

```
<link href="https://unpkg.com/basscss-responsive-margin@1.1.0/css/responsive-margin.css" rel="stylesheet">
```

## Modules

- [responsive-margin](/modules/responsive-margin)
- [responsive-padding](/modules/responsive-padding)
- [responsive-layout](/modules/responsive-layout)
- [responsive-position](/modules/responsive-position)
- [responsive-typography](/modules/responsive-typography)
- [responsive-type-scale](/modules/responsive-type-scale)
- [responsive-border](/modules/responsive-border)
- [forms](/modules/forms)
- [btn](/modules/btn)
- [btn-outline](/modules/btn-outline)
- [btn-primary](/modules/btn-primary)
- [btn-sizes](/modules/btn-sizes)
- [colors](/modules/colors)
- [background-colors](/modules/background-colors)
- [background-images](/modules/background-images)
- [border-colors](/modules/border-colors)
- [darken](/modules/darken)
- [lighten](/modules/lighten)
- [input-range](/modules/input-range)
- [progress](/modules/progress)
- [all](/modules/all)
- [media-object](/modules/media-object)
- [highlight](/modules/highlight)
- [highlight-dark](/modules/highlight-dark)


================================================
FILE: modules/all/.gitignore
================================================

css


================================================
FILE: modules/all/.npmignore
================================================


================================================
FILE: modules/all/README.md
================================================

These utilities set [all](https://developer.mozilla.org/en-US/docs/Web/CSS/all) properties.

```html
<div class="all-inherit">.all-inherit</div>
<button class="all-inherit">.all-inherit</button>
<blockquote class="all-inherit">.all-inherit</blockquote>
<div class="all-initial">.all-initial</div>
<button class="all-initial">.all-initial</button>
<blockquote class="all-initial">.all-initial</blockquote>
<div class="all-unset">.all-unset</div>
<button class="all-unset">.all-unset</button>
<blockquote class="all-unset">.all-unset</blockquote>
```



================================================
FILE: modules/all/index.css
================================================
/* Basscss All */

.all-initial { all: initial }
.all-unset { all: unset }
.all-inherit { all: inherit }
.all-revert { all: revert }



================================================
FILE: modules/all/package.json
================================================
{
  "name": "basscss-all",
  "version": "1.1.1",
  "description": "All utility for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u autoprefixer -o css/all.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/background-colors/.gitignore
================================================

css


================================================
FILE: modules/background-colors/.npmignore
================================================


================================================
FILE: modules/background-colors/README.md
================================================

Use this suite of background color utilities to directly style elements.
The color values used in this module are from [mrmrs/colors](http://clrs.cc/).

## Background Colors

```html
<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>
<div class="bg-black">
  <div class="center p1 white bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 white bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 white bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 white bg-lighten-4">.bg-lighten-4</div>
</div>
```



================================================
FILE: modules/background-colors/index.css
================================================
/* Basscss Background Colors */

@import 'colors.css/src/_variables.css';

.bg-black  { background-color: var(--black) }
.bg-gray   { background-color: var(--gray) }
.bg-silver { background-color: var(--silver) }
.bg-white  { background-color: var(--white) }

.bg-aqua  { background-color: var(--aqua) }
.bg-blue  { background-color: var(--blue) }
.bg-navy  { background-color: var(--navy) }
.bg-teal  { background-color: var(--teal) }
.bg-green { background-color: var(--green) }
.bg-olive { background-color: var(--olive) }
.bg-lime  { background-color: var(--lime) }

.bg-yellow  { background-color: var(--yellow) }
.bg-orange  { background-color: var(--orange) }
.bg-red     { background-color: var(--red) }
.bg-fuchsia { background-color: var(--fuchsia) }
.bg-purple  { background-color: var(--purple) }
.bg-maroon  { background-color: var(--maroon) }



================================================
FILE: modules/background-colors/package.json
================================================
{
  "name": "basscss-background-colors",
  "version": "2.1.0",
  "description": "Background color styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u postcss-remove-root -u autoprefixer -o css/background-colors.css"
  },
  "dependencies": {
    "colors.css": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2",
    "postcss-remove-root": "0.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/background-images/.gitignore
================================================

css


================================================
FILE: modules/background-images/.npmignore
================================================


================================================
FILE: modules/background-images/README.md
================================================

This module controls background size and position for background images.

## Background Size

Use the `.bg-cover` or `.bg-contain` utilities to control background size.

```html
<div class="p4 bg-cover white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-cover</h1>
</div>
```

## Background Position

Use background position utilities to control position.

### .bg-center

```html
<div class="p4 bg-cover bg-center white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-center</h1>
</div>
```

### .bg-top

```html
<div class="p4 bg-cover bg-top white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-top</h1>
</div>
```

### .bg-right

```html
<div class="p4 bg-cover bg-right white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-right</h1>
</div>
```

### .bg-bottom

```html
<div class="p4 bg-cover bg-bottom white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-bottom</h1>
</div>
```

### .bg-left

```html
<div class="p4 bg-cover bg-left white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-left</h1>
</div>
```



================================================
FILE: modules/background-images/index.css
================================================
/* Basscss Background Images */

.bg-cover   { background-size: cover }
.bg-contain { background-size: contain }

.bg-center  { background-position: center }
.bg-top     { background-position: top }
.bg-right   { background-position: right }
.bg-bottom  { background-position: bottom }
.bg-left    { background-position: left }

.bg-no-repeat { background-repeat: no-repeat }
.bg-repeat-x { background-repeat: repeat-x }
.bg-repeat-y { background-repeat: repeat-y }



================================================
FILE: modules/background-images/package.json
================================================
{
  "name": "basscss-background-images",
  "version": "0.1.1",
  "description": "Background image utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u autoprefixer -o css/background-images.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/border-colors/.gitignore
================================================

css


================================================
FILE: modules/border-colors/.npmignore
================================================


================================================
FILE: modules/border-colors/README.md
================================================

Use this suite of border color utilities to directly style elements.
The color values used in this module are from [mrmrs/colors](http://clrs.cc/).

## Border Colors

```html
<div class="flex flex-wrap mxn1">
  <div class="flex-auto center m1 p1 border border-black">.border-black</div>
  <div class="flex-auto center m1 p1 border border-gray">.border-gray</div>
  <div class="flex-auto center m1 p1 border border-silver">.border-silver</div>
  <div class="flex-auto center m1 p1 border border-white">.border-white</div>
  <div class="flex-auto center m1 p1 border border-aqua">.border-aqua</div>
  <div class="flex-auto center m1 p1 border border-blue">.border-blue</div>
  <div class="flex-auto center m1 p1 border border-navy">.border-navy</div>
  <div class="flex-auto center m1 p1 border border-teal">.border-teal</div>
  <div class="flex-auto center m1 p1 border border-green">.border-green</div>
  <div class="flex-auto center m1 p1 border border-olive">.border-olive</div>
  <div class="flex-auto center m1 p1 border border-lime">.border-lime</div>
  <div class="flex-auto center m1 p1 border border-yellow">.border-yellow</div>
  <div class="flex-auto center m1 p1 border border-orange">.border-orange</div>
  <div class="flex-auto center m1 p1 border border-red">.border-red</div>
  <div class="flex-auto center m1 p1 border border-fuchsia">.border-fuchsia</div>
  <div class="flex-auto center m1 p1 border border-purple">.border-purple</div>
  <div class="flex-auto center m1 p1 border border-maroon">.border-maroon</div>
</div>
```



================================================
FILE: modules/border-colors/index.css
================================================
/* Basscss Border Colors */

@import 'colors.css/src/_variables.css';

.border-black  { border-color: var(--black) }
.border-gray   { border-color: var(--gray) }
.border-silver { border-color: var(--silver) }
.border-white  { border-color: var(--white) }

.border-aqua  { border-color: var(--aqua) }
.border-blue  { border-color: var(--blue) }
.border-navy  { border-color: var(--navy) }
.border-teal  { border-color: var(--teal) }
.border-green { border-color: var(--green) }
.border-olive { border-color: var(--olive) }
.border-lime  { border-color: var(--lime) }

.border-yellow  { border-color: var(--yellow) }
.border-orange  { border-color: var(--orange) }
.border-red     { border-color: var(--red) }
.border-fuchsia { border-color: var(--fuchsia) }
.border-purple  { border-color: var(--purple) }
.border-maroon  { border-color: var(--maroon) }



================================================
FILE: modules/border-colors/package.json
================================================
{
  "name": "basscss-border-colors",
  "version": "2.1.0",
  "description": "Border color styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u postcss-remove-root -u autoprefixer -o css/border-colors.css"
  },
  "dependencies": {
    "colors.css": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2",
    "postcss-remove-root": "0.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/btn/.gitignore
================================================

css


================================================
FILE: modules/btn/.npmignore
================================================


================================================
FILE: modules/btn/README.md
================================================

Base structural styles, resets, and colors for buttons are set with this module.
All buttons share common padding and height, well suited for tap targets on touchscreen displays, and align with form inputs and selects.

Use the `.btn` class to style buttons, input buttons, and links.

```html
<div class="mb1">
  <button class="btn">Button</button>
  <a href="#!" class="btn">Link Button</a>
  <input type="button" class="btn" value="Input Button">
</div>
```

Note: adjusting the line-height and padding variables may require adjustments to form element variables to maintain vertical alignment.

By default elements with the `.btn` class have transparent backgrounds. Use color utilities or `.btn` color styles to adjust the appearance.



================================================
FILE: modules/btn/index.css
================================================
/* Basscss Btn */

.btn {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: var(--button-line-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  margin: 0;
  height: auto;
  border: var(--border-width) solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
  color: inherit;
  background-color: transparent;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

:root {
  --border-width: 1px;
  --bold-font-weight: bold;
  --button-font-family: inherit;
  --button-font-size: inherit;
  --button-font-weight: var(--bold-font-weight);
  --button-line-height: 1.125rem;
  --button-padding-y: .5rem;
  --button-padding-x: 1rem;
  --darken-2: rgba(0, 0, 0, .125);
  --darken-3: rgba(0, 0, 0, .25);
}




================================================
FILE: modules/btn/package.json
================================================
{
  "name": "basscss-btn",
  "version": "1.1.1",
  "description": "Button module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/btn.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/btn-outline/.gitignore
================================================

css


================================================
FILE: modules/btn-outline/.npmignore
================================================


================================================
FILE: modules/btn-outline/README.md
================================================

Outline button color style for use with the `.btn` base style.

```html
<div class="mb1">
  <button class="btn btn-outline">Button</button>
  <a href="#!" class="btn btn-outline">Link Button</a>
  <input type="button" class="btn btn-outline" value="Input Button">
</div>
```

By default, `.btn-outline` inherits color from its parent.
Use color utilities to adjust the color per button.

```html
<div class="p1">
  <button class="btn btn-outline mb1 blue">Button</button>
  <button class="btn btn-outline mb1 black">Button</button>
  <button class="btn btn-outline mb1 navy">Button</button>
  <button class="btn btn-outline mb1 olive">Button</button>
  <button class="btn btn-outline mb1 red">Button</button>
  <button class="btn btn-outline mb1 fuchsia">Button</button>
  <button class="btn btn-outline mb1 purple">Button</button>
  <button class="btn btn-outline mb1 maroon">Button</button>
</div>

<div class="p1 bg-black">
  <button class="btn btn-outline mb1 aqua">Button</button>
  <button class="btn btn-outline mb1 teal">Button</button>
  <button class="btn btn-outline mb1 lime">Button</button>
  <button class="btn btn-outline mb1 green">Button</button>
  <button class="btn btn-outline mb1 yellow">Button</button>
  <button class="btn btn-outline mb1 orange">Button</button>
  <button class="btn btn-outline mb1 gray">Button</button>
  <button class="btn btn-outline mb1 silver">Button</button>
</div>
```




================================================
FILE: modules/btn-outline/index.css
================================================
/* Basscss Btn Outline */

.btn-outline,
.btn-outline:hover {
  border-color: currentcolor;
}

.btn-outline {
  border-radius: var(--border-radius);
}

.btn-outline:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.btn-outline:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.btn-outline:disabled,
.btn-outline.is-disabled {
  opacity: .5;
}

:root {
  --border-radius: 3px;
  --darken-1: rgba(0, 0, 0, .0625);
  --darken-2: rgba(0, 0, 0, .125);
  --darken-3: rgba(0, 0, 0, .25);
}



================================================
FILE: modules/btn-outline/package.json
================================================
{
  "name": "basscss-btn-outline",
  "version": "1.1.0",
  "description": "Outline button color style module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/btn-outline.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/btn-primary/.gitignore
================================================

css


================================================
FILE: modules/btn-primary/.npmignore
================================================


================================================
FILE: modules/btn-primary/README.md
================================================

Solid button color style for use with the `.btn` base style.

```html
<div class="mb1">
  <button class="btn btn-primary">Button</button>
  <a href="#!" class="btn btn-primary">Link Button</a>
  <input type="button" class="btn btn-primary" value="Input Button">
</div>
```

By default, `.btn-primary` has white text on a blue background.

Adjust the default colors using the `--button-color` and `--button-background-color` custom properties.

```css
:root {
  --button-color: black;
  --button-background-color: silver;
}
```

Use other color utilities to handle one-off exceptions.

```html
<button class="btn btn-primary mb1 bg-blue">Button</button>
<button class="btn btn-primary mb1 bg-black">Button</button>
<button class="btn btn-primary mb1 black bg-gray">Button</button>
<button class="btn btn-primary mb1 black bg-silver">Button</button>
<button class="btn btn-primary mb1 black bg-aqua">Button</button>
<button class="btn btn-primary mb1 bg-navy">Button</button>
<button class="btn btn-primary mb1 bg-teal">Button</button>
<button class="btn btn-primary mb1 bg-green">Button</button>
<button class="btn btn-primary mb1 bg-olive">Button</button>
<button class="btn btn-primary mb1 bg-lime">Button</button>
<button class="btn btn-primary mb1 black bg-yellow">Button</button>
<button class="btn btn-primary mb1 bg-orange">Button</button>
<button class="btn btn-primary mb1 bg-red">Button</button>
<button class="btn btn-primary mb1 bg-fuchsia">Button</button>
<button class="btn btn-primary mb1 bg-purple">Button</button>
<button class="btn btn-primary mb1 bg-maroon">Button</button>
<button class="btn btn-primary mb1 black bg-darken-1">Button</button>
<button class="btn btn-primary mb1 black bg-darken-2">Button</button>
<button class="btn btn-primary mb1 black bg-darken-3">Button</button>
<button class="btn btn-primary mb1 black bg-darken-4">Button</button>
```




================================================
FILE: modules/btn-primary/index.css
================================================
/* Basscss Btn Primary */

.btn-primary {
  color: var(--button-color);
  background-color: var(--button-background-color);
  border-radius: var(--border-radius);
}

.btn-primary:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.btn-primary:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  opacity: .5;
}

:root {
  --blue: #0074d9;
  --button-color: #fff;
  --button-background-color: var(--blue);
  --border-radius: 3px;
  --darken-1: rgba(0, 0, 0, .0625);
  --darken-2: rgba(0, 0, 0, .125);
  --darken-3: rgba(0, 0, 0, .25);
}



================================================
FILE: modules/btn-primary/package.json
================================================
{
  "name": "basscss-btn-primary",
  "version": "1.1.0",
  "description": "Solid button color style module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/btn-primary.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/btn-sizes/.gitignore
================================================

css


================================================
FILE: modules/btn-sizes/.npmignore
================================================


================================================
FILE: modules/btn-sizes/README.md
================================================

These utilities extend the `basscss-btn` styles to modify button sizes.

To change the line-height and padding but leave the font-size the same,
use button size extensions.

```html
<button type="button" class="btn btn-big btn-primary mb1">Burgers</button>
<button type="button" class="btn btn-primary mb1">Fries</button>
<button type="button" class="btn btn-narrow btn-primary mb1">Onion Rings</button>
<button type="button" class="btn btn-small btn-primary mb1">Shakes</button>
```



================================================
FILE: modules/btn-sizes/index.css
================================================
/* Basscss Btn Sizes */

.btn-small {
  padding: var(--button-small-padding-y) var(--button-small-padding-x);
}

.btn-big {
  padding: var(--button-big-padding-y) var(--button-big-padding-x);
}

.btn-narrow {
  padding-left: var(--button-narrow-padding-x);
  padding-right: var(--button-narrow-padding-x);
}

:root {
  --button-small-padding-y: .25rem;
  --button-small-padding-x: .5rem;
  --button-big-padding-y: 1rem;
  --button-big-padding-x: 1.25rem;
  --button-narrow-padding-x: .5rem;
}



================================================
FILE: modules/btn-sizes/package.json
================================================
{
  "name": "basscss-btn-sizes",
  "version": "1.2.0",
  "description": "Button size extension utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/btn-sizes.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/colors/.gitignore
================================================

css


================================================
FILE: modules/colors/.npmignore
================================================


================================================
FILE: modules/colors/README.md
================================================

Use this suite of color utilities to directly style elements.
The color values used in this module are from [mrmrs/colors](http://clrs.cc/).

## Colors

```html
<h3 class="center">
  <span class="black">.black</span>
  <span class="gray">.gray</span>
  <span class="silver">.silver</span>
  <span class="white">.white</span>
  <span class="aqua">.aqua</span>
  <span class="blue">.blue</span>
  <span class="navy">.navy</span>
  <span class="teal">.teal</span>
  <span class="green">.green</span>
  <span class="olive">.olive</span>
  <span class="lime">.lime</span>
  <span class="yellow">.yellow</span>
  <span class="orange">.orange</span>
  <span class="red">.red</span>
  <span class="fuchsia">.fuchsia</span>
  <span class="purple">.purple</span>
  <span class="maroon">.maroon</span>
  <span class="color-inherit">.color-inherit</span>
</h3>
```

## Opacity
To de-emphasize elements with lower opacity, use the `.muted` utility.

```html
<span class="blue">Normal</span>
<span class="blue muted">Muted</span>
```



================================================
FILE: modules/colors/index.css
================================================
/* Basscss Colors */

@import 'colors.css/src/_variables.css';

.black  { color: var(--black) }
.gray   { color: var(--gray) }
.silver { color: var(--silver) }
.white  { color: var(--white) }

.aqua  { color: var(--aqua) }
.blue  { color: var(--blue) }
.navy  { color: var(--navy) }
.teal  { color: var(--teal) }
.green { color: var(--green) }
.olive { color: var(--olive) }
.lime  { color: var(--lime) }

.yellow  { color: var(--yellow) }
.orange  { color: var(--orange) }
.red     { color: var(--red) }
.fuchsia { color: var(--fuchsia) }
.purple  { color: var(--purple) }
.maroon  { color: var(--maroon) }

.color-inherit { color: inherit }
.muted { opacity: .5 }



================================================
FILE: modules/colors/package.json
================================================
{
  "name": "basscss-colors",
  "version": "2.2.0",
  "description": "Color styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u postcss-remove-root -u autoprefixer -o css/colors.css"
  },
  "dependencies": {
    "colors.css": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2",
    "postcss-remove-root": "0.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/darken/.gitignore
================================================

css


================================================
FILE: modules/darken/.npmignore
================================================


================================================
FILE: modules/darken/README.md
================================================

# Darken

Use this suite of background-color utilities to directly style elements.

```html
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>
```




================================================
FILE: modules/darken/index.css
================================================
/* Basscss Darken */

.bg-darken-1 { background-color: var(--darken-1) }
.bg-darken-2 { background-color: var(--darken-2) }
.bg-darken-3 { background-color: var(--darken-3) }
.bg-darken-4 { background-color: var(--darken-4) }

:root {
  --darken-1: rgba(0, 0, 0, .0625);
  --darken-2: rgba(0, 0, 0, .125);
  --darken-3: rgba(0, 0, 0, .25);
  --darken-4: rgba(0, 0, 0, .5);
}



================================================
FILE: modules/darken/package.json
================================================
{
  "name": "basscss-darken",
  "version": "1.1.0",
  "description": "Darken background-color styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/darken.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "functional-css",
    "fcss",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/debug-grid/.gitignore
================================================

css


================================================
FILE: modules/debug-grid/.npmignore
================================================


================================================
FILE: modules/debug-grid/README.md
================================================

Utility style for showing a 8 x 8px background grid.

```html
<div class="p3 debug-grid">.debug-grid</div>
```



================================================
FILE: modules/debug-grid/index.css
================================================
/* Basscss Debug Grid */

.debug-grid {
  background-image:
    linear-gradient(transparent 7px, var(--debug-grid-color) 8px),
    linear-gradient(90deg, transparent 7px, var(--debug-grid-color) 8px);
  background-position: calc(50% - 4px) top;
  background-size: 8px 8px;
}

:root {
  --debug-grid-color: rgba(0, 255, 255, .25);
}



================================================
FILE: modules/debug-grid/package.json
================================================
{
  "name": "basscss-debug-grid",
  "version": "1.0.0",
  "description": "Debug utility to create an 8px by 8px background grid for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-properties -u autoprefixer -o css/debug-grid.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-properties": "^5.0.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/forms/README.md
================================================
# Basscss Forms

Basic form styles module for Basscss. Add your own color styles to customize the look and feel.

## Label

```html
<label class="label">Hamburger</label>
```

## Input

```html
<input type="text" class="input" />
```

## Select

```html
<select class="select">
  <option>Hamburger 1</option>
  <option>Hamburger 2</option>
  <option>Hamburger 3</option>
  <option>Hamburger 4</option>
</select>
```

## Textarea

```html
<textarea class="textarea" rows="4"></textarea>
```



================================================
FILE: modules/forms/index.css
================================================
/* Basscss Forms */

.label {
  font-size: .875rem;
  font-weight: bold;
  display: block;
  margin-bottom: .5rem;
}

.input {
  font-family: inherit;
  font-size: inherit;
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: .5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.select {
  font-family: inherit;
  font-size: inherit;
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: .5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.textarea {
  font-family: inherit;
  font-size: inherit;
  display: block;
  width: 100%;
  padding: .5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}


================================================
FILE: modules/forms/package.json
================================================
{
  "name": "basscss-forms",
  "version": "1.0.0",
  "description": "Form styles module for Basscss",
  "style": "index.css",
  "keywords": [
    "css",
    "oocss",
    "functional-css",
    "fcss",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/highlight/.gitignore
================================================

css


================================================
FILE: modules/highlight/.npmignore
================================================


================================================
FILE: modules/highlight/README.md
================================================
# Basscss Highlight

Highlight.js styles module for Basscss - http://basscss.com



================================================
FILE: modules/highlight/index.css
================================================
/* Basscss Highlight */

@import "colors.css/src/_variables.css";

.hljs {
  -webkit-text-size-adjust: none;
}

.hljs-comment,
.diff .hljs-header,
.hljs-javadoc {
  color: var(--hljs-comment);
  font-style: italic;
}

.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: var(--hljs-keyword);
  font-weight: bold;
}

.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: var(--hljs-number);
}

.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.hljs-dartdoc,
.tex .hljs-formula {
  color: var(--hljs-string);
}

.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
  color: var(--hljs-title);
  font-weight: bold;
}

.hljs-list .hljs-keyword,
.hljs-subst {
  font-weight: normal;
}

.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: var(--hljs-type);
  font-weight: bold;
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: var(--hljs-tag);
  font-weight: normal;
}

.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: var(--hljs-attribute);
}

.hljs-regexp {
  color: var(--hljs-regexp);
}

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: var(--hljs-symbol);
}

.hljs-built_in {
  color: var(--hljs-built-in);
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: var(--hljs-preprocessor);
  font-weight: bold;
}

.hljs-deletion {
  background: var(--hljs-deletion);
}

.hljs-addition {
  background: var(--hljs-addition);
}

.diff .hljs-change {
  background: var(--hljs-change);
}

.hljs-chunk {
  color: var(--hljs-chunk);
}


/* Mapped colors */
:root {
  --hljs-comment: var(--gray);
  --hljs-keyword: var(--black);
  --hljs-number: var(--olive);
  --hljs-string: var(--blue);
  --hljs-title: var(--blue);
  --hljs-type: var(--navy);
  --hljs-tag: var(--navy);
  --hljs-attribute: var(--olive);
  --hljs-regexp: var(--olive);
  --hljs-symbol: var(--purple);
  --hljs-built-in: var(--navy);
  --hljs-preprocessor: var(--gray);
  --hljs-deletion: var(--fuchsia);
  --hljs-addition: var(--lime);
  --hljs-change: var(--navy);
  --hljs-chunk: var(--silver);
}



================================================
FILE: modules/highlight/package.json
================================================
{
  "name": "basscss-highlight",
  "version": "0.3.0",
  "description": "Highlight.js module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u postcss-remove-root -u autoprefixer -o css/highlight.css"
  },
  "dependencies": {
    "colors.css": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2",
    "postcss-remove-root": "0.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "utility",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/highlight-dark/.gitignore
================================================

css


================================================
FILE: modules/highlight-dark/.npmignore
================================================


================================================
FILE: modules/highlight-dark/README.md
================================================
# Basscss Highlight Dark

Dark Highlight.js styles module for Basscss



================================================
FILE: modules/highlight-dark/index.css
================================================
/* Basscss Highlight */

@import "colors.css/src/_variables.css";

.highlight-dark .hljs {
  color: white;
  -webkit-text-size-adjust: none;
}

.highlight-dark .hljs-comment,
.highlight-dark .diff .hljs-header,
.highlight-dark .hljs-javadoc {
  color: var(--hljs-comment);
  font-style: italic;
}

.highlight-dark .hljs-keyword,
.highlight-dark .css .rule .hljs-keyword,
.highlight-dark .hljs-winutils,
.highlight-dark .nginx .hljs-title,
.highlight-dark .hljs-subst,
.highlight-dark .hljs-request,
.highlight-dark .hljs-status {
  color: var(--hljs-keyword);
  font-weight: bold;
}

.highlight-dark .hljs-number,
.highlight-dark .hljs-hexcolor,
.highlight-dark .ruby .hljs-constant {
  color: var(--hljs-number);
}

.highlight-dark .hljs-string,
.highlight-dark .hljs-tag .hljs-value,
.highlight-dark .hljs-phpdoc,
.highlight-dark .hljs-dartdoc,
.highlight-dark .tex .hljs-formula {
  color: var(--hljs-string);
}

.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
  color: var(--hljs-title);
  font-weight: bold;
}

.highlight-dark .hljs-list .hljs-keyword,
.highlight-dark .hljs-subst {
  font-weight: normal;
}

.highlight-dark .hljs-class .hljs-title,
.highlight-dark .hljs-type,
.highlight-dark .vhdl .hljs-literal,
.highlight-dark .tex .hljs-command {
  color: var(--hljs-type);
  font-weight: bold;
}

.highlight-dark .hljs-tag,
.highlight-dark .hljs-tag .hljs-title,
.highlight-dark .hljs-rules .hljs-property,
.highlight-dark .django .hljs-tag .hljs-keyword {
  color: var(--hljs-tag);
  font-weight: normal;
}

.highlight-dark .hljs-attribute,
.highlight-dark .hljs-variable,
.highlight-dark .lisp .hljs-body {
  color: var(--hljs-attribute);
}

.highlight-dark .hljs-regexp {
  color: var(--hljs-regexp);
}

.highlight-dark .hljs-symbol,
.highlight-dark .ruby .hljs-symbol .hljs-string,
.highlight-dark .lisp .hljs-keyword,
.highlight-dark .clojure .hljs-keyword,
.highlight-dark .scheme .hljs-keyword,
.highlight-dark .tex .hljs-special,
.highlight-dark .hljs-prompt {
  color: var(--hljs-symbol);
}

.highlight-dark .hljs-built_in {
  color: var(--hljs-built-in);
}

.highlight-dark .hljs-preprocessor,
.highlight-dark .hljs-pragma,
.highlight-dark .hljs-pi,
.highlight-dark .hljs-doctype,
.highlight-dark .hljs-shebang,
.highlight-dark .hljs-cdata {
  color: var(--hljs-preprocessor);
  font-weight: bold;
}

.highlight-dark .hljs-deletion {
  background: var(--hljs-deletion);
}

.highlight-dark .hljs-addition {
  background: var(--hljs-addition);
}

.highlight-dark .diff .hljs-change {
  background: var(--hljs-change);
}

.highlight-dark .hljs-chunk {
  color: var(--hljs-chunk);
}


:root {
  /* Mapped colors */
  --hljs-comment: var(--silver);
  --hljs-keyword: white;
  --hljs-number: var(--lime);
  --hljs-string: var(--red);
  --hljs-title: var(--red);
  --hljs-type: var(--aqua);
  --hljs-tag: var(--aqua);
  --hljs-attribute: var(--lime);
  --hljs-regexp: var(--lime);
  --hljs-symbol: var(--fuchsia);
  --hljs-built-in: var(--aqua);
  --hljs-preprocessor: var(--silver);
  --hljs-deletion: var(--fuchsia);
  --hljs-addition: var(--lime);
  --hljs-change: var(--aqua);
  --hljs-chunk: var(--gray);

}



================================================
FILE: modules/highlight-dark/package.json
================================================
{
  "name": "basscss-highlight-dark",
  "version": "0.1.0",
  "description": "Dark Highlight.js module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u postcss-remove-root -u autoprefixer -o css/highlight-dark.css"
  },
  "dependencies": {
    "colors.css": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2",
    "postcss-remove-root": "0.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "utility",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/input-range/.gitignore
================================================

css


================================================
FILE: modules/input-range/.npmignore
================================================


================================================
FILE: modules/input-range/README.md
================================================

This module styles range inputs to match other form styles in Basscss.

```html
<input type="range" class="input-range">
<input type="range" class="input-range blue">
```



================================================
FILE: modules/input-range/index.css
================================================
/* Basscss Input Range */

.input-range {
  vertical-align: middle;
  background-color: transparent;
  padding-top: var(--form-field-padding-y);
  padding-bottom: var(--form-field-padding-y);
  color: inherit;
  background-color: transparent;
  -webkit-appearance: none;
}

.input-range::-webkit-slider-thumb {
  position: relative;
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  cursor: pointer;
  margin-top: var(--range-thumb-offset);
  border-radius: var(--border-radius);
  background-color: currentcolor;
  -webkit-appearance: none;
}

/* Touch screen friendly pseudo element */
.input-range::-webkit-slider-thumb:before {
  content: '';
  display: block;
  position: absolute;
  top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) );
  left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) );
  width: var(--range-thumb-pseudo-size);
  height: var(--range-thumb-pseudo-size);
  opacity: 0;
}

.input-range::-moz-range-thumb {
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  border-color: transparent;
  border-width: 0;
  background-color: currentcolor;
}

.input-range::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.input-range::-moz-range-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.input-range:focus {
  outline: none;
}

:root {
  --form-field-padding-x: .5rem;
  --form-field-padding-y: .5rem;
  --form-field-height: 2.25rem;
  --border-radius: 3px;
  --darken-3: rgba(0, 0, 0, .25);

  --range-thumb-width: var(--form-field-padding-x);
  --range-thumb-height: calc( var(--form-field-height) - (var(--form-field-padding-y) * 2) );
  --range-track-height: calc( var(--form-field-padding-y) / 2 );
  --range-thumb-offset: calc( var(--range-thumb-height) / -2 + (var(--range-track-height) / 2) );
  --range-thumb-pseudo-size: var(--form-field-height);
}



================================================
FILE: modules/input-range/package.json
================================================
{
  "name": "basscss-input-range",
  "version": "3.0.0",
  "description": "Custom input range module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u postcss-calc -u autoprefixer -o css/input-range.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-calc": "^5.2.0",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/legacy/README.md
================================================

# Legacy modules

These modules are from previous versions of Basscss and may be duplicative in functionality with other modules.


================================================
FILE: modules/legacy/base-forms/README.md
================================================

This modules sets structural styles for base form elements, creating a consistent visual rhythm among forms
while allowing for color to be adjusted where needed.
These styles do not rely on markup structure and can be combined with
utilities to make fine-grained, contextual adjustments.
Form element styles are intended to be interoperable with all other utility styles.


## Inline Forms
By default, form elements follow browser defaults and display inline.
Note: the `.field` style is part of `basscss-color-forms`.

```html
<form>
  <label for="search">Search</label>
  <input id="search" type="text" class="field">
  <button class="btn btn-primary">Go</button>
</form>
```

## Stacked Forms

Use `.block`, `.col-12`, and other layout utilities to stack form elements and adjust margins.

```html
<form class="sm-col-6">
  <label>Email Address</label>
  <input type="text" class="block col-12 mb1 field">
  <label>Password</label>
  <input type="password" class="block col-12 mb1 field">
  <label>Select</label>
  <select class="block col-12 mb1 field">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <label class="block col-12 mb2">
    <input type="checkbox" checked>
    Remember me
  </label>
  <button type="submit" class="btn btn-primary">Sign In</button>
  <button type="reset" class="btn btn-primary black bg-gray">Cancel</button>
</form>
```
To adjust the color of forms, use the styles in `basscss-color-forms` and `basscss-color-forms-dark`.



================================================
FILE: modules/legacy/base-forms/index.css
================================================
/* Basscss Base Forms */

@import 'basscss-defaults';

input,
select,
textarea,
fieldset {
  font-family: var(--form-field-font-family);
  font-size: var(--form-field-font-size);
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}

label {
  vertical-align: middle;
}

input[type=text],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  height: var(--form-field-height);
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
  vertical-align: middle;
  -webkit-appearance: none;
}

select {
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

select:not([multiple]) {
  height: var(--form-field-height);
  vertical-align: middle;
}

textarea {
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
}

:root {
  --form-field-font-family: inherit;
  --form-field-font-size: 1rem;
  --form-field-height: 2.25rem;
  --form-field-padding-y: .5rem;
  --form-field-padding-x: .5rem;
}



================================================
FILE: modules/legacy/base-forms/package.json
================================================
{
  "name": "basscss-base-forms",
  "version": "2.0.2",
  "description": "Base form styles for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/base-reset/README.md
================================================

This module resets a few basic values for the body, img and svg elements.

Note: this reset does **not** set box-sizing to border-box using the universal selector.
This is meant to discourage declaring widths unnecessarily throughout a stylesheet.
The base form and grid modules use border-box where widths are used,
and a `.border-box` utility is available in the utility-layout module.

This reset intentionally does not normalize cross-browser discrepancies.
If you would like to normalize styles, use [normalize.css](http://necolas.github.io/normalize.css/).



================================================
FILE: modules/legacy/base-reset/index.css
================================================

body { margin: 0 }
img { max-width: 100% }
svg { max-height: 100% }



================================================
FILE: modules/legacy/base-reset/package.json
================================================
{
  "name": "basscss-base-reset",
  "version": "2.0.3",
  "description": "Base element reset for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/legacy/base-tables/README.md
================================================

This module sets default styles for all tables,
including text-alignment, width, padding, border-collapse, and border-spacing.

```html
<div class="overflow-scroll">
  <table class="table-light">
    <thead>
      <tr>
        <th>Artist</th> <th>Album</th> <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
      <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
      <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
    </tbody>
  </table>
</div>
```

Use the color styles in `basscss-color-tables` to adjust the appearance.



================================================
FILE: modules/legacy/base-tables/index.css
================================================
/* Basscss Base Tables */

@import 'basscss-defaults';

table {
  border-collapse: separate;
  border-spacing: 0;
  max-width: 100%;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--table-header-font-weight);
}

th,
td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  line-height: inherit;
}

th { vertical-align: bottom }
td { vertical-align: top }

:root {
  --table-header-font-weight: var(--bold-font-weight);
  --table-cell-padding-x: var(--space-2);
  --table-cell-padding-y: .25rem;
}



================================================
FILE: modules/legacy/base-tables/package.json
================================================
{
  "name": "basscss-base-tables",
  "version": "1.0.2",
  "description": "Base table styles for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/base-typography/README.md
================================================

This module sets default typographic styles for the body, headings, paragraphs, lists, and other elements.

## Base type scale

Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.

```html
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>
```

## Lists

By default, lists have bullets or numbers and padding left.

```html
<ul>
  <li>Half-Smoke</li>
  <li>Kielbasa</li>
  <li>Bologna</li>
</ul>
<ol>
  <li>Prosciutto</li>
  <li>Andouille</li>
  <li>Bratwurst</li>
  <li>Chorizo</li>
</ol>
```

## Other Elements

The pre element has overflow-x set to scroll.

Adjust the custom properties to change the default font stack, font weights, and type scale.



================================================
FILE: modules/legacy/base-typography/index.css
================================================
/* Basscss Base Typography */

@import 'basscss-defaults';

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: var(--body-font-size);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  margin-top: var(--heading-margin-top);
  margin-bottom: var(--heading-margin-bottom);
}

p {
  margin-top: var(--paragraph-margin-top);
  margin-bottom: var(--paragraph-margin-bottom);
}

dl, ol, ul {
  margin-top: var(--list-margin-top);
  margin-bottom: var(--list-margin-bottom);
}

pre, code, samp {
  font-family: var(--monospace-font-family);
  font-size: var(--pre-font-size);
}

pre {
  margin-top: var(--pre-margin-top);
  margin-bottom: var(--pre-margin-bottom);
  overflow-x: scroll;
}

h1 { font-size: var(--h1) }
h2 { font-size: var(--h2) }
h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5 { font-size: var(--h5) }
h6 { font-size: var(--h6) }

:root {
  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
  --line-height: 1.5;
  --body-font-size: 100%;
  --heading-font-family: var(--font-family);
  --heading-font-weight: bold;
  --heading-line-height: 1.25;
  --heading-margin-top: 1em;
  --heading-margin-bottom: .5em;
  --paragraph-margin-top: 0;
  --paragraph-margin-bottom: var(--space-2);
  --list-margin-top: 0;
  --list-margin-bottom: var(--space-2);
  --monospace-font-family: 'Source Code Pro', Consolas, monospace;
  --pre-font-size: inherit;
  --pre-margin-top: 0;
  --pre-margin-bottom: var(--space-2);
}



================================================
FILE: modules/legacy/base-typography/package.json
================================================
{
  "name": "basscss-base-typography",
  "version": "2.0.3",
  "description": "Base typography styles for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/color-base/README.md
================================================

This module sets color styles for the body, links, pre, code, and hr elements.

## Base Elements

The body element has color set to `--black` and background color white.
Links default to `--blue`. To adjust the link color, define a new value for the `--link-color` custom property.
Pre and code tags have transparent background by default. To set a background color, use `--pre-background-color`.
HRs use the same default border width and color as other border styles. These can be defined with `--border-width` and `--border-color`.




================================================
FILE: modules/legacy/color-base/index.css
================================================
/* Basscss Color Base */

@import 'basscss-defaults';

body {
  color: var(--body-color);
  background-color: var(--body-background-color);
}

a {
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
}

a:hover {
  text-decoration: var(--link-hover-text-decoration);
}

pre, code {
  background-color: var(--pre-background-color);
  border-radius: var(--pre-border-radius);
}

hr {
  border: 0;
  border-bottom-style: var(--rule-border-style);
  border-bottom-width: var(--rule-border-width);
  border-bottom-color: var(--rule-border-color);
}

:root {
  --body-color: var(--black);
  --body-background-color: var(--white);
  --link-color: var(--blue);
  --link-text-decoration: none;
  --link-hover-text-decoration: underline;
  --pre-background-color: transparent;
  --pre-border-radius: var(--border-radius);
  --rule-border-style: solid;
  --rule-border-width: var(--border-width);
  --rule-border-color: var(--border-color);
}



================================================
FILE: modules/legacy/color-base/package.json
================================================
{
  "name": "basscss-color-base",
  "version": "2.0.2",
  "description": "Base element color styles module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/color-forms/README.md
================================================

This module sets basic color styles for form elements on a light background.

## Input Fields

To style the color, background, and border styles for form fields, use the `.field` style.
This style works on text inputs, selects, and textareas.

```html
<label>Input</label>
<input type="text" class="block col-12 field">
<label>Select</label>
<select class="block col-12 field">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<label>Textarea</label>
<textarea class="block col-12 field"></textarea>
```

The `.field` style includes states for disabled and read-only fields, as well as success, warning, and error states.

```html
<label>Normal</label>
<input type="text" class="block col-12 field">
<label>Disabled</label>
<input type="text" class="block col-12 field" disabled value="This is disabled">
<label>Read Only</label>
<input type="text" class="block col-12 field" readonly value="This is read-only">
<label>Required</label>
<input type="text" class="block col-12 field" required>
<label>.is-focused</label>
<input type="text" class="block col-12 field is-focused">
<label>.is-disabled</label>
<input type="text" class="block col-12 field is-disabled">
<label>.is-read-only</label>
<input type="text" class="block col-12 field is-read-only">
<label>Success</label>
<input type="text" class="block col-12 field is-success">
<label>Warning</label>
<input type="text" class="block col-12 field is-warning">
<label>Error</label>
<input type="text" class="block col-12 field is-error">
```



================================================
FILE: modules/legacy/color-forms/index.css
================================================
/* Basscss Color Forms */

@import 'basscss-defaults';

.field {
  border-style: solid;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

.field:focus,
.field.is-focused {
  outline: none;
  border-color: var(--field-focus-color);
  box-shadow: 0 0 0 2px color(var(--field-focus-color) a(.5));
}

.field:disabled,
.field.is-disabled {
  background-color: var(--darken-2);
  opacity: .5;
}

.field:read-only:not(select),
.field.is-read-only {
  background-color: var(--darken-2);
}


.field.is-success {
  border-color: var(--field-success-color);
}

.field.is-success:focus,
.field.is-success.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-success-color) a(.5));
}

.field.is-warning {
  border-color: var(--field-warning-color);
}

.field.is-warning:focus,
.field.is-warning.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-warning-color) a(.5));
}

.field:invalid,
.field.is-error {
  border-color: var(--field-error-color);
}

.field:invalid:focus,
.field:invalid.is-focused,
.field.is-error:focus,
.field.is-error.is-focused {
  box-shadow: 0 0 0 2px color(var(--field-error-color) a(.5));
}

:root {
  --field-focus-color: var(--blue);
  --field-success-color: var(--green);
  --field-warning-color: var(--yellow);
  --field-error-color: var(--red);
}



================================================
FILE: modules/legacy/color-forms/package.json
================================================
{
  "name": "basscss-color-forms",
  "version": "3.0.2",
  "description": "Form color styles module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/color-input-range/README.md
================================================

This color module styles range inputs to match other form styles in Basscss.

The `.range-light` style inherits color from its parent. Use color utilities to change the slider thumb color.

```html
<input type="range" class="full-width range-light">
<input type="range" class="full-width blue range-light">
```



================================================
FILE: modules/legacy/color-input-range/index.css
================================================
/* Basscss Color Input Range */

@import 'basscss-defaults';

.range-light {
  color: inherit;
  background-color: transparent;
  -webkit-appearance: none;
}

.range-light::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: var(--border-radius);
  background-color: currentcolor;
}

.range-light::-moz-range-thumb {
  border-radius: var(--border-radius);
  border-color: transparent;
  border-width: 0;
  background-color: currentcolor;
}

.range-light::-webkit-slider-runnable-track {
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.range-light::-moz-range-track {
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.range-light:focus {
  outline: none;
}

.range-light:focus::-webkit-slider-thumb {
  outline: none;
  border: 0;
  box-shadow: 0 0 1px 2px currentcolor;
}

.range-light:focus::-moz-range-thumb {
  outline: none;
  border: 0;
  box-shadow: 0 0 0 3px var(--darken-3);
}


================================================
FILE: modules/legacy/color-input-range/package.json
================================================
{
  "name": "basscss-color-input-range",
  "version": "1.0.2",
  "description": "Input range color module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "basscss": {
    "category": "color",
    "optional": true
  },
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/color-progress/README.md
================================================

This module provides color styles for progress elements to better match other styles in Basscss.

The `.progress` style inherits color from its parent. Use color utilities to adjust the fill color.

```html
<progress value="0.375" class="progress">0.375</progress>
<progress value="0.5" class="progress blue">0.5</progress>
```



================================================
FILE: modules/legacy/color-progress/index.css
================================================
/* Basscss Color Progress */

@import 'basscss-defaults';

.progress {
  background-color: var(--darken-2);
  border: 0;
  border-radius: 10000px;
}

.progress::-webkit-progress-bar {
  -webkit-appearance: none;
  background-color: var(--darken-2)
}

.progress::-webkit-progress-value {
  -webkit-appearance: none;
  background-color: currentColor;
}

.progress::-moz-progress-bar {
  background-color: currentColor;
}



================================================
FILE: modules/legacy/color-progress/package.json
================================================
{
  "name": "basscss-color-progress",
  "version": "1.0.2",
  "description": "Progress element color module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/color-tables/README.md
================================================

This color module sets border styles for tables.

Use the `.table-light` style to add borders to tables.
Border color and width is set with the `--border-color` and `--border-width` custom properties.

```html
<div class="overflow-scroll">
  <table class="table-light">
    <thead>
      <tr>
        <th>Artist</th> <th>Album</th> <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
      <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
      <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
    </tbody>
  </table>
</div>
```

Use other color utilities to customize the look.

```html
<div class="overflow-scroll">
  <table class="table-light overflow-hidden bg-white border rounded">
    <thead class="bg-darken-1">
      <tr>
        <th>Artist</th> <th>Album</th> <th>Release Date</th>
      </tr>
    </thead>
    <tbody>
      <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
      <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
      <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
    </tbody>
  </table>
</div>
```



================================================
FILE: modules/legacy/color-tables/index.css
================================================
/* Basscss Color Tables */

@import 'basscss-defaults';

.table-light th,
.table-light td {
  border-bottom-width: var(--border-width);
  border-bottom-style: solid;
  border-bottom-color: var(--border-color);
}

.table-light tr:last-child td {
  border-bottom: 0;
}



================================================
FILE: modules/legacy/color-tables/package.json
================================================
{
  "name": "basscss-color-tables",
  "version": "1.0.4",
  "description": "Table color styles module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/defaults/README.md
================================================
# Basscss Defaults

Default custom property variables and custom media queries for [Basscss](http://basscss.com). Includes colors from [mrmrs/colors](//clrs.cc).




================================================
FILE: modules/legacy/defaults/index.css
================================================
/* Basscss Defaults */

@import "colors.css/myth/variables";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);


:root {

  --font-family: 'Helvetica Neue', Helvetica, sans-serif;
  --line-height: 1.5;
  --heading-font-family: var(--font-family);
  --heading-font-weight: bold;
  --heading-line-height: 1.25;
  --monospace-font-family: 'Source Code Pro', Consolas, monospace;
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
  --bold-font-weight: bold;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --form-field-font-size: 1rem;
  --form-field-height: 2.25rem;
  --form-field-padding-y: .5rem;
  --form-field-padding-x: .5rem;
  --button-font-size: inherit;
  --button-font-weight: bold;
  --button-line-height: 1.125rem;
  --button-padding-y: .5rem;
  --button-padding-x: 1rem;
  --container-width: 64em;

  --darken-1: rgba(0,0,0,.0625);
  --darken-2: rgba(0,0,0,.125);
  --darken-3: rgba(0,0,0,.25);
  --darken-4: rgba(0,0,0,.5);

  --lighten-1: rgba(255,255,255,.0625);
  --lighten-2: rgba(255,255,255,.125);
  --lighten-3: rgba(255,255,255,.25);
  --lighten-4: rgba(255,255,255,.5);

  --border-width: 1px;
  --border-radius: 3px;
  --border-color: var(--darken-2);

}




================================================
FILE: modules/legacy/defaults/package.json
================================================
{
  "name": "basscss-defaults",
  "version": "2.1.3",
  "description": "Default variables for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "dependencies": {
    "colors.css": "^2.0.4"
  }
}


================================================
FILE: modules/legacy/flex-object/README.md
================================================

The flex-object is a powerful suite of utilities based on the
<a href="http://www.w3.org/TR/css3-flexbox/">flexible box layout module</a>.
These utilities can replace the need for a grid system in many instances,
but can also be combined with the Basscss grid for even more possibilities.

Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox

## .flex
To begin, add the `.flex` class to a parent element.
This sets the element to `display: flex` and enables a flex context for all direct child elements.
```html
<div class="flex">
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
```

## .flex-wrap
To wrap elements, use the `.flex-wrap` utility.
```html
<div class="flex flex-wrap">
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
```

## .flex-column
To arrange items vertically, use the `.flex-column` utility.
```html
<div class="flex flex-column">
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
```

## Alignment
Use these utilities to control vertical alignment of child elements.

### .flex-center
To vertically center child elements, add the `.flex-center` class to the parent element.
```html
<div class="flex flex-center">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2 blue border">Hot dog</div>
</div>
```

### .flex-stretch
To stretch all elements to fill the height of the parent, use the `.flex-stretch` utility.
```html
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2 blue border">Hot dog</div>
</div>
```

### .flex-stretch with nested content
To ensure nested elements stretch as well, add the `.flex` class to relevant elements.
```html
<div class="flex flex-stretch">
  <div class="flex-auto px2 py4 blue border">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="flex blue border">
    <div class="px2 white bg-blue">
      Hot dog
    </div>
  </div>
</div>
```

### .flex-baseline
To align child elements to their baseline, use the `.flex-baseline` utility.

```html
<div class="flex flex-baseline blue border-bottom">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>
```

### .flex-start
To align child elements to the top, use the `.flex-start` utility.

```html
<div class="flex flex-start blue border-top">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>
```

### .flex-end
To align child elements to the bottom, use the `.flex-end` utility.

```html
<div class="flex flex-end blue border-bottom">
  <div class="flex-auto px2">
    <h1 class="m0">Hamburger</h1>
  </div>
  <div class="px2">Hot dog</div>
</div>
```

## Justify

To automatically fill the space between child elements, use `.flex-justify`.

```html
<div class="flex flex-justify">
  <div class="p1 border">Burger</div>
  <div class="p1 border">Burger</div>
  <div class="p1 py1 border">Burger</div>
</div>
```


## Responsive Utilities
To set display flex only at certain breakpoints and up,
use the breakpoint-prefixed versions of `.flex`.
All other utilities will only work at the set breakpoint.

```html
<div class="sm-flex flex-center mb2 blue">
  <div class="p1 border">
    <h2 class="m0">.sm-flex</h2>
  </div>
  <div class="flex-auto p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
<div class="md-flex flex-center mb2 blue">
  <div class="p1 border">
    <h2 class="m0">.md-flex</h2>
  </div>
  <div class="flex-auto p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
<div class="lg-flex flex-center mb2 blue">
  <div class="p1 border">
    <h2 class="m0">.lg-flex</h2>
  </div>
  <div class="flex-auto p1 border">Hamburger</div>
  <div class="p1 border">Hamburger</div>
</div>
```

## Child elements
To control the size and behavior of child elements, use these utilities.

### .flex-auto
To make an element grow or shrink as needed, use the `.flex-auto` utility.
```html
<div class="flex">
  <div class="px2 py1 border">Hamburger</div>
  <div class="px2 py1 border">Hamburger</div>
  <div class="flex-auto blue border"></div>
  <div class="px2 py1 border">Hamburger</div>
</div>
```

### .flex-grow
To make an element grow, but not shrink, use the `.flex-grow` utility.
```html
<div class="flex">
  <div class="px2 py1 border">Hamburger</div>
  <div class="px2 py1 border">Hamburger</div>
  <div class="flex-grow blue border"></div>
  <div class="px2 py1 border">Hamburger</div>
</div>
```

### .flex-none
To prevent an element from growing or shrinking, use the `.flex-none` utility.
```html
<div class="flex">
  <div class="flex-auto px2 py1 border">Hamburger</div>
  <div class="flex-auto px2 py1 border">Hamburger</div>
  <div class="flex-none px2 py1 border">Hamburger</div>
</div>
```

## Ordering
To change the order of child elements, use the `.flex-first` and `.flex-last` utilities.

### .flex-first
```html
<div class="flex">
  <div class="px2 py1 border">Hamburger</div>
  <div class="flex-first px2 py1 border">First Hamburger</div>
  <div class="px2 py1 border">Hamburger</div>
</div>
```

### .flex-last
```html
<div class="flex">
  <div class="px2 py1 border">Hamburger</div>
  <div class="flex-last px2 py1 border">Last Hamburger</div>
  <div class="px2 py1 border">Hamburger</div>
</div>
```



## Parent Element Utilities

```css
.flex          { display: flex }
.flex-column   { flex-direction: column }
.flex-wrap     { flex-wrap: wrap }
.flex-center   { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch  { align-items: stretch }
.flex-start    { align-items: flex-start }
.flex-end      { align-items: flex-end }
```

## Child Element Utilities

```css
.flex-first { order: -1 }
.flex-last  { order: 1024 }
.flex-auto  { flex: 1 1 auto }
.flex-grow  { flex: 1 0 auto }
.flex-none  { flex: none }
```




================================================
FILE: modules/legacy/flex-object/index.css
================================================
/* Flex Object */

@import "./lib/flex.css";
@import "./lib/sm-flex.css";
@import "./lib/md-flex.css";
@import "./lib/lg-flex.css";


@import 'basscss-defaults';



================================================
FILE: modules/legacy/flex-object/lib/flex.css
================================================

.flex { display: flex }

.flex-column  { flex-direction: column }
.flex-wrap    { flex-wrap: wrap }

.flex-center   { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch  { align-items: stretch }
.flex-start    { align-items: flex-start }
.flex-end      { align-items: flex-end }

.flex-justify  { justify-content: space-between }

/*
 * 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-grow { flex: 1 0 auto }
.flex-none { flex: none }

.flex-first { order: -1 }
.flex-last  { order: 99999 }



================================================
FILE: modules/legacy/flex-object/lib/lg-flex.css
================================================

@media (--breakpoint-lg) {
  .lg-flex { display: flex }
}



================================================
FILE: modules/legacy/flex-object/lib/md-flex.css
================================================

@media (--breakpoint-md) {
  .md-flex { display: flex }
}



================================================
FILE: modules/legacy/flex-object/lib/sm-flex.css
================================================

@media (--breakpoint-sm) {
  .sm-flex { display: flex }
}



================================================
FILE: modules/legacy/flex-object/package.json
================================================
{
  "name": "flex-object",
  "version": "2.0.5",
  "description": "CSS layout module based on flexbox",
  "style": "index.css",
  "author": "Brent Jackson",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons",
  "keywords": [
    "css",
    "oocss",
    "basscss"
  ],
  "dependencies": {
    "basscss-defaults": "^2.0.1"
  }
}


================================================
FILE: modules/legacy/responsive-white-space/README.md
================================================
# Basscss Responsive White Space

** This module is deprecated in favor of basscss-responsive-margin and basscss-responsive-padding**

Responsive white space margin and padding utilities module for Basscss - http://basscss.com

Margin and padding utilities are based on a global white space scale defined with variables.
These utilities use a shorthand naming convention.

## Margin and Padding Naming Convention

<div class="overflow-scroll">
  <table class="mb2 bg-darken-1 rounded table-light">
    <thead class="bg-darken-1">
      <tr> <th>Shorthand</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>m</td> <td>Margin</td> </tr>
      <tr> <td>p</td> <td>Padding</td> </tr>
      <tr> <td>t</td> <td>Top</td> </tr>
      <tr> <td>r</td> <td>Right</td> </tr>
      <tr> <td>b</td> <td>Bottom</td> </tr>
      <tr> <td>l</td> <td>Left</td> </tr>
      <tr> <td>x</td> <td>X-axis (left and right)</td> </tr>
      <tr> <td>y</td> <td>Y-axis (top and bottom)</td> </tr>
      <tr> <td>n</td> <td>Negative (margin only)</td> </tr>
      <tr> <td>1</td> <td>--space-1 (default .5rem)</td> </tr>
      <tr> <td>2</td> <td>--space-2 (default 1rem)</td> </tr>
      <tr> <td>3</td> <td>--space-3 (default 2rem)</td> </tr>
      <tr> <td>4</td> <td>--space-4 (default 4rem)</td> </tr>
    </tbody>
  </table>
</div>

## Prefix Naming Convention
Responsive white space utilities follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>


## Margins
Change or reset default margins using the global white space scale.
Negative x-axis margins are used to offset padding.
Margin auto is used to horizontally center block-level elements with a set width.


## Padding
Padding utilities are only available in symmetrical orientations.
This is to normalize the spacing used around elements.




================================================
FILE: modules/legacy/responsive-white-space/index.css
================================================
/* Basscss Responsive White Space */

@import "./lib/sm-margins";
@import "./lib/md-margins";
@import "./lib/lg-margins";

@import "./lib/sm-padding";
@import "./lib/md-padding";
@import "./lib/lg-padding";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}



================================================
FILE: modules/legacy/responsive-white-space/lib/lg-margins.css
================================================

@media (--breakpoint-lg) {

  .lg-m0  { margin:        0 }
  .lg-mt0 { margin-top:    0 }
  .lg-mr0 { margin-right:  0 }
  .lg-mb0 { margin-bottom: 0 }
  .lg-ml0 { margin-left:   0 }

  .lg-m1  { margin:        var(--space-1) }
  .lg-mt1 { margin-top:    var(--space-1) }
  .lg-mr1 { margin-right:  var(--space-1) }
  .lg-mb1 { margin-bottom: var(--space-1) }
  .lg-ml1 { margin-left:   var(--space-1) }

  .lg-m2  { margin:        var(--space-2) }
  .lg-mt2 { margin-top:    var(--space-2) }
  .lg-mr2 { margin-right:  var(--space-2) }
  .lg-mb2 { margin-bottom: var(--space-2) }
  .lg-ml2 { margin-left:   var(--space-2) }

  .lg-m3  { margin:        var(--space-3) }
  .lg-mt3 { margin-top:    var(--space-3) }
  .lg-mr3 { margin-right:  var(--space-3) }
  .lg-mb3 { margin-bottom: var(--space-3) }
  .lg-ml3 { margin-left:   var(--space-3) }

  .lg-m4  { margin:        var(--space-4) }
  .lg-mt4 { margin-top:    var(--space-4) }
  .lg-mr4 { margin-right:  var(--space-4) }
  .lg-mb4 { margin-bottom: var(--space-4) }
  .lg-ml4 { margin-left:   var(--space-4) }

  .lg-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
  .lg-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
  .lg-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
  .lg-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

  .lg-mx-auto { margin-left: auto; margin-right: auto; }

}



================================================
FILE: modules/legacy/responsive-white-space/lib/lg-padding.css
================================================

@media (--breakpoint-lg) {

  .lg-p0  { padding: 0 }

  .lg-p1  { padding:       var(--space-1) }
  .lg-py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
  .lg-px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

  .lg-p2  { padding:       var(--space-2) }
  .lg-py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
  .lg-px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

  .lg-p3  { padding:       var(--space-3) }
  .lg-py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
  .lg-px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

  .lg-p4  { padding:       var(--space-4) }
  .lg-py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
  .lg-px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

}



================================================
FILE: modules/legacy/responsive-white-space/lib/md-margins.css
================================================

@media (--breakpoint-md) {

  .md-m0  { margin:        0 }
  .md-mt0 { margin-top:    0 }
  .md-mr0 { margin-right:  0 }
  .md-mb0 { margin-bottom: 0 }
  .md-ml0 { margin-left:   0 }

  .md-m1  { margin:        var(--space-1) }
  .md-mt1 { margin-top:    var(--space-1) }
  .md-mr1 { margin-right:  var(--space-1) }
  .md-mb1 { margin-bottom: var(--space-1) }
  .md-ml1 { margin-left:   var(--space-1) }

  .md-m2  { margin:        var(--space-2) }
  .md-mt2 { margin-top:    var(--space-2) }
  .md-mr2 { margin-right:  var(--space-2) }
  .md-mb2 { margin-bottom: var(--space-2) }
  .md-ml2 { margin-left:   var(--space-2) }

  .md-m3  { margin:        var(--space-3) }
  .md-mt3 { margin-top:    var(--space-3) }
  .md-mr3 { margin-right:  var(--space-3) }
  .md-mb3 { margin-bottom: var(--space-3) }
  .md-ml3 { margin-left:   var(--space-3) }

  .md-m4  { margin:        var(--space-4) }
  .md-mt4 { margin-top:    var(--space-4) }
  .md-mr4 { margin-right:  var(--space-4) }
  .md-mb4 { margin-bottom: var(--space-4) }
  .md-ml4 { margin-left:   var(--space-4) }

  .md-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
  .md-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
  .md-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
  .md-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

  .md-mx-auto { margin-left: auto; margin-right: auto; }

}



================================================
FILE: modules/legacy/responsive-white-space/lib/md-padding.css
================================================

@media (--breakpoint-md) {

  .md-p0  { padding: 0 }

  .md-p1  { padding:       var(--space-1) }
  .md-py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
  .md-px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

  .md-p2  { padding:       var(--space-2) }
  .md-py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
  .md-px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

  .md-p3  { padding:       var(--space-3) }
  .md-py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
  .md-px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

  .md-p4  { padding:       var(--space-4) }
  .md-py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
  .md-px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

}



================================================
FILE: modules/legacy/responsive-white-space/lib/sm-margins.css
================================================

@media (--breakpoint-sm) {

  .sm-m0  { margin:        0 }
  .sm-mt0 { margin-top:    0 }
  .sm-mr0 { margin-right:  0 }
  .sm-mb0 { margin-bottom: 0 }
  .sm-ml0 { margin-left:   0 }

  .sm-m1  { margin:        var(--space-1) }
  .sm-mt1 { margin-top:    var(--space-1) }
  .sm-mr1 { margin-right:  var(--space-1) }
  .sm-mb1 { margin-bottom: var(--space-1) }
  .sm-ml1 { margin-left:   var(--space-1) }

  .sm-m2  { margin:        var(--space-2) }
  .sm-mt2 { margin-top:    var(--space-2) }
  .sm-mr2 { margin-right:  var(--space-2) }
  .sm-mb2 { margin-bottom: var(--space-2) }
  .sm-ml2 { margin-left:   var(--space-2) }

  .sm-m3  { margin:        var(--space-3) }
  .sm-mt3 { margin-top:    var(--space-3) }
  .sm-mr3 { margin-right:  var(--space-3) }
  .sm-mb3 { margin-bottom: var(--space-3) }
  .sm-ml3 { margin-left:   var(--space-3) }

  .sm-m4  { margin:        var(--space-4) }
  .sm-mt4 { margin-top:    var(--space-4) }
  .sm-mr4 { margin-right:  var(--space-4) }
  .sm-mb4 { margin-bottom: var(--space-4) }
  .sm-ml4 { margin-left:   var(--space-4) }

  .sm-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
  .sm-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
  .sm-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
  .sm-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

  .sm-mx-auto { margin-left: auto; margin-right: auto; }

}



================================================
FILE: modules/legacy/responsive-white-space/lib/sm-padding.css
================================================

@media (--breakpoint-sm) {

  .sm-p0  { padding: 0 }

  .sm-p1  { padding:       var(--space-1) }
  .sm-py1 { padding-top:   var(--space-1); padding-bottom: var(--space-1) }
  .sm-px1 { padding-left:  var(--space-1); padding-right:  var(--space-1) }

  .sm-p2  { padding:       var(--space-2) }
  .sm-py2 { padding-top:   var(--space-2); padding-bottom: var(--space-2) }
  .sm-px2 { padding-left:  var(--space-2); padding-right:  var(--space-2) }

  .sm-p3  { padding:       var(--space-3) }
  .sm-py3 { padding-top:   var(--space-3); padding-bottom: var(--space-3) }
  .sm-px3 { padding-left:  var(--space-3); padding-right:  var(--space-3) }

  .sm-p4  { padding:       var(--space-4) }
  .sm-py4 { padding-top:   var(--space-4); padding-bottom: var(--space-4) }
  .sm-px4 { padding-left:  var(--space-4); padding-right:  var(--space-4) }

}



================================================
FILE: modules/legacy/responsive-white-space/package.json
================================================
{
  "name": "basscss-responsive-white-space",
  "version": "0.1.2",
  "description": "Responsive white space margin and padding utilities module for Basscss",
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "CSS",
    "OOCSS",
    "Basscss",
    "Rework"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/legacy/utility-headings/.gitignore
================================================

css


================================================
FILE: modules/legacy/utility-headings/.npmignore
================================================


================================================
FILE: modules/legacy/utility-headings/README.md
================================================
# Basscss Utility Headings

Responsive heading utilities module for Basscss

Use `.h0` and `.h00` to create headings larger than the default h1.
Add `.h0-responsive` or `h00-responsive` to use vw based sizes at larger viewports.
Adjust the width of the browser to see the difference.

```html
<h1 class="h00 h00-responsive">Hamburger 00</h1>
<h1 class="h0 h0-responsive">Hamburger 0</h1>
<h1 class="h1 h1-responsive">Hamburger 1</h1>
```



================================================
FILE: modules/legacy/utility-headings/index.css
================================================
/* Basscss Utility Headings */

.h00 { font-size: var(--h00) }
.h0 {  font-size: var(--h0) }

@media (--breakpoint-md) {
  .h00-responsive { font-size: var(--h00-responsive) }
  .h0-responsive {  font-size: var(--h0-responsive) }
  .h1-responsive {  font-size: var(--h1-responsive) }
}

@media (--breakpoint-xl) {
  .h00-responsive { font-size: var(--h00-responsive-max) }
  .h0-responsive {  font-size: var(--h0-responsive-max) }
  .h1-responsive {  font-size: var(--h1-responsive-max) }
}

@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-xl (min-width: 96em);

:root {
  --h00:    4rem;
  --h0:     3rem;
  --h00-responsive: 8vw;
  --h0-responsive:  6vw;
  --h1-responsive:  4vw;
  --h00-responsive-max: 7.68rem;
  --h0-responsive-max:  5.76rem;
  --h1-responsive-max:  3.84rem;
}



================================================
FILE: modules/legacy/utility-headings/package.json
================================================
{
  "name": "basscss-utility-headings",
  "version": "0.1.0",
  "description": "Responsive heading utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/utility-headings.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/lighten/.gitignore
================================================

css


================================================
FILE: modules/lighten/.npmignore
================================================


================================================
FILE: modules/lighten/README.md
================================================

# Lighten

Use this suite of background-color utilities to directly style elements.

```html
<div style='background-color: #555'>
  <div class="center p1 bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 bg-lighten-4">.bg-lighten-4</div>
</div>
```




================================================
FILE: modules/lighten/index.css
================================================
/* Basscss Lighten */

.bg-lighten-1 { background-color: var(--lighten-1) }
.bg-lighten-2 { background-color: var(--lighten-2) }
.bg-lighten-3 { background-color: var(--lighten-3) }
.bg-lighten-4 { background-color: var(--lighten-4) }

:root {
  --lighten-1: rgba(255, 255, 255, .0625);
  --lighten-2: rgba(255, 255, 255, .125);
  --lighten-3: rgba(255, 255, 255, .25);
  --lighten-4: rgba(255, 255, 255, .5);
}



================================================
FILE: modules/lighten/package.json
================================================
{
  "name": "basscss-lighten",
  "version": "1.1.0",
  "description": "Lighten background-color styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-properties -u autoprefixer -o css/lighten.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "functional-css",
    "fcss",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/media-object/.gitignore
================================================

css


================================================
FILE: modules/media-object/.npmignore
================================================


================================================
FILE: modules/media-object/README.md
================================================
# Basscss Media

Flexbox media object module for Basscss - http://basscss.com

## Basic Usage

```html
<div class="media">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Centered 

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Bottom Aligned

```html
<div class="media media-bottom">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Source Order

```html
<div class="media">
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>
```

## Double-Sided

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>
```

## Multiple Images

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Responsive Media Objects

```html
<div class="sm-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

```html
<div class="md-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

```html
<div class="lg-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```



================================================
FILE: modules/media-object/index.css
================================================
/* Basscss Media Object */

.media,
.sm-media,
.md-media,
.lg-media {
  margin-left: -var(--media-object-space);
  margin-right: -var(--media-object-space);
}

.media {
  display: flex;
}

.media-center {
  align-items: center;
}

.media-bottom {
  align-items: flex-end;
}

.media-img,
.media-body {
  padding-left: var(--media-object-space);
  padding-right: var(--media-object-space);
}

.media-body {
  flex: 1 1 auto;
}

@media (--breakpoint-sm) {
  .sm-media { display: flex }
}

@media (--breakpoint-md) {
  .md-media { display: flex }
}

@media (--breakpoint-lg) {
  .lg-media { display: flex }
}

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --space-1: .5rem;
  --media-object-space: var(--space-1);
}



================================================
FILE: modules/media-object/package.json
================================================
{
  "name": "basscss-media-object",
  "version": "1.1.0",
  "description": "Media object module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/media-object.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/progress/.gitignore
================================================

css


================================================
FILE: modules/progress/.npmignore
================================================


================================================
FILE: modules/progress/README.md
================================================

This module styles progress elements to better match other form styles in Basscss.

```html
<progress value="0.375" class="progress">0.375</progress>
<progress value="0.5" class="progress">0.5</progress>
```



================================================
FILE: modules/progress/index.css
================================================
/* Basscss Progress */

.progress {
  display: block;
  width: 100%;
  height: calc( var(--form-field-height) / 4 );
  margin: var(--form-field-padding-y) 0;
  overflow: hidden;
  background-color: var(--darken-2);
  border: 0;
  border-radius: 10000px;
  -webkit-appearance: none;
}

.progress::-webkit-progress-bar {
  -webkit-appearance: none;
  background-color: var(--darken-2)
}

.progress::-webkit-progress-value {
  -webkit-appearance: none;
  background-color: currentcolor;
}

.progress::-moz-progress-bar {
  background-color: currentcolor;
}

:root {
  --form-field-height: 2.25rem;
  --form-field-padding-y: .5rem;
  --darken-2: rgba(0, 0, 0, .125);
}



================================================
FILE: modules/progress/package.json
================================================
{
  "name": "basscss-progress",
  "version": "3.0.0",
  "description": "Custom progress element module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-properties -u postcss-calc -u autoprefixer -o css/progress.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-calc": "^5.2.0",
    "postcss-cli": "^2.5.0",
    "postcss-custom-properties": "^5.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-border/.gitignore
================================================

css


================================================
FILE: modules/responsive-border/.npmignore
================================================


================================================
FILE: modules/responsive-border/README.md
================================================
# Basscss Responsive Border

Responsive border utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>

## Example

```html
<div class="sm-border-top md-border-none lg-border-left">I'll have a small border on small viewports, no border on medium viewports, and a left border on large viewports!</div>
<div class="md-rounded lg-circle">I'm rounded on medium viewports and a circle on large viewports!</div>
```


================================================
FILE: modules/responsive-border/index.css
================================================
/* Basscss Responsive Border */

@import "./lib/sm-border";
@import "./lib/md-border";
@import "./lib/lg-border";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --border-width: 1px;
  --border-radius: 3px;
}


================================================
FILE: modules/responsive-border/lib/lg-border.css
================================================
@media (--breakpoint-lg) {
  .lg-border {
    border-style: solid;
    border-width: var(--border-width);
  }

  .lg-border-top {
    border-top-style: solid;
    border-top-width: var(--border-width);
  }

  .lg-border-right {
    border-right-style: solid;
    border-right-width: var(--border-width);
  }

  .lg-border-bottom {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width);
  }

  .lg-border-left {
    border-left-style: solid;
    border-left-width: var(--border-width);
  }

  .lg-border-none { border: 0 }
  .lg-border-top-none { border-top: 0 }
  .lg-border-right-none { border-right: 0 }
  .lg-border-bottom-none { border-bottom: 0 }
  .lg-border-left-none { border-left: 0 }

  .lg-rounded { border-radius: var(--border-radius) }
  .lg-circle  { border-radius: 50% }

  .lg-rounded-top    { border-radius: var(--border-radius) var(--border-radius) 0 0 }
  .lg-rounded-right  { border-radius: 0 var(--border-radius) var(--border-radius) 0 }
  .lg-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) }
  .lg-rounded-left   { border-radius: var(--border-radius) 0 0 var(--border-radius) }

  .lg-not-rounded { border-radius: 0 }
}


================================================
FILE: modules/responsive-border/lib/md-border.css
================================================
@media (--breakpoint-md) {
  .md-border {
    border-style: solid;
    border-width: var(--border-width);
  }

  .md-border-top {
    border-top-style: solid;
    border-top-width: var(--border-width);
  }

  .md-border-right {
    border-right-style: solid;
    border-right-width: var(--border-width);
  }

  .md-border-bottom {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width);
  }

  .md-border-left {
    border-left-style: solid;
    border-left-width: var(--border-width);
  }

  .md-border-none { border: 0 }
  .md-border-top-none { border-top: 0 }
  .md-border-right-none { border-right: 0 }
  .md-border-bottom-none { border-bottom: 0 }
  .md-border-left-none { border-left: 0 }

  .md-rounded { border-radius: var(--border-radius) }
  .md-circle  { border-radius: 50% }

  .md-rounded-top    { border-radius: var(--border-radius) var(--border-radius) 0 0 }
  .md-rounded-right  { border-radius: 0 var(--border-radius) var(--border-radius) 0 }
  .md-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) }
  .md-rounded-left   { border-radius: var(--border-radius) 0 0 var(--border-radius) }

  .md-not-rounded { border-radius: 0 }
}


================================================
FILE: modules/responsive-border/lib/sm-border.css
================================================
@media (--breakpoint-sm) {
  .sm-border {
    border-style: solid;
    border-width: var(--border-width);
  }

  .sm-border-top {
    border-top-style: solid;
    border-top-width: var(--border-width);
  }

  .sm-border-right {
    border-right-style: solid;
    border-right-width: var(--border-width);
  }

  .sm-border-bottom {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width);
  }

  .sm-border-left {
    border-left-style: solid;
    border-left-width: var(--border-width);
  }

  .sm-border-none { border: 0 }
  .sm-border-top-none { border-top: 0 }
  .sm-border-right-none { border-right: 0 }
  .sm-border-bottom-none { border-bottom: 0 }
  .sm-border-left-none { border-left: 0 }

  .sm-rounded { border-radius: var(--border-radius) }
  .sm-circle  { border-radius: 50% }

  .sm-rounded-top    { border-radius: var(--border-radius) var(--border-radius) 0 0 }
  .sm-rounded-right  { border-radius: 0 var(--border-radius) var(--border-radius) 0 }
  .sm-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) }
  .sm-rounded-left   { border-radius: var(--border-radius) 0 0 var(--border-radius) }

  .sm-not-rounded { border-radius: 0 }
}


================================================
FILE: modules/responsive-border/package.json
================================================
{
  "name": "basscss-responsive-border",
  "version": "1.1.1",
  "description": "Responsive border styles module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-border.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "postcss-cli": "^2.5.2",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.1",
    "postcss-import": "^8.1.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/accell/basscss-responsive-border.git"
  },
  "keywords": [
    "basscss",
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic"
  ],
  "author": "Eric Colón",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/accell/basscss-responsive-border/issues"
  },
  "homepage": "https://github.com/accell/basscss-responsive-border"
}


================================================
FILE: modules/responsive-layout/.gitignore
================================================

css


================================================
FILE: modules/responsive-layout/.npmignore
================================================


================================================
FILE: modules/responsive-layout/README.md
================================================
# Basscss Responsive Layout

Responsive layout utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>



================================================
FILE: modules/responsive-layout/index.css
================================================
/* Basscss Responsive Layout */

@import "./lib/sm-layout";
@import "./lib/md-layout";
@import "./lib/lg-layout";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --width-1: 24rem;
  --width-2: 32rem;
  --width-3: 48rem;
  --width-4: 64rem;
}



================================================
FILE: modules/responsive-layout/lib/lg-layout.css
================================================

@media (--breakpoint-lg) {

  .lg-inline       { display: inline }
  .lg-block        { display: block }
  .lg-inline-block { display: inline-block }
  .lg-table        { display: table }
  .lg-table-cell   { display: table-cell }

  .lg-overflow-hidden { overflow: hidden }
  .lg-overflow-scroll { overflow: scroll }
  .lg-overflow-auto   { overflow: auto }

  .lg-left  { float: left }
  .lg-right { float: right }

}



================================================
FILE: modules/responsive-layout/lib/md-layout.css
================================================

@media (--breakpoint-md) {

  .md-inline       { display: inline }
  .md-block        { display: block }
  .md-inline-block { display: inline-block }
  .md-table        { display: table }
  .md-table-cell   { display: table-cell }

  .md-overflow-hidden { overflow: hidden }
  .md-overflow-scroll { overflow: scroll }
  .md-overflow-auto   { overflow: auto }

  .md-left  { float: left }
  .md-right { float: right }

}



================================================
FILE: modules/responsive-layout/lib/sm-layout.css
================================================

@media (--breakpoint-sm) {

  .sm-inline       { display: inline }
  .sm-block        { display: block }
  .sm-inline-block { display: inline-block }
  .sm-table        { display: table }
  .sm-table-cell   { display: table-cell }

  .sm-overflow-hidden { overflow: hidden }
  .sm-overflow-scroll { overflow: scroll }
  .sm-overflow-auto   { overflow: auto }

  .sm-left  { float: left }
  .sm-right { float: right }

}



================================================
FILE: modules/responsive-layout/package.json
================================================
{
  "name": "basscss-responsive-layout",
  "version": "1.0.1",
  "description": "Responsive layout utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-layout.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-margin/.gitignore
================================================

css


================================================
FILE: modules/responsive-margin/.npmignore
================================================


================================================
FILE: modules/responsive-margin/README.md
================================================
# Basscss Responsive Margin

Responsive margin utilities module for Basscss - http://basscss.com

Margin utilities are based on a global white space scale defined with variables.
These utilities use a shorthand naming convention.

## Naming Convention

<div class="overflow-scroll">
  <table class="mb2 bg-darken-1 rounded table-light">
    <thead class="bg-darken-1">
      <tr> <th>Shorthand</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>m</td> <td>Margin</td> </tr>
      <tr> <td>p</td> <td>Padding</td> </tr>
      <tr> <td>t</td> <td>Top</td> </tr>
      <tr> <td>r</td> <td>Right</td> </tr>
      <tr> <td>b</td> <td>Bottom</td> </tr>
      <tr> <td>l</td> <td>Left</td> </tr>
      <tr> <td>x</td> <td>X-axis (left and right)</td> </tr>
      <tr> <td>y</td> <td>Y-axis (top and bottom)</td> </tr>
      <tr> <td>n</td> <td>Negative</td> </tr>
      <tr> <td>1</td> <td>--space-1 (default .5rem)</td> </tr>
      <tr> <td>2</td> <td>--space-2 (default 1rem)</td> </tr>
      <tr> <td>3</td> <td>--space-3 (default 2rem)</td> </tr>
      <tr> <td>4</td> <td>--space-4 (default 4rem)</td> </tr>
    </tbody>
  </table>
</div>

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>

Change or reset default margins using the global white space scale.
Negative x-axis margins are used to offset padding.
Margin auto is used to horizontally center block-level elements with a set width.

## Larger margins at wider breakpoints

```html
<div class="m1 sm-m2 md-m3 lg-m4">Hamburger</div>
```

## Larger grid gutters at wider breakpoints

When combined with basscss-grid and basscss-responsive-padding, grid gutters can be changed at different breakpoints.

```html
<div class="clearfix mxn2 md-mxn3">
  <div class="col col-6 px2 md-px3">Column</div>
  <div class="col col-6 px2 md-px3">Column</div>
</div>
```



================================================
FILE: modules/responsive-margin/index.css
================================================
/* Basscss Responsive Margin */

@import "./lib/sm-margin";
@import "./lib/md-margin";
@import "./lib/lg-margin";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}



================================================
FILE: modules/responsive-margin/lib/lg-margin.css
================================================

@media (--breakpoint-lg) {

  .lg-m0  { margin:        0 }
  .lg-mt0 { margin-top:    0 }
  .lg-mr0 { margin-right:  0 }
  .lg-mb0 { margin-bottom: 0 }
  .lg-ml0 { margin-left:   0 }
  .lg-mx0 { margin-left:   0; margin-right:  0 }
  .lg-my0 { margin-top:    0; margin-bottom: 0 }

  .lg-m1  { margin:        var(--space-1) }
  .lg-mt1 { margin-top:    var(--space-1) }
  .lg-mr1 { margin-right:  var(--space-1) }
  .lg-mb1 { margin-bottom: var(--space-1) }
  .lg-ml1 { margin-left:   var(--space-1) }
  .lg-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }
  .lg-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }

  .lg-m2  { margin:        var(--space-2) }
  .lg-mt2 { margin-top:    var(--space-2) }
  .lg-mr2 { margin-right:  var(--space-2) }
  .lg-mb2 { margin-bottom: var(--space-2) }
  .lg-ml2 { margin-left:   var(--space-2) }
  .lg-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }
  .lg-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }

  .lg-m3  { margin:        var(--space-3) }
  .lg-mt3 { margin-top:    var(--space-3) }
  .lg-mr3 { margin-right:  var(--space-3) }
  .lg-mb3 { margin-bottom: var(--space-3) }
  .lg-ml3 { margin-left:   var(--space-3) }
  .lg-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }
  .lg-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }

  .lg-m4  { margin:        var(--space-4) }
  .lg-mt4 { margin-top:    var(--space-4) }
  .lg-mr4 { margin-right:  var(--space-4) }
  .lg-mb4 { margin-bottom: var(--space-4) }
  .lg-ml4 { margin-left:   var(--space-4) }
  .lg-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }
  .lg-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }

  .lg-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
  .lg-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
  .lg-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
  .lg-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }

  .lg-ml-auto { margin-left:  auto }
  .lg-mr-auto { margin-right: auto }
  .lg-mx-auto { margin-left: auto; margin-right: auto; }

}



================================================
FILE: modules/responsive-margin/lib/md-margin.css
================================================

@media (--breakpoint-md) {

  .md-m0  { margin:        0 }
  .md-mt0 { margin-top:    0 }
  .md-mr0 { margin-right:  0 }
  .md-mb0 { margin-bottom: 0 }
  .md-ml0 { margin-left:   0 }
  .md-mx0 { margin-left:   0; margin-right:  0 }
  .md-my0 { margin-top:    0; margin-bottom: 0 }

  .md-m1  { margin:        var(--space-1) }
  .md-mt1 { margin-top:    var(--space-1) }
  .md-mr1 { margin-right:  var(--space-1) }
  .md-mb1 { margin-bottom: var(--space-1) }
  .md-ml1 { margin-left:   var(--space-1) }
  .md-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }
  .md-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }

  .md-m2  { margin:        var(--space-2) }
  .md-mt2 { margin-top:    var(--space-2) }
  .md-mr2 { margin-right:  var(--space-2) }
  .md-mb2 { margin-bottom: var(--space-2) }
  .md-ml2 { margin-left:   var(--space-2) }
  .md-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }
  .md-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }

  .md-m3  { margin:        var(--space-3) }
  .md-mt3 { margin-top:    var(--space-3) }
  .md-mr3 { margin-right:  var(--space-3) }
  .md-mb3 { margin-bottom: var(--space-3) }
  .md-ml3 { margin-left:   var(--space-3) }
  .md-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }
  .md-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }

  .md-m4  { margin:        var(--space-4) }
  .md-mt4 { margin-top:    var(--space-4) }
  .md-mr4 { margin-right:  var(--space-4) }
  .md-mb4 { margin-bottom: var(--space-4) }
  .md-ml4 { margin-left:   var(--space-4) }
  .md-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }
  .md-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }

  .md-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
  .md-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
  .md-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
  .md-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }

  .md-ml-auto { margin-left:  auto }
  .md-mr-auto { margin-right: auto }
  .md-mx-auto { margin-left: auto; margin-right: auto; }

}



================================================
FILE: modules/responsive-margin/lib/sm-margin.css
================================================

@media (--breakpoint-sm) {

  .sm-m0  { margin:        0 }
  .sm-mt0 { margin-top:    0 }
  .sm-mr0 { margin-right:  0 }
  .sm-mb0 { margin-bottom: 0 }
  .sm-ml0 { margin-left:   0 }
  .sm-mx0 { margin-left:   0; margin-right:  0 }
  .sm-my0 { margin-top:    0; margin-bottom: 0 }

  .sm-m1  { margin:        var(--space-1) }
  .sm-mt1 { margin-top:    var(--space-1) }
  .sm-mr1 { margin-right:  var(--space-1) }
  .sm-mb1 { margin-bottom: var(--space-1) }
  .sm-ml1 { margin-left:   var(--space-1) }
  .sm-mx1 { margin-left:   var(--space-1); margin-right:  var(--space-1) }
  .sm-my1 { margin-top:    var(--space-1); margin-bottom: var(--space-1) }

  .sm-m2  { margin:        var(--space-2) }
  .sm-mt2 { margin-top:    var(--space-2) }
  .sm-mr2 { margin-right:  var(--space-2) }
  .sm-mb2 { margin-bottom: var(--space-2) }
  .sm-ml2 { margin-left:   var(--space-2) }
  .sm-mx2 { margin-left:   var(--space-2); margin-right:  var(--space-2) }
  .sm-my2 { margin-top:    var(--space-2); margin-bottom: var(--space-2) }

  .sm-m3  { margin:        var(--space-3) }
  .sm-mt3 { margin-top:    var(--space-3) }
  .sm-mr3 { margin-right:  var(--space-3) }
  .sm-mb3 { margin-bottom: var(--space-3) }
  .sm-ml3 { margin-left:   var(--space-3) }
  .sm-mx3 { margin-left:   var(--space-3); margin-right:  var(--space-3) }
  .sm-my3 { margin-top:    var(--space-3); margin-bottom: var(--space-3) }

  .sm-m4  { margin:        var(--space-4) }
  .sm-mt4 { margin-top:    var(--space-4) }
  .sm-mr4 { margin-right:  var(--space-4) }
  .sm-mb4 { margin-bottom: var(--space-4) }
  .sm-ml4 { margin-left:   var(--space-4) }
  .sm-mx4 { margin-left:   var(--space-4); margin-right:  var(--space-4) }
  .sm-my4 { margin-top:    var(--space-4); margin-bottom: var(--space-4) }

  .sm-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1) }
  .sm-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1) }
  .sm-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1) }
  .sm-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1) }

  .sm-ml-auto { margin-left:  auto }
  .sm-mr-auto { margin-right: auto }
  .sm-mx-auto { margin-left:  auto; margin-right: auto }

}



================================================
FILE: modules/responsive-margin/package.json
================================================
{
  "name": "basscss-responsive-margin",
  "version": "1.1.0",
  "description": "Responsive margin utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-margin.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-padding/.gitignore
================================================

css


================================================
FILE: modules/responsive-padding/.npmignore
================================================


================================================
FILE: modules/responsive-padding/README.md
================================================
# Basscss Responsive Padding

Responsive padding utilities module for Basscss - http://basscss.com

Padding utilities are based on a global white space scale defined with variables.
These utilities use a shorthand naming convention.

## Naming Convention

<div class="overflow-scroll">
  <table class="mb2 bg-darken-1 rounded table-light">
    <thead class="bg-darken-1">
      <tr> <th>Shorthand</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>m</td> <td>Margin</td> </tr>
      <tr> <td>p</td> <td>Padding</td> </tr>
      <tr> <td>t</td> <td>Top</td> </tr>
      <tr> <td>r</td> <td>Right</td> </tr>
      <tr> <td>b</td> <td>Bottom</td> </tr>
      <tr> <td>l</td> <td>Left</td> </tr>
      <tr> <td>x</td> <td>X-axis (left and right)</td> </tr>
      <tr> <td>y</td> <td>Y-axis (top and bottom)</td> </tr>
      <tr> <td>1</td> <td>--space-1 (default .5rem)</td> </tr>
      <tr> <td>2</td> <td>--space-2 (default 1rem)</td> </tr>
      <tr> <td>3</td> <td>--space-3 (default 2rem)</td> </tr>
      <tr> <td>4</td> <td>--space-4 (default 4rem)</td> </tr>
    </tbody>
  </table>
</div>

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>

Change or reset default padding using the global white space scale.

## Larger padding at wider breakpoints

```html
<div class="p1 sm-p2 md-p3 lg-p4">Hamburger</div>
```



================================================
FILE: modules/responsive-padding/index.css
================================================
/* Basscss Responsive Padding */

@import "./lib/sm-padding";
@import "./lib/md-padding";
@import "./lib/lg-padding";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}



================================================
FILE: modules/responsive-padding/lib/lg-padding.css
================================================

@media (--breakpoint-lg) {

  .lg-p0  { padding:        0 }
  .lg-pt0 { padding-top:    0 }
  .lg-pr0 { padding-right:  0 }
  .lg-pb0 { padding-bottom: 0 }
  .lg-pl0 { padding-left:   0 }
  .lg-px0 { padding-left:   0; padding-right:  0 }
  .lg-py0 { padding-top:    0; padding-bottom: 0 }

  .lg-p1  { padding:        var(--space-1) }
  .lg-pt1 { padding-top:    var(--space-1) }
  .lg-pr1 { padding-right:  var(--space-1) }
  .lg-pb1 { padding-bottom: var(--space-1) }
  .lg-pl1 { padding-left:   var(--space-1) }
  .lg-px1 { padding-left:   var(--space-1); padding-right:  var(--space-1) }
  .lg-py1 { padding-top:    var(--space-1); padding-bottom: var(--space-1) }

  .lg-p2  { padding:        var(--space-2) }
  .lg-pt2 { padding-top:    var(--space-2) }
  .lg-pr2 { padding-right:  var(--space-2) }
  .lg-pb2 { padding-bottom: var(--space-2) }
  .lg-pl2 { padding-left:   var(--space-2) }
  .lg-px2 { padding-left:   var(--space-2); padding-right:  var(--space-2) }
  .lg-py2 { padding-top:    var(--space-2); padding-bottom: var(--space-2) }

  .lg-p3  { padding:        var(--space-3) }
  .lg-pt3 { padding-top:    var(--space-3) }
  .lg-pr3 { padding-right:  var(--space-3) }
  .lg-pb3 { padding-bottom: var(--space-3) }
  .lg-pl3 { padding-left:   var(--space-3) }
  .lg-px3 { padding-left:   var(--space-3); padding-right:  var(--space-3) }
  .lg-py3 { padding-top:    var(--space-3); padding-bottom: var(--space-3) }

  .lg-p4  { padding:        var(--space-4) }
  .lg-pt4 { padding-top:    var(--space-4) }
  .lg-pr4 { padding-right:  var(--space-4) }
  .lg-pb4 { padding-bottom: var(--space-4) }
  .lg-pl4 { padding-left:   var(--space-4) }
  .lg-px4 { padding-left:   var(--space-4); padding-right:  var(--space-4) }
  .lg-py4 { padding-top:    var(--space-4); padding-bottom: var(--space-4) }

}



================================================
FILE: modules/responsive-padding/lib/md-padding.css
================================================

@media (--breakpoint-md) {

  .md-p0  { padding:        0 }
  .md-pt0 { padding-top:    0 }
  .md-pr0 { padding-right:  0 }
  .md-pb0 { padding-bottom: 0 }
  .md-pl0 { padding-left:   0 }
  .md-px0 { padding-left:   0; padding-right:  0 }
  .md-py0 { padding-top:    0; padding-bottom: 0 }

  .md-p1  { padding:        var(--space-1) }
  .md-pt1 { padding-top:    var(--space-1) }
  .md-pr1 { padding-right:  var(--space-1) }
  .md-pb1 { padding-bottom: var(--space-1) }
  .md-pl1 { padding-left:   var(--space-1) }
  .md-px1 { padding-left:   var(--space-1); padding-right:  var(--space-1) }
  .md-py1 { padding-top:    var(--space-1); padding-bottom: var(--space-1) }

  .md-p2  { padding:        var(--space-2) }
  .md-pt2 { padding-top:    var(--space-2) }
  .md-pr2 { padding-right:  var(--space-2) }
  .md-pb2 { padding-bottom: var(--space-2) }
  .md-pl2 { padding-left:   var(--space-2) }
  .md-px2 { padding-left:   var(--space-2); padding-right:  var(--space-2) }
  .md-py2 { padding-top:    var(--space-2); padding-bottom: var(--space-2) }

  .md-p3  { padding:        var(--space-3) }
  .md-pt3 { padding-top:    var(--space-3) }
  .md-pr3 { padding-right:  var(--space-3) }
  .md-pb3 { padding-bottom: var(--space-3) }
  .md-pl3 { padding-left:   var(--space-3) }
  .md-px3 { padding-left:   var(--space-3); padding-right:  var(--space-3) }
  .md-py3 { padding-top:    var(--space-3); padding-bottom: var(--space-3) }

  .md-p4  { padding:        var(--space-4) }
  .md-pt4 { padding-top:    var(--space-4) }
  .md-pr4 { padding-right:  var(--space-4) }
  .md-pb4 { padding-bottom: var(--space-4) }
  .md-pl4 { padding-left:   var(--space-4) }
  .md-px4 { padding-left:   var(--space-4); padding-right:  var(--space-4) }
  .md-py4 { padding-top:    var(--space-4); padding-bottom: var(--space-4) }

}



================================================
FILE: modules/responsive-padding/lib/sm-padding.css
================================================

@media (--breakpoint-sm) {

  .sm-p0  { padding:        0 }
  .sm-pt0 { padding-top:    0 }
  .sm-pr0 { padding-right:  0 }
  .sm-pb0 { padding-bottom: 0 }
  .sm-pl0 { padding-left:   0 }
  .sm-px0 { padding-left:   0; padding-right:  0 }
  .sm-py0 { padding-top:    0; padding-bottom: 0 }

  .sm-p1  { padding:        var(--space-1) }
  .sm-pt1 { padding-top:    var(--space-1) }
  .sm-pr1 { padding-right:  var(--space-1) }
  .sm-pb1 { padding-bottom: var(--space-1) }
  .sm-pl1 { padding-left:   var(--space-1) }
  .sm-px1 { padding-left:   var(--space-1); padding-right:  var(--space-1) }
  .sm-py1 { padding-top:    var(--space-1); padding-bottom: var(--space-1) }

  .sm-p2  { padding:        var(--space-2) }
  .sm-pt2 { padding-top:    var(--space-2) }
  .sm-pr2 { padding-right:  var(--space-2) }
  .sm-pb2 { padding-bottom: var(--space-2) }
  .sm-pl2 { padding-left:   var(--space-2) }
  .sm-px2 { padding-left:   var(--space-2); padding-right:  var(--space-2) }
  .sm-py2 { padding-top:    var(--space-2); padding-bottom: var(--space-2) }

  .sm-p3  { padding:        var(--space-3) }
  .sm-pt3 { padding-top:    var(--space-3) }
  .sm-pr3 { padding-right:  var(--space-3) }
  .sm-pb3 { padding-bottom: var(--space-3) }
  .sm-pl3 { padding-left:   var(--space-3) }
  .sm-px3 { padding-left:   var(--space-3); padding-right:  var(--space-3) }
  .sm-py3 { padding-top:    var(--space-3); padding-bottom: var(--space-3) }

  .sm-p4  { padding:        var(--space-4) }
  .sm-pt4 { padding-top:    var(--space-4) }
  .sm-pr4 { padding-right:  var(--space-4) }
  .sm-pb4 { padding-bottom: var(--space-4) }
  .sm-pl4 { padding-left:   var(--space-4) }
  .sm-px4 { padding-left:   var(--space-4); padding-right:  var(--space-4) }
  .sm-py4 { padding-top:    var(--space-4); padding-bottom: var(--space-4) }

}



================================================
FILE: modules/responsive-padding/package.json
================================================
{
  "name": "basscss-responsive-padding",
  "version": "1.1.0",
  "description": "Responsive padding utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-padding.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-position/.gitignore
================================================

css


================================================
FILE: modules/responsive-position/.npmignore
================================================


================================================
FILE: modules/responsive-position/README.md
================================================
# Basscss Responsive Position

Responsive position utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>



================================================
FILE: modules/responsive-position/index.css
================================================
/* Basscss Responsive Position */

@import "./lib/sm-position";
@import "./lib/md-position";
@import "./lib/lg-position";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);



================================================
FILE: modules/responsive-position/lib/lg-position.css
================================================

@media (--breakpoint-lg) {
  .lg-relative { position: relative }
  .lg-absolute { position: absolute }
  .lg-fixed    { position: fixed }

  .lg-top-0    { top: 0 }
  .lg-right-0  { right: 0 }
  .lg-bottom-0 { bottom: 0 }
  .lg-left-0   { left: 0 }
  
  .lg-static   { position: static }
}


================================================
FILE: modules/responsive-position/lib/md-position.css
================================================

@media (--breakpoint-md) {
  .md-relative { position: relative }
  .md-absolute { position: absolute }
  .md-fixed    { position: fixed }

  .md-top-0    { top: 0 }
  .md-right-0  { right: 0 }
  .md-bottom-0 { bottom: 0 }
  .md-left-0   { left: 0 }
  
  .md-static   { position: static }
}


================================================
FILE: modules/responsive-position/lib/sm-position.css
================================================

@media (--breakpoint-sm) {
  .sm-relative { position: relative }
  .sm-absolute { position: absolute }
  .sm-fixed    { position: fixed }

  .sm-top-0    { top: 0 }
  .sm-right-0  { right: 0 }
  .sm-bottom-0 { bottom: 0 }
  .sm-left-0   { left: 0 }
  
  .sm-static   { position: static }
}


================================================
FILE: modules/responsive-position/package.json
================================================
{
  "name": "basscss-responsive-position",
  "version": "1.0.0",
  "description": "Responsive position utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-position.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-type-scale/.gitignore
================================================

css


================================================
FILE: modules/responsive-type-scale/.npmignore
================================================


================================================
FILE: modules/responsive-type-scale/README.md
================================================

# Basscss Responsive Type Scale

Responsive type scale utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>



================================================
FILE: modules/responsive-type-scale/index.css
================================================
/* Basscss Responsive Type Scale */

@import "./lib/sm-type-scale";
@import "./lib/md-type-scale";
@import "./lib/lg-type-scale";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --h00: 4rem;
  --h0: 3rem;
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
}



================================================
FILE: modules/responsive-type-scale/lib/lg-type-scale.css
================================================

@media (--breakpoint-lg) {
  .lg-h00 { font-size: var(--h00) }
  .lg-h0 { font-size: var(--h0) }
  .lg-h1 { font-size: var(--h1) }
  .lg-h2 { font-size: var(--h2) }
  .lg-h3 { font-size: var(--h3) }
  .lg-h4 { font-size: var(--h4) }
  .lg-h5 { font-size: var(--h5) }
  .lg-h6 { font-size: var(--h6) }
}



================================================
FILE: modules/responsive-type-scale/lib/md-type-scale.css
================================================

@media (--breakpoint-md) {
  .md-h00 { font-size: var(--h00) }
  .md-h0 { font-size: var(--h0) }
  .md-h1 { font-size: var(--h1) }
  .md-h2 { font-size: var(--h2) }
  .md-h3 { font-size: var(--h3) }
  .md-h4 { font-size: var(--h4) }
  .md-h5 { font-size: var(--h5) }
  .md-h6 { font-size: var(--h6) }
}



================================================
FILE: modules/responsive-type-scale/lib/sm-type-scale.css
================================================

@media (--breakpoint-sm) {
  .sm-h00 { font-size: var(--h00) }
  .sm-h0 { font-size: var(--h0) }
  .sm-h1 { font-size: var(--h1) }
  .sm-h2 { font-size: var(--h2) }
  .sm-h3 { font-size: var(--h3) }
  .sm-h4 { font-size: var(--h4) }
  .sm-h5 { font-size: var(--h5) }
  .sm-h6 { font-size: var(--h6) }
}



================================================
FILE: modules/responsive-type-scale/package.json
================================================
{
  "name": "basscss-responsive-type-scale",
  "version": "1.0.1",
  "description": "Responsive type scale utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-type-scale.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: modules/responsive-typography/README.md
================================================
# Basscss Responsive Typography

Responsive typography utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
  <table class="mb2 table-light overflow-hidden border rounded">
    <thead class="bg-darken-1">
      <tr> <th>Prefix</th> <th>Description</th> </tr>
    </thead>
    <tbody>
      <tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
      <tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
      <tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
      <tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
    </tbody>
  </table>
</div>



================================================
FILE: modules/responsive-typography/css/responsive-typography.css
================================================
/* Basscss Responsive Typography */

@media (min-width: 40em) {
  .sm-left-align   { text-align: left }
  .sm-center       { text-align: center }
  .sm-right-align  { text-align: right }
  .sm-justify      { text-align: justify }
}

@media (min-width: 52em) {
  .md-left-align   { text-align: left }
  .md-center       { text-align: center }
  .md-right-align  { text-align: right }
  .md-justify      { text-align: justify }
}

@media (min-width: 64em) {
  .lg-left-align   { text-align: left }
  .lg-center       { text-align: center }
  .lg-right-align  { text-align: right }
  .lg-justify      { text-align: justify }
}




================================================
FILE: modules/responsive-typography/index.css
================================================
/* Basscss Responsive Typography */

@import "./lib/sm-typography";
@import "./lib/md-typography";
@import "./lib/lg-typography";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);




================================================
FILE: modules/responsive-typography/lib/lg-typography.css
================================================

@media (--breakpoint-lg) {
  .lg-left-align   { text-align: left }
  .lg-center       { text-align: center }
  .lg-right-align  { text-align: right }
  .lg-justify      { text-align: justify }
}


================================================
FILE: modules/responsive-typography/lib/md-typography.css
================================================

@media (--breakpoint-md) {
  .md-left-align   { text-align: left }
  .md-center       { text-align: center }
  .md-right-align  { text-align: right }
  .md-justify      { text-align: justify }
}


================================================
FILE: modules/responsive-typography/lib/sm-typography.css
================================================

@media (--breakpoint-sm) {
  .sm-left-align   { text-align: left }
  .sm-center       { text-align: center }
  .sm-right-align  { text-align: right }
  .sm-justify      { text-align: justify }
}


================================================
FILE: modules/responsive-typography/package.json
================================================
{
  "name": "basscss-responsive-typography",
  "version": "1.0.1",
  "description": "Responsive typography utilities module for Basscss",
  "scripts": {
    "prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-typography.css"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss-cli": "^2.5.0",
    "postcss-custom-media": "^5.0.1",
    "postcss-custom-properties": "^5.0.0",
    "postcss-import": "^8.0.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/basscss/addons.git"
  },
  "keywords": [
    "css",
    "oocss",
    "fcss",
    "functional-css",
    "atomic",
    "basscss"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/basscss/addons/issues"
  },
  "homepage": "https://github.com/basscss/addons"
}


================================================
FILE: package.json
================================================
{
  "name": "basscss-addons",
  "version": "1.1.0",
  "description": "Optional modules to extend Basscss",
  "keywords": [
    "basscss",
    "functional-css",
    "atomic",
    "oocss",
    "utility"
  ],
  "author": "Brent Jackson",
  "license": "MIT",
  "dependencies": {
    "colors.css": "^3.0.0"
  }
}