Use these snippets if you use my Boost framework & Sublime Text
- Example page https://github.com/tmwagency/kickoff/blob/master/index.html
- Grids: http://mrmartineau.github.com/Choreographic-Grid/test.html ko:
Remove the 'form_stacked' class to have form labels to the left of the inputs
<form action="#" class="form-horizontal">
<fieldset>
<legend>Your form</legend>
</fieldset>
</form>
<ul class="control-group">
<li class="control-item">
<label for="name" class="control-label">Name</label>
<div class="control-input">
<input type="text" id="name" placeholder="Zander Martineau" />
</div>
</li>
<li class="control-item">
<label for="email" class="control-label">Email</label>
<div class="control-input">
<input type="email" id="email" placeholder="zmartineau@tmw.co.uk" />
</div>
</li>
<li class="control-item">
<label for="phone" class="control-label">Phone</label>
<div class="control-input">
<input type="number" id="phone" placeholder="020 123 4567" />
</div>
</li>
<li class="control-item">
<label for="comments" class="control-label">Comments</label>
<div class="control-input">
<textarea id="comments" rows="3" cols="50" class="input-xlarge"></textarea>
</div>
</li>
</ul>
<li class="control-item">
<label for="name" class="control-label">Name</label>
<div class="control-input">
<input type="text" id="name" placeholder="Zander Martineau" />
</div>
</li>
<span class="form-note">?<span>First name & last name</span></span>
<div class="row">
</div>
<div class="row">
<div class="span-6 col">
</div>
<div class="span-6 col">
</div>
</div>
<div class="span-6 col">
</div>
These reference https://github.com/mrmartineau/Boost/blob/master/less/mixins.less
.border-radius(5px);
.box-shadow(0 1px 3px rgba(0,0,0,.25));
.opacity(60);
.size(10px,10px);
.square(50px);
.font-size(16);
.line-height(50px);