Quick Start Guide

For miscellaneous projects floating around leerburg.com, here's a quick guide to get you started.

These instructions were relevant to an old php website where pages were updated to NitroCSS on a rolling basis. They assume that NitroCSS and custom css have already been compiled and made available in the project.

Starter sample

<?php
	$SVG_PATH = "/images/core-icons.svg";
	$ICONIC_PATH = "/images/open-iconic-sprites.svg"; 
?>
<!DOCTYPE html>
<html>
<head>	
	<link rel="stylesheet" href="//leerburg.com/nitro-leerburg/build/global.css">
</head>
<body>

<div class="container" role="presentation">

	<main class="main global-padding">

		<h1 class="heading-1">Page Title</h1>

		<!-- actual content will vary -->
		<section>
			<h2 class="heading-2">Section Title</h2>
		</section>

	</main>
</div><!-- ends .container -->

</body>
</html>

HTML structure explained

<?php
	// declare path for svgs in PHP (for convenience, best in an include or config if your project has one)
	$SVG_PATH = "/images/core-icons.svg";
	$ICONIC_PATH = "/images/open-iconic-sprites.svg"; 
?>
<!DOCTYPE html>
<html>
<head>	
	<!-- stylesheet link -->
	<link rel="stylesheet" href="//leerburg.com/nitro/css/styles.css">
</head>
<body>
	<!-- typically header area -->

<!-- typically the end of a header include -->
<!-- ************************************* -->

		<!-- interior layout here (details below) -->

<!-- *************************************** -->
<!-- typically the start of a footer include -->

	<!-- typically footer area -->

</body>
</html>

Interior layout annotated example

<!-- the wrapper around all the content on the page (sometimes excluding main header/footer includes, depends on layout) -->
<div class="container" role="presentation">
	
	<!-- typically the spot you might add a sidebar include -->

	<!-- content on *this* page -->
	<main class="main global-padding">

		<!-- every page should have one <h1> -->
		<h1 class="heading-1">Page Title</h1>	

		<!-- some content, like <p> can just exist on the page without additional markup -->
		<!-- .paragraph and .heading-# classes contains css for vertical rhythm -->
		<p class="paragraph">Some text...</p>
	
		<section>
			<!-- section is a semantic element that should include a heading tag -->
			<h2 class="heading-2">Section Title</h2>	

			<!-- for more complex layouts, you can use the grid system -->
			<!-- the grid system need not be used to define the whole page, just use as needed -->
			<div class="grid">
				<div class="column_6"></div>
				<div class="column_6"></div>
				<div class="column_4"></div>
				<div class="column_8"></div>
			</div>
		</section>

	</main>
</div><!-- ends .container -->