We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I guess no more than using a preprocessor to begin with), but it's worth it.

Why is using Compass a good idea?

  • The @mixins are very well written. They match the spec where they can and are very consistant.
  • Compass updates so you'll stay up to date on current best practices automatically. It will probably do a more comprehensive job of doing that than you can alone.
  • It has a bunch of other powerful stuff you can tap into, like spriting (which we won't get to in this project but is sweet).

CodeKit works great with Compass (it even ships with it). We lose some of the control we had in CodeKit (like controlling file compiling paths directly) but it's not a big deal. We can still control most stuff from the config.rb file now in our project.

Ultimately we use Compass to @include transitions for the navigation links giving them a softer feel.

Comments

  1. Eduard
    Permalink to comment#

    why the videos are loading so slow? I mean, I try on different browsers (safari, chrome, firefox) all with the latest version, both on pc and macs, and with 2 different internet providers?

    • Chris Coyier
      Permalink to comment#

      The file sizes for the videos (esp on desktop browsers) are pretty big. Sometimes hundreds of megabytes. They are hosted on Amazon S3 so that should be fairly fast, but of course all this is dependent on your internet connection speed.

      If it seems crazy slow, hit me up and chriscoyier@gmail.com with any other details you have and we’ll try and figure something out.

      I’m going to bury this comment in an attempt to keep the comment threads about the content rather than specific technical issues.

  2. andyunleash
    Permalink to comment#

    Awesome stuff, Chris.

    I’ve been using Codekit for a while since your original video about it, but hadn’t embraced Compass until now and had been making my own mixins. Didn’t realise it was quite as straighforward as that! Starting a new project today and will be using compass from the getgo!

  3. MarkV
    Permalink to comment#

    Awesome video mate, I must say since you suggested using Compass it has cut down my development time drastically. The best part, because I work on a PC (cause the company I work for invented them) there is a PC version… YAY!! I highly recommend paying the 10 bucks for it, it is brilliant.

  4. Seth Hall
    Permalink to comment#

    I had been having an issue with CodeKit and Compass and this video just helped me figure it out. Awesome.

  5. CWSpear
    Permalink to comment#

    You can click on “New Config File” instead of “Install Compass,” and it won’t create all those files that you didn’t need which will overwrite your existing files if you have a file with the same name.

    If you already have a project that is set up for Compass, it’s safer to go the other route.

  6. marinade
    Permalink to comment#

    I am using windows and it did not create a config.rb file, so i had to copy the one from your project file and it works.

  7. Josh Eaton
    Permalink to comment#

    Chris, I know you’ve discussed CodeKit on CSS-Tricks and obviously use it a lot. It’s really stuck out to me how many problems you have with it while watching these screencasts. Have you mentioned that to the developer? I imagine seeing your screencasts and the issues presented would probably be quite an incentive to fix these bugs.

    One of the reasons I signed up for The Lodge was to learn how CodeKit fits into your workflow and whether I should use it over LiveReload. Thanks!

    • Chris Coyier
      Permalink to comment#

      I have been in touch several times with the developer and have made every issue I’ve had be known. (https://twitter.com/bdkjones)

      There is even a v2 coming with a lot of sweet stuff, including project refreshes that are much faster (that has come up in these videos a few times). Also, when CSS injection doesn’t work, one major cause apparently is browser extensions interfering. Specifically Adobe Edge Inspect can be a problem one.

  8. Josh Eaton
    Permalink to comment#

    OK, that’s great to hear! Thanks!

  9. Gary A
    Permalink to comment#

    Another way you can make transitions and changes seem more snappy is to use an ease-out function. Ease-out will slow down near the end of the transition.

    You could also use the cubic-bezier function for ultimate control of your transition:

    transition : color 1s cubic-bezier(0.125, 0.890, 0.170, 0.900);
    

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.