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 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@example.com:CSSclasses/CSSclasses.git
git clone firstname.lastname@example.org: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
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 --versionyou 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 --versionyou 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 installand you're good to go.
Grunt Plugins – Run
Bower Dependencies - Run
npx bower install
Livereload Browser Extension – http://livereload.com/extensions/
Run the project
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
All changes have to be made and pushed inside the
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.
@extendalways has to come first in a rule set except
- Use relative unites like
- There are no
pxunits allowed inside this project.
paddingalways mulitply or divide the
- Use the predefined color variables from
Deployment of the live page
After committing to the
master branch, the site is deployed automatically using Travis CI.