// SCSS
.margarita-salt { color: gray(40%); }
.olive          { color: gray(97%); }

// CSS
.margarita-salt { color: #666666; }
.olive          { color: #f7f7f7; }

// SCSS
.mint {
  color: #4183C4;
  @include hover { color: #333333; }
}

// CSS
.mint {
  color: #4183C4;
}
.mint:hover,
.mint:focus {
  color: #333333;
}

// SCSS
.cherry-jar-title {
  @include media-upto(500px)            { font-size: 14px; }
  @include media-between(500px, 900px)  { font-size: 18px; }
  @include media-from(900px)            { font-size: 22px; }
}

// Output
@media screen and (max-width: 499px) {
  .cherry-jar-title { font-size: 14px; }
}

@media screen and (min-width: 500px) and (max-width: 899px) {
  .cherry-jar-title { font-size: 18px; }
}

@media screen and (min-width: 900px) {
  .cherry-jar-title { font-size: 22px; }
}

// Make a 4 column grid with 3% gutters (horizontal and vertical)
.container {
  @include simple-grid(4);
}
// Make a 6 column grid with 5% gutters, floated to the left without vertical gutter
.container {
  @include simple-grid(6, 5%, left, false);
}
```

#### Side Margin, Side Padding, Centering

Short syntax mixins for either horizontal or vertical margin/padding, but not both.

* `padding-h($value)`
* `padding-v($value)`
* `margin-h($value)`
* `margin-v($value)`
* `centered`, i.e. `margin-h(auto)`

Example:

```scss
/* Using Garnish */
.box {
  @include padding-h(1em);
}

/* Alternative: two declarations */
.box {
  padding-left: 1em;
  padding-right: 1em;
}

/* Alternative: single declaration, but with vertical values */
.box {
  padding: 0 1em;
}
```

----

### Style

#### Border Sandwich

Helps to create top and bottom dividers on a series of elements of the same type.

```SCSS
// SCSS
.pineapple-wedges {
  @include border-sandwich(1px solid #F0AE3D);
}

// Set the $breadless to true to remove outer borders
.lemon-wedges {
  @include border-sandwich(1px solid #FCF54C, true);
}

//CSS
.pineapple-wedges                 { border-bottom:  1px solid #F0AE3D; }
.pineapple-wedges:first-of-type   { border-top:     1px solid #F0AE3D; }

.lemon-wedges:not(:first-of-type) { border-top:     1px solid #FCF54C; }
```

**Default Border Sandwich:**

\----------------------------  
  :pineapple: wedge  
\----------------------------  
  :pineapple: wedge  
\----------------------------  
  :pineapple: wedge  
\----------------------------  


**Breadless Border Sandwich:**

  :lemon: wedge  
\----------------------------  
  :lemon: wedge  
\----------------------------  
  :lemon: wedge  


**Browser Support:**
* Desktop: Chrome 1.0+, Firefox 3.5+, IE 9.0+, Opera 9.5+, Safari 3.2+  
* Mobile: Android 2.1+, Firefox Mobile 1.0+, IE Mobile 9.0+, Opera Mobile 10.0+, Safari Mobile 3.2+

----

### Typography

#### Weights

Keyword-based font-weight function. Based on Typekit’s most weight-rich typefaces.

```scss
// SCSS
strong {
  font-weight: weight(semibold);
}

// Output
strong {
  font-weight: 600;
}
```

Reference:

| Keyword             | Weight |
| ------------------- | ------ |
| `thin`              | 100    |
| `extralight`        | 200    |
| `light`             | 300    |
| `book` or `regular` | 400    |
| `medium`            | 500    |
| `semibold`          | 600    |
| `bold`              | 700    |
| `extrabold`         | 800    |
| `black`             | 900    |

#### Hyphenation

Add all the vendor prefixes for hyphenation easily. 

```scss
// SCSS
.cocktail-description { @include hyphenated; }
.cocktail-title-long { @include hyphenated(manual); }

// Output
.cocktail-description {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}
.cocktail-title-long {
  -webkit-hyphens: manual;
     -moz-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
}
```

## Development

### Guidelines

- Garnish **should be** library-agnostic, but it **should not** replicate Bourbon’s functionality.
- Garnish **should not** produce any output unless its functions and mixins are used.
- Garnish **should not** make style decisions or assumptions. Defaults are OK, but allow configuration.

### Contributing

Issues and pull requests are welcome.