rosemarydotworld

const focusVisible = (props, styles) => `
    ${props.theme.inputModality === 'KEYBOARD' && `
        &:focus { ${styles} }
    `}

    &:focus-visible {
        ${styles}
    }
`

rosemarydotworld

const choo = require('choo');

const app = choo();

app.model(require('./model-things'));
app.model(require('./model-stuff'));

const view = (state, prev, send) => html`
  <main>
    <button onclick=${e => send('things:notGood')}>things aren't good</button>

rosemarydotworld

// Get the selector for a version of IE
@function getSelector($version) {
  @if $version == 9 {
    @return 'html.ie9 &';
  } @else if $version > 9 {
    @return 'html[data-browser="ie#{$version}"]';
  }
}

// Write selectors for given space-separated IE versions

rosemarydotworld

/*

Rem/Px Function
---
This is a fun one. If we support rems, calculate rems according to a pixel
value. If not, just spit out the pixel value. This means we can detect rem
support and spit out the stylesheet accordingly, all while writing only one
codebase.

*/

rosemarydotworld

/\w+="ctl00(\$|_|-|[a-Z]|[0-9])+"/

rosemarydotworld

@function long-shadow($n, $color) {
  $text-shadow: "1px 1px #{$color}";

  @for $i from 2 through $n {
    $new-shadow: "#{$i}px #{$i}px #{$color}";
    $text-shadow: append((#{$text-shadow}), (#{$new-shadow}), comma);
  }

  @return $text-shadow;
}

rosemarydotworld

Problem: Elements set to display: inline-block will render with spaces between them if there's whitespace in the source, which makes formatting difficult. You can fix this by putting font-size: 0 on the parent, but it feels pretty hacky.

rosemarydotworld

* Reset (either normalize.css or Eric Meyer's reset.css)
* Bourbon
* Neat
* Variables
  * Standard colors (go for $red instead of $error)
  * Standard sizes
  * Font stacks
  * Standard media query parameters (named)
  
* Utilities/

rosemarydotworld

Recently my team ran into an issue with Hammer stemming from its slightly-out-of-date Sass gem; we were trying to install the latest version of Bourbon Neat, and Hammer's 3.2 era version of Sass was balking at the !global flag introduced in 3.3. Rather than reverse engineer Neat's Sass or use an earlier (read: inferior) version, I went about patching the gem, which is not so hard a process, it turns out. I'll demonstrate the procedure with Sass as my example.

Disclaimer: I know just enough to realize that this is a fairly stupid hacky thing to do that will likely stop working when Hammer updates–assuming they don't update the Sass gem themselves.

Step 1: Procure and locate the gem we want

In your terminal, install your desired gem. in my case:

gem install sass -v 3.3.6

rosemarydotworld

# Description:
#   Baby goats, motherfucker
#
# Dependencies:
#   None
#
# Configuration:
#   None
#
# Commands: