Last active
September 29, 2015 17:47
-
-
Save alirobe/1640421 to your computer and use it in GitHub Desktop.
kyleschaeffer.com's Responsive SP2010 (sans HTML5, via @alirobe)
This file contains 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
| // kyleschaeffer.com's Responsive SP2010 (sans HTML5, via @alirobe) | |
| // add me to the bottom of v5.js | |
| // via gist @ http://github.com/alirobe | |
| window.onresize = function(){ | |
| var w=800, t=" lt-800 ", cw, h; | |
| h = document.getElementsByTagName("html")[0]; | |
| cw = window.outerWidth||h.clientWidth; | |
| if (cw<=w) {if(h.className.indexOf(t)==-1) {h.className+=t}} | |
| else {h.className=h.className.replace(/lt-800/g,'').replace(/[\s]{2,}/g,' ');} | |
| } | |
| window.onresize(); |
This file contains 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
| /* | |
| note: if you have implemented code inside the media query, simply remove all code and prefix each selector with .lt-800. | |
| Responsive SP2010 (sans HTML5 via @alirobe) | |
| via gist @ http://github.com/alirobe | |
| */ | |
| /* switch to single-column layout */ | |
| .lt-800 #v5-wrapper { | |
| width: 100%; | |
| min-width: 0; | |
| margin: 0; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| -o-border-radius: 0; | |
| border-radius: 0; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| -o-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .lt-800 #v5-page-column-sidebar { | |
| width: auto; | |
| float: none; | |
| margin: 20px; | |
| padding: 0; | |
| } | |
| .lt-800 #v5-page-column-main { | |
| margin: 20px; | |
| padding: 0; | |
| } | |
| .lt-800 #v5-header { | |
| margin: 0; | |
| } | |
| .lt-800 #v5-header hgroup { | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .lt-800 #v5-site-logo { | |
| float: none; | |
| margin: 0 0 10px 0; | |
| } | |
| .lt-800 #v5-tools { | |
| position: static; | |
| padding: 0 20px 20px 20px; | |
| } | |
| .lt-800 #v5-social, .lt-800 #v5-search { | |
| margin-bottom: 20px; | |
| } | |
| .lt-800 #v5-footer { | |
| background: #f5f5f5; | |
| color: #888; | |
| border-top: 1px solid #ddd; | |
| padding: 20px; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| -o-border-radius: 0; | |
| border-radius: 0; | |
| } | |
| /* switch to vertical navigation */ | |
| .lt-800 #v5-global-nav { | |
| background: #f5f5f5; | |
| border-bottom: 1px solid #ddd; | |
| border-top: 1px solid #ddd; | |
| font-size: 14px; | |
| } | |
| .lt-800 .menu-horizontal li.static, .lt-800 .menu-horizontal a.static, .lt-800 .menu-horizontal span.static { | |
| float: none; | |
| } | |
| .lt-800 .menu-horizontal { | |
| display: block; | |
| padding: 10px 0 5px 0; | |
| } | |
| .lt-800 .s4-tn li.static > .menu-item { | |
| display: block; | |
| font-weight: bold; | |
| background: #eee; | |
| border: 1px solid #ddd; | |
| color: #2f7799; | |
| padding: 15px; | |
| margin: 0 10px 5px 10px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -o-border-raduis: 5px; | |
| border-radius: 5px; | |
| -webkit-transition: none; | |
| -moz-transition: none; | |
| -o-transition: none; | |
| transition: none; | |
| } | |
| .lt-800 .s4-tn li.static > a.menu-item:hover,.lt-800 .s4-tn li.static.selected > .menu-item { | |
| background: #2f7799; | |
| border-color: #2f7799; | |
| } | |
| /** end responsive sans-HTML5 modification */ |
This file contains 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
| <!-- Add this just under <head> | |
| Responsive SP2010 (sans HTML5 via @alirobe) | |
| via gist @ http://github.com/alirobe | |
| Please do not remove this tag. Without it, minor features break in IE9. These features include the ability to save input from a form entry dialog containing a rich text editor field. Note that non-IE browsers are not affected by x-ua-compatible tag. | |
| --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=8" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SP2010 breaks in IE9, when it's not running in IE8 compatibility mode. This code enables semi-responsive design while not requiring IE9 to run in native mode. The core idea can be found at http://headjs.com - which has a much less efficient but more powerful implementation of the JS in amongst its other many cool features.
Please note: code is not adequately tested, this is a proof of concept. may suffer from 2AMitis. not all features of KS's design are accounted for - just the responsive bit...