It’s no secret that I’ve been more active here on my website of late, and that coincides with the turning of the New Year. You see, most of us make resolutions – which usually consists of “I’m going to do this” and “I’m planning on doing that.”
For me, one of the biggest things I want to focus on as we head into 2012 is teaching people what I’ve learned. And so I have a plan in place.
Get on With it, What’s to Come
Ok, so one area that I wanted to focus on is blogging. While most of the people I encounter online are more advanced when it comes to WordPress and blogs, there are some folks who simply are new and under informed.
So I will be starting a series called Blogging 101, which will talk about Blogging Basics, Creating Content, Getting Traffic, Promoting Your Blog and more.
Here’s a list of the first three articles in that series:
More to come…
Another Resolution for the New Year
Recently I have spent a lot of time researching various elements of design and trying to understand the best practices that many successful designers use.
Part of that is simply for my own personal gain, but more importantly I want to acquire this knowledge so that we can apply it to the way we develop new (and update existing) child themes.
A few days ago I came across the 1140px CSS Grid System developed by Andy Taylor. Because I’m a hands on person, I decided to spend some time building out my own version of the 1140px CSS Grid System on my site to see how it worked.
Here’s what the 1140px Grid System is all about:
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Go ahead and check out it – reduce your browser window to see how it responds.
Code Snippets and Tutorials
Lastly, and I’ve mentioned this before, I plan on posting more code snippets and tutorials for those who use the Genesis Framework.
I love writing these – as it gives me a chance to document stuff that I personally use, but also to provide it for the community to see.
So if you’re a fan of learning – whether it be with blogging, with design or with WordPress and the Genesis Framework, I highly encourage you to subscribe to my newsletter below. Good stuff will come.
Great things to come indeed! The 1140px grid system is wonderful. On any projects where I’m required to make a custom WordPress solution, I use my own framework built off the 1140px system and it makes clients smile every single time.
Will Genesis be employing 1140px as well?
I need to clarify:
*custom WordPress solution – any project that doesn’t allow me to use an already built theme (a.k.a Genesis)
Yes, at some point we’ll be heading in that direction. It might first come as a child theme, but after Genesis 1.8 is released Josh and I are hoping to transform (aka modernize and mobilize) the Genesis parent stylesheet for 1.9 or 2.0.
That’s great Brian. We have used your themes from ’07….Blue Zinfandel and have been huge fans of your work. Thank you.
We have been using Lifestyle theme even prior to Genesis and are in the process of starting another site on the Genesis Framework. Really like your 1140 liquid style. Is it at all possible for us to modify the existing Genesis to do this – without some major surgery? If not, what is the timing for 1.9 / 2.0 when this will be possible?
Thanks.
Jai
I hope part of that style sheet modernize will be to split the layout and positional stuff (the bit which some people won’t have to worry about) separate from the colors and typography, so that copying, pasting and amending alternate color schemes because significantly easier, and the “standard” 1140 + media queries can be copied and pasted at the start of all new child themes.
The problem with a copy/paste method dealing with responsive design and media queries is that the child themes have varying CSS for homepage stuff. This no doubt will present an issue (for those who can’t sift through the differing CSS) when they try to copy and paste code which they think will make their theme responsive.
Sign me up….I’ll be here learning all I can from you!
Have a great day!
Awesome, happy to teach as long as their are folks who are happy (and eager) to learn!
Yep – works for me right down to very small screen.
You sound all fired up Brian.
Can only be good for Genesis users.
I am very fired up about where Genesis (and more importantly Copyblogger Media as a company) is heading in 2012.
One theme to rule them all,
one theme to find them,
one theme to bring them all, and in the darkness bind them.
Genesis!
@GaryJ – I personally hope that doesn’t happen. One of the things I’ve always hated about other themes is how they split the stylesheet up into sections for “layout”, “fonts” “colors”, etc. I don’t *want* to look in 15 different places for the same selector – I want to find it once, and then change anything I might need to. It’s why I chose Genesis (well, back when they were Revolution) as a platform over all the others.
Yeah – there won’t be any splitting of things as Chris mentioned, but we’re definitely open to feedback once we get the new layout in place. Gary, it might make you happy to know that I’m working with setting a base font size and line height, and then using ems to adjust throughout the stylesheet.
Chris,
And how do you know what selector you’re looking for? If you’re Ctrl-F within the style sheet, then you can tap F3 to get to the next occurrence. If you use the F11 tools (Chrome, Firebug et al), then that tells you on which line the property for the selector you’re looking for occurs. There’s really no excuse for not being able to find the right occurrence easily enough.
Furthermore, there shouldn’t *be* 15 different places for a selector – some selectors should purely be for layouts, while other selectors would only be for colors and others for typography. I don’t like the naming prefixes, but take a look at http://smacss.com/book/fourtypes for an example of how this could work.
For non-competent users it makes things easier too – if they know they want to change a color, they can head to the bottom section, say, of the style sheet, and easily find an existing color – no need to wade through column classes, menu and submenu hover rules, overflows, floats, widths, positions, margins and paddings (which they probably won’t care about to start with).
Having some items together actually makes finding related properties easier – go look through the sample child theme style sheet and count the number of times “width: 960px;” appears, and where in the file they appear. Imagine how easy it would be to switch those to 1040px, say, if they were all identified within one ruleset with a single property. Obviously some other widths, which are dependent on the value of those 960px widths, which might also need changing – if they are the next ruleset along, then it would make it considerably easier to do the mental calculations and change them at the same time, rather than having to search through the whole style sheet again.
With a split-up style sheet, you could make use of the 1140px grid for the layouts stuff, some typography library of CSS styles for the fonts, and some (standalone or programatically generated) color schemes – the latter of which can be easily copied into alternate color schemes without worrying about duplicating existing properties or having to go along and pick out just the colors from a non-split-up style sheet.
All of that leads to far more flexibility – the CSS could be split up individual layouts.css, typography.css and colors.css (should someone want that level of organisation and happy to combine them back together during deployment) allowing code re-use on other projects. The longer-term workflow is far smoother, without impacting the short-term workflow (see initial my points).
Conversely, what if I wanted to change some things with my #header CSS? I don’t want to have to find 3 instances of #header in the stylesheet in order to change width, color and the font-family. I think like most things, there are pros/cons to either side. I don’t think there’s a “this is the best solution by a landslide” remedy in this case.
Workflow doesn’t work like that for most people – they’ll aim to sort one aspect (layouts, say) of the elements first, then move on to other aspects. It’s difficult to appreciate changes to the font-family and color of an element if the widths of nearby or related elements are breaking the layout.
*And*, even if they did follow a workflow as you suggest, then pressing the keyboard shortcut for Find Next jumps them right down to the next occurrence.
What you want to save in seconds by editing one theme could be paid back by savings of an hour or more when creating new themes, from the overall code re-use and assistance to new users.
Equally, the header could be amended to use multiple classes such that you don’t pile everything on the #header ID selector anyway.
…
In actual fact, the header example is a good one, as in reality it only deals with layout – the element with the current ID of #title holds the typography and color rules; other structures (using classes) could equally provide the same modularity, and if that happens, then there’s no reason to have the order of the CSS rulesets tied to the order of the markup.
Imagine an element as such:
div id=”foobar” class=”foo bar” style=”color: red;” onclick=”…”
Why don’t we tend to include style and on* attributes? Because we want to separate different aspects of it. The CSS for an element is the same – the layout of a containing element that affect the layout of the site often has little to do with the textual content inside of it, so why have the styles for each aspect merged together under one selector? The typography of for an element can be changed without affecting its color scheme, so these are independent aspects too.
Arguably there should be limited a number of fonts variations and colors on a site too, so why repeat them in individual element selectors, when you can apply them to a class selector once in the style sheet, then add the class to whatever elements need it?
If that makes sense, then it should also make sense to keep these related typography classes / rulesets, and these related color classes / rulesets (and thus related layout classes / rulesets) together within one (or more) style sheets.
Hope you will add one more category named “Business” wherein you will share the lessons learned in business as well. This will help us fellow entrepreneurs to a great deal.
Kudos.
Me too! I’ve followed you since the Downtown Java theme days and I’d love to know how you ‘did it’! Your success is inspiring!
Can’t wait to see what is to come in 2012!
Glad you’re on the envelope, with Adaptive & fluidity, yeah so many devices so many sizes.
Happy Holidays
jack
Brian, love the new layout based on 1140px grid. However, I just had a look at the grid page (http://www.briangardner.com/1140-css-grid/) and maybe it is just my eyes, but the right hand edge doesn’t seem to line up.
Eeek, that was a minor CSS issue. If you do a hard refresh it should be back to normal.
Hi Brian,
Thanks for the post. Your version of the 1140 grid with the slightly different percentages seems to make a page downsize more consistently. I had been a little confused about what was happening beforehand, but your numbers seem to have helped my minor problem….
So thanks!
Tom
Actually, following up my last comment… it didn’t change what I thought it did (must be bed time)
But I do like your different widths
Good to hear.