What is Starter Kit?
The Low Down...
Starter Kit is a pattern library designed to make your life simpler by setting you up with the basic stylings and scripts we think you need to get your website running in a single day, why setup your own styles and scripts when you can have a handy toolbox full of them to begin with? Fully cutomisable and supported by all browsers, there's a range of components and styles available for all of your needs.
What does Starter Kit include?
Starter Kit comes stacked with 8 components, ranging from Navigation Bars to Buttons to Fixed Warning Messages, along with preset styles for columns, borders, content alignment, fonts and much more; to fully understand the gratitude of materials available in the kit, check the documentation below.
What fonts and images does Starter Kit come with?
There are two font-types that are included within the Starter Kit libary, these are 'Font Awesome'; a brilliantly designed open-source icon font for all your basic graphical needs and 'Socicon'; another font full of icons that are catered towards popular social networks in font format. The included images are held all in a folder labelled 'Entypo'; another icon set which is available in .svg format for both standard & retina capabilities.
What is a Component?
Components are styled 'boxes' or tools that you can implement on your website, such as a teaser, a banner with the option to enable a carousel or a navigation bar, these are standard areas of a web page which are mostly, if not always, included and we felt it was time for a different set of styles to enter the battle field!
Get Started
Installing Starter Kit is so simple and takes minimal effort, simply download the zip file by clicking on the folder labelled SKit above, or click here. Once download has completed, simply extract the compressed folder to a destination of your choice and begin creating your website in the root directory.

Both dependency files are also available in a minified version to save load-time on your website, to use the minified versions instead, just add .min before the file extension.

Locally Hosted Files (Recommended)

To begin, enter the code below in the ❮head❯ section of your website...

<link href="css/starter-kit.css" type="text/css" rel="stylesheet"> <script src="js/starter-kit.js"></script>

Publicly Hosted Files

Alternatively, you can use the files straight from our repository by using the following code in your ❮head❯ section of your website...

<link href="http://files.tomaldy.com/starter-kit/css/starter-kit.css" type="text/css" rel="stylesheet"> <script src="http://files.tomaldy.com/starter-kit/js/starter-kit.js"></script>

Each component within the kit holds it's own example page so you can fully understand how the code works if you're not a fan of documentation, simply find the file name of the component you want to view and open it in your browser or programming software and start disecting.

Before beginning, we'd like to describe the way that the styles have been named, along with modifications and nesting that have been integrated to be followed at a much more understandable level.

BEM (Block, Element, Modifier) Conventions

The library follows the naming convention known as BEM (Block, Element, Modifier), developed by Yandex to make following styles much easier and categorising classes/styles by a block, followed by each element inside the block, followed by any modifiers that can be added.

Take a look at an example of the BEM convention in CSS...

