Jeet tooks several months to make and we’re very happy with the product. We’ll be using it on all of our sites from here on out and would love to see it in the wild, so if you end up using it, please let us know. We don’t have to share it, it just makes us happy to see people actually using it.

Check out our Jeet Tutorial on TutsPlus

External Resources

• A List Apart: How to Size Text in CSS – This great article (albeit from 2007) describes (with screenshots) the difference in how browsers render fonts
• Kyle Schaeffer: CSS Font-Size: em vs px vs pt vs % – This article succinctly sums up the whole CSS font sizing thing
• Jonathan Snook: Font Sizing with rem – Snook’s solution for all browsers
• InsertHTML: A Rundown of CSS3 Units and their uses – This heavily underrated blog is the first place I saw an in-depth breakdown of rem

View Demo
Download Source Files

If there’s enough response to this, I’ll follow up with a tut on responsive design and making the menu sexy.

Chrome’s #nav Solution

Add width:47.6em; to #nav. Apparently Chrome isn’t able to process the math involved when it resizes, so being explicit with it tells Chrome, “Hey look buddy! This container NEEDS to be this big when you come back up from the smallest width layout! Get with the program!!!”

View Demo
Download Source

Download Source

In the next screencast we’ll put this knowledge to use with a real-world example based on a minimalist design.

Note:
I’m kind of a responsive newbie myself, so advice in the comments is very much appreciated.

1) Isotope is awesome.
2) Full page backgrounds are easy, beautiful, and low-bandwidth.

View Demo
View Demo – Large Background
View Demo – Small Background

According to Google Browser size, almost all users see a ratio of 2:1 when viewing websites. And we’re using the min-width/min-height properties which scale images up.

That means you can use a 500px by 250px image that’s been smushed to a few kB to be your big, beautiful, full-screen background.

The HTML

<img id="bg" src="bg.jpg">

<div id="content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

The CSS

#bg {
    position:fixed;
    left:0;
    top:0;
    min-height:100%;
    min-width:100%;
    z-index:-1;
}

Screencast for Jonathan

Other Solutions

http://css-tricks.com/perfect-full-page-background-image/ – Chris Coyier’s solution. Works beautifully with jQuery!

View Demo

The Code

.textstroke {
     text-shadow:
          /* Top Middle */
          0 -.0125em .015em white,

          /* Top Right */
          .0125em -.0125em .015em white,

          /* Top Left */
          -.0125em -.0125em .015em white,

          /* Left Middle */
          -.0125em 0 .015em black,

          /* Left Top */
          -.0125em -.0125em .015em black,

          /* Left Bottom */
          -.0125em .0125em .015em black,

          /* Right Middle */
          .0125em 0 .015em black,

          /* Right Top */
          .0125em -.0125em .015em black,

          /* Right Bottom */
          .0125em .0125em .015em black,

          /* Bottom Middle */
          0 .0125em .015em white,

          /* Bottom Left */
          -.0125em .0125em .015em white,

          /* Bottom Right */
          .0125em .0125em .015em white
     ;
}

You really need to play around with this property to get a feel for which direction it’s casting the shadow and how much to use. Be subtle…

I used em’s to size because they are 1) flexible and scale well, and 2) can be small enough to give very subtle effects.

Be sure to read Chris Coyier’s entire write-up on the subject. He thinks about this stuff a lot more than I do.

View Demo

HTML

<div class="outer">
    <div class="inner">
 
        <p>
            Far far away, behind the word mountains.
        </p>
 
    </div>
</div>

CSS

.outer {
    text-align:center;
}
.inner {
    display:inline-block;
}

View Demo
Raw CSS
Download Minified

Naturally you may have to go through and tweak it a bit, but it’s a great starter. I’ll update this to include sans styling soon.