index.md

page	introduction
title	Introduction
nav	Home
group	navigation
weight	1
layout	default
subnav	title tag Audience audience title tag Goal goal title tag Philosophy philosophy title tag Contributing contributing
updated	6 Oct 2014

Table of Contents

<div class="col">
	<h3><a href="{{ site.baseurl }}#top">Introduction</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}#audience">Audience</a></li>
		<li><a href="{{ site.baseurl }}#goal">Goal</a></li>
		<li><a href="{{ site.baseurl }}#philosophy">Philosophy</a></li>
		<li><a href="{{ site.baseurl }}#contributing">Contributing</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/markup/#top">Markup</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/markup/#philosophy">Philosophy</a></li>
		<li><a href="{{ site.baseurl }}/markup/#accessibility">Accessibility</a></li>
		<li><a href="{{ site.baseurl }}/markup/#structure">Structure</a></li>
		<li><a href="{{ site.baseurl }}/markup/#media">Media</a></li>
		<li><a href="{{ site.baseurl }}/markup/#svg">SVG</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/css/#top">CSS</a></h3>

	<ul>
		<li><a href="{{ site.baseurl }}/css/#philosophy">Philosophy</a></li>
		<li><a href="{{ site.baseurl }}/css/#established-system">Follow a System First</a></li>
		<li><a href="{{ site.baseurl }}/css/#document-system">Establish the System</a></li>
		<li><a href="{{ site.baseurl }}/css/#content-agnostic">Assume You Know Nothing</a></li>
		<li><a href="{{ site.baseurl }}/css/#minimal-styles">Write Only the Styles You Need</a></li>
		<li><a href="{{ site.baseurl }}/css/#mobile-first">Mobile-First</a></li>
		<li><a href="{{ site.baseurl }}/css/#solid-defaults">Set Solid Defaults</a></li>
		<li><a href="{{ site.baseurl }}/css/#inverted-triangle">Follow ITCSS</a></li>
		<li><a href="{{ site.baseurl }}/css/#accessibility">Accessibility</a></li>
		<li><a href="{{ site.baseurl }}/css/#low-specificity">Specificity</a></li>
		<li><a href="{{ site.baseurl }}/css/#no-margins-components">No Margins on Components</a></li>
		<li><a href="{{ site.baseurl }}/css/#one-direction-margins">Margins in One Direction</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/php/#top">PHP</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/php/#performance">Performance</a></li>
		<li><a href="{{ site.baseurl }}/php/#design-patterns">Design Patterns</a></li>
		<li><a href="{{ site.baseurl }}/php/#security">Security</a></li>
		<li><a href="{{ site.baseurl }}/php/#code-style">Code Style & Documentation</a></li>
		<li><a href="{{ site.baseurl }}/php/#unit-testing">Unit and Integration Testing</a></li>
		<li><a href="{{ site.baseurl }}/php/#libraries">Libraries and Frameworks</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/version-control/#top">Version Control</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/version-control/#structure">Structure</a></li>
		<li><a href="{{ site.baseurl }}/version-control/#workflows">Workflows</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/javascript/#top">JavaScript</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/javascript/#performance">Performance</a></li>
		<li><a href="{{ site.baseurl }}/javascript/#client-side-data">Client-side Data</a></li>
		<li><a href="{{ site.baseurl }}/javascript/#design-patterns">Design Patterns</a></li>
		<li><a href="{{ site.baseurl }}/javascript/#code-style">Code Style & Documentation</a></li>
		<li>
			<a href="{{ site.baseurl }}/javascript/#unit-and-integration-testing">Unit and Integration Testing</a>
		</li>
		<li><a href="{{ site.baseurl }}/javascript/#libraries">Libraries</a></li>
		<li><a href="{{ site.baseurl }}/react/">React</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/tools/#top">Tools</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/tools/#local-development">Local Development Environments</a></li>
		<li><a href="{{ site.baseurl }}/tools/#scaffolding">Scaffolding</a></li>
		<li><a href="{{ site.baseurl }}/tools/#task-runners">Task Runners</a></li>
		<li><a href="{{ site.baseurl }}/tools/#package-managers">Package/Dependency Managers</a></li>
		<li><a href="{{ site.baseurl }}/tools/#version-control">Version Control</a></li>
		<li><a href="{{ site.baseurl }}/tools/#command-line">Command Line Tools</a></li>
		<li><a href="{{ site.baseurl }}/tools/#a11y-testing">Accessibility Tools</a></li>
		<li><a href="{{ site.baseurl }}/tools/#vrt">Visual Regression Testing</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/structure/#top">Project Design</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/structure/#file-organization">File Organization</a></li>
		<li><a href="{{ site.baseurl }}/structure/#dependencies">Dependencies</a></li>
		<li><a href="{{ site.baseurl }}/structure/#integrations">Third-Party Integrations</a></li>
		<li><a href="{{ site.baseurl }}/structure/#modular-code">Modular Code</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/systems/#top">Systems</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/systems/#nginx">Nginx</a></li>
		<li><a href="{{ site.baseurl }}/systems/#php-fpm">PHP-FPM</a></li>
		<li><a href="{{ site.baseurl }}/systems/#mysql">MySQL</a></li>
		<li><a href="{{ site.baseurl }}/systems/#memcached-and-redis">Memcached and Redis</a></li>
		<li><a href="{{ site.baseurl }}/systems/#load-balancing">Load Balancing</a></li>
	</ul>
</div>

<div class="col">
	<h3><a href="{{ site.baseurl }}/performance/#top">Performance</a></h3>
	<ul>
		<li><a href="{{ site.baseurl }}/performance/#philosophy">Philosophy</a></li>
		<li><a href="{{ site.baseurl }}/performance/#baseline">Baseline Best Practices</a></li>
		<li><a href="{{ site.baseurl }}/performance/#core-web-vitals">Core Web Vitals</a></li>
	</ul>
</div>

{% capture introduction %}{% include markdown/Introduction.md %}{% endcapture %} {{ introduction | markdownify }}