meetuparchive / sassquatch2

version 2 of the Meetup Sassquatch framework

⚠️ Sassquatch2 is no longer in active development ⚠️

See swarm-sasstools for the latest styling tools for our new web platform.

We will not update Sassquatch2 with new features; only bug fixes when absolutely necessary.

---

Sassquatch 2

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

---

Documentation

Hologram documentation is built to github pages

An overview of basic Sassquatch2 conventions is also available in the wiki

---

Installation

Manage installation via bower:

"dependencies": {
  "sassquatch2": "[email protected]:meetup/sassquatch2.git#master",
  ...
  }

---

Development

Clone this repo and run ./setup.sh.

Code guidelines and standards are documented on the wiki

We use the Gitflow branching model for development:

• develop - default branch for active development (all PRs diff against develop)
• release branches - cut from develop, get merged into master
• master - only release branches and hotfixes get committed to master
• master branch in theory should always contain the latest stable release

Grunt tasks

Command	Result
grunt	By default, grunt recompiles Sass and rebuilds Hologram docs
grunt sass	Recompiles Sass
grunt hologram	Rebuilds Hologram docs
grunt clean	Cleans compiled docs and CSS in docs/build
grunt ghpages	Caution: commits compiled docs for your branch to gh-pages

Creating a release

Until I write the script for creating a release, the process is unfortunately manual. Because we're using the git-flow branching model, all fix and feature commits flow into the develop branch. The master branch is our "production" branch.

Beginning the release

We begin all releases with a release branch and a release tag.

1. from develop, checkout a release/X.X.X branch
2. in release/X.X.X, increment the version number in bower.json and package.json
3. commit the result & push
4. git tag -a vX.X.X -m "tag message"
5. git push origin vX.X.X

Once the tag ref is pushed to origin the version is available to install via bower in chapstick or elsewhere.

Finishing a release without chapstick dependencies

If the changes in your release/X.X.X branch appear stable and do not require updates in chapstick:

1. merge the release branch, release/X.X.X to master
2. merge master into develop
3. don't forget to rebuild docs! (run grunt ghpages in master)

Finishing a release with chapstick dependencies

If your release includes breaking changes and requires code changes in chapstick, follow these steps:

1. start a chapstick branch for your sq2 release
2. set the bower.json version for sassquatch2 in chapstick to match your release number
3. if you need to make fixes to the release/X.X.X branch, you can retag the release to include your fixes (see below)
4. when your chapstick branch with the sq2 update releases to production, you can follow normal steps for finishing a sq2 release (merge the release branch to master)
5. don't forget to rebuild docs! (run grunt ghpages in master)

Retagging a release

Sometimes you need to retag a release to incorporate new commits. Here are the steps for retagging a "1.5.0" release after you make a few fix commits to the release branch:

1. git pull - fetches tag refs from origin
2. git tag -d v1.5.0 - deletes the old v1.5.0 tag ref
3. git push origin :refs/tags/v1.5.0 - pushes your delete of the ref to origin
4. git tag -a v1.5.0 -m "My new and improved release 1.5.0" - create new v1.5.0 tag
5. git push origin v1.5.0 - push the new v1.5.0 tag to origin
6. in chapstick, just bower cache clean and rm -rf static/components/sassquatch2 then reinstall sassquatch2 to get updated commits for the tag

sassquatch2's Issues

Missing directional spacing modifiers

ie. padding--top, margin-top

text in avatar sometimes shows

Add scss lint

https://github.com/causes/scss-lint

stripe--photoHero should be simplified to stripe--hero

use _modifier mixin for all modifiers

all .[base]--[variant] pattern classes should use the modifier mixin in sass/util/_modifier.scss

Fix left nav on docs for better viewport resize

maybe a drawer type nav would be nice here...

basic view test layout (Android browser)

Row items different widths, see Windows Phone for screenshot (sorry)

set image tags to display: block

see also: meetuparchive/sassquatch#245

alignment modifiers

We'll need some basic alignment modifiers

ie. .align--center .valign--middle

