Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it’s the place a reader will be spending the most time looking at.
We start out by thinking about header tags and their sizing. Then we style the <time> element, which will be ubiquitous throughout the site.
We remind ourselves that you never letter-space lower case letters, yest we steal sheep.
We add another important color to our bits.scss file, $blue, which will be used for links throughout the site. We experiment with some other link styling but end up not going for it. The hover/focus/active states are achieved by just using the Darken() function Sass.
We bump up the font-size of the first paragraph of the article. This is just stylistically cool, but it’s also a bit of a psychological trick to get people reading and interested in the article. It’s also a trick for myself as a writer. I know that paragraph is going to be super big so I better make it good!
This first paragraph thing might be a little fragile. For instance, we put in a placeholder for a future Google AdSense ad, which then breaks the selector. We’ll fix it though!
Hi Chris,
Really enjoying these videos and learning so much from the workflow. Do you use a certain color scheme in Sublime or is it a customised one?
It’s one of the built in ones in Sublime Text 2: Twilight.
Thanks for the “previous video” & “next video” links. :) Also the Vimeo videos are working much faster for me.
Awesome, thanks Paul.
I’m going to bury this comment just to keep the comment thread specifically about the content in this video.
Why not just use a class for that leading paragraph? nth-child works, but as you said, things might change in the future and then you’d have to change the CSS as well, where if you had a simple class of .lead or something like that, you won’t need to touch it ever again. You can even reuse it throughout other parts of the site as well.
Totally, that would work, but in the case of CSS-Tricks, I wanted over 1,000 old posts to have that style as well and updating those is pretty much out of the question.
Perhaps someday I can hire an intern who’s sole job it is to go back through the archive of posts and update markup and do things like tagging and categorizing. That would be awesome =)
I see, totally forgot that it had to apply for previous posts as well.
Haha, it’d be awsome, although not very rewarding for them. :)
You should use:
h2+time{display:block}
it only targets time if it is after a h2
http://jsfiddle.net/JCSEh/
That’s the perfect use for that selector =)
I’d have chosen a header-element for the heading-time combination
Are there any reasons not to use this?
Also a perfectly acceptable option.
“You know you never letter-space lower case characters, right? … unless you steal sheep.” HaAAahHhAAaaaaA
I was screaming for you to use nth-of-type :P
What was the comment you made adout never spacing lowercase characters? Something about stealing sheep?
http://webtypography.net/2.1.7