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.
To begin, enter the code below in the ❮head❯ section of your website...
Alternatively, you can use the files straight from our repository by using the following code in your ❮head❯ section of your website...
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.
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...
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.
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.
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.
A button can easily be brought to life using the following syntax accompanied with the .button class.
A button used for standard links, keeps padding and removes background colour with a slight change to the documents text colour.
A dropdown button allows for sub-buttons to be held underneath for added options.
Usually used for forms to send for processing.
Can be used to signify changes can be made to a form at a later date.
Used to specify that something can be deleted.
A styled checkbox as a button to appear as if one is turning a switch on or off.
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. |
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.
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...
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...
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.
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.
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.
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.
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...
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.
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...
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 |
| googleplus | Google+ | |
| foursquare | Foursquare | |
| yahoo | Yahoo | |
| skype | Skype | |
| yelp | Yelp | |
| feedburner | FeedBurner | |
| viadeo | Viadeo | |
| 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 | |
| wordpress | Wordpress | |
| tumblr | Tumblr | |
| blogger | Blogger | |
| technorati | Technorati | |
| 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 | |
| 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 | |
| storehouse | Storehouse | |
| icq | ICQ/td> | |
| modelmayhem | Model Mayhem | |
| istock | iStock | |
| angellist | Angellist | |
| periscope | Periscope | |
| ravelry | Ravelry | |
| snapchat | Snapchat | |
| Sina Weibo | ||
| douban | Douban | |
| baidu | Baidu | |
| renren | RenRen | |
| ebay | Ebay | |
| imdb | IMDB | |
| stayfriends | StayFriends | |
| residentadvisor | Resident Advisor | |
| 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...
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.