Dropbox Code Challenge

Dropbox assignment to create a 'Dropbox for Business' page with css animations and responsive layout.

Table of Contents

Below are some options on how you can view this page in your browser, as well as some additional details about the project.

• I'd like to run the page in Node
• I just want to open the static page and see it
• About the sprites
• About the CSS gallery
• Credits

Running the Project in Node

In order to run the project in Node, you will need the following:

• Node.js (v0.10.x) and npm (v1.4.3 or later)
• GraphicsMagik (v1.3.19 or later) — See Installing GraphicsMagick section
• Gulp (v3.5.6 or later) — npm install gulp -g

Setup

1. Fork this repo, and clone your fork.

   $ git clone git@github.com:USERNAME/db-challenge.git

(Replace USERNAME with your GitHub username.)

2. Install dependencies:

   $ cd db-challenge
   $ npm install

3. Build static assets (scripts, stylesheets, sprites) with Gulp, and start the node server:

   $ gulp

   The gulp task is set up to watch files and re-run when stylus files are changed, so you will need to run the node app in a new terminal window:

   $ node app

Now you can visit the page at http://localhost:3000

Installing GraphicsMagick

GraphicsMagick is an image processing library utilized during the build process to generate sprite sheets.

Mac

1. Install Xcode Command Line Tools — xcode-select --install

2. Use Homebrew to install GraphicsMagick — brew install graphicsmagick

   Installation instructions for Homebrew are available on its website.

Ubuntu

To ensure you are using the latest version of GraphicsMagick, please compile it manually.

1. Make sure you have libpng12-dev (required for PNG support)

   $ apt-cache policy libpng12-dev
   # If Installed: (none) then
   $ sudo apt-get install libpng12-dev

2. Download and extract the latest source release.

3. Execute the following commands to build and install GraphicsMagick.

   $ cd GraphicsMagick-[version]
   $ ./configue
   $ make
   $ sudo make install

Just Viewing the Page

It's no fun to install all that cray software above if you aren't already using it. The scripts, styles, and images that have been generated by the gulp tasks are included in this repo as well, so you can just go into public/index.html and open the file in a browser to view the project.

Credits

• Reset CSS file is a file I've been using for a while now from http://meyerweb.com/eric/tools/css/reset/
• Script for detecting if element is in viewport is a John Resig solution http://ejohn.org/blog/getboundingclientrect-is-awesome/
• CSS Gallery was a Grunt/Sass gallery originally done by Ben Schwarz. I converted it to Gulp/Stylus and added the left/right arrow navigation as well as the class to enable/disable it, and added a script to wait until the gallery is in view to start the slideshow. Also This gallery has 3 simultaneous animations playing at once. If this weren't a challenge for showing off CSS animations, I probably would not have chosen to do it this way. With 3 images it works fine but adding more images means more animations playing non-stop at the same time.

Thank You!

This was fun.