HTML + CSS

Mockups to Code, Part 3:

Sass + Responsiveness

Wednesday, October 9th

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

what are your thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s