Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyleoliveiro
kyleoliveiro committed Dec 5, 2016
1 parent 915036b commit a75c8b4
Showing 1 changed file with 45 additions and 45 deletions.
90 changes: 45 additions & 45 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ Scarab is a Sass utility framework designed for rapid stylesheet development.
* [Installation](#installation)
* [Configuration](#configuration)
* [Features](#features)
* [No style declarations](#no-style-declarations)
* [Variable management](#variable-management)
* [Responsive property declarations](#responsive-property-declarations)
* [Responsive typography](#responsive-typography)
* [Helper mixins](#helper-mixins)
* [Development utilities](#development-utilities)
* [No style declarations](#no-style-declarations)
* [Variable management](#variable-management)
* [Responsive property declarations](#responsive-property-declarations)
* [Responsive typography](#responsive-typography)
* [Helper mixins](#helper-mixins)
* [Development utilities](#development-utilities)
* [Documentation](#documentation)
* [Resources](#resources)

Expand All @@ -24,7 +24,7 @@ To get started, add Scarab as a dev-dependency in your project via npm:
npm install scarab-scss --save-dev
```

Import `scarab.scss` at the beginning of your stylesheet:
Import `scarab-scss` at the beginning of your stylesheet:
```scss
@import 'path/to/node_modules/scarab-scss/_';
```
Expand All @@ -37,7 +37,7 @@ Scarab relies on the `$SCARAB` global variable for most of its functions and mix
**To configure variables in your stylesheet, use the [`set()`](scss/lib/set.scss) mixin:**

```scss
// @function set( $defnition )
// @function set( $definition )
//
// Set a new value for a key in the $SCARAB configuration map
//
Expand All @@ -51,9 +51,9 @@ Scarab relies on the `$SCARAB` global variable for most of its functions and mix
// Example:
// Configure stylesheet breakpoints
@include set( breakpoints, (
small: 600px,
medium: 900px,
large: 1300px
small: 600px,
medium: 900px,
large: 1300px
) );

// Replace the existing value of the 'medium' breakpoint
Expand All @@ -63,14 +63,14 @@ Scarab relies on the `$SCARAB` global variable for most of its functions and mix
@include set( breakpoints, huge, 1600px );
```

For more examples of configuration, have a look at how Scarab's default configuration is defined in [`scss/config/`](scss/config/).
For more examples of configuration, have a look at how [`scarab-carapace`](https://github.com/watchtowerdigital/carapace/scss/config/) defines its configuration.

## Features

### No style declarations
Scarab is a utility framework, not a UI library. Therefore simply including the framework outputs zero CSS.

If you are looking for a barebones UI framework as a starting point for your project, check out [Carapace](https://github.com/watchtowerdigital/carapace.git).
If you are looking for a barebones UI framework as a starting point for your project, check out [`scarab-carapace`](https://github.com/watchtowerdigital/carapace.git).

### Variable management
Easily access and manage your global stylesheet configuration with the `set()`mixin, and [getter functions](scss/getters/) like `get()`, `palette()`, `typeface()`, and more.
Expand All @@ -82,36 +82,36 @@ Declare responsive properties with the [`responsive()`](scss/helpers/responsive.
// Example

.button {
@include responsive(( padding-left, padding-right ), (
base: 14px,
medium: 18px,
large: 22px
));
@include responsive(( padding-left, padding-right ), (
base: 14px,
medium: 18px,
large: 22px
));
}
```

```scss
// Output

.button {
padding-left: 14px;
padding-right: 14px;
padding-left: 14px;
padding-right: 14px;
}

// 'medium' breakpoint
@media (min-width: 1024px) {
.button {
padding-left: 18px;
padding-right: 18px;
}
.button {
padding-left: 18px;
padding-right: 18px;
}
}

// 'large' breakpoint
@media (min-width: 1300px) {
.button {
padding-left: 22px;
padding-right: 22px;
}
.button {
padding-left: 22px;
padding-right: 22px;
}
}
```

Expand All @@ -124,48 +124,48 @@ Use the [`type-scale()`](scss/helpers/type-scale.scss) mixin to generate typogra
// config/type-scale.scss
//
// @include set( type-scale, subheading, (
// base: ( font-size: 0.8rem, line-height: 1.3 ),
// small: ( font-size: 1rem, line-height: 1.4 ),
// huge: ( font-size: 1.2rem, line-height: 1.5 )
// base: ( font-size: 0.8rem, line-height: 1.3 ),
// small: ( font-size: 1rem, line-height: 1.4 ),
// huge: ( font-size: 1.2rem, line-height: 1.5 )
// ) );

.subheading, h2 {
@include type-scale( subheading );
@include type-scale( subheading );
}
```
```scss
// Output

.subheading, h2 {
font-size: 0.8rem;
line-height: 1.3;
font-size: 0.8rem;
line-height: 1.3;
}

// 'small' breakpoint
@media (min-width: 600px) {
.subheading, h2 {
font-size: 1rem;
line-height: 1.4;
}
.subheading, h2 {
font-size: 1rem;
line-height: 1.4;
}
}

// 'huge' breakpoint
@media (min-width: 1600px) {
.subheading, h2 {
font-size: 1.2rem;
line-height: 1.5;
}
.subheading, h2 {
font-size: 1.2rem;
line-height: 1.5;
}
}
```

### Helper mixins
Scarab also provides a bunch of other [helper mixins](scss/helpers/) like [`transitions()`](scss/helpers/transitions.scss) and [`query()`](scss/helpers/query.scss). More are planned in the future.
Scarab also provides a bunch of other [helper mixins](scss/helpers/) like [`transitions()`](scss/helpers/transitions.scss) and [`query()`](scss/helpers/query.scss), to name a few.

### Development utilities
Included are the [`baseline-grid()`](scss/utilities/baseline-grid.scss) and [`element-overlay()`](scss/utilities/element-overlay.scss) mixins, which overlay visual guides on top of the DOM. These help with achieving a consistent vertical rythmn.
Included are the [`baseline-grid()`](scss/utilities/baseline-grid.scss) and [`element-overlay()`](scss/utilities/element-overlay.scss) mixins, which overlay visual guides on top of the DOM. These help when trying to achieve a consistent vertical rythmn.

## Documentation
Documentation is under development and is available in [`docs/`](/docs/).
Documentation is available in [`docs/`](docs/).

## Resources
* [**Scarab snippets**](https://github.com/watchtowerdigital/scarab-snippets.git) — Sublime Text snippets for the Scarab Sass utility framework
Expand Down

0 comments on commit a75c8b4

Please sign in to comment.