meetuparchive/sassquatch

CSS foundation & framework for Meetup

Sassquatch

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

---

Installation

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.

---

Usage

Using Sassquatch with CSS

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

 (desktop)
 $ sass -q sass/sassquatch.scss [TARGET_DIR]
 
  (mobile)
 $ 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)

http://meetup.github.io/sassquatch/

---

Development

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 [email protected]: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.

---

License

Copyright 2014 Meetup

Licensed under the MIT License

sassquatch's Issues

forms: limit textarea resizing to vertical only

resize: vertical

docs update required - IE root

we use the IE root technique - need to add this to docs somehow

TouchList : Non-parameterized heights

e.g.

.ffbox--touchList-item should use $H_touchTargetDefault instead of 3em.

sassquatch/sass/sassquatch/lib/m/_touchLists.scss : 107
sassquatch/sass/sassquatch/lib/m/_touchLists.scss : 371

doc update required - tabs and pagination

looks like some class names and/or markup patterns have changed after merging latest from chapstick master.
We should fix the docs, as well as updating the selected state colors.

touchlist : <li:select> element causes Android Browser Crash

Moved from : https://bugz.meetup.com/show_bug.cgi?id=39349

If li:select is used with the is_disabled parameter set to true, then
clicking on the dropdown arrow will cause the Android Browser to do a complete
crash. So far, only Android Browser is affected.

I haven't been able to figure out why, but I've eliminated:

• Unicode in the select--mask element.
• :before or :after in the select--mask element.

Ultimately, I think the issue is how click events and selects are handled in
Android Browser. Because the element is positioned over the to hide browser chrome in certain browsers (Windows Phone, Opera), the
click from the is getting transferred to the beneath it. I don't know why it results in a crash in this case. The fix will likely have to be: Not masking the browser chrome on elements.

Making the select--mask some element other than a .

Figuring out a JS shim to transfer clicks, and preventing that behavior in a
disabled state.

are arrows no longer added with content in nav-pagination prev/next?

They were missing on pagination in mobile

"audit" modifiers

we have a few undocumented modifiers... we should document or deprecate depending on usage in chapstick

remove importants from button color mixins

see: https://bugz.meetup.com/show_bug.cgi?id=39235

label colors with hex values for reference

Sometimes I'd like to use meetup colors outside meetup and often reference http://meetup.github.io/sassquatch/#colors for the color hex using chromes inspect tools. It would be nice if this section just labeled this colors with the corresponding hex value.

Nav button documentation in sassquatch/mobile sassquatch

touchlist candidate for mobile

Move _fix-flex and _pin into core

Has been stable in MM for a while; should be moved into core for both desktop and mobile.

Both go together, the pinning being what lets you set certain things to go to the top or bottom of a containing fix or flex cell.

rake task for cutting a release

1. bower install (if any dependency updates)
2. update bower.json
3. commit bower.json
4. tag with release
5. push commit
6. push tag

add meetup/find style cards to sassquatch?

Add GPU acceleration in config/animation and/or animation_m

revisit colors lib with design team

there are a few things that may need to be updated, like "waitlist blue"

add anchor tag button example; document & fix "selected" modifier on buttons

IE sometimes cuts off descenders in inputs

see: https://bugz.meetup.com/show_bug.cgi?id=37863

need a modifier for smaller spacing/margins

.margin-bottom-small
.padding-bottom-small
.margin-top-small

etc.

the value should be 1/3 of the baseline height

add chapter nav style dropdowns to content patterns

bugzilla bug 38199

rake task for jekyll docs

one for building & launching locally, another for launching to (live) ghpages branch from master

`.doc-*` Layout and Mobile

Tagging @unjust, @akdetrick.

Problem

One of the things we have kicked around and never really resolved was the issue of layout in single-column environments with "full bleed" (100% width) boxes.

Here's what seems to be the core defaults of existing components:

.doc-box

• Borders on all sides.
• Border color
• Border radius
• Bottom margin
• White Background

.doc-content

• Nesting selector rules when combined with doc-box
• Transparent bottom border (?)
• Padding $baseline, except on bottom

.doc-padding

• Transparent bottom border (?)
• Padding $baseline, except on bottom.

What doesn't quite work out well for single-column, fix-flex (vertical-centered) layout environments we'll probably see more and more of.

Here are the defaults that seem to cause problems:

.doc-box

• Borders on all four sides
• Border radius

.doc-content/.doc-padding

• Transparent bottom border (seems like it could be removed?)
• Non-$baseline bottom padding

Questions

1. Does it seem reasonable to create mobile-layout specific modifiers in the long run, in which we are overriding the Sassquatch-standard definitions?

Example:

