reading-notes

SMACSS and Responsive Web Design

Reading notes for Reading 01.

Shay Howe’s intro to RWD

OVERVIEW

• Practice of making sites that work on every device/screen size.
• Term coined by Ethan Marcotte, author of Responsive Web Design
• Responsive vs. Adaptive vs. Mobile
  • Responsive: Constant/fluid change <–use
  • Adaptive: Group presets
  • Mobile: Separate site

Responsive design is made up of 3 components

1. flexible layouts
2. media queries
3. flexible media

FLEXIBLE LAYOUTS

Build with flexible grid, which dynamically resizes

• Relative length units (% or em)
• Used when declaring grid values: width, margin, padding
• Avoid fixed measurements (px / in)– change device to device

Note: relative viewport lengths are new, not fully supported but growing.

• vm: Viewports width
• vh: Viewports height
• vmin: Min of the viewports height and width
• vman: Max of the viewports height and width

Relative measure based on parent width (From Ethan Marcotte). Target width of element / width of parent element.

target ÷ context = result

Flexible Grid

section,
aside {
  margin: 1.858736059%; /*  10px ÷ 538px = .018587361 */
}
section {
  float: left;
  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */
}
aside {
  float: right;
  width: 29.3680297%;  /* 158px ÷ 538px = .293680297 */
}

Media Queries

• Mobile First – Use styles target to smaller devices as the default. Add media queries for bigger sizes.
• Allows only relevant styles to load
• Majority of internet engagement soon to be mobile
• Avoid unnecessary assets on mobile (performance)

/* Default styles first then media queries */
@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

Responsive CSS, now with Media Queries:

section,
aside {
  margin: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    max-width: 538px;
  }
  section {
    float: left;
    width: 63.197026%;
  }
  aside {
    float: right;
    width: 29.3680297%;
  }
}

Viewport

• viewport media tag invented by Apple
• use with height or width to inherit device default
• Control website scale on mobile with:
  • initial-scale 1-10. Set to 1 to equivalent to regular zoom.
  • minimum-scale / maximum-scale - how big or small vp may be scaled. Min must be <= initial-scale
  • user-scalable set to no to diabled scaling. Bad practice for accessibility.

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=2">

Will be zoomed in / generally only use 1

Viewport Resolution

Flexible Media#flexible-media allows for pixel by pixel control of scaling. Not common. Accepts: device-dpi, high-dpi, medium-dpi, low-dpi

<meta name="viewport" content="target-densitydpi=device-dpi">

Combining Viewport Values

You can set multiple properties, comma separated.

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS Viewport Rule

Best practice to define in CSS

@viewport {
  width: device-width;
  zoom: 1;
}

Flexible Media

Media should scale too! Quick and easy:

img, video, canvas {
  max-width: 100%;
}

Set max-width to 100% scales media with viewport

Embedded Media

max-width wont work on embedded media or iframes. Workaround:

• Absolute position against the parent
• Set parent max-width to 100%

HTML

<figure>
  <iframe src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe>
</figure>

CSS

figure {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

All About Floats

Overview

Float: CSS positiong property that changes page flow

• remain part of the flow
• other elements wrap around them (think about a newspaper)
• values: left, right, none

#sidebar {
  float: right;
}

Note Floats can be used for styling the whole page, but newer tools like Flexbox and Grid are better

Clearing the float

Clear property allows element to resume normal document flow and “skip” the floated element.

Values:

• both: clears floats from either side
• right
• left

#footer {
  clear: both;
}

Float collapse

When all items in a parent elemnt are floated, it will “collapse”

May not be obvious if parent element has no background/border.

TO avoid issues, hould clear after elements but before container close.

Options:

• Empty div <div style="clear: both;"></div>
• Overflow: set to auto/hidden on parent to force it to expand.
• Easy clear: apply clearfix class to parent:

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Negatives

Issues w/ IE6 but IE going away so not important.

Back