<commit_before><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>veRepo - is a collection of modules and mixins for fast and maintainable frontend development by <NAME>.</title>
	<link rel="stylesheet" href="example/style.css">
</head>
<body>
	<div id="wrapper" class="grid">
		<div class="row clearfix">
			<div class="col-6-12 vertical-spacing align--left"><a href="http://varemenos.com" class="blue-flat-button button--large">By <NAME>.</a></div>
			<div class="col-6-12 vertical-spacing align--right">
				<a href="./docs" class="blue-flat-button button--large" target="_blank">Docs</a>
				<a href="https://github.com/varemenos/verepo" class="blue-flat-button button--large" target="_blank">GitHub</a>
				<a href="https://github.com/varemenos/verepo/archive/master.zip" class="dark-blue-flat-button button--large" target="_blank">Download</a>
			</div>
		</div>

		<div class="hero">
			<h1><a href="http://varemenos.github.io/verepo">veRepo</a></h1>
			<h2 class="vertical-spacing align--center">veRepo is a SASS library of modules and mixins for robust and maintainable front-end development using SASS. Most of the modular items/objects in this repo will work by just adding 1 class name to the html element you desire to style (although there are some exceptions).</h2>
		</div>

		<hr class="no-top-margin">

		<div class="row vertical-spacing" role="main">
			<div class="col-4-12 align--center">
				<div class="item">
					<h3 class="align--left">Buttons</h3>
					<h4 class="align--left">Flat</h4>
					<button class="dark-blue-flat-button button--small">Button</button>
					<button class="blue-flat-button button--small">Button</button>
					<button class="white-flat-button button--small">Button</button>
					<h4 class="align--left">Curved</h4>
					<button class="dark-blue-curved-button button--small">Button</button>
					<button class="blue-curved-button button--small">Button</button>
					<button class="white-curved-button button--small">Button</button>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Truncate</h3>
					<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quae architecto nemo mollitia iure in ratione vitae dolorum adipisci officiis nesciunt delectus voluptatibus molestias natus quaerat vel consectetur aliquid sit voluptates fugit autem tenetur necessitatibus perspiciatis laudantium repellat dicta magni sequi soluta inventore quia incidunt veritatis facilis sapiente! Optio, necessitatibus!</p>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Loading</h3>
					<h4 class="align--left">Type 1</h4>
					<div class="loading1"></div>
					<h4 class="align--left">Type 2</h4>
					<div class="loading2"></div>
				</div>
			</div>

			<div class="col-4-12">
				<div class="item">
					<h3 class="align--left">Blockquote</h3>
					<blockquote>
						<h5>Lorem is too mainstream</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, tenetur maxime dicta possimus pariatur est?</p><cite>lipsum.com</cite>
					</blockquote>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Dozens of prefixes</h3>
					<p> Prefixes got Deprecated, use Autoprefixer instead!
					</p>
				</div>
			</div>

			<div class="col-4-12">
				<div class="item align--center">
					<h3 class="align--left">Triangles</h3>
					<h4 class="align--left">1 Side</h4>
					<span class="triangle-right"></span>
					<span class="triangle-left"></span>
					<span class="triangle-top"></span>
					<span class="triangle-bottom"></span>
					<h4 class="align--left">2 Sides</h4>
					<span class="triangle-topright"></span>
					<span class="triangle-topleft"></span>
					<span class="triangle-bottomright"></span>
					<span class="triangle-bottomleft"></span>
					<span class="triangle-topbottom"></span>
					<span class="triangle-leftright"></span>
					<h4 class="align--left">3 Sides</h4>
					<span class="triangle-topbottomright"></span>
					<span class="triangle-topbottomleft"></span>
					<span class="triangle-topleftright"></span>
					<span class="triangle-bottomleftright"></span>
				</div>
			</div>
		</div>

		<hr>

		<div class="row vertical-spacing last" role="main">
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Forms</h3>
					<h4 class="align--left">Vertical</h4>
					<form class="vertical-form align--right" action="">
						<label class="align--left">Text <input type="text" placeholder="text"></label>
						<label class="align--left">Disabled <input type="text" placeholder="disabled" disabled></label>
						<label class="align--left">Email <input type="email" placeholder="Email" required></label>
						<label class="align--left">Password <input type="password" placeholder="Password"></label>
						<label class="align--left">State
							<select>
								<option>AL</option>
								<option>CA</option>
								<option>IL</option>
							</select>
						</label>

						<label class="align--left">Chapters
							<select>
								 <optgroup label="8.01 Physics I: Classical Mechanics">
									<option value="8.01.1">Lecture 01: Powers of Ten</option>
									<option value="8.01.2">Lecture 02: 1D Kinematics</option>
									<option value="8.01.3">Lecture 03: Vectors</option>
								 </optgroup>
								 <optgroup label="8.02 Electricity and Magnestism">
									<option value="8.02.1">Lecture 01: What holds our world together?</option>
									<option value="8.02.2">Lecture 02: Electric Field</option>
									<option value="8.02.3">Lecture 03: Electric Flux</option>
								 </optgroup>
								 <optgroup label="8.03 Physics III: Vibrations and Waves">
									<option value="8.03.1">Lecture 01: Periodic Phenomenon</option>
									<option value="8.03.2">Lecture 02: Beats</option>
									<option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option>
								</optgroup>
							</select>
						</label>
						<label class="align--left">Notes <textarea class="resize--vertical"></textarea></label>

						<div class="clearfix">
							<div class="float--right">
								<button type="submit" class="blue-flat-button button--small">Sign in</button>
								<button type="reset" class="white-flat-button button--small">Reset</button>
							</div>
							<div class="float--right">
								<label class="align--left">Remember Me: <input type="checkbox"></label>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Grid</h3>
				</div>

				<hr>

				<div class="grid">
					<div class="row align--center">
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-8-12">
							<div class="item">8/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-3-12">
							<div class="item">3/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-3-12">
							<div class="item">3/12</div>
						</div>
					</div>
				</div>

				<hr>
				<div class="item">
					<h3 class="align--left">Media Object</h3>
					<h4 class="align--left">Left</h4>
					<div class="media--left">
						<div class="img">
							<img src="http://placehold.it/150x150">
						</div>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, ut impedit porro quas unde. Autem, voluptatem, vero debitis nihil eligendi perspiciatis velit nesciunt doloribus quas itaque voluptate fugit iusto iure harum voluptas ipsum quisquam esse possimus repudiandae quibusdam ducimus ullam magni illo dolor quis tenetur quod quasi officia quaerat minus!</div>
					</div>
					<h4 class="align--left">Right</h4>
					<div class="media--right">
						<div class="img">
							<img src="http://placehold.it/150x150">
						</div>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, ut impedit porro quas unde. Autem, voluptatem, vero debitis nihil eligendi perspiciatis velit nesciunt doloribus quas itaque voluptate fugit iusto iure harum voluptas ipsum quisquam esse possimus repudiandae quibusdam ducimus ullam magni illo dolor quis tenetur quod quasi officia quaerat minus!</div>
					</div>
				</div>
			</div>
		</div>

		<hr>

		<div class="row vertical-spacing last" role="main">
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Lists</h3>
					<h4 class="align--left">unstyled</h4>
					<ul class="unstyled-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>L<NAME></li>
						<li>Babara Cobble</li>
						<li><NAME></li>
						<li>T<NAME></li>
						<li>Yuette Hinshaw</li>
						<li>Allene Wiltshire</li>
						<li>Meg Canavan</li>
						<li><NAME></li>
						<li>Nathanial Sales</li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>L<NAME></li>
						<li>Maureen Oliphant</li>
					</ul>
					<h4 class="align--left">floated</h4>
					<ul class="floated-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Lynell Cardona</li>
						<li>Babara Cobble</li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Y<NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>N<NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Maureen Oliphant</li>
					</ul>
					<h4 class="align--left">inline</h4>
					<ul class="inline-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Lynell Cardona</li>
						<li>Babara Cobble</li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Yuette Hinshaw</li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Nathanial Sales</li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
					</ul>
				</div>
			</div>
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Align</h3>
					<h4 class="align--left">Left</h4>
					<div class="align--left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Right</h4>
					<div class="align--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Center</h4>
					<div class="align--center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Justify</h4>
					<div class="align--justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
				</div>

				<hr>

				<div class="item clearfix">
					<h3 class="align--left">Float</h3>
					<h4 class="align--left">Left</h4>
					<div class="float--left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Right</h4>
					<div class="float--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
				</div>
			</div>
		</div>

		<footer role="contentinfo">
			<p>&copy; 2013 <NAME>.</p>
		</footer>
	</div>
