• Network SSID: Student
• Network Password: Improving

Moving Through the Slides

• space - move to next slide (over or down)
• shift+space - move to previous slide (back or up)
• o - the overview mode

Links

• Slides
• Notes
• Project Files
• Slack Channel (#html-css-classes)
• Links, Info, Notes

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some Rules:

• We are here for you!
• Every question is important
• Help each other
• Have fun

Introductions

Instructor

Tamara Temple

• Computer Scientist and Software Engineer since 1980
• Work a lot on server-side programming (Rails) and
  client-side programming (React)
• Watercolourist
• Mom to 2 grown children
• @tamouse on Twitter
• tamouse on GitHub
• tamouse in Slack

Introductions

• Who are you?
• What do you do?
• How did you hear about Girl Develop It?
• How many classes have you taken with GDI?
• What’s your favourite soft drink?

Course Prerequisites and Expectations

• You should know HTML and CSS already
• You should have some basic concepts
  of programming:
  variables, loops, etc.
• You should know how to use the
  terminal / command line, including Git.
• You should feel comfortable installing
  software.

Slack Channel

In the GDIMpls Slack,
join the #html-css-classes channel.

[link to channel]

Let's get set up

• Go to the Project Files on GitHub
  and read the README.md file on Github.
• Further instructions are available in the project files's wiki
• Read them through completely, then follow the instructions.

Estimating 10 minutes

So, how'd that go?

High Five!

gif: http://gph.is/29NmcGD

What is Sass?

Sass is a command-line tool
that pre-processes your CSS files
allows you to create:

• modular,
• DRY, and
• more maintainable styles

Sass has two dialects:

• SCSS (Sassy CSS)
• Indented Sass

Indented Form:

nav
  ul
    list-style: none

stripped down, white-space indented, terse;
does not look like CSS (called “Sass”)

Sassy Form:

nav {
  ul {
    list-style: none;
  }
}

keeps all the braces (“squirly brackets”) and
semi-colons that you have in CSS.
White space doesn’t matter. (called “SCSS”)

Plain CSS is already SCSS, it’s the easiest to start with.

For this course, I’ll be showing you the SCSS dialect.

The printed notes show the Sass version as well.

Variables!

Start with SCSS:

$brand-primary: seagreen;
$brand-accent: tomato;
$brand-bg: honeydew;
header {
  background: $brand-bg;
  color: $brand-primary;
}
header a { color: $brand-accent; }

$brand-primary: seagreen
$brand-secondary: springgreen
$brand-accent: tomato
$brand-bg: honeydew
header
  background: $brand-bg
  color: $brand-primary

header a
  color: $brand-accent

Get CSS!

header {
  background: honeydew;
  color: seagreen;}
header a {
  color: tomato;}

Sass let’s you set variables that can hold values used all over your css files, allowing you to quick change a commonly used value in only one place.

Variables!

See the Pen Sass does Variables by Tamara Temple (@tamouse) on CodePen.

Nesting!

Start with SCSS:

nav {
  ul {list-style: none; }
  li {display: inline-block; }
  a {text-decoration: none;
    &:hover {text-decoration: underline;}
  }
}

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Get CSS!

nav ul {
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  text-decoration: none; }
  nav a:hover {
    text-decoration: underline; }

Sass allows the nesting of CSS so you can clearly tell which rules apply to which parent, without endless repetition.

Nesting!

See the Pen Sass does Nesting by Tamara Temple (@tamouse) on CodePen.

Mixins!

Start with SCSS:

@mixin visually-hidden {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.image-replace {
  @include visually-hidden;
  background: url(logo.png) no-repeat;
}

=visually-hidden
  text-indent: 100%
  white-space: nowrap
  overflow: hidden

.image-replace
  +visually-hidden
  background: url(logo.png) no-repeat

Get CSS!

.image-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(logo.png) no-repeat;
}

Mixins let you specify often repeated style specification that are used in several independent styles. You could consider a mixin like a macro, where the mixin’s content gets included in the style specification.

Mixins!

See the Pen Stylin With Sass: Mixins by Tamara Temple (@tamouse) on CodePen.

Partials!

Start with SCSS

// file: _settings.scss
$primaryBrand: #690067;

// file: styles.scss
@import "settings";
header{background-color: $primaryBrand;}

// file: _settings.sass
$primaryBrand: #690067

// file: styles.sass
header:
  background-color: $primaryBrand

Get CSS

/* no file _settings.css */

/* file: styles.css */
header{background-color: #690067;}

You can split out your Sass / SCSS declarations into several files to help you keep them all organized. Beginning the file name with the underscore character (‘_’) will tell the Sass preprocessor to ignore the file because it’s being imported and doesn’t need to have it’s own translated CSS file.

Math!

Start with SCSS

$maxReadableWidth: 0.7em * 52;
$spacing: 2em;
.easy-reading {
  max-width: $maxReadableWidth - $spacing * 2;
  margin: 0 auto;
  > div {
    padding: 0 $spacing $spacing $spacing;
    &:first-child {
      padding-top: $spacing;
    }
  }
}

$maxReadableWidth: 0.7em * 52
$spacing: 2em

.easy-reading
  max-width: $maxReadableWidth - $spacing * 2
  margin: 0 auto

  > div
    padding: 0 $spacing $spacing $spacing

    &:first-child
      padding-top: $spacing

Get CSS!

.easy-reading {
  max-width: 32.4em;
  margin: 0 auto; }
  .easy-reading > div {
    padding: 0 2em 2em 2em; }
    .easy-reading > div:first-child {
      padding-top: 2em; }

Math!

See the Pen Stylin With Sass: Math by Tamara Temple (@tamouse) on CodePen.

Colours!

Start with SCSS

$primaryBrand: MediumBlue;
$secondaryBrand: darken($primaryBrand, 25%);

.site-header {
  background-color: $secondaryBrand;
}

$primaryBrand: MediumBlue
$secondaryBrand: darken($primaryBrand, 25%)
.site-header
  background-color: $secondaryBrand

Get CSS!

.site-header {
  background-color: #00004e; }

Colours!

See the Pen Stylin With Sass: Colours! by Tamara Temple (@tamouse) on CodePen.

Loops!

Start with SCSS

@for $i from 1 through 3 {
  .column-#{$i} {
    width: 2em * $i;
  }
}

@for $i from 1 through 3
  .column-#{$i}
    width: 2em * $i

Get CSS!

.column-1 { width: 2em; }
.column-2 { width: 4em; }
.column-3 { width: 6em; }

Loops!

See the Pen Stylin With Sass: Loops! by Tamara Temple (@tamouse) on CodePen.

Branches!

Start with SCSS:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

$type: monster

p
  @if $type == ocean
    color: blue
  @else if $type == matador
    color: red
  @else if $type == monster
    color: green
  @else
    color: black

Get CSS!

p {
  color: green; }

Branches!

See the Pen Stylin With Sass: Branches by Tamara Temple (@tamouse) on CodePen.

View on codepen.io

Let’s Develop It!

Exercise 1: Create the Sass Folder

Checkout the exercise 1 branch:

    # Ctrl+C to stop the watcher
git status
git add --all # optional if you haven't made changes
git commit -m done # optional if you haven't made changes


git checkout -b ex.01.start origin/ex.01.start # required
npm install
npm start # to restart the watcher

Follow the exercise instructions in the file
README.md

How’d that go?

Let’s Develop It!

Exercise 2: Single CSS file

Stop the watcher (Ctrl-C)

Save your changes and checkout exercise 2:

git status
git add --all
git commit -m done
git checkout -b ex.02.start origin/ex.02.start
npm install

Restart the watcher:

npm start

Follow the instructions in the README file

You Got This!

Section 3: Structuring Your Sass

Issue:

How to organize the CSS for
your website in a way that is:

1. Correct
2. Consistent
3. Maintainable
4. Performant

Problem:

How to ensure proper specificity
when creating the CSS.

Managing CSS Projects with ITCSS by Harry Roberts, CSS Wizardry

ITCSS

“Inverted Triangle CSS”

Generic to Explicit

Far-reaching to Localized

Low Specificity to High Specificity

Levels

• Settings: global variables, configuration switches, font loading
• Tools: default mixins and functions
• Generic: ground-zero styles such as normalize, resets, box-sizing
• Base: unclassed HTML elements
• Objects: cosmetic-free design patterns
• Components: Designed components, chunks of UI
• Overrides: helpers and overrides (ideally empty) (labeled Trumps in the diagram)

Let’s Develop It!

Exercise 3: Create ITCSS structure

1. Stop the watcher: Ctrl+C
2. Save your changes for exercise 2:
   git add --all && git commit -m done
3. Pull down exercise 3:
   git checkout -b ex.03.start origin/ex.03.start
4. Follow instructions in the README.md file
5. Restart the watcher:
   npm start

Yeah!

Interlude

Exercises all follow the same basic pattern

• We’ll be doing a lot of refactoring over the next few Let’s Develp It! sections:

  • stop the watcher Cntl+C
  • save your past work
    git add --all && git commit -m done
  • checkout the next exercise
    git checkout -b ex.NN.start origin/ex.NN.start
  • restart the watcher
    npm start
  • perform the work in exercise instructions README file

Stretch Break

Let’s Develop It

Exercise 4: Extract Elements

• Branch: ex.04.start
• Instructions: README.md

Excellent

Section 5: Objects

Finding Objects

• Objects are usually big-ticket items, such as:
  • your site’s template (header, footer, main content, sidebars)
  • a grid system defining reusable classes for column widths
  • other reusable objects such as the classic “Media Object”

Some rules (guidelines)

• don’t use elements for CSS selectors
• don’t use IDs for CSS selectors
• everything is a class

Let’s Develop It

Exercise 5: Page header and footer objects

In this exercise, we’ll extract our first two objects:

• the page header
• the page footer.

Checkout:

• Branch: ex.05.start
• Instructions: README.md

An interlude

upon the naming of classes

Follow along on the printed notes

Naming classes: BEM

“BEM” - Block, Element, Modifier

Block

A functionally independent page component that can be reused.

The block’s name describes its purpose, not its state.

<!-- Correct. The `error` block is semantically meaningful -->
<div class="error"></div>

<!-- Incorrect. It describes the appearance -->
<div class="red-text"></div>

Element

A composite part of a block that can’t be used separately from it.

Again, the element’s name describes its purpose, not its state.

The structure of the element name is:

block-name__element-name

The defining part of the element name is the double underscore (__) separating the block name from the element name.

<!--
    Correct. The structure of the full element name follows the pattern:
    `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">

        <button class="search-form__button">Search</button>
    </div>
</form>

<!--
    Incorrect. The structure of the full element name doesn't follow the pattern:
    `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <!-- Recommended: `search-form__input` or `search-form__content-input` -->
        <input class="search-form__content__input">

        <!-- Recommended: `search-form__button` or `search-form__content-button` -->
        <button class="search-form__content__button">Search</button>
    </div>
</form>

Modifier

An entity that defines the appearance, state, or behaviour of a block or element

The modifer is where the majority of the style settings will end up, usually. The naming convention varies for modules, a lot of people seem to use the double-dash convention (--): block_name--size.

<form class="form form--login form--theme_forest">
    <input class="form__input">
    <input class="form__submit form__submit--disabled">
</form>

.form {}
.form--theme_forest {}
.form--login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

.form {
    &--theme_forest {}
    &--login {}
    &__input {}
    &__submit {
        &--disabled {}
	}
}

.form
  &--theme_forest
  &--login
  &__input
  &__submit
    &--disabled

• BEM Methodology Quick start
• BEM 101 - CSS-Tricks

Let’s Develop It

Exercise 6: Nesting and Refactoring

• Branch: ex.06.start
• Instructions: README.md

Whew!! That was a tough one.

Give yourselves a hand.

Let’s Develop It!

Exercise 7: Famous Person Card

• Branch: ex.07.start
• Instructions: README.md

How did that go?

Let’s Develop It

Exercise 8: The Jump Component

• Branch: ex.08.start
• Instructions: README.md

Yay?

Let’s Develop It!

Exercise 9: Feature Section

(Including interior components)

• Branch: ex.09.start

Way to go!

Let’s Develop It!

Exercise 10: Themes

• Branch ex.10.start

Awesome!

Let’s Develop It!

Exercise 11: Clean Up

• Branch: ex.11.start

Whew! We made it.

Please fill out the workshop survey at: tinyurl.com/GDIMpls

Use “Stylin With Sass” as the class name