A little while ago, I made an addendum to one of my themes trying to prove a point that displaying a lot of content is possible without major HTML and CSS surgery.
But in retrospect, the approach I took, creating a separate “segment” class and having separate “content” and “sidebar” classes, seems a bit silly. It clearly violated the DRY principle since I was overlooking one important fact…
“Content” and “Sidebar” are basically columns of different width
Once I finally realized this fundamental aspect of layout presentation, then all else fell into place. Now there is no need for a “full” class since any content that doesn’t belong to a column automatically takes up the full width. The rest of the content can be displayed by using percentages relative to the full width of the container.
The Content and Sidebar sections can now be realized by applying a 2/3rds width and 1/3rd width columns respectively and other percentages can be used to mix and match columns on any page segment.
Previously, there was also an “extras” div that was inherited from the Mod Portal theme from which this all was derived. Now this too was eliminated by using three 1/3rd width columns in a separate “body” segment.
You can see the final result of the changes and it is proportionally lighter in CSS and HTML than with the previous iteration. I also added a login/registration form since that was also originally part of Mod Portal, increased the font sizes in the navigation bar, changed some of the colors for clarity and added comments in both the HTML and CSS.