Mockups to Code, Part 3:
Sass + Responsiveness
“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…
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
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?
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
-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)