Getting Started

1. Intro

Manhattan is a boilerplate which add some UI to the Sass mixin librairy Bourbon.io.
Manhattan use also Neat, the lightweight semantic grid framework for Bourbon.

Manhattan includes already Bourbon and Neat. For more information, please read the Bourbon & the Neat documentation.

2. Install Sass

You'll have to install Sass/Compass to use Manhattan.

3. File structure


fonts/
├── fontawesome/
images/
├── checkboxes-radios.png
javascript
├── highlightjs
├── modernizr-v2.6.2-min.js
sass/
├── bourbon/
├── manhattan/
├── neat/
├── app.scss
stylesheets
├── app.css
index.html
						

You'll need to use Sass/Compass to watch app.scss and add it to the stylesheets folder.

4. Usage

Every variables are located in sass/manhattan/functions/_variables.scss

Scaffolding

1. Basic grid

By default, the grid is a 12 columns grid & the max-width is 1088px.

12 columns
11 columns
1
10 columns
2 columns
9 columns
3 columns
8 columns
4 columns
7 columns
5 columns
6 columns
6 columns

<div class="wrapper">
	<div class="columns-5">5 columns of 12</div>
	<div class="columns-7">7 columns of 12</div>
</div>
	        			

2. Shifted grid

12 columns
7 columns
1
4 columns
3 columns
8 columns
6 columns

<div class="wrapper">
	<div class="row">
		<div class="columns-12">12 columns</div>
	</div>
	<div class="row">
		<div class="columns-7">7 columns</div>
		<div class="column-1 shift-plus-4">1</div>
	</div>
	<div class="row">
		<div class="columns-6 shift-plus-3">6 columns</div>
	</div>
</div>
	        			

Base CSS

1 Typography

1.1 Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
	        			

1.2 Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta, varius eget nisl. Nam vestibulum dolor mi. Maecenas sit amet odio nisl. Fusce non faucibus elit. Aliquam arcu nunc, scelerisque quis posuere nec, semper a mi. Quisque in accumsan metus. Aenean facilisis ultricies rhoncus. In pretium, erat id placerat posuere.

Curabitur pharetra adipiscing nibh feugiat consequat. Nunc neque velit, consectetur ut lacinia sit amet, facilisis ut lacus. Praesent sed neque sed neque interdum porttitor laoreet eget mauris.


<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta...
</p>
	        			

1.3 Lead Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta, varius eget nisl.


<p class="lead">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
	        			

1.4 Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta, varius eget nisl.

Someone famous Source Title

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
	        			

1.5 List

1.5.1 ul

  • list 1
  • list 2
  • list 3
    • list 3.1
    • list 3.2
  • list 4

1.5.2 ol

  1. list 1
  2. list 2
  3. list 3
  4. list 4
  5. list 5
  6. list 6

<ul>
	<li>list 1</li>
	<li>list 2</li>
	<li>
		list 3
		<ul>
			<li>list 3.1</li>
			<li>list 3.2</li>
		</ul>
	</li>
	<li>list 4</li>
</ul>
									

<ol>
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
	<li>list 5</li>
	<li>list 6</li>
</ol>
		        					

1.5.3 ul nostyle

  • list 1
  • list 2
  • list 3
    • list 3.1
    • list 3.2
  • list 4

1.5.4 ul inline

  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6

<ul class="nostyle">
	<li>list 1</li>
	<li>list 2</li>
	<li>
		list 3
		<ul>
			<li>list 3.1</li>
			<li>list 3.2</li>
		</ul>
	</li>
	<li>list 4</li>
</ul>
									

<ul class="inline">
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
	<li>list 5</li>
	<li>list 6</li>
</ul>
		        					

2 Form

2.1 Input & Textarea


<label for="inputText">Input Text</label>
<input class="input text" type="text" id="inputText" placeholder="your text here..." />

<label for="requiredinputText" class="required">Required Text</label>
<input class="input text" type="text" id="requiredinputText" placeholder="your required text here..." />

<label for="successinputText">Success Text</label>
<input class="input text success" type="text" id="successinputText" value="Success..." />

<label for="errorinputText">Error Text</label>
<input class="input text error" type="text" id="errorinputText" value="Error..." />

<label for="disabledinputText">Disabled Text</label>
<input class="input text disabled" type="text" id="disabledinputText" disabled value="Disabled..." />

<label for="textarea">Comments</label>
<textarea id="textarea"></textarea>
						

2.2 Select


