By Andy Stephenson
February 2014
In this tutorial we walk you through how to create a custom Bootstrap 3 skin using the Bootstrap 3 skin template that we created in the previous Bootstrap 3 tutorial.
We demonstrate how to create a modern, 100% CSS based skin from a PSD layout, we take advantage of several powerful tools to help you create good looking skins quickly and efficiently.
The technologies covered in this tutorial include Bootstrap 3, Photoshop CS6, Chrome Developer Tools and Microsoft Visual Studio.
We implement a variety of modern responsive web development techniques and technologies such as media queries and CSS3.
The videos contain:
Video 1 - Introduction, Setup and Application
- Introduction
- Setting up the new skin
- Planning the skin layout
- Setting up skin.css
- Initial section colouring
- Applying the new skin to a page
Video 2 - Customising the Navbar and Adding Panes
- Using the Chrome Developer Tools
- How to override bootstrap.css
- How to customise the Bootstrap3 Navbar
- Adding content panes
- Adding skin objects
Video 3 - Styling Skin Sections and Content Elements
- Creating content
- Customising skin sections
- Styling content
- Introduction to mobile first design
Video 4 - Media Queries and Responsive CSS
- Setting up media queries
- Styling the mobile view
- Styling tablet view
- Creating the semi transparent Navbar and Logobar