open-index/open-npm huggingface dataset:
npm package: @scalescss/base-blockquotes
Description: Base block quote styles for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Base Block Quotes for Scales

These are the base styles for block quotes.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/base-blockquotes`

## Usage

A nice semantic way to markup a blockquote is using the `figure` element. See http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required for the rationale behind this approach.

### Default blockquote
```
<figure>
  <blockquote class="Blockquote">
    <p class="Blockquote__quote">For me, it is far better to grasp the Universe as it really is than to persist in delusion, however satisfying and reassuring.</p>
  </blockquote>
  <figcaption class="Blockquote__source">Carl Sagan, <cite>The Demon-Haunted World</cite></figcaption>
</figure>
```

## Available Classes

* `.Blockquote`
* `.Blockquote__quote`
* `.Blockquote__source`

## Available Variables

* `$source-prefix`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-base-class-namespace` variable.

`$scales-base-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/base-images
Description: Base image styles for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Base Images for Scales

These are some simple styles for fixing images so they are a bit more responsive.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/base-images`

## Usage

There is no usage for this. It just adds some styles to images to make them scale with the viewport size unless a width or height are specified.
npm package: @scalescss/base-lists
Description: Base list styles for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Base Lists for Scales

These are the base styles for lists.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/base-lists`

## Usage

Indent a list from the left by setting the $list-margin-left variable in your settings file.

### Base List
```
<ul class="List">
   <li>Scales</li>
   <li>Patterns</li>
   <li>Lists</li>
</ul>
```

## Usage

Simple list modifier to remove margin, padding and bullets from a list.

### Bare List
```
<ul class="List--bare">
   <li>Scales</li>
   <li>Patterns</li>
   <li>Lists</li>
</ul>
```

### Other uses

Since there are times when you might want to make a list bare without using a class, `List--bare` is also able to be used as a mixin or extended as a placeholder.

```
@include List--bare;

@extend %List--bare;
```

## Available Classes

* `.List`
* `.List--bare`

## Available Variables

* `$list-margin-left`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-base-class-namespace` variable.

`$scales-base-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/components-buttons
Description: Button pattern for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Button Component for Scales

A simple baseline for creating buttons. The button component can easily be extended with modifiers in your project or theme.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/components-buttons`

## Usage

Buttons should be used with links, buttons, and submit inputs for best results.

```
<a href="#" class="Button">Link Button</a>
<button class="Button">Button Button</button>
<input class="Button is-Disabled" type="submit" value="Input Button">
```

## Available Classes

* `.Button` - The main button class
* `.is-Disabled` - Disabled state for buttons (`disabled` attribute is preferred)

## Available Variables

* `$btn-background-color`
* `$btn-border-width`
* `$btn-border-color`
* `$btn-border-style`
* `$btn-border-radius`
* `$btn-text-color`
* `$btn-font-size`
* `$btn-font-family`
* `$btn-font-weight`
* `$btn-line-height`
* `$btn-padding`
* `$btn-hover-background-color`
* `$btn-hover-text-color`
* `$btn-disabled-opacity`
* `$btn-disabled-background-color:`
* `$btn-disabled-border-width:`
* `$btn-disabled-border-color:`
* `$btn-disabled-border-style:`
* `$btn-disabled-text-color:`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-components-class-namespace` variable.

`$scales-components-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

The button component simply provides a base for buttons. In your project or theme, you can easily extend the button pattern for your own purposes. For example:

```
@import your-project/scalescss/components-buttons/buttons

//
// Primary buttons
///
.Button--primary {
  background-color: #0074D9;
  border: 2px solid #001F3F;
  border-radius: 5px;
  color: #fff;

  &:hover,
  &:active,
  &:focus {
    background-color: #001F3F;
    border-color: #0074D9;
  }
}

//
// Small buttons
///
.Button--small {
  font-size: 85%;
  padding: .2em .5em;
}
```
```
<button class="Button Button--primary">Primary Button</button>

<button class="Button Button--small">Small Button</button>
```
npm package: @scalescss/generic-normalize
Description: A collection of HTML element and attribute style-normalizations for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# normalize.css

