Layout Laid Out – FSA 1702 – March 16, 2017

HTML-CSS-SCSS-Shoestring.md

HTML/CSS/SCSS Shoestring

Layout Laid Out – FSA 1702 – March 16, 2017

1. Layout

2. SCSS

---

1. Layout

Layout is where Html (content) and CSS (style) meet.

Why does CSS matter?

• It's the only game in town to make things look nice!
• You will need this at work...

Be a triple threat: HTML/CSS + Javascript on Front-end and Back-end

Terms

Rules are formed of selectors and declarations with properties, values and keywords.

  article li > a:hover { /* selector */
    border: 1px solid red; /* declarations */
    /* ^ property   ^ values and key words */
    font-style: italic;
  }
  /* ^ This whole block is a rule */

Our rules apply to any future changes in the DOM. These rules are persistent. CSS is declarative, because it's rules/truth is applied to the page.

Selectors

• tag | input
• class | .btn
• id | #upload
• attribute | [type="file"]
• pseudo-element | ::after
• pseudo-class | :hover
• • <--- wildcard

Combinators

• descendent | (whitespace)
• child | >
• next sibling | +
• later sibling | ~

Space matters a lot in CSS!

Cascading Style Sheets

One of the major reasons why CSS won out as the style language of the web is its ability to cascade.

An elements style is a merge of every rule covering the selected element.

What happens when declarations conflict? The rule provided by the more specific selector will win. For example, ID trumps class, which trumps tag. Inline styles with <style> </style> trump all of them! And !important will beat everybody.

If rules are truly equivalent in their specificity, then CSS just looks for which rule was defined last.

  /* In order or specificity. Pseudo-classes don't matter. */
  !important > inline > id > class > tag > order

The Box Model

"Everything on the DOM is a rectangle." - Joe

Every rectangle has a purpose.

From inside to outsideContent --> Padding --> Border --> Margin

Margin: my space from other elements.

Border: how far my content is from my edge. This is a great default to set with...

    {
      box-sizing: border-box
    }

The box model drives how we calculate width and height for our elements.

The box model is a fractal – everything is a box... whoa!

Block / Inline / Inline-Block

These seem confusing. They're different types of display:.

By default some elements are block and some others are inline.

Block Level Elements

• These line up on top of each other (clears the line)
• Width 100% of its parent by default
• Default height expand to fit all children
• Margins on all sides
• We can set height and width

Inline

• Flows with content, does not clear the line.
• Ignores top and bottom margins
• Height and width will always fit content
• Cannot set height or width

Inline-Block

• Flows with the content, does not clear the line
• Default width and height expands to fit all children
• Can have margins inn all sides
• We can set height and width
• Sort of like a flexible version of inline

2. SCSS (Sassy Cascades Style Sheets)

• Syntactically
• Awesome
• Style
• Sheets

Scss borrows from Sass.

• nesting
• variables
• loops
• functions
• modules

SCSS compiles to CSS! This transforms our Scss rules to CSS.

  article {
    border: 1px solid red;
    li {
      background: gray;
    }
  }

  $deep-red: #990000
  a {
    color: $deep-red;
  }
  // Will allow us to edit colors in one place

  @for $i from 1 through 3 {
    h#{$i} {
      font-size: $i * 10px;
    }
  }
  // A 'for loop' that interpolates our value from our i loop  into the CSS

  @mixin border-radius ($r) {
    -webkit-border-radius: $r;
    -moz-border-radius: $r;
    border-radius: $r;
  }
  // ^ Here is a mixin (sort of like a function)
  .thing {
    @include border-radius(10px);
  }
  // ^ Here is where we 'call' our mixin ('invoking' our 'function')

  @import 'normalize';
  // ^ imports a module! Pulls an SCSS file into our compiled CSS

---