<commit_before>	 _____                _       _
	/  ___|              | |     | |
	\ `--.  ___ _ __ __ _| |_ ___| |__
	 `--. \/ __| '__/ _` | __/ __| '_ \
	/\__/ / (__| | | (_| | || (__| | | |
	\____/ \___|_|  \__,_|\__\___|_| |_|


Scratch Framework
=============
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/nikoloza/Scratch?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Scratch helps you to make high level front end architecture using `Less` and `HTML5`.

It has semantic code and file structure which helps you write beautiful code.

Scratch is not UI framework, it's for architecture only. If you wish, you just can reference other UI framework and continue working. See how to reference section below.

-------------

Getting Started
-------------

### Stylesheet file
You only need to import `scratch/style.css` in your html file.

**IMPORTANT:** please use `scratch/style.min.css` for production.

-------------

### Grunt for everything
Used **Grunt** to compile, watch and minify CSS.

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide.

Then you need to install required packages:

	$ npm install

With our grunt config we have 5 states to use grunt:

Simply one time compile files:

	$ grunt

Watch and compile files:

	$ grunt run

Run express based simple http server, watch and compile files:

	$ grunt server

Make files ready for production:

	$ grunt production

Clean all grunt generated files:

	$ grunt clean

-------------

### Bower
We use **Bower** for additional packages. We have included 3 package at this state:

* [jQuery](https://github.com/jquery/jquery)
* [Modernizr](https://github.com/Modernizr/Modernizr)
* [html5shiv](https://github.com/aFarkas/html5shiv)
* [fastclick](https://github.com/ftlabs/fastclick)


-------------

### Configuring less
You can configure your project by opening `scratch/var.less` file. There you can change any preference for your project.

Also, you can control what feature you need to import by setting `scratch/scratch.less` file.

-------------

Class reference
=============================
On any element use following classes to make easy changes:


## Grid system
The best grid system to work with. You haven't seen grid system like this before. It's flexible and works for any type of layout.

Starting with parent element as it plays main role here. We have to know how many children we want to be in the container.

So we can set it by naming the class `.row` and number which sets children quantity. For example `.row5` is the container which has 5 elements, each divided **20%** wide. In `.row8`, we'll have children divs **12.5%** wider and so on.

It works for children `<div>`, `<li>`, `<td>` elements and `.cell` classes. Like this:

	.row5
		& > div
		& > div
		& > .cell
		& > .cell
		& > div

	ul.row3
		& > li
		& > li
		& > li

and, of course make them **nested**, like this:

	section.row4
		& > div
		& > div.row2
			& > div
			& > div
		& > .cell
		& > ul.cell.row3
			& > li
			& > li
			& > li

**To increase child elements width** you need to use `.cell` + number class on this element. For example `cell3`. So, it works like this:

	.row5
		& > div
		& > div.cell3					- this takes 3x more space then usual div
		& > div

	table
		& > tr.row4
			& > td
			& > td.cell2
			& > td

#### Spacing for the grid
To prevent spacing by left and right sides or inside cells use following classes:
	.row7
		&.no-padding		 			- sticks cells on eachother
		&.side-padding					- fits grid width by left and right side on the container
		&.twice-padding					- makes padding 2x wider than default

#### Other grid features
You may use other features as well

	row2.float.nofloat	  				- this feature (you'll meet this below) works here as well.

-------------

## Color scheming
Make your site more colorful by configuring `scratch/colors.less` file. Take a look in this reference:

By default we have following colors:
	.blue
	.yellow
	.red
	.lilac
	.green
	.pink
	.orange

	.black
	.blackgray
	.darkgrey
	.midgray
	.lightgray
	.whitegray
	.white

	.transparent
	.default 							- resets on default colors

It can be used as variables in less like `@blue`, `@orange`... Also it can be used in HTML as class. For text color like this `class="color-darkgray"`, for background color like this: `class="bg-lilac"`.


Root color defines container color, which makes easier to add color to children elements. Like this:

	<section class='root-orange'>
		<span class="rootcolor">lorem ipsum</span>
		Lorem ipsum dolor sit amet, consectetur adipisicing, delectus magni.
		<div class="rootbg">
			Lorem ipsum dolor sit amet, consectetur adipisicing, delectus magni.
		</div>
	</section><commit_msg>updated README in rootcolor section<commit_after>	 _____                _       _
	/  ___|              | |     | |
	\ `--.  ___ _ __ __ _| |_ ___| |__
	 `--. \/ __| '__/ _` | __/ __| '_ \
	/\__/ / (__| | | (_| | || (__| | | |
	\____/ \___|_|  \__,_|\__\___|_| |_|


Scratch Framework
=============
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/nikoloza/Scratch?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Scratch helps you to make high level front end architecture using `Less` and `HTML5`.

It has semantic code and file structure which helps you write beautiful code.

Scratch is not UI framework, it's for architecture only. If you wish, you just can reference other UI framework and continue working. See how to reference section below.

-------------

Getting Started
-------------

### Stylesheet file
You only need to import `scratch/style.css` in your html file.

**IMPORTANT:** please use `scratch/style.min.css` for production.

-------------

### Grunt for everything
Used **Grunt** to compile, watch and minify CSS.

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide.

Then you need to install required packages:

	$ npm install

With our grunt config we have 5 states to use grunt:

Simply one time compile files:

	$ grunt

Watch and compile files:

	$ grunt run

Run express based simple http server, watch and compile files:

	$ grunt server

Make files ready for production:

	$ grunt production

Clean all grunt generated files:

	$ grunt clean

-------------

### Bower
We use **Bower** for additional packages. We have included 3 package at this state:

* [jQuery](https://github.com/jquery/jquery)
* [Modernizr](https://github.com/Modernizr/Modernizr)
* [html5shiv](https://github.com/aFarkas/html5shiv)
* [fastclick](https://github.com/ftlabs/fastclick)


-------------

### Configuring less
You can configure your project by opening `scratch/var.less` file. There you can change any preference for your project.

Also, you can control what feature you need to import by setting `scratch/scratch.less` file.

-------------

Class reference
=============================
On any element use following classes to make easy changes:


## Grid system
The best grid system to work with. You haven't seen grid system like this before. It's flexible and works for any type of layout.

Starting with parent element as it plays main role here. We have to know how many children we want to be in the container.

So we can set it by naming the class `.row` and number which sets children quantity. For example `.row5` is the container which has 5 elements, each divided **20%** wide. In `.row8`, we'll have children divs **12.5%** wider and so on.

It works for children `<div>`, `<li>`, `<td>` elements and `.cell` classes. Like this:

	.row5
		& > div
		& > div
		& > .cell
		& > .cell
		& > div

	ul.row3
		& > li
		& > li
		& > li

and, of course make them **nested**, like this:

	section.row4
		& > div
		& > div.row2
			& > div
			& > div
		& > .cell
		& > ul.cell.row3
			& > li
			& > li
			& > li

**To increase child elements width** you need to use `.cell` + number class on this element. For example `cell3`. So, it works like this:

	.row5
		& > div
		& > div.cell3					- this takes 3x more space then usual div
		& > div

	table
		& > tr.row4
			& > td
			& > td.cell2
			& > td

#### Spacing for the grid
To prevent spacing by left and right sides or inside cells use following classes:
	.row7
		&.no-padding		 			- sticks cells on eachother
		&.side-padding					- fits grid width by left and right side on the container
		&.twice-padding					- makes padding 2x wider than default

#### Other grid features
You may use other features as well

	row2.float.nofloat	  				- this feature (you'll meet this below) works here as well.

-------------

## Color scheming
Make your site more colorful by configuring `scratch/colors.less` file. Take a look in this reference:

By default we have following colors:
	.blue
	.yellow
	.red
	.lilac
	.green
	.pink
	.orange

	.black
	.blackgray
	.darkgrey
	.midgray
	.lightgray
	.whitegray
	.white

	.transparent
	.default 							- resets on default colors

It can be used as variables in less like `@blue`, `@orange`... Also it can be used in HTML as class. For text color like this `class="color-darkgray"`, for background color like this: `class="bg-lilac"`.


Root color defines container color, which makes easier to add color to children elements. Like this:

	<section class='root-orange'>
		<span class="rootcolor">Orange text</span>

		Lorem ipsum dolor sit amet, consectetur adipisicing, delectus magni.

		<div class="rootbg">
			This container has orange background
		</div>

		<!-- another color usage is as usual: -->
		<a href="" class="color-red">Red text</a>
	</section>
{'fraction_non_alphanumeric': 0.13067655236329936, 'fraction_numerical': 0.005560704355885079, 'mean_word_length': 2.988501026694045, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 72, 'https://': 12, 'lorem ipsum': 1, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7670433', 'n_tokens_mistral': 3286, 'n_tokens_neox': 3035, 'n_words': 1175}