Create a Responsive Skin for Thesis 2.0

The skin we are creating can be found here.  It is based on the “Blue Masters” PSD template published by Smashing Magazine. The course will teach all of the tools and skills necessary to completely build a skin like this.

Course Outline

Lesson 1 – Understanding Skins in Thesis 2.0

1. Course Introduction
2. What is Responsive Design?
3. Skins in Thesis
4. Mapping out the Thesis Blue Masters Skin
5. Setup the Skin File Structure
6. Create the Skin Files
7. WordPress/Thesis Constants and File Locations

Lesson 2 – Create the Typical Page Template

1. HTML Structures for Responsive Design
2. Collapsing column configurations
3. Assembling Thesis Boxes
4. Setup Primary Structural Elements
5. Setup Structural Packages
6. Add Content to Structure
7. Add Content Packages

Lesson 3 – Create the Responsive CSS

1. Introduction – Mobile Devices and Responsive Behavior
2. Understanding Media Queries
3. Set Up the Media Queries
4. Tablet Landscape Responsive CSS Rules
5. Forcing Device Width on Mobile Devices
6. Tablet Portrait Responsive CSS Rules
7. Smartphone Responsive CSS Rules

Lesson 4 – Create the Typical Styles

1. Map Out the Site Background
2. Create the Background Images from the PSD File
3. Style the Background
4. Style the Typical Page Content
5. Style the Typical Sidebar
6. Style the Footer
7. Style the Main Nav Menu

Lesson 5 – Create the Front Page Template

1. Map out the Front Page
2. Understanding WordPress Image Sizes
3. Create a Helper Box for the Responsive Slider
4. Setup the Feature Box
5. Construct Home Page Attention Boxes
6. Add additional Responsive CSS

Lesson 6 – Complete the Front Page Template

1. Update to the Box Method Options in 2.0.3
2. Update to the Box Method HTML function in 2.0.3
3. Update the Orbit Slider Box to Best Practices
4. Create the Feature Box CSS
5. Create the Front Post Box CSS
6. Create the Widget Styles
7. Make The Front Page Template Responsive

Lesson 7 – Create the Custom Blog Page and Single Post Page Templates

1. Understanding Thesis 2.0 Post Box Configurations
2. Map out the Blog Page
3. Exclude Categories from Posts Page
4. Restructure the Headline Area
5. Modify the Excerpt
6. Setup Ending Post Meta
7. Add Custom Body Class
8. Create Misc Styles

Lesson 8 – Create the Archive and Single Post Templates

1. Add Post Navigation to the Home Template
2. Create the Archive Template
3. Create the Single Posts Template
4. Add Comments to Single Post Template
5. Add Comment Form to Single Post Template
6. Style the Comments
7. Style the Comment Form

Lesson 9 – Create a Custom Skin Package

1. Reorganize our File Structure
2. Introduction to Thesis Package Class
3. Add Options to Thesis Packages
4. Using Thesis 2 Standardized CSS Options
5. Add Custom CSS Options to the Package
6. Refine the Package to Include Width, Height and Float
7. Combine the Sample Package with the Single Element Style Package

Lesson 10 – Create a Responsive Menu for Mobile Devices

1. Introduction to Responsive Menus
2. A Tour of the Menu We Will Create
3. Create an HTML Box for the Menu
4. Add the jQuery Plugin to the Skin
5. Add the Sample CSS & Test
6. Modify the Horizontal Dropdown Menu package to Style the Responsive Menu