The Scales version of Normalize simply changes the file extension to .scss so it can be imported. Please visit the [original project](https://github.com/necolas/normalize.css/tree/5.0.0) for full details on the 5.0.0 release.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/generic-normalize`

## Usage

No other styles should come before Normalize.css.

It is recommended that you include the `_normalize.scss` file as untouched library code.

## Acknowledgements

Normalize.css is a project by [Nicolas Gallagher](https://github.com/necolas),
co-created with [Jonathan Neal](https://github.com/jonathantneal).
npm package: @scalescss/generic-reset
Description: A companion to Normalize.css. Borrows from HTML5 Boilerplate and Reset Restarted. For Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Reset Styles for Scales

A companion to [Normalize.css](http://necolas.github.io/normalize.css/) that resets a few things that are still useful from a traditional reset. Borrows from [HTML5 Boilerplate](http://h5bp.com) and [Reset Restarted](http://csswizardry.com/2011/10/reset-restarted).

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/generic-reset`

## Usage

Should be loaded immediately after Normalize.css. View the .scss file to see what the reset is doing.

## Available Variables

* `$selection-bg-color`
* `$selection-text-color`
* `$horizontal-rule-color`
* `$table-border-collapse`
* `$pre-overflow`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-base-class-namespace` variable.

`$scales-base-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/objects-box
Description: A simple pattern for boxing off content for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Box Object for Scales

A simple object for boxing off content and separating it visually from the surrounding content.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Dependencies

* `utilities-clearfix`

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-box`

## Usage

The box object can be used on any element that you want. For example:

```
<div class="Box">
  <p>The content in here will be boxed off from the surrounding content and will have a default amount of padding (based on the class used) to visually separate it.</p>
</div>
```

### Other uses

Since there are times when you want any element to be boxed off, possibly with different amounts of padding at different breakpoints, the box object is also able to be used as a mixin.

```
@include Box($padding);
```

## Available Classes

* `.Box`
* `.Box--flush`
* `.Box--tiny`
* `.Box--small`
* `.Box--large`
* `.Box--huge`

## Available Variables

* `$box-padding`
* `$box-padding-tiny`
* `$box-padding-small`
* `$box-padding-large`
* `$box-padding-huge`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

In your project or theme, you can easily extend the box object for your own purposes. The size variations are already an example of extending this class. Another is an error box:

```
@import your-project/scalescss/objects-box/box

//
// Error Box (extends box)
///
.Box--error {
  background-color: pink;
  border: 2px dashed red;
  color: red;
}
```
```
<div class="Box Box--error">
  <p>This is a really ugly error message in an alert box!!!!!</p>
</div>
```
npm package: @scalescss/objects-centered-column
Description: A simple pattern for establishing a centered column layout for Scales CSS
Author: Rob Copeland
Latest version: 6.0.0-1

# Centered Layout Object for Scales

A simple pattern for establishing a centered column layout.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-centered-column`

## Usage

The Centered Column layout object is intended to wrap main content when the desired effect is one column that
centers itself on large displays. The default max-width is 64rem, which converts to 1024px.

```
<div class="CenteredColumn">
  <p>The content in the centered column is restricted to a max-width. If the viewport is greater, the column is horizontally
  centered.</p>
</div>
```

## Available Classes

* `.CenteredColumn`

## Available Variables

* `$centered-column-width`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

In your project or theme, you can easily extend the box object for your own purposes. The size variations are already an example of extending this class. Another is an error box:

```
@import your-project/scalescss/objects-centered-column/centered-column
npm package: @scalescss/objects-flag
Description: A slightly more advanced versin of the Media Object for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Flag Object for Scales

A simple object for placing variable amounts of content next to a fixed image or other media. Similar to the media object, the flag object allows you to control the vertical alignment of the content.

Based on [The Flag Object](http://csswizardry.com/2013/05/the-flag-object/), by [Harry Roberts](https://twitter.com/csswizardry).

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-flag`

## Usage
The flag object can be used in many situations for positioning any type of image or other media next to some other content.

Basic usage:
```
<div class="Flag">
  <div class="Flag__figure">
    <img src="http://placekitten.com/g/150/150">
  </div>
  <div class="Flag__body">
    <p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.</p>
  </div>
</div>
```

To move the image to the opposite side:
```
<div class="Flag--rev">
```

To change the vertical alignment of the text to middle or bottom:
```
<div class="Flag Flag--middle">

<div class="Flag Flag--bottom">
```

To stack image above the text on small screens:
```
<div class="Flag Flag--stacked">
```

## Available Classes

* `.Flag`
* `.Flag--rev`
* `.Flag__figure`
* `.Flag__body`
* `.Flag--stacked`

### For controlling vertical alignment
* `.Flag--middle`
* `.Flag--bottom`

### For changing the space between the image and the content
* `.Flag--flush`
* `.Flag--tiny`
* `.Flag--small`
* `.Flag--large`
* `.Flag--huge`

## Available Variables

* `$flag-gutter`
* `$flag-gutter-tiny`
* `$flag-gutter-small`
* `$flag-gutter-large`
* `$flag-gutter-huge`
* `$flag-stacked-breakpoint`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/objects-side-by-side
Description: A simple pattern for displaying content side by side for Scales CSS
Author: Rob Copeland
Latest version: 6.0.0-1

# Side-by-Side Object for Scales

A simple pattern for displaying content side by side.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-side-by-side`

## Usage

The Side by Side object can be used on any elements that you want. For example:

```
<div class="SideBySide">
  <div class="SideBySide__item">
    <p>The content here will stay alongside other content within the parent container.</p>
  </div>
  <div class="SideBySide__item">
    <p>The content here will stay alongside other content within the parent container.</p>
  </div>
</div>
```

To align items along the bottom:

```
<div class="SideBySide SideBySide--align-bottom">
```

To align items along the center:

```
<div class="SideBySide SideBySide--align-center">
```

### Other uses

You may wish to split the items in a way other than 50/50. Below are modifier classes that allow
splitting the content by 25/75 or 75/25.

## Available Classes

* `.SideBySide`
* `.SideBySide__item`
* `.SideBySide__item--one-quarter`
* `.SideBySide__item--three-quarters`

## Available Variables

* `$side-by-side-gutter`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

In your project or theme, you can easily extend the Side-by-Side object for your own purposes.

```
@import your-project/scalescss/objects-side-by-side/side-by-side
npm package: @scalescss/objects-split
Description: A pattern for aligning two elements away from one another for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Split Object for Scales

An object for aligning two elements away from each other.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-split`

## Usage

The Split object can be used on any elements but works best in a `<dl>` or `<ul/ol>`. For example:

```
<dl class="Split">
  <dt class="Split__title">Google</dt>
  <dd>google.com</dd>
  <dt class="Split__title">Wikipedia</dt>
  <dd>wikipedia.org</dd>
  <dt class="Split__title">CNN</dt>
    <dd>cnn.com</dd>
</dl>
```
```
<ul class="Split">
  <li><span class="Split__title">Google</span> google.com</li>
  <li><span class="Split__title">Wikipedia</span> wikipedia.org</li>
  <li><span class="Split__title">CNN</span> cnn.com</li>
</ul>​
```

## Available Classes

* `.Split`
* `.Split__title`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/objects-stack
Description: The Stack object lays items out in a column and can be modified to lay items out in a row at a certain breakpoint.
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Stack Object for Scales

The Stack object lays items out in a column and can be modified to lay items out in a row at a certain breakpoint.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-stack`

## Usage

```
<div class="Stack Stack--split@xs">
  <div class="Stack__item"><button>Button</button></div>
  <div class="Stack__item"><a href="">Link</a></div>
  <div class="Stack__item"><a href="">Link</a></div>
  <div class="Stack__item"><a href="">Link</a></div>
  <div class="Stack__item"><a href="">Link</a></div>
</div>
```

## Available Classes

* `.Stack`
* `.Stack__item`
* `.Stack--split@xs`
* `.Stack--split@s`
* `.Stack--split@m`
* `.Stack--split@l`
* `.Stack--split@xl`
* `.Stack--tiny`
* `.Stack--small`
* `.Stack--medium`
* `.Stack--large`
* `.Stack--huge`

## Available Variables

* `$stack-spacing-tiny`
* `$stack-spacing-small`
* `$stack-spacing-medium`
* `$stack-spacing-large`
* `$stack-spacing-huge`
* `$split-breakpoint-xs`
* `$split-breakpoint-s`
* `$split-breakpoint-m`
* `$split-breakpoint-l`
* `$split-breakpoint-xl`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

In your project or theme, you can easily extend the stack object for your own purposes.

```
@import your-project/scalescss/objects-stack/stack
npm package: @scalescss/objects-stack-split
Description: A simple pattern for keeping items stacked until theres enough room for them to be side by side for Scales CSS
Author: Dave Gillhespy
Latest version: 4.0.0
Deprecated: This package was renamed. Please use @scalescss/objects-stack instead

# Stack Split Object for Scales

A simple pattern for keeping items stacked until theres enough room for them to be side by side.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-stack-split`

## Usage

```
<div class="StackSplit">
  <div class="StackSplit__item"><button>Button</button></div>
  <div class="StackSplit__item"><a href="">Link</a></div>
</div>
```

## Available Classes

* `.StackSplit`
* `.StackSplit__item`

## Available Variables

* `$stack-split-gutter`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```

## Extending

In your project or theme, you can easily extend the stack-split object for your own purposes.

```
@import your-project/scalescss/objects-stack-split/stack-split
npm package: @scalescss/objects-stats
Description: A pattern to display statistic-like information for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Stats Object for Scales

An object to display statistic-like information.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Dependencies

* `utilities-clearfix`

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-stats`

## Usage

Stats should be used with a `<dl>` and individual `<div>`s to group the stat title and value. The `--big` variation can be used when the title or values are too long to sit next to each other in a row. For example:

```
<dl class="Stats">
  <div class="Stat">
    <dt class="Stat__title">RBI</dt>
    <dd class="Stat__value">127</dd>
  </div>

  <div class="Stat">
    <dt class="Stat__title">BA</dt>
    <dd class="Stat__value">.369</dd>
  </div>

  <div class="Stat">
    <dt class="Stat__title">HR</dt>
    <dd class="Stat__value">25</dd>
  </div>
</dl>
```
```
<dl class="Stats--big">
  <div class="Stat">
    <dt class="Stat__title">Total Runs Batted In</dt>
    <dd class="Stat__value">127</dd>
  </div>

  <div class="Stat">
    <dt class="Stat__title">Total Batting Average</dt>
    <dd class="Stat__value">.369</dd>
  </div>

  <div class="Stat">
    <dt class="Stat__title">Total Home Runs</dt>
    <dd class="Stat__value">25</dd>
  </div>
</dl>
```

## Available Classes

* `.Stats`
* `.Stats--big`
* `.Stat` - wrapper for each stat pair
* `.Stat__title`
* `.Stat__value`

## Available Variables

* `$stat-spacing` - space to the right of each stat

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/objects-vertical-list
Description: A pattern for making a list vertical after it has been made horizontal for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Vertical List Object for Scales

An object for making a list vertical after it's been made horizontal.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/objects-vertical-list`

## Usage

Vertical List should be used whenever you need to make an ordered or unordered list vertical instead of horizontal. You can extend it with `--delimited` to semantically mark up a character delimited list for things like tags, etc.

### Default

```
<ul class="VerticalList">
  <li>Sass</li>
  <li>CSS</li>
  <li>HTML</li>
</ul>
```

### Character delimited

```
<ul class="VerticalList VerticalList--delimited">
  <li>Sass</li>
  <li>CSS</li>
  <li>HTML</li>
</ul>
```

### Character delimited override

```
<ul class="VerticalList VerticalList--delimited">
  <li data-delimiter=" | ">Sass</li>
  <li data-delimiter=" | ">CSS</li>
  <li>HTML</li>
</ul>
```

### Other uses

Since there are times when you want a list to be vertical at some media queries and horizontal at others, the vertical list object is also able to be used as a mixin or extended as a placeholder.

```
@include VerticalList;

@extend %VerticalList;
```

## Available Classes

* `.VerticalList`
* `.VerticalList--delimited`

## Available Data Attributes

* `data-delimiter`

## Available Variables

* `$vertical-list-delimiter`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-objects-class-namespace` variable.

`$scales-objects-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/utilities-clearfix
Description: A super minimal clearfix utility for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Clearfix Utility for Scales

A super minimal clearfix utility.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/utilities-clearfix`

## Usage

Clearfix is used to force an element to self-clear its floated children.

It should be extended in your sass files, but can be used as a class. I recommend only using it this way for debugging purposes in you browser dev tools.

```
.parent-class {
  @extend %ClearFix
}
```

For debugging:
```
<div class="ClearFix">
  <some floated elements>
</div>
```

## Available Classes

* `%ClearFix` - extend in your sass files
* `.ClearFix` - For debugging, change with the `$clearfix-class` variable.

## Available Variables

* `$clearfix-class`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-utilities-class-namespace` variable.

`$scales-utilities-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/utilities-size
Description: Size classes to force an element to a specific size for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-0

# Size Utilities for Scales

A set of utility classes for changing the width of an element.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/utilities-size`

## Usage

By default there is a class for every 5% step from 5 to 100 in the format `.Size-[percent]`. Simply put a class in your HTML and the width will change by that percentage.

```
<p class="Size-50">This changes the width of the element to 50%</p>
```

## Available Classes

* `.Size-5`
* `.Size-10`
* `.Size-15`
* `.Size-20`
* `.Size-25`
* `.Size-30`
* `.Size-35`
* `.Size-40`
* `.Size-45`
* `.Size-50`
* `.Size-55`
* `.Size-60`
* `.Size-65`
* `.Size-70`
* `.Size-75`
* `.Size-80`
* `.Size-85`
* `.Size-90`
* `.Size-95`
* `.Size-100`

## Available variables

* `$size-range-start`
    * Value of the first class
    * Default: 5
* `$size-range-end`
    * Value of the last class
    * Default: 100
* `$size-step-value`
    * Increment between values
    * Default: 5

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-utilities-class-namespace` variable.

`$scales-utilities-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/utilities-spacing
Description: Size classes to force an element to a specific size for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Spacing Utilities for Scales

A set of utility classes for changing the margin and padding on an element.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/utilities-spacing`

## Usage

Spacing classes can be used to modify the default padding and margins on elements These should be used sparingly. You should be using your project defaults most of the time, these are exceptions!

The class name format is `<type><location><size>`

`type`: p,m = padding,margin

`location`: a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical

`size`: s,m,l,h,n = small ($space-s),medium ($space-m),large ($space-l),huge (space-h),none (0)

```
<p class="pan mls">This changes the padding on all sides to 0 and the margin on the left to the default small size.</p>
```

## Available Classes

* `.ptn,.pvn,.pan`
* `.pts,.pvs,.pas`
* `.ptm,.pvm,.pam`
* `.ptl,.pvl,.pal`
* `.pth,.pvh,.pah`
* `.prn,.phn,.pan`
* `.prs,.phs,.pas`
* `.prm,.phm,.pam`
* `.prl,.phl,.pal`
* `.prh,.phh,.pah`
* `.pbn,.pvn,.pan`
* `.pbs,.pvs,.pas`
* `.pbm,.pvm,.pam`
* `.pbl,.pvl,.pal`
* `.pbh,.pvh,.pah`
* `.pln,.phn,.pan`
* `.pls,.phs,.pas`
* `.plm,.phm,.pam`
* `.pll,.phl,.pal`
* `.plh,.phh,.pah`
* `.mtn,.mvn,.man`
* `.mts,.mvs,.mas`
* `.mtm,.mvm,.mam`
* `.mtl,.mvl,.mal`
* `.mth,.mvh,.mah`
* `.mrn,.mhn,.man`
* `.mrs,.mhs,.mas`
* `.mrm,.mhm,.mam`
* `.mrl,.mhl,.mal`
* `.mrh,.mhh,.mah`
* `.mbn,.mvn,.man`
* `.mbs,.mvs,.mas`
* `.mbm,.mvm,.mam`
* `.mbl,.mvl,.mal`
* `.mbh,.mvh,.mah`
* `.mln,.mhn,.man`
* `.mls,.mhs,.mas`
* `.mlm,.mhm,.mam`
* `.mll,.mhl,.mal`
* `.mlh,.mhh,.mah`

## Available variables

* `$space-s`
* `$space-m`
* `$space-l`
* `$space-h`

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-utilities-class-namespace` variable.

`$scales-utilities-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scalescss/utilities-width
Description: Width classes to force an element to a specific width for Scales CSS
Author: Dave Gillhespy
Latest version: 6.0.0-1

# Width Utilities for Scales

A set of utility classes for changing the width of an element.

## Requirements

Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass.

## Installation

* [NPM](http://npmjs.com): `npm install --save @scales/utilities-width`

## Usage

By default there is a class for every 5% step from 5 to 100 in the format `.Width-[percent]`. Simply put a class in your HTML and the width will change by that percentage.

```
<p class="Width-50">This changes the width of the element to 50%</p>
```

## Available Classes

* `.Width-5`
* `.Width-10`
* `.Width-15`
* `.Width-20`
* `.Width-25`
* `.Width-30`
* `.Width-35`
* `.Width-40`
* `.Width-45`
* `.Width-50`
* `.Width-55`
* `.Width-60`
* `.Width-65`
* `.Width-70`
* `.Width-75`
* `.Width-80`
* `.Width-85`
* `.Width-90`
* `.Width-95`
* `.Width-100`

## Available variables

* `$width-range-start`
  * Value of the first class
  * Default: 5
* `$width-range-end`
  * Value of the last class
  * Default: 100
* `$width-step-value`
  * Increment between values
  * Default: 5

### Namespace Variables

#### The Scales Namespace Variable

All Scales patterns expose the `$scales-namespace` variable.

`$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`.

#### Class Level Namespace Variable

Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components".

This pattern exposes the `$scales-utilities-class-namespace` variable.

`$scales-utilities-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`.

#### Namespace Variable Usage

To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:

```
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports
```
npm package: @scaleton/func-debug-symbols
Description: Collects debug symbols for:
Latest version: 0.1.5

# FunC Debug Symbols

Collects debug symbols for:

- functions (original name, `method_id`, cell hash)
- globals (original name, index).

## Basic Usage

```typescript
import { collectDebugSymbols } from '@scaleton/func-debug-symbols';

const config: CompilerConfig = {
  targets: ['main.fc'],
  sources: {
    'main.fc': `
      global int a;
      global cell b;
      global slice c;

      () throw_inline() impure inline { throw(1); }
      () throw_inline_ref() impure inline_ref { throw(2); }
      () throw_get() method_id(88) { throw(3); }
      () recv_internal() { throw(4); }
    `,
  },
};

const debugSymbols = await collectDebugSymbols(config);
```

## Authors

- [Skydev0h](https://github.com/Skydev0h)
- [NickNekilov](https://github.com/NickNekilov)

## License

![MIT License](https://img.shields.io/badge/License-MIT-green)
npm package: @scaleton/highload-wallet
Description: Wrapper for Highload Wallet V2 contract.
Latest version: 0.1.1

# Highload Wallet V2

Wrapper for [Highload Wallet V2](https://github.com/ton-blockchain/ton/blob/master/crypto/smartcont/highload-wallet-v2-code.fc) contract.

## How to use

```typescript
import { HighloadWalletV2 } from "@scaleton/highload-wallet";

const highloadWallet = new HighloadWalletV2(keyPair.publicKey);
const sender = highloadWallet.batchSender(keyPair.privateKey, 100); // Accumulates messagens and sends chunks (100 messages per each).

await myContract.sendSomething(sender, { /* ... */ });

/* ... */

await sender.submit();
```

## Authors

- Nick Nekilov ([@NickNekilov](https://t.me/NickNekilov))
- TrueCarry ([@TrueCarry](https://t.me/TrueCarry))

## License

<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License"></a>
npm package: @scaleton/tolk-debug-symbols
Description: Collects debug symbols for:
Latest version: 0.7.1

# Tolk Debug Symbols

Collects debug symbols for:

- functions (original name, `method_id`, cell hash)
- globals (original name, index).

## Basic Usage

```typescript
import { TolkCompilerConfig } from '@ton/tolk-js';
import { collectDebugSymbols } from '@scaleton/tolk-debug-symbols';

const config: TolkCompilerConfig = {
  entrypoint: 'main.tolk',
  fsReadCallback: (path: string) => fs.readFileSync(path).toString(),
};

const debugSymbols = await collectDebugSymbols(config);
```

Output:

```json
{
  "constants": [
    {
      "declaration": "0xBEEF",
      "name": "h",
      "type": "int",
      "value": "48879"
    },
    {
      "declaration": "1000",
      "name": "k",
      "type": "int",
      "value": "1000"
    },
    {
      "declaration": "\"cafe\"s",
      "name": "m",
      "type": "slice",
      "value": "x{cafe}"
    }
  ],
  "globals": [
    {
      "index": 1,
      "name": "a"
    },
    {
      "index": 2,
      "name": "b"
    }
  ],
  "procedures": [
    {
      "cellHash": "a0eacc9676d4e13d5bade93200eee2734baf0ad2256df4ee1983c5e6ce29c388",
      "methodId": 0,
      "name": "main"
    },
    {
      "cellHash": "40956732df8dbebee9f697ef04dcfc498b671e7167ca2b898e85dbc737089012",
      "methodId": 78674,
      "name": "getConstants"
    }
  ]
}
```

## License

![MIT License](https://img.shields.io/badge/License-MIT-green)
npm package: @scaleton/tvm-disassembler
Description: Evolution of `tvm-disassembler` library that is built to be used also as a library that returns structured code. Has a list of typed opcodes and ability to read individual opcode from a slice.
Author: Steve Korshakov
Latest version: 0.0.22

# TON Opcodes

Evolution of `tvm-disassembler` library that is built to be used also as a library that returns structured code. Has a list of typed opcodes and ability to read individual opcode from a slice.

## Installation

```bash
yarn add @tact-lang/opcode
```

## Usage

```ts
import { decompile } from "@tact-lang/opcode";

// Decompile a single cell sequence into opcode list. Useful for interpretators or for debugging.
const sourceCode = Buffer.from('....', 'base64');
const decompiledOpcodes = decompile({ src: sourceCode });

// Decompile a whole contract. Useful for contract developers and explorers.
const decompiledCode = decompileAll({ src: sourceCode });

```

## Authors

- [Steve Korshakov](https://github.com/ex3ndr)
- [Nick Nekilov](https://github.com/NickNekilov)

## License

MIT