(let's replace the row-item specific valign variant with this)

`valign` modifiers won't work on flex children

for stack-item and row-item elements, we need to declare a property in addition to vertical-align, because flexbox

Reply example (Android browser and IE)

The reply example wrapping is a bit off both on Samsung S3 Mini Android browser - see attachment - and Windows 8 Phone IE ( Where it doesnt wrap at all, screenshot stuck in the phone)

FF toggle pill checked state animation jank

(some flickering and crazy repaints are happening near the end of the animation on check)

The generated keyframes might be a little bit too heavy-handed for FF. Maybe we can simplify a little bit...

`list` component should use a child selector for list items

ie. .list { list rules } .list-item { padding and border rules }

IE11 event card example is a little busted

Row seems to work everywhere else, but this row-item--shrink is doing something crazy:

select box (Android browser)

Samsung S3 Mini (White) Android browser

Perhaps this is just how it is, but there is no arrow/affordance for the select box

finish search feature

we currently build a lunr.js search index, but haven't build a UI to actually use it yet

IE10/IE11/IE9 `flex-item--shrink` is now shrinking smaller than content width

Flexrow is quite busted in IE9 again :(

We may need to add the body tag conditional comments to the docs...

pill label names: don't make them too content specific

see also: meetuparchive/sassquatch#225

Make `stack` nowrap by default?

Stack was designed to wrap for space when spread. As we're finding out, this usually isn't want we want. Let's try setting the flex children to nowrap by default (for both horizontal and vertical orientation)

make modifiers (ie. `display-none`) !important

see: meetuparchive/sassquatch#330

fix ugly navigation in docs

everything is linearized because mobile first, but it looks awful on desktop. Let's maybe use bounds--sideHeader for that.

Fix form spacing defaults

using a ul.list--form to wrap all form elements won't cut it - find another way, or better yet, bake form spacing into base input tags

FF/Safari margin collapse on `chunk`

chunk margin should be !important

Spacing issues in .attachment children

Chunk
.chunk should have margin-bottom set to $space-half, but it stays at $space because it's clobbered by the !important declaration in sass/core/layout/_chunk.scss

First-child row-items
.row-item:first-child should have padding-left set to $space-half, but it's clobbered by the padding-left set in sass/ui-components/_attachment.scss

IE10 & IE11 - hero header text not positioned correctly

Allow .stack-items to be shrinkable when spread

I'd like to be able to apply a --shrink class to stack-items so that they flex-shrink when spread horizontally, similar to how row-items and row-items work.

(Relatedly... a row is hypothetically the same as div.stack.atSmall_stack--spread, right?)

consolidate _whitespace and _type modifier partials

exactList items don't grow to fill parent container

use _bpModifier mixin for all media-conditional variant classes

ie. atMedium_hscroll--unclip and atMedium_gridList--has1

Any at[Breakpoint]_[base]--[modification] pattern should be using the _bpModifier mixin in sass/util/_modifier.scss

Add a "landing pad" for the floatingAction

the floating action button will cover up content near the bottom of the page, which means that we'll need a way to create some space at the bottom of the page for the floating action to "land" in.

media-conditional hscroll

We've already run into one mockup with this feature, and we'll likely see it crop up more in the future...

We need a way to conditionally make hscroll display as an in-flow list

ie. .atMedium_hscroll--inlineblockList

Can we (and should we?) guaruntee that spread stack items will be evenly sized?

If I have two .stack-items which are spread at a certain media size, I'd like the ability to guaruntee they will be evenly sized, regardless of their content. This way, if I have two .stacks on top of each other containing the same number of children, I'd like to set a way for the elements to line their gutters up.

`.hasJS .menu-actions` can't be made visible with `display--block`

this two-selector display:none rule overrides .display--block https://github.com/meetup/sassquatch2/blob/develop/sass/ui-components/_menu.scss#L47

The recommended solution is to remove the display:none rule and use hasJS_display--none as a modifier - we could do this with an @extend inside .menu-actions instead of requiring it in the markup, but the markup option is also fine.

Grunt `clean` task configuration

It doesn't seem to recursively clean the build/ dir right now, which is the desired result.

hscroll may be broken in firefox

add "exactlist" from foundation-scratch

"exactlist" uses text-align justify to make a list of items fill the width of its parent container...

we can implement this as a variant of inlineblockList

Should --spread properties only apply to first children?

Consider the following hypothetical:

<div class="stack atLarge_stack--spread">
    <div class="stack-item">
        <div class="stack">
            <div class="stack-item chunk">
                A: This should always be on top B
            </div>
            <div class="stack-item chunk">
                B: This should always be below A 
            </div>
        </div>
    </div>
    <div class="stack-item chunk">
        C: This should be to the right of A&B at large, otherwise below
    </div>
    <div class="stack-item chunk">
        D: This should be to the right of C at large, otherwise below
    </div>
</div>

I would want .stack .stack element, which I have not included a --spread class with, to always have its child .stack-items be stacked and never spread out. However at large screen sizes, the .stack.atLarge_stack--spread css property is being also applied to .stack .stack .stack-item

Inconsistent spacing in FF vs Chrome for event card example

(chrome has extra space below the avatar inline block list)

remove data uri svg from `avatar--org`

Let's find a way to abstract this so we don't have to include any svg in sassquatch

contribution guidelines

meetuparchive/sassquatch#175

add "js/non-js" toggle in documentation top nav

It would be nice to easily see what something looks like with/without JS. The toggle would only need to apply and remove a hasJS class on body

fix usage of <time> element in examples

Microdata is probably more useful for event semantics.

Add `stack` to layout wiki

https://github.com/meetup/sassquatch2/wiki/Layout-Overview

.card should be `display: block`

cards are block-level elements, but sometimes the card class is applied to non-block elements like <a>.

We should add display: block to .card, and remove any instances where we are applying .chunk to a.card in order to get block styling

manage nested list bullet styles

let's be explicit about this sort of thing

add wrapNice class

We can do better where hyphenation is concerned. Let's make a text wrap class that makes things nicer, and extend it in runningText

Docs URL goes to 404 in README

the Github Pages url 404's when visiting from the README.

Define a button--icon

The actual svg icons are in chapstick, but we can always use the .icon class as the spacing hook for this.