This website is run by Jekyll and GitHub pages. To separate the source files from the files used for the live page this repo uses two active branches: master and gh-pages. master contains all files, gh-pages only contains the files needed to serve the actual website. To work with this environment follow these steps:

• git clone [email protected]:CSSclasses/CSSclasses.git
• cd CSSclasses
• git clone [email protected]:CSSclasses/CSSclasses.git -b gh-pages _site

This clones the source files into the CSSclasses projects folder and the generated _site content aka. gh-pages repository inside the _sitefolder.

• Ruby – Jekyll requires the Ruby language. If you have a Mac, you've most likely already got Ruby. If you open up the Terminal application, and run the command ruby --version you can confirm this. Your Ruby version should be at least 2.3.0. If you've got that, you're all set. Skip to step #2. Otherwise, follow these instructions to install Ruby.

• Node – We depend on Node.js. If you have a Mac, you've most likely already got Node. If you open up the Terminal application, and run the command node --version you can confirm this. Your Node version should be at least 10.15.0. If you've got that, you're all set. Skip to step #3. Otherwise, follow these instructions to install Node.

• Gems Dependencies – In order to install all of the gems we need, please run the following: gem install bundler. Now you're ready to install everything with one command: bundle install and you're good to go.

• Grunt Plugins – Run npm install

• Bower Dependencies - Run npx bower install

• Livereload Browser Extension – http://livereload.com/extensions/

After installing all dependencies run npm start. This triggers jekyll serve and also a Grunt watch task, Sass compiler and live reload. To access the page go to localhost:4000.

All changes have to be made and pushed inside the master branch.

This project only supports the latest versions of Chrome, Firefox and Safari.

Images always have to have a ratio of 3:2.

• If you want to change or add stuff to the project make sure to check for already existing modules, classes, styles and so on.

• @include, @extend always has to come first in a rule set except .@include bp().
• Use relative unites like em, rem, % v-units exclusively.
• There are no px units allowed inside this project.
• For margin and padding always mulitply or divide the $base-unit.
• Use the predefined color variables from _variables.

After committing to the master branch, the site is deployed automatically using Travis CI.