https://github.com/snugug/rwd-sass-compass-training
Responsive Web Design with Sass and Compass training workshop files
https://github.com/snugug/rwd-sass-compass-training
Last synced: about 1 year ago
JSON representation
Responsive Web Design with Sass and Compass training workshop files
- Host: GitHub
- URL: https://github.com/snugug/rwd-sass-compass-training
- Owner: Snugug
- Created: 2012-11-04T00:17:37.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-11-10T09:13:18.000Z (over 13 years ago)
- Last Synced: 2025-04-20T04:34:21.444Z (about 1 year ago)
- Language: Ruby
- Size: 134 KB
- Stars: 8
- Watchers: 4
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RWD with Sass+Compass Mini-training
Responsive Web Design with Sass and Compass training workshop files
## Getting started
You'll need to install a few Ruby gems to take advantage of Sass and Compass on
your local development machine.
### Mac
OSX comes with Ruby installed.
### Windows
Windows users should download and install [RubyInstaller](http://rubyinstaller.org/) for Windows.
### Linux
Linux users, you probably know how to get Ruby on your machine. Do that. Or follow the instructions in the PDF if you're not sure.
### Getting Help
If you have any questions regarding installing, they are most likely answered within the [Installing Sass+Compass Guide](http://snugug.com/musings/installing-sass-and-compass-across-all-platform)
## Gem installation
Commands that start with # are just comments
# Update ruby, sass, compass and all existing gems
sudo gem update --system
# Download and install some Compass gems
sudo gem install compass toolkit compass-normalize sassy-buttons singularitygs
## Documentation for these Compass extensions
* Compass-normalize: https://github.com/ksmandersen/compass-normalize
* Susy: http://susy.oddbird.net
* Breakpoint: https://github.com/canarymason/breakpoint
* Respond-to: https://github.com/snugug/respond-to
* Toolkit: https://github.com/Snugug/toolkit
* Sassy Buttons: http://jaredhardy.com/sassy-buttons
* Singularity GS: http://singularity.gs
## Using JavaScript to get window dimensions
In the cosole of your developer tools of choice type the following line of code. Whenever you resize the window its width will be printed in the console.
window.onresize = function(){console.log(window.innerWidth);}
## Using MQtest.io to get window dimensions
http://mqtest.io will show you window, device, orientation, aspect-ratio, and UA.