Sass utility framework for rapid stylesheet development
CSS
Latest commit f5bd302 Sep 11, 2017 @kyleoliveiro kyleoliveiro 6.1.3
Permalink
Failed to load latest commit information.
docs Merge docs Sep 7, 2017
lib Merge docs Sep 7, 2017
.gitignore v6.0.0 May 12, 2017
.travis.yml
LICENSE initial commit Apr 8, 2016
README.md
package-lock.json 6.1.3 Sep 11, 2017
package.json 6.1.3 Sep 11, 2017
sache.json Add sache.json Sep 11, 2017
sassdoc.yaml Merge docs Sep 7, 2017
scarab.scss Add sassdoc and improve coding style Sep 6, 2017

README.md

scarab-scss

npm Build Status

Sass utility framework

Scarab is a Sass utility framework designed for rapid stylesheet development.

Table of contents

Installation

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 'path/to/node_modules/scarab-scss/scarab';

Documentation

https://watchtowerdigital.github.io/scarab

Documentation source is available in the docs/ folder.

Features

No style declarations

Scarab is a utility framework, not a UI library. Importing scarab-scss outputs zero CSS.

Stylesheet configuration

Importing scarab.scss creates a new global variable, $SCARAB in your Sass project. This is where your stylesheet configuration is stored.

To configure variables in your stylesheet, use the set() mixin:

/// Set a new value for a key in $SCARAB
///
/// @author Kyle Oliveiro
///
/// @access public
/// @group helpers
///
/// @require {variable} SCARAB
///
/// @param {arglist} $definition - Definition of the new value

/**
 *
 * set() takes an arglist, $definition as its parameters.
 * The last argument in $definition should be the value that you want to set.
 * Preceding that is a chain of keys in the $SCARAB variable where the value should be set.
 *
 */

// Example:
// Configure stylesheet breakpoints
@include set( breakpoints, (
    small:    600px,
    medium:   900px,
    large:    1300px
) );

// Replace the existing value of the 'medium' breakpoint
@include set( breakpoints, medium, 1024px );

// Define a new breakpoint, 'huge', and set its value to 1600px
@include set( breakpoints, huge, 1600px );

For more examples of configuration, have a look at the #configuration section in the docs.

Responsive property declarations

Declare responsive properties with the responsive() mixin. This allows you to easily manage the appearance of responsive components, and reduce media query clutter in your stylesheet.

// Example

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

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

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

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

Helper mixins

Scarab provides a bunch of helper mixins like type-scale() and query().

Development utilities

The baseline-grid() and element-overlay() mixins overlay visual guides over the DOM. These help when debugging layout and trying to achieve a consistent vertical rythmn.

Resources

  • scarab-carapace — Highly configurable framework for generating functional CSS classes
  • scarab-styleguide — Generate automatic styleguides from scarab-carapace configuration
  • scarab-cli — Command-Line Interface for the Scarab Sass ecosystem
  • scarab-snippets — Sublime Text snippets for the Scarab Sass utility framework