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.
Grunt has been my new God for the past two months…that is all.
ItÅ› my new God for the past month.
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 bygrunt connect
and you should be all set.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 :).
Ok, I found the Dark Soda Theme and enabled the folder icons. But I’m not sure what application you used for the windows splitting :(.
It’s me again. I found it, it’s Divvy :).
thanks for sharing that :]
I would suggest BetterSnap Tool, as its faster and cheaper ;)
Better Snap Tool on the AppStore
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
Ooops. Note to self: gotta check the comment by Manuel before posting…. ;-)
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.
Hi, Does anyone know what theme for sublime text 2 is being used in this video?
Thanks
See my comment above :).
(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
01:24,
03:55,
04:40,
06:00,
(…).
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 :)
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?
thank you for this video