Last active
August 29, 2015 14:14
-
-
Save tsmith512/7ecd2756d65790b139e0 to your computer and use it in GitHub Desktop.
Examples for Presentation: Advanced Responsive Web Design
Part 3: Media Queries with Breakpoint
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Sample</title> | |
| </head> | |
| <body> | |
| This HTML output goes with the max-width test: | |
| <div id="pager"> | |
| <a href="#" class="first">First</a> | |
| <a href="#" class="prev">Previous</a> | |
| <a href="#" class="page">3</a> | |
| <a href="#" class="page">4</a> | |
| <a href="#" class="current">5</a> | |
| <a href="#" class="page">6</a> | |
| <a href="#" class="page">7</a> | |
| <a href="#" class="next">Next</a> | |
| <a href="#" class="last">Last</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.11) | |
| // Compass (v1.0.3) | |
| // Breakpoint (v2.5.0) | |
| // ---- | |
| /** | |
| * Examples for Presentation: Advanced Responsive Web Design | |
| * Part 3: Media Queries with Breakpoint | |
| * For More Information: http://github.com/tsmith512/arwd | |
| */ | |
| @import "compass"; | |
| @import "breakpoint"; | |
| // Breakpoint into: | |
| $two-columns: 680px; | |
| .first-column { | |
| width: 100%; | |
| @include breakpoint($two-columns) { | |
| width: 50%; | |
| float: left; | |
| } | |
| } | |
| // Single value specified --> min-width default | |
| $big-btn: 720px; | |
| header a { | |
| padding: 0.5em; | |
| font-size: 0.875em; | |
| @include breakpoint($big-btn) { | |
| padding: 2em; | |
| font-size: 1em; | |
| } | |
| } | |
| // Fenced values: min/max-width | |
| $medium-header: 460px 780px; | |
| #header { | |
| font-size: 2em; | |
| @include breakpoint($medium-header) { | |
| font-size: 2.5em; | |
| } | |
| } | |
| // Explicit test / value: | |
| $tiny-pager: max-width 620px; | |
| #pager { | |
| @include breakpoint($tiny-pager) { | |
| // Drop all the other pager links | |
| a:not(.prev):not(.next):not(.current) { | |
| display: none; | |
| } | |
| } | |
| } | |
| // Combining Tests | |
| $tighten-text: (max-width 1000px) (orientation portrait); | |
| #main-article { | |
| font-size: 1em; | |
| line-height: 1.375; | |
| @include breakpoint($tighten-text) { | |
| line-height: 1.25; | |
| } | |
| } | |
| // No-Query Fallbacks | |
| // See the slide for how to set up a style.scss and | |
| // style-ie8.scss output files and where these rules | |
| // went into partials to avoid repeating them. | |
| $breakpoint-no-queries: false; // Don't hide real media queries | |
| $breakpoint-no-query-fallbacks: true; // Also show no-query fallbacks | |
| $nav-lg: 500px, 'no-query' '.lte-ie8'; | |
| nav { | |
| @include breakpoint($nav-lg) { | |
| width: 60%; | |
| margin-right: 4%; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Examples for Presentation: Advanced Responsive Web Design | |
| * Part 3: Media Queries with Breakpoint | |
| * For More Information: http://github.com/tsmith512/arwd | |
| */ | |
| .first-column { | |
| width: 100%; | |
| } | |
| @media (min-width: 680px) { | |
| .first-column { | |
| width: 50%; | |
| float: left; | |
| } | |
| } | |
| header a { | |
| padding: 0.5em; | |
| font-size: 0.875em; | |
| } | |
| @media (min-width: 720px) { | |
| header a { | |
| padding: 2em; | |
| font-size: 1em; | |
| } | |
| } | |
| #header { | |
| font-size: 2em; | |
| } | |
| @media (min-width: 460px) and (max-width: 780px) { | |
| #header { | |
| font-size: 2.5em; | |
| } | |
| } | |
| @media (max-width: 620px) { | |
| #pager a:not(.prev):not(.next):not(.current) { | |
| display: none; | |
| } | |
| } | |
| #main-article { | |
| font-size: 1em; | |
| line-height: 1.375; | |
| } | |
| @media (max-width: 1000px) and (orientation: portrait) { | |
| #main-article { | |
| line-height: 1.25; | |
| } | |
| } | |
| @media (min-width: 500px) { | |
| nav { | |
| width: 60%; | |
| margin-right: 4%; | |
| } | |
| } | |
| .lte-ie8 nav { | |
| width: 60%; | |
| margin-right: 4%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Sample</title> | |
| </head> | |
| <body> | |
| This HTML output goes with the max-width test: | |
| <div id="pager"> | |
| <a href="#" class="first">First</a> | |
| <a href="#" class="prev">Previous</a> | |
| <a href="#" class="page">3</a> | |
| <a href="#" class="page">4</a> | |
| <a href="#" class="current">5</a> | |
| <a href="#" class="page">6</a> | |
| <a href="#" class="page">7</a> | |
| <a href="#" class="next">Next</a> | |
| <a href="#" class="last">Last</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment