<commit_before><!doctype html>
<html lang="en">

	<meta charset="utf-8">
	<title>basicGrid Demo</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<link rel="stylesheet" href="../dist/basicGrid.min.css">

	<style>

		.row {
			background: rgba(67, 147, 230, .2);
			margin-bottom: 2em;

			.row {
				margin-bottom: 0;
			}
		}

		.column {
			background: rgba(67, 147, 230, .2);
		}

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 80px;
			background: rgba(67, 147, 230, 1);
			color: white;
		}

		.row.flex-on-small .column,
		.row.flex-on-medium .column,
		.row.flex-on-large .column {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1rem 0;
			color: white;
		}

		.row.flex-on-small .column::before,
		.row.flex-on-medium .column::before,
		.row.flex-on-large .column::before {
			content: '';
			position: absolute;
			top: 0;
			right: .9rem;
			bottom: 0;
			left: .9rem;
			background: rgba(67, 230, 147, 1);
			z-index: -1;
		}

	</style>

	<!-- row and column -->
	<div class="row">
		<div class="column"><span>12</span></div>
	</div>

	<!-- small- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- small- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-2"><span>2</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-3"><span>3</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- small- and medium- and large- -->
	<div class="row">
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
	</div>

	<!-- -offset- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1 small-offset-1"><span>1 (+1)</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1 small-offset-3"><span>1 (+3)</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- hide-on- and show-on- -->
	<div class="row">
		<div class="column small-6 hide-on-small show-on-large"><span>6</span></div>
		<div class="column small-2 hide-on-large"><span>2</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-2 hide-on-large"><span>2</span></div>
		<div class="column small-6 hide-on-small show-on-large"><span>6</span></div>
	</div>

	<!-- nested row -->
	<div class="row">
		<div class="column small-4">
			<div class="row">
				<div class="column small-6"><span>6</span></div>
				<div class="column small-6"><span>6</span></div>
			</div>
		</div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- -push- -->
	<div class="row">
		<div class="column small-10 small-push-2"><span>10</span></div>
		<div class="column small-2 small-pull-10"><span>2</span></div>
	</div>

	<!-- flex-on- -->
	<div class="row flex-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- top-on- -->
	<div class="row flex-on-medium top-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- center-on- -->
	<div class="row flex-on-medium center-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- bottom-on- -->
	<div class="row flex-on-medium bottom-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- rtl-on- -->
	<div class="row flex-on-medium rtl-on-medium">
		<div class="column medium-6">6<br>6<br>6<br>6<br>6</div>
		<div class="column medium-6">6</div>
	</div>

</html><commit_msg>Fixed css but in demo<commit_after><!doctype html>
<html lang="en">

	<meta charset="utf-8">
	<title>basicGrid Demo</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<link rel="stylesheet" href="../dist/basicGrid.min.css">

	<style>

		.row {
			background: rgba(67, 147, 230, .2);
			margin-bottom: 2em;
		}

		.row .row {
			margin-bottom: 0;
		}

		.column {
			background: rgba(67, 147, 230, .2);
		}

		span {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 80px;
			background: rgba(67, 147, 230, 1);
			color: white;
		}

		.row.flex-on-small .column,
		.row.flex-on-medium .column,
		.row.flex-on-large .column {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1rem 0;
			color: white;
		}

		.row.flex-on-small .column::before,
		.row.flex-on-medium .column::before,
		.row.flex-on-large .column::before {
			content: '';
			position: absolute;
			top: 0;
			right: .9rem;
			bottom: 0;
			left: .9rem;
			background: rgba(67, 230, 147, 1);
			z-index: -1;
		}

	</style>

	<!-- row and column -->
	<div class="row">
		<div class="column"><span>12</span></div>
	</div>

	<!-- small- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- small- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-2"><span>2</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-3"><span>3</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- small- and medium- and large- -->
	<div class="row">
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-4 large-6"><span>1, 4, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
		<div class="column small-1 medium-6 large-6"><span>1, 6, 6</span></div>
	</div>

	<!-- -offset- -->
	<div class="row">
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1 small-offset-1"><span>1 (+1)</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1 small-offset-3"><span>1 (+3)</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- hide-on- and show-on- -->
	<div class="row">
		<div class="column small-6 hide-on-small show-on-large"><span>6</span></div>
		<div class="column small-2 hide-on-large"><span>2</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-1 hide-on-large"><span>1</span></div>
		<div class="column small-2 hide-on-large"><span>2</span></div>
		<div class="column small-6 hide-on-small show-on-large"><span>6</span></div>
	</div>

	<!-- nested row -->
	<div class="row">
		<div class="column small-4">
			<div class="row">
				<div class="column small-6"><span>6</span></div>
				<div class="column small-6"><span>6</span></div>
			</div>
		</div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
		<div class="column small-1"><span>1</span></div>
	</div>

	<!-- -push- -->
	<div class="row">
		<div class="column small-10 small-push-2"><span>10</span></div>
		<div class="column small-2 small-pull-10"><span>2</span></div>
	</div>

	<!-- flex-on- -->
	<div class="row flex-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- top-on- -->
	<div class="row flex-on-medium top-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- center-on- -->
	<div class="row flex-on-medium center-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- bottom-on- -->
	<div class="row flex-on-medium bottom-on-medium">
		<div class="column medium-1">1<br>1<br>1<br>1<br>1</div>
		<div class="column medium-2">2</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-3">3</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
		<div class="column medium-1">1</div>
	</div>

	<!-- rtl-on- -->
	<div class="row flex-on-medium rtl-on-medium">
		<div class="column medium-6">6<br>6<br>6<br>6<br>6</div>
		<div class="column medium-6">6</div>
	</div>

</html>
{'fraction_non_alphanumeric': 0.247332622032542, 'fraction_numerical': 0.04534542544678581, 'mean_word_length': 3.9923435419440745, 'pattern_counts': {'":': 0, '<': 829, '<?xml version=': 0, '>': 829, 'https://': 2, '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': '187252', 'n_tokens_mistral': 6397, 'n_tokens_neox': 5823, 'n_words': 1106}