<commit_before># solid

Solid is a base style library. It will be used as the core styling for Buzzfeed products.

## Including Solid in Your Project

### Dependencies
You must have NPM installed. If you have installed the [Buzzfeed webapp](https://github.com/buzzfeed/buzzfeed) congrats! You already do.

### Install
When inside your project directory type:
```
npm install bf-solid --save
```
or using Bower:
```
bower install git+ssh://git@github.com/buzzfeed/solid.git#<RELEASE_VERSION> --save
```

This will give you `solid.scss` and all of its scss files inside `node_modules/solid/lib`. This package includes the static, uncompiled SCSS files. Whether you want to build them into your project with Grunt, Gulp, etc. is up to you.

### Grunt Usage

#### (with grunt-sass)

Grunt-sass uses libsass to compile your sass. Use includePaths to make solid available as an scss import.

```
  sass: {
    dist: {
      options: {
        includePaths: 'node_modules/bf-solid/lib'
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
});
```

Then in your scss import file import solid with `@import "solid";`

## Building the Solid Styleguide
The solid styleguide lets you view Solid along with all of its documentation.

## Set Up the Styleguide Locally (optional)

### Dependencies

This installation guide assumes that you have the [Buzzfeed webapp](https://github.com/buzzfeed/buzzfeed) installed. That will set you up with the correct versions of node and ruby.

### Downloading the repo

Open a terminal window. Clone the repo into a new folder:

`git clone git@github.com:buzzfeed/solid.git /opt/buzzfeed/solid`

Move into that directory

`cd /opt/buzzfeed/solid`
<commit_msg>added solid structure section to readme<commit_after># solid

Solid is a base style library. It will be used as the core styling for Buzzfeed products.

## Including Solid in Your Project

### Dependencies
You must have NPM installed. If you have installed the [Buzzfeed webapp](https://github.com/buzzfeed/buzzfeed) congrats! You already do.

### Install
When inside your project directory type:
```
npm install bf-solid --save
```
or using Bower:
```
bower install git+ssh://git@github.com/buzzfeed/solid.git#<RELEASE_VERSION> --save
```

This will give you `solid.scss` and all of its scss files inside `node_modules/solid/lib`. This package includes the static, uncompiled SCSS files. Whether you want to build them into your project with Grunt, Gulp, etc. is up to you.

### Grunt Usage

#### (with grunt-sass)

Grunt-sass uses libsass to compile your sass. Use includePaths to make solid available as an scss import.

```
  sass: {
    dist: {
      options: {
        includePaths: 'node_modules/bf-solid/lib'
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
});
```

Then in your scss import file import solid with `@import "solid";`

## Solid Structure
Solid is broken up into four sections:
+ solid-helpers (variables and mixins used by all imports)
+ solid-base (normalize + base element styles)
+ solid-utilities (utility classes)
+ solid-components (utility classes that require specific HTML markup)

You can get everything with `@import "solid";`. Individual sections can also be imported. For example if you want the utility classes just `@import "solid-utilities";`

## Building the Solid Styleguide
The solid styleguide lets you view Solid along with all of its documentation.

## Set Up the Styleguide Locally (optional)

### Dependencies

This installation guide assumes that you have the [Buzzfeed webapp](https://github.com/buzzfeed/buzzfeed) installed. That will set you up with the correct versions of node and ruby.

### Downloading the repo

Open a terminal window. Clone the repo into a new folder:

`git clone git@github.com:buzzfeed/solid.git /opt/buzzfeed/solid`

Move into that directory

`cd /opt/buzzfeed/solid`

{'fraction_non_alphanumeric': 0.09659236484755317, 'fraction_numerical': 0.0, 'mean_word_length': 3.9045226130653266, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 4, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '431703', 'n_tokens_mistral': 1193, 'n_tokens_neox': 1157, 'n_words': 480}