#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub

Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to use on your own site, and customize it, easily.

In this screencast I introduce you to the project, show how you can get it running locally, and how to contribute to it on GitHub. There is a variety of tech involved. The project uses Node and npm for its dependancies. One of which is Grunt which handles the build process. Grunt essentially watches the project folder and runs all the right stuff when files change. For instance rebuilding the HTML files when templates change, and running Sass, Autoprefixer, and LiveReload when SCSS files change.

Then we make a real change to the project (on our fork of it) and submit a pull request up to the main project.


  1. kaidez
    Permalink to comment#

    Grunt has been my new God for the past two months…that is all.

  2. Keith
    Permalink to comment#

    Side note: If you run into a “sass.js error” when running grunt connect, simply follow the instructions here (http://davidwalsh.name/upgrade-nodejs) for upgrading your version of Node, this is most likely the reason you are getting that error.

    After upgrading, delete the node_modules directory and re-run npm install followed by grunt connect and you should be all set.

  3. Manuel
    Permalink to comment#

    Thanks for the cool Effeckt introduction :)! I noticed some small things in your video and would like to know some things: What theme do you use for Sublime Text and what’s the chrome extension to split windows? Looks really nice :).

  4. Simon
    Permalink to comment#

    Hi Chris

    First of all, I love your vids. They are always so inspiring!

    Second – what tool do you use for re-arranging your windows ?

    Thanks in advance.


    • Simon
      Permalink to comment#

      Ooops. Note to self: gotta check the comment by Manuel before posting…. ;-)

  5. arnold
    Permalink to comment#

    looks sweet, looks like xampp isnt needed in my workflow.
    i hope there is a way we dont need to install node modules everytime. and why use livereload , why not use Chrome developer tools – sourcemap , its support sass.

  6. Hassan
    Permalink to comment#

    Hi, Does anyone know what theme for sublime text 2 is being used in this video?


  7. Leo
    Permalink to comment#

    (sorry for my bad english) Awesome video – do not take it personally but please, stop doing the “suck sounds” (i do not know how to better describe it, but for a strange reason they are very common for american speakers) – you can hear them at
    It is very anoying and something that could make you sound less professional. Since we are at it, maybe you can take a look on that vocal fry too. You talk well, have a good energy, make me want to watch it but those 2 little things are kind of annoying.
    Again, do not take it personally. I’m only saind this here because I care and I liked this video, so I want the best for you :)

    • Daniel
      Permalink to comment#

      Haha, wow, picky! I have never ever noticed that until I specifically was looking for you. You’re probably an audio engineer or something I take it?

  8. Mehrdad
    Permalink to comment#

    thank you for this video

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 triple backtick fences like this:

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

We have a pretty good* newsletter.