The homepage for CSSclasses, a free CSS workshop series
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_data
_includes
_layouts
_plugins
_posts
_sass
assets
.gitignore
.nojekyll
.travis.yml
CNAME
Gemfile
Gemfile.lock
README.md
_config.yml
about.html
android-chrome-144x144.png
android-chrome-192x192.png
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
attendees.html
bower.json
browserconfig.xml
coaches.html
code-of-conduct.html
deploy.sh
favicon-16x16.png
favicon-194x194.png
favicon-200x200.png
favicon-32x32.png
favicon-96x96.png
favicon.ico
feed.xml
gruntfile.js
index.html
manifest.json
materials.html
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
mstile-70x70.png
package-lock.json
package.json
run-your-own-event.html

README.md

CSSclasses Website

Installation

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 _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.0.0. If you've got that, you're all set. Skip to step #2. Otherwise, follow these instructions to install Ruby.

  • 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 (we recommend turning off the progress bar since it speeds up the npm by npm set progress=false)

  • Bower Dependencies - Run bower install

  • Livereload Browser Extensionhttp://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 localhost:4000.

Contributing

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

Browser Support

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

Content Guidelines

Images

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

Coding Guidelines

General

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

Scss

  • @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.

Deployment of the live page

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