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

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SASS - Trilix Responsive Grid System</title>
<meta name="description" content="description" />
<meta name="keywords" content="keywords" />
<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/global/fontface/index.php' ?>
<link rel="stylesheet" href="/css/global.css?v202204211024" />

<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/global/favicon/index.php' ?>

<meta property="og:image" content="<?php echo htmlspecialchars("https://$_SERVER[HTTP_HOST]"); ?>/images/social/og.jpg" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="1500" />
<meta property="og:title" content="SASS - Trilix Responsive Grid System" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>" />
<meta property="og:site_name" content="SASS - Trilix Responsive Grid System" />
<style>
	.wrapper{
		padding: 6em 0;
	}

	.grid span {
		background-color: #ddd;
		border-radius: 2px;
		color: #4a4a4a;
		display: block;
		margin: 0 0 1em;
		padding: 0.75em;
		text-align: center;
		font-weight: 600;
		font-family: "Open Sans", sans-serif;
		transition: background-color 0.25s ease, color 0.25s ease;
		font-size: 0.875em;
	}
	
	.grid span:hover {
		background-color: #bbb;
		color: #777;
	}

	.container{
		margin: 0 0 5em;
	}

	h1{
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	h2 + .social{
		margin-top: 1em;
	}

	.version{
		text-transform: uppercase;
		font-weight:  700;
	}

</style>
</head>
<body>
	<div id="wrapper" class="wrapper">
		<div class="menu-button"><a href="#" id="menu-button" aria-label="Menu Button"><i class="fa fa-bars" aria-hidden="true"></i></a></div>
		<div class="grid">
			<div class="col-12">
				<h1 id="menu-trigger add-top" class="remove-bottom" style="text-transform: uppercase;"><strong>Sass</strong> Responsive Grid</h1>
				<p class="version" style="text-transform: uppercase;">Version 4.0</p>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at metus id massa bibendum hendrerit. Integer elementum arcu consequat, ultricies lacus et, eleifend purus. Nunc mollis dapibus nulla eu consequat.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at metus id massa bibendum hendrerit. Integer elementum arcu consequat, ultricies lacus et, eleifend purus. Nunc mollis dapibus nulla eu consequat. Aliquam vestibulum in felis vel mollis. Donec condimentum venenatis sapien. Nulla euismod erat eu leo vehicula varius. Nulla ultricies est et elit tristique, eu feugiat lorem placerat. Nunc aliquet nisl quis est pulvinar, in tincidunt lectus pulvinar. Praesent tempor ipsum et mauris auctor, ut commodo velit fringilla.</p>
				<blockquote>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at metus id massa bibendum hendrerit. Integer elementum arcu consequat, ultricies lacus et, eleifend purus. Nunc mollis dapibus nulla eu consequat.</p>
					<cite>Jimmy</cite>
				</blockquote>
				<hr />

				<h1>This is a headline &mdash; h1</h1>
				<h2>This is a headline &mdash; h2</h2>
				<h3>This is a headline &mdash; h3</h3>
				<h4>This is a headline &mdash; h4</h4>
				<h5>This is a headline &mdash; h5</h5>
				<h6>This is a headline &mdash; h6</h6>
				<hr />
			</div>
		</div>
		<div class="container clearfix">
			<div class="grid">
				<div class="col-12">
					<h2>Column Classes</h2>
				</div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-4"><span>Four</span></div>
				<div class="col-4"><span>Four</span></div>
				<div class="col-4"><span>Four</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-11"><span>Eleven</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-10"><span>Ten</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-9"><span>Nine</span></div>
				<div class="col-4"><span>Four</span></div>
				<div class="col-8"><span>Eight</span></div>
				<div class="col-5"><span>Five</span></div>
				<div class="col-7"><span>Seven</span></div>
				<div class="col-6"><span>Six</span></div>
				<div class="col-6"><span>Six</span></div>
				<div class="col-7"><span>Seven</span></div>
				<div class="col-5"><span>Five</span></div>
				<div class="col-8"><span>Eight</span></div>
				<div class="col-4"><span>Four</span></div>
				<div class="col-9"><span>Nine</span></div>
				<div class="col-3"><span>Three</span></div>
				<div class="col-10"><span>Ten</span></div>
				<div class="col-2"><span>Two</span></div>
				<div class="col-11"><span>Eleven</span></div>
				<div class="col-1"><span>One</span></div>
				<div class="col-12"><span>Twelve</span><hr /></div>
				
				<div class="col-12">
					<h3>Nested Columns</h3>
					<div class="nest">
						<div class="col-12"><span>col-12</span></div>
						<div class="col-9"><span>col-9</span></div>
						<div class="col-3"><span>col-3</span></div>
						<div class="col-6"><span>col-6</span></div>
						<div class="col-6"><span>col-6</span></div>
						<div class="col-4"><span>col-4</span></div>
						<div class="col-4"><span>col-4</span></div>
						<div class="col-4"><span>col-4</span></div>
						<hr />
					</div>
				</div>

				<div class="col-12">
					<h3>Column Offsets</h3>
				</div>
				<div class="col-11 offset-1"><span>Offset 1</span></div>
				<div class="col-10 offset-2"><span>Offset 2</span></div>
				<div class="col-9 offset-3"><span>Offset 3</span></div>
				<div class="col-8 offset-4"><span>Offset 4</span></div>
				<div class="col-7 offset-5"><span>Offset 5</span></div>
				<div class="col-6 offset-6"><span>Offset 6</span></div>
				<div class="col-5 offset-7"><span>Offset 7</span></div>
				<div class="col-4 offset-8"><span>Offset 8</span></div>
				<div class="col-3 offset-9"><span>Offset 9</span></div>
				<div class="col-2 offset-10"><span>Offset 10</span></div>
				<div class="col-1 offset-11"><span>Os 11</span></div>
				<div class="col-5"><span>col-5</span></div><div class="col-4"><span>col-4</span></div>
				<div class="col-3 offset-3"><span>Offset 3</span></div><div class="col-6"><span>col-6</span></div>
				<div class="col-6"><span>col-6</span></div><div class="col-3 offset-3"><span>Offset 3</span></div>
				<div class="col-12"><hr /></div>
			</div>
			<div class="grid">
				<div class="col-12">
					<h2>Components</h2>
				</div>
			</div>
			<div class="grid half-top">
				<div class="col-12">
					<h3>Megalodon Menu</h3>
				</div>
			</div>
			<nav class="main-nav half-top" aria-label="Main Navigation">
				<div class="grid">
					<div class="col-12">
						<ul id="navigation" class="megalodon">
							<li class="nav-1"><a href="#">Menu 1</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a>
												<ul>
													<li><a href="#">Link 1a</a></li>
													<li><a href="#">Link 1b</a></li>
												</ul>
											</li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
							<li class="nav-2"><a href="#">Menu 2</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a></li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
							<li class="nav-3"><a href="#">Menu 3</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a></li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
							<li class="nav-4"><a href="#">Menu 4</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a></li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
							<li class="nav-5"><a href="#">Menu 5</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a></li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
							<li class="nav-6"><a href="#">Menu 6</a>
								<div class="menu">
									<nav>
										<ul>
											<li><a href="#">Link 1</a></li>
											<li><a href="#">Link 2</a></li>
											<li><a href="#">Link 3</a></li>
										</ul>
									</nav>
									<nav>
										<ul>
											<li><a href="#">Link 4</a></li>
											<li><a href="#">Link 5</a></li>
											<li><a href="#">Link 6</a></li>
										</ul>
									</nav>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</nav>
			<div class="grid">
				<div class="col-12">
					<hr />
				</div>
			</div>
				
			<div class="grid">
				<div class="col-12">
					<h3>Forms</h3>
					<form class="clearfix" action="">
						<div class="nest">
							<div class="col-4">
								<label for="test_text_1">This is a label</label>
								<input type="text" class="text" id="test_text_1" placeholder="This is an input..." >
							</div>
							<div class="col-4">
								<label for="test_text_2">This is a label</label>
								<input type="text" class="text" id="test_text_2" placeholder="This is an input..." >
							</div>
							<div class="col-4">
								<label for="test_select">This is a label</label>
								<select name="" id="test_select">
									<option value="" class="select-label">I am an option</option>
									<option value="">I am an option</option>
									<option value="">I am an option</option>
								</select>
							</div>
							<div class="col-12 clear">
								<label for="comments">Questions or comments</label>
								<textarea class="textarea" id="comments"></textarea>
							</div>
							<div class="col-4 clear">
								<input type="submit" class="button full-width" value="Input Submit" />
							</div>
							<div class="col-4">
								<a href="#" class="button full-width">Text Button</a>
							</div>
							<div class="col-4">
								<a href="#" class="button full-width reverse">Reverse Button</a>
							</div>
						</div>
					</form>
				</div>
				<div class="col-12"><hr /></div>
			</div>
		
			<div class="grid">
				<div class="col-12">
					<h3>Tables</h3>
					<table>
						<thead>
							<tr>
								<th>Table Head 1</th>
								<th>Table Head 2</th>
								<th>Table Head 3</th>
								<th>Table Head 4</th>
								<th>Table Head 5</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th data-title="Table Head 1">Body Head 1</th>
								<td data-title="Table Head 2">Table Data 1</td>
								<td data-title="Table Head 3">Table Data 2</td>
								<td data-title="Table Head 4">Table Data 3</td>
								<td data-title="Table Head 5">Table Data 4</td>
							</tr>
							<tr>
								<th data-title="Table Head 1">Body Head 2</th>
								<td data-title="Table Head 2">Table Data 1</td>
								<td data-title="Table Head 3">Table Data 2</td>
								<td data-title="Table Head 4">Table Data 3</td>
								<td data-title="Table Head 5">Table Data 4</td>
							</tr>
							<tr>
								<th data-title="Table Head 1">Body Head 3</th>
								<td data-title="Table Head 2">Table Data 1</td>
								<td data-title="Table Head 3">Table Data 2</td>
								<td data-title="Table Head 4">Table Data 3</td>
								<td data-title="Table Head 5">Table Data 4</td>
							</tr>
							<tr>
								<th data-title="Table Head 1">Body Head 4</th>
								<td data-title="Table Head 2">Table Data 1</td>
								<td data-title="Table Head 3">Table Data 2</td>
								<td data-title="Table Head 4">Table Data 3</td>
								<td data-title="Table Head 5">Table Data 4</td>
							</tr>
							<tr>
								<th data-title="Table Head 1">Body Head 5</th>
								<td data-title="Table Head 2">Table Data 1</td>
								<td data-title="Table Head 3">Table Data 2</td>
								<td data-title="Table Head 4">Table Data 3</td>
								<td data-title="Table Head 5">Table Data 4</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="col-12"><hr /></div>
				<div class="col-12 add-bottom">
					<h3>Social Example</h3>
					<nav class="social half-top">
						<ul>
							<li><a href="#" class="facebook" aria-label="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
							<li><a href="#" class="twitter" aria-label="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
							<li><a href="#" class="youtube" aria-label="youtube"><i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i></a></li>
							<li><a href="#" class="pinterest" aria-label="pinterest"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
							<li><a href="#" class="linkedin" aria-label="linkedin"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
						</ul>
					</nav>
				</div>
				<div class="col-12"><hr /></div>
				<div class="col-12">
					<h3>Column Lists</h3>
					<ul class="li-column-4 input-list">
						<li><input type="checkbox" id="cbx1" /><label for="cbx1">I am an input</label></li>
						<li><input type="checkbox" id="cbx2" /><label for="cbx2">I am an input</label></li>
						<li><input type="checkbox" id="cbx3" /><label for="cbx3">I am an input</label></li>
						<li><input type="checkbox" id="cbx4" /><label for="cbx4">I am an input</label></li>
					</ul>
				</div>
				<div class="col-12"><hr /></div>
				<div class="col-12">
					<h3>Pagination</h3>
					<nav class="pagination">
						<ul>
							<li class="page-nav"><a href="?page=1" class="next">Prev</a></li>
							<li><a href="?page=2" class="next">Next</a></li>
							<li class="select"><form method="GET"><select name="page" aria-label="Page Select"><option selected="selected">1</option><option>2</option></select></form></li>
							<li class="page-number">Page 1 of 2</li>
						</ul>
					</nav>
				</div>
				<div class="col-12"><hr /></div>				
			</div>
		</div>
		<div class="slide-drawer drawer-right" aria-hidden="true">
			<div class="drawer-content">
				<div class="close-button">
					<a href="#" id="close-button" aria-label="Menu Close"><div class="icon" aria-hidden="true"><figure></figure></div></a>
				</div>
				<div class="menu-search">
					<form method="get" action="/search/">
						<div class="field-container">
							<input aria-label="search" placeholder="Search" class="text" name="q" autocomplete="off" type="text" value="" />
							<button type="submit" class="search-submit" aria-label="Search-button"><i class="fa fa-search" aria-hidden="true"></i></button>
						</div>
					</form>
				</div>
				<nav class="slide-menu">
					<ul>
						<li class="nav-head"><a href="#">Menu Header Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
					</ul>
				</nav>
				<nav class="slide-menu">
					<ul>
						<li class="nav-head"><a href="#">Menu Header Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
					</ul>
				</nav>
				<nav class="slide-menu">
					<ul>
						<li class="nav-head"><a href="#">Menu Header Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
					</ul>
				</nav>
				<nav class="slide-menu">
					<ul>
						<li class="nav-head"><a href="#">Menu Header Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
						<li><a href="#">Menu Item</a></li>
					</ul>
				</nav>
				<nav class="slide-menu menu-social">
					<ul>
						<li><a href="#" class="facebook" aria-label="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
						<li><a href="#" class="twitter" aria-label="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
						<li><a href="#" class="youtube" aria-label="youtube"><i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i></a></li>
						<li><a href="#" class="pinterest" aria-label="pinterest"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
						<li><a href="#" class="linkedin" aria-label="linkedin"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
<script src="/js/global.js"></script>
</body>
</html>