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