Mockups to Code, Part 3:

Sass + Responsiveness

Wednesday, October 9th

“If you want to learn SASS you should start by not using it.”

When should you switch from CSS to Sass?

“This stylesheet is a clusterfuck.”

SASS / SCSS:
Allows you to create a system, can be installed with a gem, set color scheme once and stick with it.

Variables: Ca$h money! Start with dollar sign, define color codes and other stuff I didn’t catch.

Mixins: defined with @ symbol, then get super weird. Something with arguments and output and variables.

Media Queries: for and while loops, conditionals,  can be nested in a css rule? Name breakpoints with a mixin.

Nesting: never go more than 3 levels deep

Importing: allows import of other rules / files / something…

Responsiveness:

The fluid grid, Target  Context = Result

Normal CSS Images:
-Make it the size you need
-Telling your browser what size to make the image is better than loading three different sized images even if they’re small
-If not the size that you want it to be, use background size property
-Banner is a simple background image
*There is not a way to add alt description to background images but you should add the appropriate text in HTML and a screen reader will read that more naturally anyways
-Cover / contain = Background image attributes to try; change how the image look

CSS3:
Box-shadow: vertical, horizontal, blur
Add transitions to active links, not hover! Won’t show up on hover.
*Codepen has good exercises for experimenting with CSS animation

Random Little Lesson Notes:
Use wrapper class to control size for all divs easily, use width percentages?
Pseudo class link:focus is for rare situations where link freezes/stalls before getting to the hover state.
Fixed headers so they don’t move
-Can be funky, kind of like floats, safer to set a fixed height
Text-indent: -9999em (used bc no one has screen that big)
Subtlepatterns.com – tile background patterns (free)
Negative margin shouldn’t be used for layouts, only slight element adjustments
Opacity sets on the whole div; use RGBa for just the background opacity

Look Up Later: 
What actually makes a website responsive?
–Using percentage widths?
–Setting screen size instance rules?
Webkit
Google fonts (play with more)
Object-oriented CSS (facebook css)
-Good for when working with a ton of developers, helps them understand where to put things
SMACSS – Johnathan Snook book about scalable and modular architecture

Preprocessors
-Categorize CSS rules
-Create patterns and organization:

Base: defaults and standard elements: html, body, h1, ul etc
Layout: divides the page into major sections
Module: reusable modular components of a design
State: defines look of different states (hidden, etc)
Theme