The topdoc theme now supports iframes when needed

css/main.css

@@ -283,6 +283,12 @@ section.examples li {
 #pageNav li {
   border-bottom: 1px solid #58595A;
 }
+iframe.componentframe{
+  width: 100%;
+  height: auto;
+  min-height: 400px;
+  border: none;
+}
 @media screen and (min-width: 650px) {
   #site.open {
     transform: translate3d(0, 0, 0);

iframe.jade

@@ -0,0 +1,13 @@
+!!! 5
+html
+	head
+		meta(charset = 'utf-8')
+		meta('http-equiv' = 'X-UA-Compatible', content = 'IE=edge,chrome=1')
+		title Topcoat
+		meta(name="viewport", content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0")
+		- if(project.debug)
+			link(rel='stylesheet', type='text/css', href=document.relativeSource)
+		- else
+			style.
+				!{document.minified}
+	body!=component.markup

index.jade

@@ -10,7 +10,7 @@ html
 		title Topcoat
 		meta(name="viewport", content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0")
 		style.
-			html,body{margin:0;padding:0;height:100%}body{font-family:source-sans-pro,sans-serif;position:relative;-webkit-font-smoothing:antialiased}body.light{background:#f4f4f4}body.dark{color:#f0f1f1;background:#4a4d4e}body.light{color:#181919}h1{font-weight:600}#wrapper{width:100%;overflow-x:hidden;background:inherit;position:relative}#site{width:100%;position:relative;z-index:10;background:inherit;left:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#site:before{position:absolute;content:'';left:-4px;height:100%;width:4px;background:#3b3e3e}#site.open{transform:translate3d(250px,0,0);-webkit-transform:translate3d(250px,0,0)}pre{font-family:source-code-pro,sans-serif;font-size:12px}#main-header{color:#373435;background:#fff;height:98px;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 20px;position:relative}#main-header hgroup{text-align:center}#main-header hgroup h1{font-size:40px;margin:5px 0 0;letter-spacing:-.065em;line-height:1.1em}#main-header hgroup a{color:#464646;text-decoration:none}#main-header hgroup a:hover{color:#000}#main-header hgroup p{font-size:13px;color:#999;margin:0}#main-header nav{display:none}#slide-menu-button{position:absolute;top:20px;left:20px;display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 .5rem;line-height:2rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;-webkit-box-shadow:inset 0 1px #fff;box-shadow:inset 0 1px #fff;-webkit-border-radius:3px;border-radius:3px;width:2.6rem;height:2.6rem;line-height:2.6rem;border:1px solid transparent;-webkit-box-shadow:none;box-shadow:none}#slide-menu:disabled,#slide-menu.is-disabled{opacity:.3;cursor:default;pointer-events:none}#slide-menu-button:active,#slide-menu-button.is-active{color:#454545;text-shadow:0 1px #fff;background-color:#d3d7d7;border:1px solid #a5a8a8;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.12);box-shadow:inset 0 1px rgba(0,0,0,0.12)}#slide-menu-button span{background-repeat:no-repeat;background-image:url('img/listview_icon.svg');-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative;display:inline-block;vertical-align:top;overflow:hidden;vertical-align:middle;width:1.3rem;height:1.3rem}#download-btn{display:none}#content{width:100%;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}#content section.code{display:none;background:#FFF;border:1px solid #e0e0e0;-moz-box-sizing:border-box;box-sizing:border-box;padding:15px;font-size:12px;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;font-weight:400}article.component{padding:0 0 10px}#content section.code h3{margin:0;font-size:12px;color:#000;font-weight:400}#content header h2{font-weight:300;margin:10px 0 25px;font-size:20px;position:relative;display:inline-block;padding-right:10px}body.light #content header h2{background:#f4f4f4}body.dark #content header h2{background:#4a4d4e}#content header{position:relative}#content header:before{content:'';width:100%;display:block;position:absolute;left:0;top:23px}body.light #content header:before{border-bottom:1px solid #e0e0e0}body.dark #content header:before{border-bottom:1px solid #58595a}#content pre{padding:0;margin:2px 0 10px}.showcode{margin:10px 0}.showcode a,section.examples a{color:#288edf;text-decoration:none}.showcode a:hover,section.examples a:hover{text-decoration:underline}section.examples ul{margin:0 0 20px;padding:0 0 0 20px}section.examples h4{margin-bottom:5px}section.examples li{color:#58595a}#sideNav{background:#4a4d4e;position:absolute;width:100%;z-index:1;height:100%;left:0}#sideNav ul{list-style:none;margin:0;padding:0}#sideNav li a{color:#f0f1f1;display:block;height:46px;font-size:16px;-moz-box-sizing:border-box;box-sizing:border-box;padding:12px 0 0 20px;text-decoration:none}#sideNav nav.site,#sideNav .combo{border-bottom:1px solid #58595a;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block}#pageNav li{border-bottom:1px solid #58595a}@media screen and (min-width:650px){#site.open{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#main-header nav{display:inline-block;position:absolute;right:0;top:40px}#main-header ul{list-style:none}#main-header nav li{display:inline-block;margin:0 18px}#main-header nav li#download-btn{display:none}#main-header nav li a{text-decoration:none;font-size:20px;color:#7f7f7f}#main-header nav li.selected a{color:#373435}#slide-menu-button{display:none}#main-header hgroup{text-align:left;position:absolute;display:inline-block;top:24px}#main-header hgroup h1{font-size:60px}#main-header hgroup p{font-size:15px}#main-header{color:#373435;background:#fff;height:148px}#content{padding-left:240px}#sideNav{background:transparent;width:220px;z-index:20;left:10px;top:150px;height:auto}#sideNav nav.site{display:none}#sideNav .combo{border-bottom:0;padding:36px 0}#sideNav li a{padding:12px 0 0 10px}body.light #sideNav li a{color:#797b7b}body.light #pageNav li{border-bottom:1px solid #e0e0e0}}@media screen and (min-width:880px){#content{padding-left:300px}#sideNav li a{display:block;height:60px;padding:22px 0 0 10px;text-decoration:none}#content header h2{font-size:28px}#content header:before{top:30px}section.code div{display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box}.max-width{max-width:1180px;position:relative;margin:0 auto}header#main-header .max-width{top:-10px}#main-header nav li a{font-size:22px}#main-header nav{display:inline-block}#main-header nav li{margin:0 25px}#main-header nav li:last-child{margin-right:0}}@media screen and (min-width:940px){#main-header nav li#download-btn{display:inline-block}#main-header nav li a#download-btn{position:relative;top:-15px;display:inline-block;box-sizing:border-box;-moz-box-sizing:border-box;background-clip:padding-box;font:inherit;background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #a5a8a8;border-radius:6px;margin:0;padding:0 1.25rem}#main-header nav li a#download-btn,#main-header nav li a#download-btn:hover{border:1px solid #143250;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,0.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,0.36)}#main-header nav li a#download-btn:hover{background-color:#2f9cf3}#main-header nav li a#download-btn:active,#main-header nav li a#download-btn.is-active{background-color:#0380e8;box-shadow:inset 0 1px rgba(0,0,0,0.12)}#main-header nav li a#download-btn:disabled,#main-header nav li a#download-btn.is-disabled{opacity:.3;cursor:default;pointer-events:none}}
+			html,body{margin:0;padding:0;height:100%}body{font-family:source-sans-pro,sans-serif;position:relative;-webkit-font-smoothing:antialiased}body.light{background:#f4f4f4}body.dark{color:#f0f1f1;background:#4a4d4e}body.light{color:#181919}h1{font-weight:600}#wrapper{width:100%;overflow-x:hidden;background:inherit;position:relative}#site{width:100%;position:relative;z-index:10;background:inherit;left:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#site:before{position:absolute;content:'';left:-4px;height:100%;width:4px;background:#3b3e3e}#site.open{transform:translate3d(250px,0,0);-webkit-transform:translate3d(250px,0,0)}pre{font-family:source-code-pro,sans-serif;font-size:12px}#main-header{color:#373435;background:#fff;height:98px;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 20px;position:relative}#main-header hgroup{text-align:center}#main-header hgroup h1{font-size:40px;margin:5px 0 0;letter-spacing:-.065em;line-height:1.1em}#main-header hgroup a{color:#464646;text-decoration:none}#main-header hgroup a:hover{color:#000}#main-header hgroup p{font-size:13px;color:#999;margin:0}#main-header nav{display:none}#slide-menu-button{position:absolute;top:20px;left:20px;display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 .5rem;line-height:2rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;-webkit-box-shadow:inset 0 1px #fff;box-shadow:inset 0 1px #fff;-webkit-border-radius:3px;border-radius:3px;width:2.6rem;height:2.6rem;line-height:2.6rem;border:1px solid transparent;-webkit-box-shadow:none;box-shadow:none}#slide-menu:disabled,#slide-menu.is-disabled{opacity:.3;cursor:default;pointer-events:none}#slide-menu-button:active,#slide-menu-button.is-active{color:#454545;text-shadow:0 1px #fff;background-color:#d3d7d7;border:1px solid #a5a8a8;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.12);box-shadow:inset 0 1px rgba(0,0,0,0.12)}#slide-menu-button span{background-repeat:no-repeat;background-image:url('img/listview_icon.svg');-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative;display:inline-block;vertical-align:top;overflow:hidden;vertical-align:middle;width:1.3rem;height:1.3rem}#download-btn{display:none}#content{width:100%;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}#content section.code{display:none;background:#FFF;border:1px solid #e0e0e0;-moz-box-sizing:border-box;box-sizing:border-box;padding:15px;font-size:12px;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;font-weight:400}article.component{padding:0 0 10px}#content section.code h3{margin:0;font-size:12px;color:#000;font-weight:400}#content header h2{font-weight:300;margin:10px 0 25px;font-size:20px;position:relative;display:inline-block;padding-right:10px}body.light #content header h2{background:#f4f4f4}body.dark #content header h2{background:#4a4d4e}#content header{position:relative}#content header:before{content:'';width:100%;display:block;position:absolute;left:0;top:23px}body.light #content header:before{border-bottom:1px solid #e0e0e0}body.dark #content header:before{border-bottom:1px solid #58595a}#content pre{padding:0;margin:2px 0 10px}.showcode{margin:10px 0}.showcode a,section.examples a{color:#288edf;text-decoration:none}.showcode a:hover,section.examples a:hover{text-decoration:underline}section.examples ul{margin:0 0 20px;padding:0 0 0 20px}section.examples h4{margin-bottom:5px}section.examples li{color:#58595a}#sideNav{background:#4a4d4e;position:absolute;width:100%;z-index:1;height:100%;left:0}#sideNav ul{list-style:none;margin:0;padding:0}#sideNav li a{color:#f0f1f1;display:block;height:46px;font-size:16px;-moz-box-sizing:border-box;box-sizing:border-box;padding:12px 0 0 20px;text-decoration:none}#sideNav nav.site,#sideNav .combo{border-bottom:1px solid #58595a;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block}#pageNav li{border-bottom:1px solid #58595a}iframe.componentframe{width: 100%;height: auto;min-height: 400px;border: none;}@media screen and (min-width:650px){#site.open{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#main-header nav{display:inline-block;position:absolute;right:0;top:40px}#main-header ul{list-style:none}#main-header nav li{display:inline-block;margin:0 18px}#main-header nav li#download-btn{display:none}#main-header nav li a{text-decoration:none;font-size:20px;color:#7f7f7f}#main-header nav li.selected a{color:#373435}#slide-menu-button{display:none}#main-header hgroup{text-align:left;position:absolute;display:inline-block;top:24px}#main-header hgroup h1{font-size:60px}#main-header hgroup p{font-size:15px}#main-header{color:#373435;background:#fff;height:148px}#content{padding-left:240px}#sideNav{background:transparent;width:220px;z-index:20;left:10px;top:150px;height:auto}#sideNav nav.site{display:none}#sideNav .combo{border-bottom:0;padding:36px 0}#sideNav li a{padding:12px 0 0 10px}body.light #sideNav li a{color:#797b7b}body.light #pageNav li{border-bottom:1px solid #e0e0e0}}@media screen and (min-width:880px){#content{padding-left:300px}#sideNav li a{display:block;height:60px;padding:22px 0 0 10px;text-decoration:none}#content header h2{font-size:28px}#content header:before{top:30px}section.code div{display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box}.max-width{max-width:1180px;position:relative;margin:0 auto}header#main-header .max-width{top:-10px}#main-header nav li a{font-size:22px}#main-header nav{display:inline-block}#main-header nav li{margin:0 25px}#main-header nav li:last-child{margin-right:0}}@media screen and (min-width:940px){#main-header nav li#download-btn{display:inline-block}#main-header nav li a#download-btn{position:relative;top:-15px;display:inline-block;box-sizing:border-box;-moz-box-sizing:border-box;background-clip:padding-box;font:inherit;background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #a5a8a8;border-radius:6px;margin:0;padding:0 1.25rem}#main-header nav li a#download-btn,#main-header nav li a#download-btn:hover{border:1px solid #143250;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,0.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,0.36)}#main-header nav li a#download-btn:hover{background-color:#2f9cf3}#main-header nav li a#download-btn:active,#main-header nav li a#download-btn.is-active{background-color:#0380e8;box-shadow:inset 0 1px rgba(0,0,0,0.12)}#main-header nav li a#download-btn:disabled,#main-header nav li a#download-btn.is-disabled{opacity:.3;cursor:default;pointer-events:none}}
 			pre{word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px}pre,code{font-family:source-code-pro,'Source Code Pro',Courier,monospace;color:#535353}pre,pre code{font-size:13px}pre .comment{color:#a2a2a2}pre .support{color:#0086b3}pre .tag,pre .tag-name{color:#446fbd}pre .css-property{color:#8757ad}pre .css-value,pre .support.namespace{color:#f18900}pre .vendor-prefix{color:#535353}pre .constant.numeric,pre .keyword.unit{color:#738d00}pre .hex-color{color:#f18900}pre .entity.class{color:#5585c4}pre .entity.id,pre .entity.function{color:#900}pre .attribute,pre .variable{color:#738d00}pre .string,pre .support.value{color:#8757ad}pre .regexp{color:#535353}
 			.topcoat-select{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.topcoat-select{vertical-align:top;outline:0}.topcoat-select{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topcoat-select{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-select{position:relative;display:inline-block;vertical-align:top}.topcoat-select:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-select{-moz-appearance:none;-webkit-appearance:none}.topcoat-select::-ms-expand{display:none}.topcoat-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;appearance:button;text-indent:.01px;text-overflow:'';padding:.06rem 1.4rem .06rem .4rem;font-size:12px;font-weight:400;height:1.313rem;letter-spacing:0;color:hsla(0,0%,27%,1);text-shadow:0 1px hsla(0,100%,100%,1);border-radius:4px;background-color:hsla(165,8%,91%,1);box-shadow:inset 0 1px hsla(0,100%,100%,1);border:1px solid hsla(168,8%,65%,1);background-image:url('img/dropdown.svg');background-repeat:no-repeat;background-position:center right;min-width:3.4rem}.topcoat-select:hover{background-color:hsla(180,7%,94%,1)}.topcoat-select:active{background-color:hsla(180,5%,83%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.1)}.topcoat-select:focus{border:1px solid hsla(227,100%,50%,1);box-shadow:0 0 0 2px hsla(208,82%,69%,1);outline:0}.dark .topcoat-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1)}.dark .topcoat-select:hover{background-color:hsla(200,2%,39%,1)}.dark .topcoat-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}@media screen and (max-width:650px){.topcoat-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1);padding:.7rem 1.4rem .7rem 1rem;font-size:16px;height:3rem;letter-spacing:1px;border-radius:6px}.topcoat-select:hover{background-color:hsla(200,2%,39%,1)}.topcoat-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}}
 		- if(project.debug)
@@ -68,7 +68,10 @@ html
 						article.component(id=component.slug)
 							header
 								h2=component.name
-							section.component!=component.markup
+							- if(component.iframe)
+								iframe.componentframe(src=component.filename)
+							- else
+								section.component!=component.markup
 							- if(component.examples)
 								section.examples
 									h4 Examples