SteveBarnett

# I Pledge To Be Better 

I want our industry to be a safe, welcoming and inclusive place for everyone, regardless of
their gender, abilities, skin color, sexual orientation, age, class, neuro-diversity or any other attribute.
I acknowledge that this is not currently the case, and will do my best, to the extent that I can
afford to dedicate to this, to help make ours a better community and industry.

I value the diversity of perspectives that people with different backgrounds bring to the table.
I will call out exclusionary practices, behaviors or cultures and see how, together, we can perhaps
reshape them to be inclusive and supportive instead.

SteveBarnett

List of things we need to take into account:
1. normalize.css
2. Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
3. IE Stylesheet Mixin for SASS: http://jakearchibald.github.io/sass-ie/

List of things we can use to make life better:
1. Sass http://sass-lang.com/ (preferred) or Less http://lesscss.org/
2. https://github.com/at-import/modular-scale
3. Powerful SASS Grid: http://susy.oddbird.net/
4. CSS philosophy http://www.smacss.com/

SteveBarnett

About the speaker

• Blurb
• Website: http://
• Twitter account: @
• GitHub account: https://github.com/
• Photo

About the talk

SteveBarnett

Macaroni and Sauce Mornay (kinda)

Remixed from https://gist.github.com/Wilto/bc35a6de063e6f92eb6e.

The Sauce (Mornay-ish)

• Dice up some bacon into tiny bits, then fry it until it's nice and crispy.
• Make a white sauce (recipe on Epicurious). Use about 1L of milk.

SteveBarnett

# Explain that BEM thing to me again..?

## Block

The **root of your CSS component**. eg: `.c-header` or `.c-flash`. (I'm namespacing all my classes with a `c-` to denote they're components, but that's optional. Namespace away to your own preference. Or don't. Whatever.)

## Element

Classes that are used **inside the component block**, and are **instrumental to the structure** - eg: the links inside a header: `.c-header__link`, or a dismiss button inside a flash notice: `.c-flash__dismiss`.

SteveBarnett

{
  "vars": {
    "@gray-base": "#333",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "#37abba",
    "@brand-success": "#47b475",