# compass-boilerplate

> The foundation for clean, compass-based stylesheets, powered by Libsass.

Latest version **0.1.4** (published 2017-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install compass-boilerplate
pnpm add compass-boilerplate
yarn add compass-boilerplate
bun add compass-boilerplate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2017-02-01 |
| First published | 2015-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Duncan Walker |
| Maintainers | sir-dunxalot |
| Keywords | sass, scss, compass, boilerplate, css |

## Links

- npm: https://www.npmjs.com/package/compass-boilerplate
- Repository: https://github.com/sir-dunxalot/compass-boilerplate
- Homepage: https://github.com/sir-dunxalot/compass-boilerplate#readme
- Issues: https://github.com/sir-dunxalot/compass-boilerplate/issues
- npm.io page: https://npm.io/package/compass-boilerplate

## Dependencies (1)

- [compass-mixins](https://npm.io/package/compass-mixins.md) ^0.12.7

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2017-02-01
- 0.1.3 — 2017-01-11
- 0.1.2 — 2016-01-09
- 0.1.1 — 2015-10-11
- 0.1.0 — 2015-10-11

## README

Compass Boilerplate [![Build Status](https://travis-ci.org/sir-dunxalot/compass-boilerplate.svg?branch=master)](https://travis-ci.org/sir-dunxalot/compass-boilerplate)
======

The one-line-install foundation for clean, low-specificity, compass-based stylesheets, powered by [Libsass](https://github.com/sass/libsass). Supports [node-sass](https://github.com/sass/node-sass)).

- [Installation](#installation)
- [Example Usage](#example-usage)
- [Documentation - WIP](#documentation)
- [Downsides](#downsides)
- [Development](#development)

## Installation

```sh
npm install compass-mixins # Dependency
npm install compass-boilerplate
```

```scss
/* app.scss or other stylesheet */

@import 'compass-boilerplate-vendor/normalize'; // If you want it
@import 'compass-boilerplate-vendor/html5bp'; // If you want it
@import 'compass-boilerplate';
```

## Example Usage

```scss
@import 'compass-boilerplate';

@include block('button', $enableModifiers: true) {
  @include transform(translateY(2px)); // Access to Compass mixins
  @include rem(padding, 1); // Responsive sizing

  @include element('text', $enableModifiers: true) {
    @extend %inline-block; // Common placeholders

    @include modifier('italic') {
      font-style: italic;
    }
  }

  @include modifier('primary') {
    background-color: #628;
  }
}
```

Becomes:

```css
.button,
[class*='button__'] {
  -webkit-transform: -webkit-translateY(2px);
  -moz-transform: -moz-translateY(2px);
  transform: translateY(2px);
}

.button__primary {
  background-color: #628;
}

.button-text,
[class*='button-text__'] {
  -moz-display: inline-block;
  display: inline-block;
  vertical-align: middle;
}

.button-text__italic {
  font-style: italic;
}
```

## Documentation

- [BEM Methodology](#bem-methodology)
  - Blocks
  - Elements
  - Modifiers
- Namespacing
- Lists
- Media Queries
- Placeholders
- Strings
- Tables
- Third-party SASS tools
  - [Compass mixins](https://github.com/Igosuki/compass-mixins)
  - Normalize
  - HTML5BP
- Units and Layout
- Variables

### BEM Methodology

If you're not familiar with the BEM approach of organizing CSS selectors, then read his [CSS Tricks article](https://css-tricks.com/bem-101/).

### Mixin: Block

`@include block()` sets the context for any block styling. It automatically namespaces nested classes.

## Downsides

There are some downsides to using this package:

- Code becomes less searchable. You can't just search for `button__primary`, you have to find `primary` in `button`.
- ??

## Development

PRs are welcome! It's easy to work on this project:

```sh
git clone git@github.com:sir-dunxalot/compass-boilerplate.git
cd compass-boilerplate
npm install
```

Please work on a feature branch and issue a PR to `master` *without* a version bump.

To run the tests:

```
npm test
```

---
_Source: https://npm.io/package/compass-boilerplate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._