CSS foundation & framework for Meetup
Failed to load latest commit information.
components/bourbon bourbon update Oct 28, 2015
hologram set Graphik font name May 5, 2016
sass use flexbox for full-width segmented control by default May 18, 2016
.ruby-version updated ruby version Dec 19, 2013
LICENSE lic Feb 21, 2013
bower.json update segmented control May 10, 2016
package.json bump to hotfix version 2.0.1 May 5, 2016



Sassquatch is a CSS foundation and framework for Meetup, built with Sass.


Sassquatch can be installed or updated via the bower package manager, which requires Node 0.8.0 or higher:

$ bower install sassquatch

Sassquatch will be installed in ./components/sassquatch unless you've customized your bower install directory.


Using Sassquatch with CSS

You'll need to compile Sass in order to link to a CSS file:

 $ sass -q sass/sassquatch.scss [TARGET_DIR]

 $ sass -q sass/sassquatch_mobile.scss [TARGET_DIR]

Desktop CSS

<link rel="stylesheet" href="components/sassquatch/desktop/sassquatch.css" />

Mobile CSS

<link rel="stylesheet" href="components/sassquatch/mobile/sassquatch_m.css" />

Using Sassquatch with Sass

You can import _sassquatch.scss or _sassquatch_mobile.scss into your base Sass file:

Desktop Sass include

@import "compontents/sassquatch/desktop/sassquatch.scss";   

Mobile Sass include

@import "components/sassquatch/mobile/sassquatch_mobile.scss";

Documentation (style guide)



SassQuatch development currently requires Ruby 2.0.0 and the bundler gem.

(Recommended) Installing rbenv

$ brew update
$ brew install rbenv ruby-build

Easy setup

$ git clone git@github.com:meetup/sassquatch.git; ./setup.sh

Editing sass source and documentation

To modify sassquatch, edit scss source files in sass/. We document our Sass components using hologram.

    (compile sass and rebuild docs) $ grunt
    (rebuild docs) $ grunt docs
    (recompile sass) $ grunt sass

Hologram builds static documentation to doc_mobile/ and doc_desktop/; open these in your favorite browser locally to test during development.

Submitting changes

We will keep master in sync with the code that is deployed to Meetup.com. The 'active' branch that will collect pull requests is dev. When a release is ready to be pulled into an in-development feature, dev will be tagged. There will be no short-lived release_x branches.

This will approximate the git-flow development pattern (although tags will be on dev instead of master).

If you use hub, you can target your pull requests to the dev branch. Otherwise, the repo maintainer will merge into dev when the pull request is ready.

$ hub pull-request -b Meetup:dev -h {sourceGitHubAccount}:{sourceGitHubBranch}

If you have push access, {sourceGitHubAccount} is usually Meetup.

Updating live docs

If you have push access, there's a separate task for sending new changes to the live github pages branch:

$ grunt ghpages

NOTE: Currently, you must be in master to push updates to live documentation.


Copyright 2014 Meetup

Licensed under the MIT License