This is the source for Tech@NYU's awesome website.
To install the project's dependencies, run the following commands at the root of the directory:
# bundle install is sorta like the ruby equivalent of
# npm install (though you need to install bundler first)
gem install bundler
bundle install
# For compiling the LiveScript and Sass files.
npm install gulp -g
npm installThe following command compiles the Sass files that make up the project and puts everything in the build directory. To do this, it runs gulp through bundler, which makes sure the correct ruby dependencies are used:
bundle exec gulp
To start the server, run node build/server.js from the project's root
directory. This project is an Express app; to preview the site, visit
localhost:3000 in a web browser.
During development, you can have gulp do less minification (which makes
debugging easier and speeds up the build time), by running:
bundle exec gulp dev
This repo uses flight to build the webpage out of independent components that communicate with one another by sending out and responding to events. These components can be augmented by composable mixins. This architecture, which is used by Twitter, makes the coupling between the different parts of the page much looser, so the resulting code is less brittle, and each component is fully testable in isolation.
Once you've grocked the flight architecture, the only other big thing to understand is how the animations are set up. Basically, different components can register animations (example) using the animate mixin, which stores the animation instructions for each element in that element's DOM node on a data- attribute. These data- attributes encode all of that node's animation instructions at each different design mode. (There are two design modes: large and small.) Then, a heavily-modified skrollr-stylesheets keeps track of which design mode is in view and loads only that mode's animations into the main skrollr. (The skrollr library wasn't built for responsive design and can only handle one set of animations at a time, hence the need for skrollr-stylesheets to switch the animation instruction sets in and out as the design mode changes.)
This picture is complicated a bit by the need to actually move around some elements in the DOM when the design mode, as not all the layout adjustments were possible with just CSS. Those changes are handled in the skrollr component, which in turn just sets up listeners for the 'designModeChange' event. That event is thrown by the designSwitcher component, which is just a really nice way to centralize keeping track of which design mode is currently being used and when the design mode changes, so that every single component doesn't have to track this stuff on it's own; other components can just listen to the designModeChange event.
Chrome (30-33), Safari 7
IE 10-11, Firefox (26–28)
IE9 and below
Everything else