Skip to content
Shanty is a responsive, minimalist, static home page template.
JavaScript Scala
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


The Minimalist Home Page Template

Shanty is a responsive, minimalist, static home page template. It includes:

  • A masthead title
  • A masthead subtile
  • A 3x2 grid, each unit has
  • An icon
  • A link
  • Descriptive text
  • Footer

That's all ya get.



Responsive Design

Shanty should autosize to desktop, tablet, and mobile resolutions.


Shanty has been tested with latest Firefox, Chrome, and Safari on OSX, as well as Internet Explorer 9.

Making Changes

Basic Text Changes

Make sure you change:

  • <title>Shanty Home</title>
  • <footer><p>&copy; J. Random 2012</p></footer>
  • <h1>J. Random</h1>
  • <p>I make stuff. Details enclosed.</p>

Row Layout

Shanty comes default with two rows. Here a row:

<div class="row-fluid sites"><!-- Start Row -->
</div><!-- End row -->

You can add more rows, just copy and paste away.

Each div inside a row has an icon, a title, and descriptive text. You get three divs per row. I wouldn't add or delete any if I were you, it totally hasn't been tested.

<div class="span4">
	<a href=""><i class="icon-twitter-sign"></i></a>
	<h3><a href="">@username</a></h3>
	<p>I do the Twitters.</p>

Customize Icons

To change the icon, change the following class:

<i class="icon-twitter-sign"></i> a different class you pick from the Font Awesome library, eg:

<i class="icon-bullhorn"></i>

To change an icon's color, either edit assets/css/style.css and add:

/* Icon Colors (You may actaully need to edit these) */
.icon-bullhorn {
  color: #46a546;

Or edit assets/less/style.less and add:

/* Icon Colors (You may actaully need to edit these) */
.icon-bullhorn {
  color: @red;

To add color variables, edit assets/less/custom-vars.less.

Change Background

I've included several excellent background images from Subtle Patterns.

If you are using CSS, just change the background-image in assets/css/stye.css to one of the images in assets/images/bg/.

If you are using LESS, uncomment your preferred background image in assets/less/custom-vars.less.

LESS Configuration

  • assets/bootstrap/less/bootstrap.less must compile to assets/css/botstrap.css
  • assets/less/style.less must compile to assets/css/style.css



Shanty is licensed under CC BY 3.0: A mention of 'Shanty -' in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software).

You can’t perform that action at this time.