.banner { position: relative; padding: 0; margin: 0; overflow: hidden; list-style-type: none; } .banner__subtitle { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #FFF; } .banner--small { height: 120px; } .banner--medium { height: 240px; } .banner--large { height: 360px; }

As you can see, in this case .banner is the block, .banner__subtitle is the element and .banner--small,.banner--medium and .banner--large are the modifiers which can be applied to change the height of the .banner block.

Using this technique of convention ensures that the styles are easy to follow when making changes to the components and should get to the stage where applying such styles becomes second nature, to read more on BEM, click here.

Components are the basis of what build a website, by having a preset amount of components, you have the ability as a developer to focus on the more speific features of your website, rather than constantly worrying about design - you can also edit these styles by creating a custom .css file containing all of your overlaying styles to overwrite those that the pattern library already specifies.


There are two font sets included within Starter Kit, there is the 'Font Awesome' icon font, and the 'Socicon' icon font. These are included in order to allow for you to use open source icon's for commercial and personal use. To use these fonts simply pass over the style font-family: 'FontAwesome'; for Font Awesome, or font-family: 'socicon'; for Socicon. To understand how to use this fully, please visit their respected websites.


The syntax that has been used in order to describe the fonts, is shown below and is situated in the starter-kit.css or starter-kit.min.css file.

@font-face { font-family: "socicon"; src:url("../fonts/socicon.eot"); src:url("../fonts/socicon.eot?#iefix") format("embedded-opentype"), url("../fonts/socicon.woff") format("woff"), url("../fonts/socicon.ttf") format("truetype"), url("../fonts/socicon.svg#socicon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

As described above, to fully integrate these fonts into your desired CSS, just call upon the font using the font-family: 'FontAwesome'; or font-family: 'socicon'; specifications.

Layout Classes

Columns are specified through percentages within this library, meaning you can lay content out on one line providing that all elements on that line equal up to 100, to achieve this, you can use the class known as .column-- class with the number leading the --, see a full column pyramid below.

For complete reference on what numbers are available to specify the column size, check out the starter-kit.css file, it has every single class available in the column section.


Text markup is fairly straight-forward and can be achieved through the use of classes added to the text container, this can be a ❮p❯, ❮div❯, or anything for that matter.

Class Effect
bold Bold
italic Italic
underline Underline
text-left Left
text-center Center
text-right Right

This table goes into full depth at explaining the basic settings that can be applied to any element using these classes, these effects are for cosmetic purposes over anything else, whether that be positioning, rounding or add a border to an element.

Class Effect
send-left Positions an element to the left side of it's container.
send-right Positions an element to the right side of it's container.
pull-up Pulls the element up by 1em of where it is originally placed in the DOM.
pull-down Pulls the element down by 1em of where it is originally placed in the DOM.
padding Applies padding of 1em to the element the class is added to.
gutter Applies a margin of 1em to the right and left side of the element, creating outside space.
border Adds a solid, grey border of 1 pixel to the element it is applied to.
circle Applies a radius of 100% to the border around the element, creating a circlular effect.

Although the button is a fairly basic component of a website, there is a multitude of modifications that can be applied to allow it to evolve into a much more beneficial component depending on where it is being placed.


There are many options available for the button element, as you can see above, each version is described with it's class underneath.


Standard Button

A button can easily be brought to life using the following syntax accompanied with the .button class.

<a href="#" class="button">Button</a>

Link Button

A button used for standard links, keeps padding and removes background colour with a slight change to the documents text colour.

<a href="#" class="button link">Link</a>

Dropdown Button

A dropdown button allows for sub-buttons to be held underneath for added options.

<div class="button dropdown"> <div class="dropdown__label">Account</div> <ul class="dropdown__options"> <li>Friends</li> <li>Edit</li> <li>Logout</li> </ul> </div>

Send/Submit Button

Usually used for forms to send for processing.

<a href="#" class="button send">Send</a>

Edit Button

Can be used to signify changes can be made to a form at a later date.

<a href="#" class="button edit">Edit</a>

Delete Button

Used to specify that something can be deleted.

<a href="#" class="button delete">Delete</a>

Switch Button

A styled checkbox as a button to appear as if one is turning a switch on or off.

<div class="button switch"> <input id="switch__checkbox" class="switch__checkbox switch__checkbox--round" type="checkbox"> <label for="switch__checkbox" class="switch__control"></label> </div>

To make any alternative changes to the button, simply add the class specified above in the design section which accompanies the syntax.


There are a number of modifiers for the .button class and they can easily be understand through the usage of the table below, just simply add them to the class following the .button class...

Class Effect
link Remove all usual markup, except padding and displays the button as plain, underlined text.
dropdown Requires a larger tree in terms of the DOM to accomplish the design, but the dropdown class turns the button into a dropdown to contain sub-buttons.
send Applies button styles to appear like a send or submit button belonging to a form.
edit A button with an added pencil icon with a blue finish to demonstrate the ability to edit something.
delete A red coloured button used to demonstrate the ability to delete something, accompanied with a multiplication or close icon in the corner.
switch Further mark up is needed, although the switch button creates a checkbox that becomes hidden and allows users to simulate an on/off switch.
Navigation Bar

The Navigation Bar is the first component we will discuss in the component order, the navigation bar has a number of sub-components that help build up the final masterpiece, first we will show you how the navigation bar should look upon completion.


There are a multitude of options available for the navigation, with a number of options available to add to the navigation bar to change the design of the navigation bar if preferred.


The navigation bar can be brought to life through the following code being added into the ❮header❯ section of your website, this will implement the demonstration navigation bar displayed in the example above.

<nav class="nav nav--horizontal padding"> <img src="http://fpoimg.com/60x60?text=Logo" alt="logo" class="logo"> <ul class="nav__items-container"> <li class="nav__item">home</li> <li class="nav__item">about</li> <li class="nav__item dropdown"> <div class="dropdown__label">Services</div> <div class="dropdown__collection"> <div class="dropdown__option">Graphics</div> <div class="dropdown__option">Web</div> <div class="dropdown__option">Database</div> </div> </li> <li class="nav__item">support</li> </ul> </nav>

By default, the navigation item's, specified with the class .nav__item, is set to be capitalised automatically, this, along with all of the other styles, can be over-written with your own custom styles if preferred. The navigation container to hold the navigational items can also be called using the .nav__container class.

Creating a specific dropdown navigation item can be achieved through the .dropdown class, followed by the necessary children laid out in the example above.


The only available modifier specific to the navigation bar is .nav--vertical in place of .nav--horizontal to change the orientation of the bar to be placed on the left-hand side of the page. Although the usual modifiers can be applied, such as .padding,.text-center, etc.


The banner has been created with the intentions of being able to hold multiple banners at once with a fade effect looping through each one, the banner has been progressively enhanced to cater for users who may have JavaScript disabled, the banner takes care of this for you. Initiate the banner with the .banner class.


The banner is a very simply built component, to achieve the carousel effect, the.carousel class must be added to the banner container.


To bring the banner to life, simply take a look at the example code that can bring the above example of the banner to life...

<ul class="banner carousel"> <li class="banner__item"> <img src="http://fpoimg.com/2000x400?text=First" alt="banner" class="banner__image"> <div class="banner__subtitle"> This is where your leading title would go to summarise the banner above. </div> </li> <li class="banner__item"> <img src="http://fpoimg.com/2000x400?text=Second" alt="banner" class="banner__image"> <div class="banner__subtitle"> Another one. </div> </li> <li class="banner__item"> <img src="http://fpoimg.com/2000x400?text=Third" alt="banner" class="banner__image"> <div class="banner__subtitle"> And Another One </div> </li> </ul>

The banner can be loaded with or without the usage of the .subtitle div, this is simply an option, on top of the .carousel class to add the fading, multiple effect. If the banner does not have the .carousel class, then it will simply display the first banner in the order, the same effect is applied for lack of JavaScript.


The modifier available can be applied to the highest level banner container, this is the .carousel class. As stated in the example above, multiple banners are a simple thing to add. The only other option is to remove the banner__subtitle div, which will completely remove the banner's subtitle message if one is not needed.


The Jumobotron is a very self-explanatory component and is a regular piece of any pattern library, the jumobotron is created in order to allow users to create a call-to-action element, it can be used to hold specific important content or could even be used as an alert if needed, the possibilities are endless.


The Jumbrotron is a very straight forward component and can be edited to fit your needs by appling your own custom styles to over-write the necessary classes, or apply your own.


The Jumbotron requires very minimal markup as opposed to most of the other larger components and complications should be rare, here's an example of the markup for the jumbotron above...

<div class="jumbotron"> <div class="jumbotron__title">Party is on tonight!</div> <div class="jumbotron__content">RSVP so we know if you'll be there...</div> <div class="jumbotron__options"> <a href="#" class="button">Read More...</a> </div> </div>

The Jumobotron is initiated through the use of the .jumpbotron class and by following the classes specified in the markup above, you have the ability to position specific aspects how you wish, using the .button class you can also apply button modifiers to change how the button looks.


The Jumbotron currently holds no optional modifiers that can be applied.


The Teaser is a component much like the Jumbotron component, but is used more to display an image with content and a link, this is used relatively to display piece of content that can be used to 'tease' the audience to wanting to read more information of the information they have just read.


The above example displays the teaser in a group, much rather than alone, the teaser can be called in anyway you feel fit in your project; and can usually be specified using the column options held in the library.


Check out this example mark up of the teaser in a group, using specific classes combined together through the library to create a group rather than alone. Notice how the teaser is called upon using the .teaser class.

<div class="teaser-group"> <div class="teaser border column--25 send-left"> <div class="teaser__image"> <img src="http://fpoimg.com/100x100?text=Partial" alt="Teaser Image"> </div> <div class="teaser__content"> An example of content. </div> <div class="teaser__options"> <a href="#" class="button">Read More...</a> </div> </div> <div class="teaser border column--25 send-left"> <div class="teaser__image"> <img src="http://fpoimg.com/100x100?text=Partial" alt="Teaser Image"> </div> <div class="teaser__content"> An example of content. </div> <div class="teaser__options"> <a href="#" class="button">Read More...</a> </div> </div> <div class="teaser border column--25 send-left"> <div class="teaser__image"> <img src="http://fpoimg.com/100x100?text=Partial" alt="Teaser Image"> </div> <div class="teaser__content"> An example of content. </div> <div class="teaser__options"> <a href="#" class="button">Read More...</a> </div> </div> <div class="teaser border column--25 send-left"> <div class="teaser__image"> <img src="http://fpoimg.com/100x100?text=Partial" alt="Teaser Image"> </div> <div class="teaser__content"> An example of content. </div> <div class="teaser__options"> <a href="hi" class="button">Read More...</a> </div> </div> </div>

As you can see, there have been many additions to the teaser to surround it and position it correctly to display all four across one line, along with the .border class being added in order to display the size of the teaser fully.


The Teaser component currently holds no optional modifiers that can be applied.

Fixed Message

The Fixed Message is a very different component compared to the rest and can be a very helpful addition to your website if you required an alert so that users are warned of specific aspects of your website.


Although not obvious in the example, the message is purely fixed to the bottom of the screen and can be created through the usage of the .custom-message being added to the body class of your website.


The above fixed message has been created within the ❮body❯ element, therefore there is no CSS needed unless you feel like editing the colours or font.

<body class="custom-message" data-message="This is an example of a fixed message, it will remain in position when scrolling.">

The fixed message component can be called through the use of the .custom-message class and the message can then be specified using the data-message atrribute, without this attribute, the component would not work. On top of all this, a big benefit is NO JAVASCRIPT!


The Fixed Message component currently holds no optional modifiers that can be applied.

Notification Effect

Although very simple, the notification effect can do wanders if you are developing a web application or generating some personal content catered to a particular user.


The notification effect is a simple build of a small icon in the top right hand corner of any element it is placed on, through the usage of the same markup as the fixed message as seen previously.


To recreate a .notification as displayed in the example above, use the following mark-up...

<div class="notification" data-amount="10"> Notifications </div>

As you can see, the markup is very simple and can simply be brought to life using the .notification class, accompanised by a new attribute called data-amount which specifies the number that should be placed in the box.


The Notification effect currently holds no optional modifiers that can be applied.

Social Button

Slightly different to the button due to modifications, the social button has options available that are not as expected as other components. By using the .social class, there then needs to be a .social--* class following it through straight after to specify which icon you need to add to the social button.


This button component differs in terms of containing more than one modifier, in fact it has a large amount of modifiers which will be explained in the modifiers section below, this is all tied into the .social--* class.


To recreate a .social button as displayed in the example above, use the following mark-up...

<a href="http://www.facebook.com" class="button social social--facebook">Facebook</a>

As you can see, there have been three classes specified, .button, specifying that this element is a button, the .social class which describes that there needs to be a social icon and finally .social--facebook, the class that tells the browser which icon to grab from the 'Socicon' font that Starter Kit comes stocked with.


The available modifiers for the social button tie into the .social--* class, if you want to change the social icon that is generated then use this table below for reference, just replace the * in .social--* to the social icon you would like.

Class Social Network Icon
twitter Twitter
facebook Facebook
googleplus Google+
pinterest Pinterest
foursquare Foursquare
yahoo Yahoo
skype Skype
yelp Yelp
feedburner FeedBurner
linkedin LinkedIn
viadeo Viadeo
xing Xing
myspace MySpace
soundcloud SoundCloud
spotify Spotify
grooveshark Grooveshark
mixcloud MixCloud
lastfm Last.FM
youtube YouTube
vimeo Vimeo
dailymotion DailyMotion
vine Vine
flickr Flickr
500px 500PX
instagram Instagram
wordpress Wordpress
tumblr Tumblr
blogger Blogger
technorati Technorati
reddit Reddit
dribbble Dribbble
stumbleupon StumbleUpon
digg Digg
envato Envato
behance Behance
delicious Delicious
deviantart DeviantArt
forrst Forrst
play Google Play
zerply Zerply
wikipedia Wikipedia
apple Apple
flattr Flattr
github GitHub
friendfeed FriendFeed
newsvine NewsVine
identica Identice
bebo Bebo
zynga Zynga
steam Steam
xbox Xbox
windows Windows
outlook Outlook
coderwall CoderWall
tripadvisor TripAdvisor
appnet Appnet
goodreads GoodReads
tripit TripIt
lanyrd Lanyrd
slideshare Slideshare
buffer Buffer
rss RSS
vkontakte Vkontakte
disqus Disqus
houzz Houzz
mail Mail
patreon Patreon
paypal PayPal
playstation Playstation
smugmug SmugMug
swarm Swarm
triplej TripleJ
yammer Yammer
stackoverflow StackOverflow
drupal Drupal
odnoklassniki Odnoklassniki
android Android
meetup MeetUp
persona Mozilla Persona
amazon Amazon
ello Ello
8tracks 8Tracks
twitch Twitch
airbnb AirBnB
pocket Pocket
whatsapp WhatsApp
storehouse Storehouse
icq ICQ/td>
modelmayhem Model Mayhem
istock iStock
angellist Angellist
periscope Periscope
ravelry Ravelry
snapchat Snapchat
weibo Sina Weibo
douban Douban
baidu Baidu
qq QQ
renren RenRen
ebay Ebay
imdb IMDB
stayfriends StayFriends
residentadvisor Resident Advisor
google Google
yandex Yandex
sharethis ShareThis
bandcamp BandCamp
itunes iTunes
deezer Deezer
medium Medium
telegram Telegram
openid OpenID
amplement Amplement
viber Viber
zomato Zomato
quora Quora
draugiem Draugiem.LV
endomondo Endomondo
filmweb FilmWeb
stackexchange StackExchange
wykop Wykop

The Footer component is much more straight forward than expected, due to the availabilty of the .social class that can be called on a button, we have the social icon aspect already available to be used. The Footer must always be initiated within a ❮footer❯ element.


Seperating content within the .footer class can usually be achieved through the usage of the .column-- class to specify the width you would like, along with using the .send-left class to ensure that the columns stack correctly.


If you want to create a copy of the example Footer component above then follow this syntax...

<footer> <div class="column--25 send-left"> <div class="gutter"> <h3>List Title</h3> <ul> <li>This</li> <li>is</li> <li>a</li> <li>list</li> </ul> </div> </div> <div class="column--25 send-left"> <div class="gutter"> <h3>List Title</h3> <ul> <li>This</li> <li>is</li> <li>a</li> <li>list</li> </ul> </div> </div> <div class="column--25 send-left"> <div class="gutter"> <h3>List Title</h3> <ul> <li>This</li> <li>is</li> <li>a</li> <li>list</li> </ul> </div> </div> <div class="column--25 send-left"> <div class="social-icons gutter"> <div> <a href="http://www.twitter.com" class="button social social--twitter send-right">Twitter</a> </div> <div> <a href="http://www.twitter.com" class="button social social--facebook send-right">Facebook</a> </div> </div> </div> </footer>

As you can see, the usage of the columns have made positioning much easier, along with the .social class to ensure that the button is displayed as a social link, with the modification classes of .social-twitter and .social-facebook to achieve the necessary icons to become visible.


The Footer component currently holds no optional modifiers that can be applied, any changes can be reached using the basic styling classes.