.doc-box--full {
  @extend .doc-box;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

1. Does it make sense to override/redefine problematic selectors?

Example:

// Within mobile sassquatch scope:
.doc-content {
  padding: $baseline;
  border-bottom: none;
}

1. Does it make sense to create a differently-behaved .doc-* standard, or re-examine the existing defaults?

One potential (half-baked) proposal, would be to have a .doc-card class that behaved like a doc-box, but with consistently-enforceable rules for transitioning between full-bleed and card-like layouts based on media queries and/or modifier classes.

It would be extremely similar to doc-box, but it wouldn't inherit any potential cascade baggage of .doc-box/.doc-padding that would need to be redefined/overruled in mobile stylesheets.

clean up unused instances of imgUrl

that doesn't belong in sassqatuch

(also, remove unused content patterns, like _dialog.scss)

improve focus states on anchor buttons and button elements

it's hard or impossible to tell when you're focused - maybe use the hover color + a border highlight

rake task: watch for sass changes during local dev

pull latest from master after bug 38142 is released

round the corners of tabs with our default radius

party like it's 2006

fix selected state color for buttons etc.

Should be gray (like the meetup find page), not blue.

touchlists : multi-line placeholders in textareas do not properly wrap on Samsung Android Browser.

clarify documentation about desktop/mobile touchlist, fix flex, and pin layout

the basic idea:
same markup, different CSS

share markdown templates for mobile/desktop components, leave scss forked (include desktop css on main doc page, mobile css on mobile doc page)

TouchList Integration

Make .ffbox--touchList-item and .touchList-gem play nice

Right now .ffbox--touchList-item and .touchList-gem used in conjunction doubles the left padding on the touchList item. However, I'd like to use them and get rid of the span.padding-left inside .ffbox-flex

<li:item action="${scheduleUri}">
  <div class="ffbox ffbox--touchList-item">
    <div class="ffbox-fix">
      <div class="touchList-gem"<i class="icon icon-plus"></i></div>
    </div>
    <div class="ffbox-flex">
      <span class="linked"><trn:message key="group.event.schedule">Schedule</trn:message></span>
    </div>
  </div>
</li:item>

forms for mobile

Documentation improvements will be added.

Display icons from Red Label

It would be handy to have a place to see the icons we have available via Red Label on the compiled page for sassquatch

Add in a link to Red Label icons from Sassquatch Docs

Red Label currently doesn't have a GH-pages branch, and it really needs one.

https://github.com/meetup/red-label/issues/15

Sassquatch also needs a link to the Red Label icons from it's own documentation so that people can find it.

v1.3.3 - Create reusable standards from meetup/find page

Is `doc-padding` redundant if we have `doc-content`?

It looks like the only difference between the two are nesting rules when in conjunction with doc-box.

Would it be reasonably to deprecate doc-padding?

italic and bold modifier documentation/bugs

.italic is missing from the main modifier class list on the left, and .bold doesn't seem to be working...

document segmented-control and match selected styles with nav-buttons

needed for v1.3.1

iOS Safari 6.0.1: `.touchList-item--input input` box hernia

.touchList-item--input input {
  ...
  width: 100%;
}

Causes box herniation on iOS Safari when changing orientations.

Current hypothesis is that there is an issue with the browser improperly re-calculating and repainting element widths when changing orientation.

For example, after removing the width: 100% property and changing orientation, there was no visible reflow in width.

Now, with the width property active, changing orientation causes a reflow to the landscape width. Changing back from landscape to portrait, the <input> element maintains its calculated landscape width rather than reflowing, breaking the layout in portrait mode.

some of the hex codes listed under colors in the docs are wrong

Add base-16 standard media size helpers

for both mobile and desktop...

ie.
16px x 16px - "xsmall"
24x24 - "small"
32x32 - "medium"
48x48 - "large"
64x64 - "xlarge"

we should define standards (browser support, etc) for new additions to sassquatch

aka the "navbuttons in ie8 problem"

previously i assumed that sassquatch items were thoroughly tested across desktop and mobile browsers but this may be only half true. perhaps its fine to have mobile only items but then they should be marked as such.

---

this also touches on the larger topic of how sassquatch should be maintained. I'm unclear when something is considered for inclusion or if its simply a stand alone item.

add dropdown.scss from chapstick to sassquatch

standardize camelCase for variables in _variables.scss

desktop touchList design & bug fixes

We'll need to fix some browser issues and address some design concerns in the desktop touchList css...

• IE bugs
• firefox overflow hidden on touch items
• firefox select height in touchForms
• hover styles, indicating the entire item is a clickable target

Steal Bootstrap's input group

http://getbootstrap.com/components/#input-groups

As we're doing more with payments--especially with varying currencies--it would be nice to have a way to prepend or append stuff to an input.

fix specificity issues with combining modifiers with other classes

for example, a ".resetList .margin-bottom" will not receive the margin-bottom: 0, as resetList comes later in the cascade and declares margin: 0

not sure if we should fix this with !important or cascade...

document required mark for forms

it's already in _forms.scss

Convert documentation to github pages