<div class="select">
	<select>
		<option value="#" disabled selected="selected">Select an option...</option>
		<option>aaaaaa</option>
		<option>bbbbbb</option>
		<option>cccccc</option>
		<option>dddddd</option>
		<option>eeeeee</option>
	</select>
</div>
	        			

2.3 Checkbox & Radio


<label class="checkbox checked" for="checkbox1">
	<input type="checkbox" name="checkbox" id="checkbox1" value="1" checked="checked">
	<span></span>
	checkbox 1
</label>

<label class="checkbox" for="checkbox2">
	<input type="checkbox" name="checkbox" id="checkbox2" value="2">
	<span></span>
	checkbox 2
</label>

<label class="checkbox disabled checked" for="checkbox3">
	<input type="checkbox" name="checkboxbis" id="checkbox3" value="3" disabled="disabled" checked="checked">
	<span></span>
	checkbox 3 Disabled
</label>

<label class="checkbox disabled" for="checkbox4">
	<input type="checkbox" name="checkboxbis" id="checkbox4" value="4" disabled="disabled">
	<span></span>
	checkbox 4 Disabled
</label>

<label class="radio checked" for="radio1">
	<input type="radio" name="radio" id="radio1" value="1" checked="checked">
	<span></span>
	Radio 1
</label>

<label class="radio" for="radio2">
	<input type="radio" name="radio" id="radio2" value="2">
	<span></span>
	Radio 2
</label>

<label class="radio disabled checked" for="radio3">
	<input type="radio" name="radiobis" id="radio3" value="3" disabled="disabled" checked="checked">
	<span></span>
	Radio 3 Disabled
</label>

<label class="radio disabled" for="radio4">
	<input type="radio" name="radiobis" id="radio4" value="4" disabled="disabled">
	<span></span>
	Radio 4 Disabled
</label>	
	        			

3 Button

3.1 Buttons

Default Primary Information Inverse Success Warning Error Disabled

<a href="#" class="button">Default</a>
<a href="#" class="button primary">Primary</a>
<a href="#" class="button information">Information</a>
<a href="#" class="button inverse">Inverse</a>
<a href="#" class="button success">Success</a>
<a href="#" class="button warning">Warning</a>
<a href="#" class="button error">Error</a>
<a href="#" class="button disabled">Disabled</a>

<button class="button">Button</button>

<input type="button" value="Button">
<input type="submit" value="Submit">
						

3.2 Size

Large Normal Small Mini

<a href="#" class="button primary large">Large</a>
<a href="#" class="button primary">Normal</a>
<a href="#" class="button primary small">Small</a>
<a href="#" class="button primary mini">Mini</a>
						

Images

Images generated with Fakeimg.


<div class="image">
	<img src="http://fakeimg.pl/200x200/?text=Default" />
</div>

<div class="image round">
	<img src="http://fakeimg.pl/200x200/?text=Rounded" />
</div>

<div class="image circle">
	<img src="http://fakeimg.pl/200x200/?text=Circled" />
</div>

<div class="image frame">
	<img src="http://fakeimg.pl/200x200/?text=Framed" />
</div>

<div class="image round frame">
	<img src="http://fakeimg.pl/200x200/?text=RoundFramed" />
</div>

<div class="image circle frame">
	<img src="http://fakeimg.pl/200x200?text=CircleFramed" />
</div>
								

Icons by Font Awesome


<i class="icon-cloud-download"></i>
						


<i class="icon-cloud-download icon-large"></i>
<i class="icon-cloud-download icon-2x"></i>
<i class="icon-cloud-download icon-3x"></i>
<i class="icon-cloud-download icon-4x"></i>
						


<i class="icon-cog icon-spin"></i>
						

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta, varius eget nisl. Nam vestibulum dolor mi. Maecenas sit amet odio nisl. Fusce non faucibus elit. Aliquam arcu nunc, scelerisque quis posuere nec, semper a mi. Quisque in accumsan metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam, fermentum at aliquet porta, varius eget nisl. Nam vestibulum dolor mi. Maecenas sit amet odio nisl. Fusce non faucibus elit. Aliquam arcu nunc, scelerisque quis posuere nec, semper a mi. Quisque in accumsan metus.


<!--
	use .pull-left or .pull-right for easy pull quotes or article graphics.
	.icon-muted changes the icon color to light gray.
	.icon-border adds a border to the graphic.
-->

<i class="icon-warning-sign icon-4x pull-left icon-muted"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam...

<i class="icon-warning-sign icon-4x pull-right icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi quam...
						

Web Application Icons

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

Text Editor Icons

  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

Directional Icons

  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank

Video Player Icons

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

Social Icons

  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank

Medical Icons

  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md