</body>
</html>
<commit_msg>added some width to the floatted elements to show of the floating capabilities<commit_after><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>veRepo - is a collection of modules and mixins for fast and maintainable frontend development by <NAME>.</title>
	<link rel="stylesheet" href="example/style.css">
</head>
<body>
	<div id="wrapper" class="grid">
		<div class="row clearfix">
			<div class="col-6-12 vertical-spacing align--left"><a href="http://varemenos.com" class="blue-flat-button button--large">By <NAME>.</a></div>
			<div class="col-6-12 vertical-spacing align--right">
				<a href="./docs" class="blue-flat-button button--large" target="_blank">Docs</a>
				<a href="https://github.com/varemenos/verepo" class="blue-flat-button button--large" target="_blank">GitHub</a>
				<a href="https://github.com/varemenos/verepo/archive/master.zip" class="dark-blue-flat-button button--large" target="_blank">Download</a>
			</div>
		</div>

		<div class="hero">
			<h1><a href="http://varemenos.github.io/verepo">veRepo</a></h1>
			<h2 class="vertical-spacing align--center">veRepo is a SASS library of modules and mixins for robust and maintainable front-end development using SASS. Most of the modular items/objects in this repo will work by just adding 1 class name to the html element you desire to style (although there are some exceptions).</h2>
		</div>

		<hr class="no-top-margin">

		<div class="row vertical-spacing" role="main">
			<div class="col-4-12 align--center">
				<div class="item">
					<h3 class="align--left">Buttons</h3>
					<h4 class="align--left">Flat</h4>
					<button class="dark-blue-flat-button button--small">Button</button>
					<button class="blue-flat-button button--small">Button</button>
					<button class="white-flat-button button--small">Button</button>
					<h4 class="align--left">Curved</h4>
					<button class="dark-blue-curved-button button--small">Button</button>
					<button class="blue-curved-button button--small">Button</button>
					<button class="white-curved-button button--small">Button</button>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Truncate</h3>
					<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quae architecto nemo mollitia iure in ratione vitae dolorum adipisci officiis nesciunt delectus voluptatibus molestias natus quaerat vel consectetur aliquid sit voluptates fugit autem tenetur necessitatibus perspiciatis laudantium repellat dicta magni sequi soluta inventore quia incidunt veritatis facilis sapiente! Optio, necessitatibus!</p>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Loading</h3>
					<h4 class="align--left">Type 1</h4>
					<div class="loading1"></div>
					<h4 class="align--left">Type 2</h4>
					<div class="loading2"></div>
				</div>
			</div>

			<div class="col-4-12">
				<div class="item">
					<h3 class="align--left">Blockquote</h3>
					<blockquote>
						<h5>Lorem is too mainstream</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, tenetur maxime dicta possimus pariatur est?</p><cite>lipsum.com</cite>
					</blockquote>
				</div>

				<hr>

				<div class="item">
					<h3 class="align--left">Dozens of prefixes</h3>
					<p> Prefixes got Deprecated, use Autoprefixer instead!
					</p>
				</div>
			</div>

			<div class="col-4-12">
				<div class="item align--center">
					<h3 class="align--left">Triangles</h3>
					<h4 class="align--left">1 Side</h4>
					<span class="triangle-right"></span>
					<span class="triangle-left"></span>
					<span class="triangle-top"></span>
					<span class="triangle-bottom"></span>
					<h4 class="align--left">2 Sides</h4>
					<span class="triangle-topright"></span>
					<span class="triangle-topleft"></span>
					<span class="triangle-bottomright"></span>
					<span class="triangle-bottomleft"></span>
					<span class="triangle-topbottom"></span>
					<span class="triangle-leftright"></span>
					<h4 class="align--left">3 Sides</h4>
					<span class="triangle-topbottomright"></span>
					<span class="triangle-topbottomleft"></span>
					<span class="triangle-topleftright"></span>
					<span class="triangle-bottomleftright"></span>
				</div>
			</div>
		</div>

		<hr>

		<div class="row vertical-spacing last" role="main">
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Forms</h3>
					<h4 class="align--left">Vertical</h4>
					<form class="vertical-form align--right" action="">
						<label class="align--left">Text <input type="text" placeholder="text"></label>
						<label class="align--left">Disabled <input type="text" placeholder="disabled" disabled></label>
						<label class="align--left">Email <input type="email" placeholder="Email" required></label>
						<label class="align--left">Password <input type="password" placeholder="Password"></label>
						<label class="align--left">State
							<select>
								<option>AL</option>
								<option>CA</option>
								<option>IL</option>
							</select>
						</label>

						<label class="align--left">Chapters
							<select>
								 <optgroup label="8.01 Physics I: Classical Mechanics">
									<option value="8.01.1">Lecture 01: Powers of Ten</option>
									<option value="8.01.2">Lecture 02: 1D Kinematics</option>
									<option value="8.01.3">Lecture 03: Vectors</option>
								 </optgroup>
								 <optgroup label="8.02 Electricity and Magnestism">
									<option value="8.02.1">Lecture 01: What holds our world together?</option>
									<option value="8.02.2">Lecture 02: Electric Field</option>
									<option value="8.02.3">Lecture 03: Electric Flux</option>
								 </optgroup>
								 <optgroup label="8.03 Physics III: Vibrations and Waves">
									<option value="8.03.1">Lecture 01: Periodic Phenomenon</option>
									<option value="8.03.2">Lecture 02: Beats</option>
									<option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option>
								</optgroup>
							</select>
						</label>
						<label class="align--left">Notes <textarea class="resize--vertical"></textarea></label>

						<div class="clearfix">
							<div class="float--right" style="width: 50%">
								<button type="submit" class="blue-flat-button button--small">Sign in</button>
								<button type="reset" class="white-flat-button button--small">Reset</button>
							</div>
							<div class="float--right" style="width: 50%">
								<label class="align--left">Remember Me: <input type="checkbox"></label>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Grid</h3>
				</div>

				<hr>

				<div class="grid">
					<div class="row align--center">
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-4-12">
							<div class="item">4/12</div>
						</div>
						<div class="col-8-12">
							<div class="item">8/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-2-12">
							<div class="item">2/12</div>
						</div>
					</div>
					<div class="row align--center">
						<div class="col-3-12">
							<div class="item">3/12</div>
						</div>
						<div class="col-6-12">
							<div class="item">6/12</div>
						</div>
						<div class="col-3-12">
							<div class="item">3/12</div>
						</div>
					</div>
				</div>

				<hr>
				<div class="item">
					<h3 class="align--left">Media Object</h3>
					<h4 class="align--left">Left</h4>
					<div class="media--left">
						<div class="img">
							<img src="http://placehold.it/150x150">
						</div>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, ut impedit porro quas unde. Autem, voluptatem, vero debitis nihil eligendi perspiciatis velit nesciunt doloribus quas itaque voluptate fugit iusto iure harum voluptas ipsum quisquam esse possimus repudiandae quibusdam ducimus ullam magni illo dolor quis tenetur quod quasi officia quaerat minus!</div>
					</div>
					<h4 class="align--left">Right</h4>
					<div class="media--right">
						<div class="img">
							<img src="http://placehold.it/150x150">
						</div>
						<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, ut impedit porro quas unde. Autem, voluptatem, vero debitis nihil eligendi perspiciatis velit nesciunt doloribus quas itaque voluptate fugit iusto iure harum voluptas ipsum quisquam esse possimus repudiandae quibusdam ducimus ullam magni illo dolor quis tenetur quod quasi officia quaerat minus!</div>
					</div>
				</div>
			</div>
		</div>

		<hr>

		<div class="row vertical-spacing last" role="main">
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Lists</h3>
					<h4 class="align--left">unstyled</h4>
					<ul class="unstyled-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Babara Cobble</li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Yuette Hinshaw</li>
						<li>Allene Wiltshire</li>
						<li>Meg Canavan</li>
						<li>Ahmed Stellhorn</li>
						<li>Nathanial Sales</li>
						<li>Alica Pinelli</li>
						<li><NAME></li>
						<li>Ming Knudtson</li>
						<li>Myrt<NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Maureen Oliphant</li>
					</ul>
					<h4 class="align--left">floated</h4>
					<ul class="floated-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Yuette Hinshaw</li>
						<li>Allene Wiltshire</li>
						<li>Meg Canavan</li>
						<li><NAME></li>
						<li>Nathanial Sales</li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Ming Knudtson</li>
						<li>My<NAME></li>
						<li>L<NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Maureen Oliphant</li>
					</ul>
					<h4 class="align--left">inline</h4>
					<ul class="inline-list">
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li>Lynell Cardona</li>
						<li>Babara Cobble</li>
						<li><NAME></li>
						<li>Tynish<NAME>ner</li>
						<li>Yuette Hinshaw</li>
						<li>Allene Wiltshire</li>
						<li>Meg Canavan</li>
						<li><NAME></li>
						<li>Nathanial Sales</li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
						<li><NAME></li>
					</ul>
				</div>
			</div>
			<div class="col-6-12">
				<div class="item">
					<h3 class="align--left">Align</h3>
					<h4 class="align--left">Left</h4>
					<div class="align--left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Right</h4>
					<div class="align--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Center</h4>
					<div class="align--center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Justify</h4>
					<div class="align--justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
				</div>

				<hr>

				<div class="item clearfix">
					<h3 class="align--left">Float</h3>
					<h4 class="align--left">Left</h4>
					<div class="float--left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
					<h4 class="align--left">Right</h4>
					<div class="float--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, accusamus voluptatum tempora?</div>
				</div>
			</div>
		</div>

		<footer role="contentinfo">
			<p>&copy; 2013 <NAME>.</p>
		</footer>
	</div>
</body>
</html>

{'fraction_non_alphanumeric': 0.18739418193012158, 'fraction_numerical': 0.023549330460212407, 'mean_word_length': 2.847372316802369, 'pattern_counts': {'":': 0, '<': 1145, '<?xml version=': 0, '>': 1145, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 42, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6554793', 'n_tokens_mistral': 12549, 'n_tokens_neox': 9191, 'n_words': 1928}