Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This seminar focuses on the tools Thesis 2.1 provides for web design professionals. It demonstrates how to extend Thesis while still retaining the responsiveness built into a given Thesis skin. We also look at the new Thesis Developer Tools box and use it to copy and create new skins.

What’s New in 2.1 for Design Professionals?

  • Do me a favor
  • Who is this for?
  • Thesis 2.1 Was Made For You
    • Infinitely customizable
    • Powerful developer tools
    • Moves you clients out of the skin editor
  • What’s new for you?
    • New Thesis Classic Responsive Skin
    • New CSS Code Editor
    • Dynamic Variables have been introduced
    • New box options display
    • DevTools box
    • Packages are no longer used in Thesis Classic Responsive

Thesis 2.1 File Structure

  • Core files
  • User files
  • Skin files
  • master.php VS custom.php VS skin.php
  • PHP User Files best practices
    • Use master if
    • Use custom if
    • Use skin if

Using the Thesis 2.1 Code Editor

  • Uses Codemirror
  • Syntax highlighting
  • Automatic indentation
  • Insert variables
  • Shortcut cheat sheet

Creating and Using Variables in Thesis 2.1

  • Using existing variables in your own code
  • Create a simple variable
  • What can go into a variable?

Leveraging Thesis 2.0 Packages in Your Workflow

  • Best practices
    • Use packages only to help generate code
    • Use variables in packages where applicable
    • Use comments around packages
    • Cut generated code and insert it into custom or skin CSS
    • Replace values with variables
  • Use case
    • Create a columns package
    • Add comments
    • Generate CSS
    • Open CSS file
    • Cut
    • Paste
    • Find Clear fix
    • Replace values with variables
  • Transitioning away from packages

Understanding the Thesis Classic Responsive Media Queries

  • 3 queries – 4 conditions
  • Large
  • Medium
  • Small
  • Reverse query

Create Responsive a 2 Column Responsive Header in Thesis 2.1

  • Remove header image
  • Create header left & header right containers
  • Create header image text box
  • Move menu & tag line
  • Add the classes
  • Change the widths of the .header.columns
  • Remove header padding
  • Remove background image
  • Reset the header columns width in media query
  • Remove the columns sidebar border
  • Change site_tagline font size & alignment

Change the Responsive Header Behavior for Tablet Devices

  • Set width & float in large media query
  • Set width & float in small media query

Style the Desktop Menu While Retaining the Responsiveness

  • Remove the menu background color
  • CSS only solution
  • Image solution

Create 2 Equal Sized Responsive Columns in Thesis Classic Responsive

  • Create the structure
  • Add the classes from above
  • Make them responsive
    • 100% wide in all cases
    • 50% wide in tablet, 100% wide in others

Thesis 2.1 Developer Tools Box

  • Use Developer Updates
  • Skin Editor Options
  • Skin Distribution
  • Create New Skin
    • screenshot size – 300 x 225
  • Export Skeleton Data

Question and Answer

0 Comments… add one
0 comments… add one