Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
Object Oriented CSS
Home
About this group
Apply for group membership
Headings question: Basic concept/usage?
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   11 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Micky Hulse  
View profile  
 More options Sep 27 2012, 5:49 pm
From: Micky Hulse <rgmi...@gmail.com>
Date: Thu, 27 Sep 2012 14:49:07 -0700
Local: Thurs, Sep 27 2012 5:49 pm
Subject: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author
Hello,

Sorry in advance if this is documented somewhere... If such a page
exists, I'd love a link to read the details.

This article has been very helpful:

<http://www.stubbornella.org/content/2011/09/06/style-headings-using-h...>

Looking at OOCSS "Headings" css, I see:

h1, .h1{ ... }
h2, .h2{ ... }
h3, .h3{ ... }
h4, .h4{ ... }
h5, .h5{ ... }
h6, .h6{ ... }

For some reason I'm having a hard time wrapping my head around how to
use the above classes...

So, is the concept/practice to use .h1 on an h3, that is if you want
that h3 to have the h1 look/feel?

Or, better example, would I use a .h3 class on an nested <h1> (in a
nested html5 <section>) if I want that <h1> to look/feel like a <h3>?

What's the rule of thumb here?

Sorry for my ignorance. :(

Thanks!
M


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Nicole Chung  
View profile  
 More options Sep 27 2012, 6:23 pm
From: Nicole Chung <nicole.ch...@gmail.com>
Date: Thu, 27 Sep 2012 18:23:12 -0400
Local: Thurs, Sep 27 2012 6:23 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

I'm taking it right from this
article<http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/>

another way to write it is this:

h1,.alpha   { [font styles] }
h2,.beta    { [font styles] }
h3,.gamma   { [font styles] }
h4,.delta   { [font styles] }
h5,.epsilon { [font styles] }
h6,.zeta    { [font styles] }

In which case you can use it like this:

<div class=content>
  <h1>Lorem</h1>
</div>

<div class=sub-content>
  <h2 class=alpha>Lorem</h2>
</div>

<div class=footer>
  <h4 class=gamma>Lorem</h4>
</div>

I find this method a tiny bit easier to conceptualize.

On 27 September 2012 17:49, Micky Hulse <rgmi...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Jamund Ferguson  
View profile  
 More options Sep 27 2012, 6:59 pm
From: Jamund Ferguson <jam...@gmail.com>
Date: Thu, 27 Sep 2012 16:59:33 -0600
Local: Thurs, Sep 27 2012 6:59 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

That's how we use it at odesk. Slightly larger example:

<body>
<div class="main">
<h1>Main Heading</h1>
<section>
    <h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
  <article class="widget">
   <h1 class="h3">Sidebar Headings</h3>
  </article>
  <article class="widget">
   <h1 class="h3">Sidebar Headings</h3>
  </article>
</aside>
</body>
On Thu, Sep 27, 2012 at 4:23 PM, Nicole Chung <nicole.ch...@gmail.com>wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Micky Hulse  
View profile  
 More options Sep 27 2012, 7:10 pm
From: Micky Hulse <rgmi...@gmail.com>
Date: Thu, 27 Sep 2012 16:06:20 -0700
Local: Thurs, Sep 27 2012 7:06 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author
Hi Nicole! Thanks so much for your quick and helpful reply, I really
appreciate it. :)

On Thu, Sep 27, 2012 at 3:23 PM, Nicole Chung <nicole.ch...@gmail.com> wrote:
> I'm taking it right from this article

Oh, nice! I had not seen this article before. Thank you for the
linkage, reading now.

> another way to write it is this:

> h1,.alpha   { [font styles] }
> h2,.beta    { [font styles] }
> h3,.gamma   { [font styles] }
> h4,.delta   { [font styles] }
> h5,.epsilon { [font styles] }
> h6,.zeta    { [font styles] }

Awesome, that is more understandable.

In fact, based on Nocole's article (the one I linked to in my first
post) I played around with this naming convention:

"Jim Blower's Extended System of Units"

.lunto {}
.mikto {}
.nekto {}
.otro {}
.pekro {}
.quekto {}
.rimto {}
.sotro {}
.trekto {}
.unto {}
.vunkto {}
.wekto {}
.xonto {}
.yocto {}
.zepto {}
.atto {}
.femto {}
.pico {}
.nano {}
.micro {}
.milli {}
.centi {}
.deci {}
.deka {}
.hecto {}
.kilo {}
.mega {}
.giga {}
.tera {}
.peta {}
.exa {}
.zetta {}
.yotta {}
.xona {}
.weka {}
.vunda {}
.uda {}
.treda {}
.sorta {}
.rinta {}
.quexa {}
.pepta {}
.ocha {}
.nena {}
.minga {}
.luma {}

-- rgne.ws/PqkGvg

But, at least from what I have experienced so far, the major drawback
to the above naming system/convention is that it is hard to remember.
:(

> In which case you can use it like this:
> ... <snip> ...
> I find this method a tiny bit easier to conceptualize.

Definitely! Thank you so much for the clarification, I really appreciate it. :)

Based on the little testing I've done so far, I think I might go with
the .h1, .h2, .h3, .h4, .h5, .h6 classes, just because I feel like
that's something that I can remember.

