Welcome back to Part 3 of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In this third part of the lesson, we are going to begin looking at best practices rules. And rule number 1 of best practices is to use Design Options first before customizing the Thesis theme in CSS. Use Design Options whenever it is possible rather than hard coding those options using CSS.
Why Use Design Options When We Have CSS?
The rationale here is that some of the settings in Thesis Design Options influence or affect the entire site. And thus, if you make changes there you’re going to have more consistent results across your site and you’re going to eliminate potential conflicts. And finally, when you make changes in Design Options, it’s easier to troubleshoot problems.
So let’s take a look at that. An example of this is going to be a typical site-wide font size. Let’s take a look at our site so go back to the dashboard and go down to Thesis Design Options. Inside the content area is the size of the content text. This size is actually used to calculate almost all of the other sizes of things in your website. That is the heights of all of your other elements, the widths of padding, the widths of margin, the heights of headings and the spacing in between paragraphs. The Thesis theme makes all of that relative to this size right here. And so, you wouldn’t want to set your content font size anywhere besides here because the entire site is calculated based off of this.
So this is where you’d want to set your main body check size because this is the basis for the description or the definition of the em. You’ll see there are lots of things to describe in ems rather than as pixels or as points and this represents the value of em here.
Another example of this rule can be seen with columns. When you set the width of these columns here in pixels, Thesis takes the information and, based on its own algorithm, sets the entire width to the site. So this is not something that generally speaking you want to override with custom CSS. The width of your site and therefore, the ability of sidebars stacked side by side and that sort of thing, are dependent upon these values being put properly into the algorithm. So if you leave these values alone here, but then you go and define your site as being some other width in css, it will override the definitions here. And that can break your site. You’ll get much more consistent results and it will be much easier for you to troubleshoot if you make definitions like this inside of Thesis Design Options instead of customizing using CSS.
And that wraps up Part 3 of Lesson 2 of the Customize Thesis Like a Pro tutorial series.