Video: Changing Underscores from Page-width to Full-width and Creating a Visual Structure

Tweaking Underscores for Theme Projects

In this video series, I show you exactly how I use a fresh copy of Underscores to start every single one of my theme projects.

full course
  1. Downloading A Fully Branded Copy of the Underscores Starter Theme by Automattic
  2. Making Initial Adjustments to the Underscores Stylesheet Before Building Themes
  3. Changing Underscores from Page-width to Full-width and Creating a Visual Structure
  4. Creating a More Organized File Structure in Underscores and Reviewing File Contents
  5. Final Walkthrough of Underscores to Discuss Theme Functionality and Adjust Code

In this video I show you exactly how to change the HTML structure of Underscores. By default, Underscores sports a page-width HTML structure which can be limiting once you start working on designs. Here, I show you one simple way to change the HTML structure and open your design possibilities up without sacrificing your original design freedoms.

I also show you how to write structural CSS that will align the content and sidebar columns side by side. We’ll make it all responsive as well.

If you have any questions, comments, or concerns, leave a comment below!

Tweaking Underscores for Theme Projects

In this video series, I show you exactly how I use a fresh copy of Underscores to start every single one of my theme projects.

full course
  1. Downloading A Fully Branded Copy of the Underscores Starter Theme by Automattic
  2. Making Initial Adjustments to the Underscores Stylesheet Before Building Themes
  3. Changing Underscores from Page-width to Full-width and Creating a Visual Structure
  4. Creating a More Organized File Structure in Underscores and Reviewing File Contents
  5. Final Walkthrough of Underscores to Discuss Theme Functionality and Adjust Code
5 Comments:
  1. Sean, I happened upon your videos by accident while looking for more information on getting started with _s. It was exactly what I needed! I appreciate your thorough explanation of your process without being dogmatic. I’ve already learned a lot. Thanks so much!

    • That’s exactly what I like to hear! I appreciate the feedback. Please let me know if there’s anything else I could do to help.

  2. Well … I’m going to have to watch this video (actually, all of them) multiple times. Lots of information, but explained very well. Thanks!

  3. Hi, I very much appreciate your videos, particularly how you intermingle the php-side and css-side of things. Your fullwidth tweak was a real eye-opener. Thanks!

    However, may I test my own css-understanding with two quick questions?

    Why do you need the first “wrapper div” with classes .header-area, .main-content-area and.footer-area? As far as I can see, they are not used for the fullwidth-tweak, and for the vertical spacing you could just as well have targeted the already existing #header, #content and #footer IDs. Or am I wrong?

    Also, at 37.02 you add left/right padding for under 800px by targeting .inner. Is there a reason you target .inner rather than .main-page? If not, we don’t really need the .inner class at all as far as this video is concerned.

    • Hi Peter! Sorry for the slow reply.

      1. You are 100% right. My initial changes are not totally necessary. They simply come from experience with a full-width structures and classes/IDs that I sometimes need. Couple that with a desire for consistency in class/ID naming and presence in the markup, and I just do what I do to establish my baseline standard for the markup. You are definitely free to take a different approach based on what makes sense for you.

      2. Keeping with my #1 answer above, I know that I can target .inner there because it is a guaranteed part of my structure based on my initial setup of the full-width structure. Sometimes when you’re writing a CSS selector, you choose to make it based on your understanding and familiarity of the markup rather than the absolute most efficient path to target the element.

      While I know that doesn’t seem like best practice, writing CSS sometimes forces you to weigh pros and cons. For example, do you make your CSS file human readable or efficient? Do you group all selectors that share properties and values or do you repeat the same properties and values throughout the file in order to separate different sections of your CSS in a logical manner?

      What you’re seeing in my approach to the CSS is a mix of knowing I will always use inner no matter what in my full-width structure. It is the most constant part of that markup for me. It’s on of those things that will make more sense when you write some code and then don’t see it again for 6 months. You don’t have to remember your thinking based on efficiency. Your baseline standard will guide you every time.

      So it’s really just different strokes for different folks. Great questions for sure. Those questions mean you are starting to think about your balance between how CSS is written and how YOU write CSS. And that’s important!

      Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *

*