In this section, we'll try to address the biggest issue with this project: the whole stylesheet is strictly dependent upon how many images are displayed in the gallery. Every effect is tailored around this number, and so adding a new image can cause a lot of work in our CSS.
To solve this problem we can use a CSS preprocessor, which lets us create a file in a language that includes some facilities such as loops and variables, and one that can be compiled into a CSS stylesheet.
We'll use Sass for this project. To install it, you need to first install Ruby (http://www.ruby-lang.sorg/en/downloads/) and then type gem install sass from a terminal emulator within your project directory (depending on your operating system, you may need to use sudo gem install sass instead).
Once this installation is complete, due to the fact that SCSS is a superset of CSS3, we can create an scss/application.scss file by duplicating the content of css/application.css.
Next we can prepend the whole...