<commit_before># supple - v0.1.0

**NOTE: This is a alpha release, dragons ahead**

**Why use supple:**
It is a small but powerfull CSS framework designed specially with the latest browsers in mind. The framework is made with an eye on the future. It uses custom properties for configuration and utilises new [CSS webstandards](https://jonathantneal.github.io/css-db/) to let you forget about any preprocessor.

Supple provides little to no design wich means no undoing other peoples design decisions.

Use supple if:

* You want to write just CSS ;-)
* You need a powerful library of defaults & objects.
* You appreciate the value of Object Oriented code and the need for scalability
  and reuse.
* You need a framework that is robust and evolves constantly.

## Browser support
Supple supports all [major browsers which can render CSS custom properties](http://caniuse.com/#feat=css-variables) given you configure your build process with the following postcss plugins:

* [postcss-easy-import](https://github.com/TrySound/postcss-easy-import)
* [postcss-apply](https://github.com/pascalduez/postcss-apply)
* [postcss-custom-media](https://github.com/postcss/postcss-custom-media)
* [postcss-autoprefixer](https://github.com/postcss/autoprefixer)

If you want to support browsers without support for custom properties you can add [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) to the mix. Keep in mind this will break some specific functionalities related to custom properties in the framework. But the basics are all there.

## Installation
* yarn: `yarn add supple --dev`
* npm: `npm install supple --save-dev`

## Available modules
All supple submodules are created based on the ITCSS principle.

ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such way that you can better deal with CSS specifics like global namespace, cascade and selectors specificity.

### Settings
This layer is the first layer and holds any global settings for your project. It should only house settings that need to be accessed from anywhere.

**NOTE**: Any variable that does not need to be accessed globally should belong in the component to which it relates.

* [defaults.css](lib/settings/defaults.css)

### Tools
The tools layer houses your globally available tooling, mixins and functions.
Supple does not have any global tools, so this layer is empty by default.

**NOTE**: Any mixin or function that does not need to be accessed globally should belong in the component to which it relates.

### Generic
It contains ground-zero styles like [Normalize.css](http://necolas.github.io/normalize.css/), global box-sizing rules, CSS resets and so on.

* It’s advised to include [normalize.css](http://necolas.github.io/normalize.css/), it is installed by default.
* [reset.css](lib/generic/reset.css)
* [vertical-rhythm.css](lib/generic/vertical-rhythm.css)

### Elements
These are bare, unclassed HTML elements. The Elements layer binds onto HTML element (or 'type') selectors only.

Elements are most likely the last layer in which we'd find element-based selectors, and is very rarely added to or changed after initial setup. Once we have defined element-level styles, all additions and deviations should be implemented using classes.

**NOTE**: Because supple is a design-free framework this layer is completely empty.

### Objects
This layer is concerned with styling non-cosmetic design patterns, or 'objects'. This can range from something as a `.o-wrapper` element to  `.o-layout` systems.

* [list-clean.css](lib/objects/list-clean.css)
* [layout.css](lib/objects/layout.css)
* [flexembed.css](lib/objects/flexembed.css)

All Objects should be prefixed with `o-`.

### Components
This layer contains our recognisable components, chunks of UI.

All Components should be prefixed with `c-`.

**NOTE**: Because supple is a design-free framework this layer is completely empty. You can add your own components to your project.

### Utilities
this layer contains some handy helpers & overrides. This is the most specific layer of the application which trumps everything defined before.

* [fractions.css](lib/utilities/fractions.css) - This set uf utilities is only needed if you want to support browsers without custom property support.
* [float.css](lib/utilities/float.css)
* [module.css](lib/utilities/module.css)
* [visually-hidden.css](lib/utilities/visually-hidden.css)
* [hidden.css](lib/utilities/hidden.css)

All Utilities should be prefixed with `u-`.

## Getting started
Supple is a very design-free framework. This means that the style and design of your site is left entirely up to you.
Because supple gives you lots of customisable foundations, you need to add the final layer: **UI**.

It is advised that you will use supple code throughout your own, a sample `styles.css` file would look like this:

```scss
/* Settings */
@import "settings/vars.css";
@import "node_modules/supple/lib/settings/defaults.css";
@import "settings/colors.css";

/* Tools */<commit_msg>Readme typo's<commit_after># supple - v0.1.0

**NOTE: This is a alpha release, dragons ahead**

**Why use supple:**
It is a small but powerfull CSS framework designed specially with the latest browsers in mind. The framework is made with an eye on the future. It uses custom properties for configuration and utilises new [CSS webstandards](https://jonathantneal.github.io/css-db/) to let you forget about any preprocessor.

Supple provides little to no design wich means no undoing other peoples design decisions.

Use supple if:

* You want to write just CSS ;-)
* You need a powerful library of defaults & objects.
* You appreciate the value of Object Oriented code and the need for scalability
  and reuse.
* You need a framework that is robust and evolves constantly.

## Browser support
Supple supports all [major browsers which can render CSS custom properties](http://caniuse.com/#feat=css-variables) given you configure your build process with the following postcss plugins:

* [postcss-easy-import](https://github.com/TrySound/postcss-easy-import)
* [postcss-apply](https://github.com/pascalduez/postcss-apply)
* [postcss-custom-media](https://github.com/postcss/postcss-custom-media)
* [postcss-autoprefixer](https://github.com/postcss/autoprefixer)

If you want to support browsers without support for custom properties you can add [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) to the mix. Keep in mind this will break some specific functionalities related to custom properties in the framework. But the basics are all there.

## Installation
* yarn: `yarn add supple --dev`
* npm: `npm install supple --save-dev`

## Available modules
All supple submodules are created based on the ITCSS principle.

ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such way that you can better deal with CSS specifics like global namespace, cascade and selectors specificity.

### Settings
This layer is the first layer and holds any global settings for your project. It should only house settings that need to be accessed from anywhere.

**NOTE**: Any variable that does not need to be accessed globally should belong in the component to which it relates.

* [defaults.css](lib/settings/defaults.css)

### Tools
The tools layer houses your globally available tooling, mixins and functions.
Supple does not have any global tools, so this layer is empty by default.

**NOTE**: Any mixin or function that does not need to be accessed globally should belong in the component to which it relates.

### Generic
It contains ground-zero styles like [Normalize.css](http://necolas.github.io/normalize.css/), global box-sizing rules, CSS resets and so on.

* It’s advised to include [normalize.css](http://necolas.github.io/normalize.css/), it is installed by default.
* [reset.css](lib/generic/reset.css)
* [vertical-rhythm.css](lib/generic/vertical-rhythm.css)

### Elements
These are bare, unclassed HTML elements. The Elements layer binds onto HTML element (or 'type') selectors only.

Elements are most likely the last layer in which we'd find element-based selectors, and is very rarely added to or changed after initial setup. Once we have defined element-level styles, all additions and deviations should be implemented using classes.

**NOTE**: Because supple is a design-free framework this layer is completely empty.

### Objects
This layer is concerned with styling non-cosmetic design patterns, or 'objects'. This can range from something as a `.o-wrapper` element to  `.o-layout` systems.

* [list-clean.css](lib/objects/list-clean.css)
* [layout.css](lib/objects/layout.css)
* [flexembed.css](lib/objects/flexembed.css)

All Objects should be prefixed with `o-`.

### Components
This layer contains our recognisable components, chunks of UI.

All Components should be prefixed with `c-`.

**NOTE**: Because supple is a design-free framework this layer is completely empty. You can add your own components to your project.

### Utilities
this layer contains some handy helpers & overrides. This is the most specific layer of the application which trumps everything defined before.

* [fractions.css](lib/utilities/fractions.css) - This set if utilities is only needed if you want to support browsers without custom property support.
* [float.css](lib/utilities/float.css)
* [module.css](lib/utilities/module.css)
* [visually-hidden.css](lib/utilities/visually-hidden.css)
* [hidden.css](lib/utilities/hidden.css)

All Utilities should be prefixed with `u-`.

## Getting started
Supple is a very design-free framework. This means that the style and design of your site is left entirely up to you.
Because supple gives you lots of customisable foundations, you need to add the final layer: **UI**.

It is advised that you will use supple code throughout your own, a sample `styles.css` file would look like this:

```scss
/* Settings */
@import "node_modules/supple/lib/settings/defaults.css";
@import "settings/vars.css";
@import "settings/colors.css";

/* Tools */
{'fraction_non_alphanumeric': 0.0878913991280222, 'fraction_numerical': 0.0005945303210463733, 'mean_word_length': 4.619710467706013, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2158466', 'n_tokens_mistral': 2777, 'n_tokens_neox': 2689, 'n_words': 1247}