Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
183 lines (163 sloc) 8.87 KB
<!doctype html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>Natural: A cutting-edge CSS framework</title>
<meta name='keywords' content='framework, css framework, html5, css3, responsive'>
<meta name='description' content='A cutting-edge CSS framework'>
<meta name='author' content='Tat-Yuen Hui'>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' type='text/css' href='natural.css'>
<link rel='stylesheet' type='text/css' href='plugins/button.css'>
<link rel='stylesheet' type='text/css' href='plugins/nav.css'>
<link rel='stylesheet' type='text/css' href='assets/css/common.css'>
<link rel='stylesheet' type='text/css' href='assets/css/screen-form.css'>
</head>
<body>
<nav class='block nav site-nav'>
<div class='container'>
<div class='unit block__size1of1'>
<ul>
<li class='nav__home'><a href='index.htm'>Home</a></li>
<li class='nav__typography'><a href='typography.htm'>Typography</a></li>
<li class='nav__grid'><a href='grid.htm'>Grid</a></li>
<li class='nav__media'><a href='media.htm'>Media</a></li>
<li class='nav__form nav--selected'>Form</li>
</ul>
</div>
</div>
</nav>
<div class='block block__gutter form-example'>
<div class='container'>
<div class='unit block__size1of2'>
<form class='form_inline'>
<fieldset>
<legend><h2 class='h6--margin-b'>A compact inline form</h2></legend>
<input type='email' placeholder='Email'>
<input type='password' placeholder='Password'>
<label for='remember'>
<input id='remember' type='checkbox'> Remember me
</label>
<button type='submit' class='button botton_notice'>Sign in</button>
</fieldset>
</form>
<form class='form_stacked'>
<fieldset>
<legend><h2 class='h6--margin-tb'>A stacked form</h2></legend>
<div class='form-group'>
<label for='email'>Email</label>
<input id='email' class='form-control' type='email' placeholder='Email'>
</div>
<div class='form-group'>
<label for='password'>Password</label>
<input id='password' class='form-control' type='password' placeholder='Password'>
</div>
<div class='form-group'>
<label for='state'>State</label>
<select id='state'>
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
<div class='checkbox'>
<label for='remember'>
<input id='remember-me' type='checkbox'> Remember me
</label>
</div>
<button type='submit' class='button'>Sign in</button>
</fieldset>
</form>
<form class='form_aligned'>
<fieldset>
<legend><h2 class='h6--margin-tb'>An aligned form</h2></legend>
<div class='block form-group'>
<div class='unit block__size1of3'>
<label for='name'>Username</label>
</div>
<div class='unit block__size2of3'>
<input id='name' class='form-control' type='text' placeholder='Username'>
</div>
</div>
<div class='block form-group'>
<div class='unit block__size1of3'>
<label for='password'>Password</label>
</div>
<div class='unit block__size2of3'>
<input id='password' class='form-control' type='password' placeholder='Password'>
</div>
</div>
<div class='block form-group'>
<div class='unit block__size1of3'>
<label for='email'>Email Address</label>
</div>
<div class='unit block__size2of3'>
<input id='email' class='form-control' type='email' placeholder='Email Address'>
</div>
</div>
<div class='block form-group'>
<div class='unit block__size1of3'>
<label for='foo'>Supercalifragilistic Label</label>
</div>
<div class='unit block__size2of3'>
<input id='foo' class='form-control' type='text' placeholder='Enter something here...'>
</div>
</div>
<div class='checkbox'>
<label for='terms'>
<input id='terms' type='checkbox'> I've read the terms and conditions
</label>
</div>
<button type='submit' class='button'>Submit</button>
</fieldset>
</form>
<form class='form_stacked'>
<fieldset>
<legend><h2 class='h6--margin-tb'>Multi-column form</h2></legend>
<div class='block'>
<div class='unit block__size1of3'>
<label for='first-name'>First Name</label>
<input id='first-name' type='text'>
</div>
<div class='unit block__size1of3'>
<label for='last-name'>Last Name</label>
<input id='last-name' type='text'>
</div>
<div class='unit block__size1of3'>
<label for='email'>E-Mail</label>
<input id='email' type='email' required>
</div>
</div>
<div class='block'>
<div class='unit block__size1of3'>
<label for='city'>City</label>
<input id='city' type='text'>
</div>
<div class='unit block__size1of3'>
<label for='state'>State</label>
<select id='state'>
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
<div class='unit block__size1of3'>
</div>
</div>
<label for='terms'>
<input id='terms' type='checkbox'> I've read the terms and conditions
</label>
<button type='submit' class='button button_notice'>Submit</button>
</fieldset>
</form>
</div>
<div class='unit block__size1of2'>
<p>Morbi vulputate quam quis magna rutrum commodo. Integer sollicitudin condimentum euismod. Donec viverra iaculis tempus. Ut pellentesque ligula in metus convallis eu lacinia eros tempor. Vestibulum sapien magna, feugiat sodales iaculis adipiscing, cursus sit amet erat. Aliquam vitae lacus elit, vel lobortis tellus. Maecenas laoreet fermentum dui, nec commodo orci sagittis ut. Suspendisse potenti. Proin viverra ante vel nibh fringilla rutrum. Morbi sit amet sapien non lorem feugiat congue. Vivamus at tristique erat. Cras ultricies aliquam nibh vitae convallis. Curabitur neque dolor, adipiscing fermentum vulputate at, porta id tellus. Fusce faucibus facilisis tellus sit amet consequat. Vestibulum pulvinar auctor libero, non vehicula orci fringilla eu. Donec et odio ut ante adipiscing tempor.</p>
<p>Morbi vulputate quam quis magna rutrum commodo. Integer sollicitudin condimentum euismod. Donec viverra iaculis tempus. Ut pellentesque ligula in metus convallis eu lacinia eros tempor. Vestibulum sapien magna, feugiat sodales iaculis adipiscing, cursus sit amet erat. Aliquam vitae lacus elit, vel lobortis tellus. Maecenas laoreet fermentum dui, nec commodo orci sagittis ut. Suspendisse potenti. Proin viverra ante vel nibh fringilla rutrum. Morbi sit amet sapien non lorem feugiat congue. Vivamus at tristique erat. Cras ultricies aliquam nibh vitae convallis. Curabitur neque dolor, adipiscing fermentum vulputate at, porta id tellus. Fusce faucibus facilisis tellus sit amet consequat. Vestibulum pulvinar auctor libero, non vehicula orci fringilla eu. Donec et odio ut ante adipiscing tempor.</p>
<p>Morbi vulputate quam quis magna rutrum commodo. Integer sollicitudin condimentum euismod. Donec viverra iaculis tempus. Ut pellentesque ligula in metus convallis eu lacinia eros tempor. Vestibulum sapien magna, feugiat sodales iaculis adipiscing, cursus sit amet erat. Aliquam vitae lacus elit, vel lobortis tellus. Maecenas laoreet fermentum dui, nec commodo orci sagittis ut. Suspendisse potenti. Proin viverra ante vel nibh fringilla rutrum. Morbi sit amet sapien non lorem feugiat congue. Vivamus at tristique erat. Cras ultricies aliquam nibh vitae convallis. Curabitur neque dolor, adipiscing fermentum vulputate at, porta id tellus. Fusce faucibus facilisis tellus sit amet consequat. Vestibulum pulvinar auctor libero, non vehicula orci fringilla eu. Donec et odio ut ante adipiscing tempor.</p>
<p>Morbi vulputate quam quis magna rutrum commodo. Integer sollicitudin condimentum euismod. Donec viverra iaculis tempus. Ut pellentesque ligula in metus convallis eu lacinia eros tempor. Vestibulum sapien magna, feugiat sodales iaculis adipiscing, cursus sit amet erat. Aliquam vitae lacus elit, vel lobortis tellus. Maecenas laoreet fermentum dui, nec commodo orci sagittis ut. Suspendisse potenti. Proin viverra ante vel nibh fringilla rutrum. Morbi sit amet sapien non lorem feugiat congue. Vivamus at tristique erat. Cras ultricies aliquam nibh vitae convallis. Curabitur neque dolor, adipiscing fermentum vulputate at, porta id tellus. Fusce faucibus facilisis tellus sit amet consequat. Vestibulum pulvinar auctor libero, non vehicula orci fringilla eu. Donec et odio ut ante adipiscing tempor.</p>
</div>
</div>
</div>
</body>
</html>