#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. User Avatar
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    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. User Avatar
    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.


    • User Avatar
      Permalink to comment#

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

  5. User Avatar
    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. User Avatar
    Permalink to comment#

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


  7. User Avatar
    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 :)

    • User Avatar
      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. User Avatar
    Permalink to comment#

    thank you for this video

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.