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 git@github.com:CSSclasses/CSSclasses.git
cd CSSclasses
git clone git@github.com: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 _site
folder.
-
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 least2.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 least10.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
andpadding
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.