SassyGuides

SassyGuides is a framework for customizing LibGuides written in Sass by Alex Armstrong.

SassyGuides was written as a proof-of-concept for SpringyCamp 2013. Following the announcement of the second version of LibGuides soon after, it did not make sense to develop it further. SassyGuides has not been sufficiently tested to use in a production environment. In other words: it's full of bugs that I won't fix.

Will there be a new version for LibGuides v2? I don't know yet :)

• Check out the live demo to see what it looks like.
• Read the changelog to find out what's changed recently.
• Questions or comments? Contact me by email or on twitter.

---

Quick Start

1. Get SassyGuides

• Download the latest release
• Clone the repository: git clone git://github.com/alehandrof/sassyguides.git.

2. Compile SassyGuides

• Use the recommended environment (see below) which uses a Ruby-powered combination of Guard, Compass & Livereload
• Use the Compass gem.
• Use a GUI app: (list not exhaustive)
  • Compass.app. Linux, Mac & Windows. Commercial.
  • CodeKit. Mac. Commercial.
  • LiveReload. Mac & Windows. Commercial.
  • Prepros. Windows. Free.
  • Scout. Mac & Windows. Free.

3. Customize SassyGuides:

• The sassyguides.scss stylesheet combines all the other components. It's therefore a good place to start.

• The settings files – base/_settings.scss and libguides/_settings.scss – are also good starting points. You can override settings by adding them in new file and importing it into sassyguides.scss.

4. Use SassyGuides:

Locally

To work locally, download some LibGuides pages and then edit the HTML files to add <link rel="stylesheet" href="path/to-your/sassyguides/sassyguides.css"> just before the </head>. Make sure they don't include any CSS apart from the default LibGuides stylesheets.

Online

• Upload the compiled stylesheet (sassyguides.css) to your institution's servers, LibGuides (use a "Documents & Files" box) or a CDN. (At a pinch Dropbox will do, but it's not very fast.)
• Link to the stylesheet: <link rel="stylesheet" href="//yourserver.com/sassyguides.css">

---

Recommended Ruby Environment

The environment I use to develop SassyGuides combines Ruby, Guard, Compass & LiveReload. The idea is to have Guard watch the SassyGuides directory so that it will re-compile the Sass when you edit it and then call LiveReload to refresh your browser. There are instructions on how to set this and similar workflows around the web but, while the outline below is from memory and rather inelegant, it should get you there. Feel free to ask me for help if you get stuck.

• Install LiveReload:
  • Install the LiveReload extension on the browser you'll be using for development.
• Install Ruby:
  • Windows – http://rubyinstaller.org/
  • Linux – sudo apt-get install ruby
  • Mac – Already installed
• Install the required Ruby gems:
  • gem install guard-compass guard-livereload
  • On Linux you will need to add sudo before the above command.
• Test it out:
  • Run guard in the SassyGuides directory.
  • Depending on your OS, you may be asked you to install some more gems. Exit guard (by typing e and Enter) and install them (gem install whatever).
  • Repeat until you don't get any errors :)
• Use it:
  • Run guard in the SassyGuides directory.
  • Open a local HTML file that links to the compiled SassyGuides (sassyguides.css).
  • Start hacking SassyGuides!