Coyote Creation Site Update Log and Notes

Site Log

Site Development and Update Notes

Responsive / Adaptive Design

Initial build using the Goldilocks Approach, with 3 breakpoints.

Media Query Breakpoints to be ultimately set up based on the breakpoints used for Foundation.

/* Use this media query to add styles to any device that supports media queries */
@media only screen { }

/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
@media only screen and min-width: 768px) {}

/* Used to alter styles for screens at least 1280px wide. */
@media only screen and min-width: 1280px) {}

/* Used to alter styles for screens at least 1440px wide. */
@media only screen and min-width: 1440px) {}

/* Apply styles to screens in landscape orientation */
@media only screen and (orientation: landscape) {}

/* Apply styles to screens in portrait orientation */
@media only screen and (orientation: portrait) {}

/* Use Modernizr to add a .touch class to the body when applicable */
/* You can prepend this class to anything and it will style only for touch devices */
.touch .your-element {}

http://foundation.zurb.com/docs/media-queries.html

Reading: July 4, 2013

"Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise." -Oliver Reichenstein
  1. http://alistapart.com/article/designing-for-breakpoints
  2. Responsive Typography: The Basics
  3. Responsive Typography
  4. http://goldilocksapproach.com/