Foundation Example

by BinaryAcid

HTML

<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/normalize.css">
<link rel="stylesheet" href="http://techef.net/tools/fiddle-foundation/4/css/foundation.min.css">
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/jquery.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/vendor/custom.modernizr.js"></script>
<script src="http://techef.net/tools/fiddle-foundation/4/js/foundation.min.js"></script>
<body>

	<div class="row">
		<div class="large-12 columns">
			<h2>Welcome to Foundation</h2>
			<p>This is version 4.0.9.</p>
			<hr />
		</div>
	</div>

	<div class="row">
		<div class="large-8 columns">
			<h3>The Grid</h3>

			<!-- Grid Example -->
			<div class="row">
				<div class="large-12 columns">
					<div class="panel">
						<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="large-6 columns">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
				<div class="large-6 columns">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="large-4 columns">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
			</div>

			<h3>Buttons</h3>

      <div class="row">
        <div class="large-6 columns">
          <p><a href="#" class="small button">Small Button</a></p>
          <p><a href="#" class="button">Medium Button</a></p>
          <p><a href="#" class="large button">Large Button</a></p>
        </div>
        <div class="large-6 columns">
          <p><a href="#" class="small alert...

JavaScript

$(document).foundation();