So far the actual web site doesn't look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a "real" start on building the site visually.

We use Frank DeLoupe as a color picker, which is nicely integrated with Photoshop (it makes the color you pick the active color in Photoshop, as well as copied to your clipboard).

At one point we change the Sass/Compass config to compile the CSS as :expanded instead of :compressed to see the actual CSS being generated for debugging reasons.

We have to use our brains a bit regarding how things will be placed and react to the fluid nature of a browser window. For instance, the log should always touch the upper left corner.

We do an awful lot of nudging around values to get things just right, as well as adding little details here and there to make things look better, like adding slight shadows to the paper stack effect.

Comments

  1. Amrit
    Permalink to comment#

    Best video yet! Lovin’ the SASS techniques

  2. Gray Ghost Visuals
    Permalink to comment#

    The best way to use Frank DeLoupe is to setup a hotkey for your color picker instead of selecting it from the menu each and every time with your mouse ( under preferences). I use (option f) for Mac where ‘f’ is for Frank…Duh!

    Also, using color variables in Sass can be used more efficiently by describing them based on their placement or usage in the design. For example, instead of calling the background of the page as $gray it would be smarter to say $pageBG. By using this approach, the color is not tied down to the actual color variable -just in case you don’t want gray down the road. If you were to change the background of the page wrap to white then $gray no longer makes sense.

    • Chris Coyier
      Permalink to comment#

      Yah I have a key command now, definitely the way to go in all things computerz. (Especially StarCraft II!)

      Regarding color naming — your thinking is ideal and makes perfect sense, but sometimes I just do things the way my brain works instead of the best possible semantic approach. I find when I used names like page-bg or top-border-emphasis or stuff like that I can never remember what I called them and it makes development slower and more frustrating that it already is. $orange, and the like, in this design, just works for me.

  3. Kustom Designer
    Permalink to comment#

    I was wondering how to nest pseudo elements in Sass, I kept meaning to look it up but it kinda always got pushed to the side. Best video so far Chris!

    • Gray Ghost Visuals
      Permalink to comment#
      section {
          property:value;
          
          &:before {
              property: value;
          }
      }
  4. support@comprx.com
    Permalink to comment#

    None of these videos are working on my iPad. I hope you go into the CSS a bit more. I don’t use sass so trying to figure out the CSS from your sass is a bit dodgy.

  5. jasonewillis
    Permalink to comment#

    can’t download video, it’s a ‘download.htm’

  6. jasonewillis
    Permalink to comment#

    nevermind, I am a ‘fox’ not a bear. Ok, where is that link to upgrade?

    Oh, and I wish I could edit my comments btw.

    • Chris Coyier
      Permalink to comment#

      Regarding downloading, please refresh the page before clicking the download button. The secure links expire fairly quickly and refreshing seems to do the trick.

      At your Fox level, you can still download the videos, just not the accompanying files.

      If you’d still like to upgrade, contact me at chriscoyier@gmail.com and I’ll give you the rub.

      I’m going to bury this comment in an attempt to keep comment threads about the content instead of technical issues.

  7. christopherisaak
    Permalink to comment#

    haha I just wanted to scream variable the whole way until you realized that you hadn’t put in the $ sign.

  8. iaakash
    Permalink to comment#

    Hey Chris!! Awesome work, not just on Redesign but also throwing in new STUFF that makes a lot of difference to our work-flow. Just one query, would it be possible for you to share final PSD file of the project.

  9. Seth Hall
    Permalink to comment#

    Great video Chris. I especially love the issues repo on Git.

    https://github.com/chriscoyier/CSS-Tricks-v10

    I have experience a few problems with the video only to find out your are working on it. Great idea.

  10. FLDLVL
    Permalink to comment#

    I am new to all of this and it may be a stupid question, but what syntax do you have sublime set to view the scss? I set it to css and set the color scheme to twilight but it isn’t showing up correctly.

  11. CWSpear
    Permalink to comment#

    Chris, I love how you’re smart about putting common elements into the `_bits.scss` file and all that.

    In case you were wondering, Compass has a little section about best practices that talks about a lot of that same stuff, as well as a couple other items you touched on in there:

    http://compass-style.org/help/tutorials/best_practices/

    Nice for having a common starting point so all Compass projects have that same initial structure so people know where to look for variables and custom mixins, etc.

    I, personally, also maintain my own version of normalize that I forked from someone who had already put a bunch of stuff into SASS for me, and it has a _base.scss with it that controls a lot of the starting typography and stuff. And it has all my little tweaks like your removing underline on links and border-box, etc. My own little boilerplate.

  12. tuomasomartikainen
    Permalink to comment#

    Hi Chris!

    I wonder how do you measure things with that rectangle? Is it built in into Mac or is it an app or what?

    • Chris Coyier
      Permalink to comment#

      Yep, on Mac you can press Command-Shift-4 and get a crosshairs in which to drag and take a screenshot. But it also tells you the dimensions of the area you are selecting which is often times just as useful.

    • CWSpear
      Permalink to comment#

      But make sure if you’re doing it on a photoshop file that that photoshop is set to “actual” size. I’ve been zoomed in slightly so that I didn’t notice by the naked eye, but it messed up all my measurements.

  13. Brian Enriquez
    Permalink to comment#

    That video was badass, Chris. Just downloaded Frank DeLoupe and CodeKit. These videos remind me of a conversation I had with my brother after the second set of Star Wars came and Lucas unveiled Yoda’s first actual on-screen, back-flipping CGI battle. I said, “They should teach Yoda in school.” My brother said, “They just did.”

    Got the CSS-Tricks shirt in the mail yesterday too. Gracias!

  14. tyrone fontaine
    Permalink to comment#

    This video is blowing my mind. Sass terrified me before this.

  15. Dean Birkett
    Permalink to comment#

    Great video, and some really useful comments / links from others. Cheers all!

  16. lukeluukeluuuke
    Permalink to comment#

    Hey Chris, in photoshop you can actually use cmd+click to use auto select when you don’t have it turned on :)

  17. bkbillma
    Permalink to comment#

    Absolutely love watching your work. Reminds me so much of my thought process when building which helps a lot with wondering if I am doing it ‘the right way’ or not.

  18. Jakob Schweighofer
    Permalink to comment#

    Thanks for the great presentation! I especially loved the new color picker. Using ColorSnapper until now and having to copy/paste the value to Photoshop was a massive time killer.

  19. gmena730
    Permalink to comment#

    Hey,

    First and foremost it’ll like to thank you. These videos have helped me a lot and I’m not even halfway through. Keep ’em coming!

    I have a question.

    I’ve notice that the text padding of my menu in FireFox is in a lower position than in Chrome, is there a way I can just tweak this just for FireFox? I don’t know If I explained myself correctly I’m new to coding.

    Thanks!

    • Chris Coyier
      Permalink to comment#

      Is it super noticeable and obviously wrong looking? There might be some other kind of problem going on that is causing it. Or it could be a browser bug, in which case the best bet is creating a reduced test case and reporting it. Absolutely last resort would be using a browser hack to target Firefox and adjust: http://browserhacks.com/

  20. Roy
    Permalink to comment#

    I’m probably a bit lat saying this and you probably have figured it out by now. To set your Default tab size in Sublime Text go to PreferencesSettings Default and scroll down to around line 45 and change where it says tab-size to your preferred tab size and then save and close. There are other useful things in there to play with as well.

    Great tutorials Chris, thanks

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.