Would you think it was crazy to have .h7, .h8, .h9 classes? Or, would
it make sense to just "extend" existing classes and call the new
headings something like ".category" (I think that was what Nicole's
article was hinting at)?

Thanks again! Much appreciated.

Cheers,
Micky


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Micky Hulse  
View profile  
 More options Sep 27 2012, 7:10 pm
From: Micky Hulse <rgmi...@gmail.com>
Date: Thu, 27 Sep 2012 16:09:29 -0700
Local: Thurs, Sep 27 2012 7:09 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

On Thu, Sep 27, 2012 at 3:59 PM, Jamund Ferguson <jam...@gmail.com> wrote:
> That's how we use it at odesk. Slightly larger example:

Awesome! Thanks Jamund and Nicole for the examples! I really appreciate it.

So, Jamund, does your CSS have .h7, .h8 (and above) named heading classes?

I think the major thing that threw me off before asking you folks is
that the class names appear to be tied to the HTML element names...
But I don't see why I could not do .h7 and above for names (or, does
that sound kinda wacky?).

Sorry if I sound like a lunatic... I tend to over-think these types of
things. :D

Cheers,
Micky


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Jamund Ferguson  
View profile  
 More options Sep 27 2012, 7:17 pm
From: Jamund Ferguson <jam...@gmail.com>
Date: Thu, 27 Sep 2012 17:16:18 -0600
Local: Thurs, Sep 27 2012 7:16 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

Micky,

We have about 10 headers, but they're all variations of h1 through h5.

I don't think there's a right and wrong about this, but you'll see things
like this

.h1 // page headers
.h1High // highlight version
.h1Low // lowlight version
.h2 // section headers
.h3 //sidebar headers
.h4 // section sub-headers
.h5 // sidebar sub-section
.h5lrg // larger version

Then we use sass and will do this .h1High { @extend .h1; color: white; }

Here's a screenshot from our components library:
http://cl.ly/image/27430v0O1m3q


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Micky Hulse  
View profile  
 More options Sep 27 2012, 7:32 pm
From: Micky Hulse <rgmi...@gmail.com>
Date: Thu, 27 Sep 2012 16:28:30 -0700
Local: Thurs, Sep 27 2012 7:28 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

On Thu, Sep 27, 2012 at 4:16 PM, Jamund Ferguson <jam...@gmail.com> wrote:
> We have about 10 headers, but they're all variations of h1 through h5.
> I don't think there's a right and wrong about this, but you'll see things
> like this

Ooh, that's cool! Great tips and very inspirational. :)

Thanks for sharing!

Thanks to OOCSS, you and Nicole, I'm feeling better about the
direction I'm heading in... Thanks again!!!!

Cheers,
Micky

P.S.

I'd still be interested in seeing other folks CSS variations on this
topic... I find this kind of stuff fascinating. Btw, Nicole, that
http://csswizardry.com article was a great read, thanks for the
linkage!


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Andrew Abogado  
View profile  
 More options Sep 28 2012, 9:46 am
From: Andrew Abogado <m...@andrewabogado.com>
Date: Fri, 28 Sep 2012 06:46:55 -0700 (PDT)
Local: Fri, Sep 28 2012 9:46 am
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

This is very helpful. Thanks


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Aeron Glemann  
View profile  
 More options Sep 28 2012, 1:13 pm
From: Aeron Glemann <aeron.glem...@gmail.com>
Date: Fri, 28 Sep 2012 11:13:41 -0600
Local: Fri, Sep 28 2012 1:13 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author

I like to take my cues from the W3C and HTML itself... ie they decided a
long time ago not to do:

<h-primary>
<h-secondary>

or

<h-alpha>
<h-beta>

They did something much simpler, more performant (smaller) and universally
easier to understand and remember:

<h1>
<h2>

FWIW, I tend to do it like this:

h1, .heading-1 {}
h2, .heading-2 {}

h1 = something that is semantically the most important heading on the page
.heading-1 = something that just needs to look like the most important
heading on the page


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Nicole Sullivan  
View profile  
 More options Sep 28 2012, 6:58 pm
From: Nicole Sullivan <nic...@stubbornella.org>
Date: Fri, 28 Sep 2012 15:58:37 -0700
Local: Fri, Sep 28 2012 6:58 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author
I don't think h7 is whacky. I like that it is easy to remember. Discoverable.

Nicole

Sent from my iPhone

On Sep 27, 2012, at 4:10 PM, Micky Hulse <rgmi...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Micky Hulse  
View profile  
 More options Sep 28 2012, 7:06 pm
From: Micky Hulse <rgmi...@gmail.com>
Date: Fri, 28 Sep 2012 16:05:51 -0700
Local: Fri, Sep 28 2012 7:05 pm
Subject: Re: Headings question: Basic concept/usage?
Print | Individual message | Show original | Report this message | Find messages by this author
Thanks Aeron and Nicole!!!!

On Fri, Sep 28, 2012 at 6:46 AM, Andrew Abogado <m...@andrewabogado.com> wrote:
> This is very helpful. Thanks

+1000 :)

You OOCSS guys/gals rock. :)


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2013 Google