Skip to content
The static site using Node.js for some preprocessors.
CoffeeScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


The static site using Node.js for some preprocessors.

Getting Started

  1. Install Node.js
  2. Install node modules npm install
  3. Edit in development mode make s and open localhost:3000
  4. Generate the static site under /out make generate


  • Install imagemagick and generate responsive images make images
  • Deploy to production based on S3 credentials stored in your env variables make deploy

Content Images

Currently the image contents are not checked under git. If you are working at Artsy you can download the images from our S3 bucket. Otherwise you'll just have to download them off yourself, or add your own place-holders with file names relative to what's pointed at under src/templates/content.

Additionally there is a make images task to resize these images. To use this install imagemagick, place your images under the out/_content folder, and run the make images task.


Artsy 2013 is a static site that uses stylus, jade, coffeescript, and browserify to make development easier. All of the source files are found under /src and a Makefile has a couple tasks to output the site for production use.

The majority of the code can be found under src/scripts/ In here, scroll-driven animations are set up through a set of functions wrapped up in an onScroll function. Because supporting scroll events on iPad is crazy, we're using iScroll if we detect an iPad device, while using the more traditional $(window).on('scroll') for desktop browsers. This means we have to wrap a lot of code like $(window).scrollTop() in our own utility functions that calculate based on iscroll or window depending on the device.

A combination of responsive and device detection is used to support the most common devices (desktop browser, iPhone, iPad). Responsive media queries pertaining to mobile devices can be found in src/stylesheets/mobile, as well as non-mobile specific media queries found among their respective component stylesheets. The src/scripts/ file has some device detection based on window.navigator.userAgent. On load we add classes to the body indicating things like ios6. Along-side the troublesome CSS selectors in our stylus files we will target the offenders via body.ios6 #offending .class.


This is mostly just an example project for learning's sake, but if you would still like to contribute simply fork the project and submit a pull request.



You can’t perform that action at this time.