Skip to content
Browse files

responsivish layout

  • Loading branch information...
1 parent c7fe1b2 commit 1346886aae41c270bf055f5e03c9bf327219889c @hughsk hughsk committed
View
3 demo/forms/base.less
@@ -1,9 +1,6 @@
// Text Input
//
// Below are the text-oriented form elements used on the site.
-//
-// This could actually be a **complete** Markdown summary of the following sections.
-// But I wouldn't know what to write. Here's a link to [Google](http://www.google.com) though.
//
// Styleguide 2.1
View
11 gh-pages/index.html
@@ -252,12 +252,13 @@ <h1 class="kss-title kss-title-main"> Overview </h1>
$(document).ready(function(){
var sidebarAdjust = function() {
// Match footer/body height
- var heightNav = $('#kss-nav').height(),
- heightMain = $('#kss-main').height();
+ var height = Math.max($(window).height(), $('#kss-main').height());
- if (heightNav > heightMain) { $('#kss-main').height(heightNav); }
- if (heightMain > heightNav) { $('#kss-nav').height(heightMain); }
- console.log('adjust');
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
};
$(window).resize(sidebarAdjust);
View
2 gh-pages/public/kss.css
@@ -1 +1 @@
-html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{color:#444;background:#fefefe;font-family:'Droid Serif',Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif;font-size:12px;line-height:1.5em;padding:1em;max-width:52em}a{color:#0645ad;text-decoration:none}a:visited{color:#0b0080}a:hover{color:#06e}a:active{color:#faa700}a:focus{outline:thin dotted}a:hover,a:active{outline:0}a::-moz-selection,a::selection{background:rgba(255,255,0,.3);color:#0645ad}::-moz-selection,::selection{background:rgba(255,255,0,.3);color:#444}p{margin:1em 0}h1,h2,h3,h4,h5,h6{font-family:'Droid Serif',Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif;color:#111;font-weight:400;line-height:1em}h4,h5,h6{font-weight:700}h1{font-size:2.5em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.2em}h5{font-size:1em}h6{font-size:.9em}blockquote{color:#666;margin:0;padding-left:1.5em;border-left:.5em #d8d8d8 solid}hr{display:block;height:2px;border:0;border-top:1px solid #ddd;border-bottom:1px solid #e5e5e5;margin:1em 0;padding:0}pre,code,kbd,samp{font-family:'Monaco','Ubuntu Mono','Lucida Console','Courier New',Courier,monospace;color:#2b2b2b;font-size:.98em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}b,strong{font-weight:700}dfn,mark,em{font-style:italic}ins{background:#ff9;color:#111;text-decoration:none}mark{background:#ff0;color:#111;font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ul,ol{margin:1em 0;padding:0 0 0 2em}li p:last-child{margin:0}dd{margin:0 0 0 2em}img{max-width:100%;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}@media only screen and (min-width: 480px){body{ font-size:14px}}@media only screen and (min-width: 768px){body{ font-size:16px}}@media print{*{ background:transparent!important;color:#000!important;filter:none!important;-ms-filter:none!important}body{font-size:12pt;max-width:100%}a,a:visited{text-decoration:underline}hr{height:1px;border:0;border-bottom:1px solid black}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;padding-right:1em;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page :left{margin:15mm 20mm 15mm 10mm}@page :right{margin:15mm 10mm 15mm 20mm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}#kss-nav{width:20%;background-color:#eee;box-shadow:inset -15px 0 15px -15px rgba(45,45,45,.25)}#kss-nav nav>ul{padding:0;margin:2em;margin-top:2.5em;list-style-type:none}#kss-header h1{font-size:1.5em;margin-top:1.6666666666666667em;margin-left:1.3333333333333333em}#kss-main,#kss-nav{position:absolute;top:0;left:0}#kss-main{padding-left:2.5%;width:77.5%;max-width:48em;left:20%}.kss-mod-name{text-align:right;width:20%;font-size:.75em}.kss-mod-example{padding-bottom:20px;display:block}.kss-mod-example>td{display:block}.kss-markup{margin-bottom:40px}.kss-depth-1>h1{font-size:2.375em}.kss-depth-2>h1{font-size:2.25em}.kss-depth-3>h1{font-size:2.125em}.kss-depth-4>h1{font-size:2em}.kss-depth-5>h1{font-size:1.875em}.kss-depth-6>h1{font-size:1.75em}.pln{color:#000}@media screen{.str{ color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{ color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
+html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{color:#444;background:#fefefe;font-family:'Droid Serif',Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif;font-size:12px;line-height:1.5em;padding:1em;max-width:52em}a{color:#0645ad;text-decoration:none}a:visited{color:#0b0080}a:hover{color:#06e}a:active{color:#faa700}a:focus{outline:thin dotted}a:hover,a:active{outline:0}a::-moz-selection,a::selection{background:rgba(255,255,0,.3);color:#0645ad}::-moz-selection,::selection{background:rgba(255,255,0,.3);color:#444}p{margin:1em 0}h1,h2,h3,h4,h5,h6{font-family:'Droid Serif',Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif;color:#111;font-weight:400;line-height:1em}h4,h5,h6{font-weight:700}h1{font-size:2.5em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.2em}h5{font-size:1em}h6{font-size:.9em}blockquote{color:#666;margin:0;padding-left:1.5em;border-left:.5em #d8d8d8 solid}hr{display:block;height:2px;border:0;border-top:1px solid #ddd;border-bottom:1px solid #e5e5e5;margin:1em 0;padding:0}pre,code,kbd,samp{font-family:'Monaco','Ubuntu Mono','Lucida Console','Courier New',Courier,monospace;color:#2b2b2b;font-size:.98em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}b,strong{font-weight:700}dfn,mark,em{font-style:italic}ins{background:#ff9;color:#111;text-decoration:none}mark{background:#ff0;color:#111;font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ul,ol{margin:1em 0;padding:0 0 0 2em}li p:last-child{margin:0}dd{margin:0 0 0 2em}img{max-width:100%;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}@media only screen and (min-width: 480px){body{ font-size:14px}}@media only screen and (min-width: 768px){body{ font-size:16px}}@media print{*{ background:transparent!important;color:#000!important;filter:none!important;-ms-filter:none!important}body{font-size:12pt;max-width:100%}a,a:visited{text-decoration:underline}hr{height:1px;border:0;border-bottom:1px solid black}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;padding-right:1em;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page :left{margin:15mm 20mm 15mm 10mm}@page :right{margin:15mm 10mm 15mm 20mm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}#kss-nav{width:20%;background-color:#eee;box-shadow:inset -15px 0 15px -15px rgba(45,45,45,.25)}#kss-nav nav>ul{padding:0;margin:2em;margin-top:2.5em;list-style-type:none}#kss-header h1{font-size:1.5em;margin-top:1.6666666666666667em;margin-left:1.3333333333333333em}#kss-main,#kss-nav{position:absolute;top:0;left:0}#kss-main{padding-left:2.5%;width:77.5%;max-width:48em;left:20%}.kss-mod-name{text-align:right;width:20%;font-size:.75em}.kss-mod-example{padding-bottom:20px;display:block}.kss-mod-example>td{display:block}.kss-markup{margin-bottom:40px}.kss-depth-1>h1{font-size:2.375em}.kss-depth-2>h1{font-size:2.25em}.kss-depth-3>h1{font-size:2.125em}.kss-depth-4>h1{font-size:2em}.kss-depth-5>h1{font-size:1.875em}.kss-depth-6>h1{font-size:1.75em}.pln{color:#000}@media screen{.str{ color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{ color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media screen and (max-width: 768px){#kss-main{ position:static;width:90%;margin:0 auto}#kss-nav{position:static;display:block;width:auto;margin:0;background:0;box-shadow:none;border-bottom:1px solid #ddd}#kss-nav nav>ul{margin-top:.5em;margin-bottom:.5em}#kss-nav nav>ul>li{display:inline-block;padding-right:1.5em}#kss-header>hgroup>h1{margin-top:0;margin-bottom:0}}
View
38 gh-pages/public/kss.less
@@ -111,4 +111,40 @@ li.L1,
li.L3,
li.L5,
li.L7,
-li.L9 { background: #eee }
+li.L9 { background: #eee }
+
+// ------------------------------------------------------------------------------
+// @group Mobile/Tablet Styling
+// ------------------------------------------------------------------------------
+@media screen and (max-width: 768px) {
+ #kss-main {
+ position:static;
+ width:90%;
+ margin:0 auto;
+ }
+
+ #kss-nav {
+ position:static;
+ display:block;
+ width:auto;
+ margin:0;
+ background:0;
+ box-shadow:none;
+ border-bottom:1px solid #ddd;
+ nav>ul {
+ margin-top:0.5em;
+ margin-bottom:0.5em;
+
+ &>li {
+ display:inline-block;
+ padding-right:1.5em;
+ }
+ }
+ }
+
+ #kss-header>hgroup>h1 {
+ margin-top:0;
+ margin-bottom:0;
+ }
+}
+// @end
View
2 gh-pages/public/style.css
@@ -1 +1 @@
-.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 20px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;text-transform:lowercase;text-decoration:none;cursor:pointer;border-radius:3px;background-color:#aaa;border:1px solid #777;text-shadow:0 2px 0 #919191;box-shadow:0 3px 0 0 #5e5e5e,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}.button:hover{background-color:#bebebe;border:1px solid #8b8b8b;text-shadow:0 2px 0 #a5a5a5;box-shadow:0 3px 0 0 #727272,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%);border:1px solid #777;color:#fff}.button.primary{background-color:#5c4;border:1px solid #318624;text-shadow:0 2px 0 #3fae2f;box-shadow:0 3px 0 0 #225e19,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}.button:disabled{background-color:#ddd;border:1px solid #aaa;text-shadow:0 2px 0 #c4c4c4;box-shadow:0 3px 0 0 #919191,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%);cursor:default}.button.remove{background-color:#c54;border:1px solid #863124;text-shadow:0 2px 0 #ae3f2f;box-shadow:0 3px 0 0 #5e2219,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}input[type='text']{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:14px;line-height:1.5em;padding:8px;border:1px solid #aaa;background-color:#eee;outline:0;border-radius:3px;box-shadow:inset 1px 1px 1px rgba(0,0,0,.15)}input[type='text']:hover{border-color:#999;background-color:#f0f0f0}input[type='text']:focus{border-color:#89e;background-color:#fff;box-shadow:inset 1px 1px 2px rgba(20,20,120,.3)}input[type='text']:disabled{border-color:#ccc;background-color:#eee;color:#999}.mod-input{position:relative;display:block}.mod-input>label{width:45%;font-weight:700}.mod-input>input,.mod-input>label{display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline}.mod-input.disabled{color:#888}.mod-input.disabled input{border-color:#ccc;background-color:#eee;color:#999}.mod-input.invalid label{color:#911}.mod-input.invalid input{border-color:#e65;background-color:#fdd}.mod-input.valid label{color:#191}.mod-input.valid input{border-color:#6e5;background-color:#dfd}
+.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 20px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;text-transform:lowercase;text-decoration:none;cursor:pointer;border-radius:3px;background-color:#aaa;border:1px solid #777;text-shadow:0 2px 0 #919191;box-shadow:0 3px 0 0 #5e5e5e,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}.button:visited,.button:hover,.button:active{color:#fff}.button:hover{background-color:#bebebe;border:1px solid #8b8b8b;text-shadow:0 2px 0 #a5a5a5;box-shadow:0 3px 0 0 #727272,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%);border:1px solid #777}.button:active{position:relative;top:3px;box-shadow:none!important}.button.primary{background-color:#5c4;border:1px solid #318624;text-shadow:0 2px 0 #3fae2f;box-shadow:0 3px 0 0 #225e19,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}.button:disabled{background-color:#ddd;border:1px solid #aaa;text-shadow:0 2px 0 #c4c4c4;box-shadow:0 3px 0 0 #919191,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%);cursor:default}.button.remove{background-color:#c54;border:1px solid #863124;text-shadow:0 2px 0 #ae3f2f;box-shadow:0 3px 0 0 #5e2219,inset 0 1px 3px rgba(255,255,255,.4);background-image:-webkit-linear-gradient(top,rgba(255,255,255,.125) 0,rgba(0,0,0,.125) 100%)}input[type='text']{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:14px;line-height:1.5em;padding:8px;border:1px solid #aaa;background-color:#eee;outline:0;border-radius:3px;box-shadow:inset 1px 1px 1px rgba(0,0,0,.15)}input[type='text']:hover{border-color:#999;background-color:#f0f0f0}input[type='text']:focus{border-color:#89e;background-color:#fff;box-shadow:inset 1px 1px 2px rgba(20,20,120,.3)}input[type='text']:disabled{border-color:#ccc;background-color:#eee;color:#999}.mod-input{position:relative;display:block}.mod-input>label{width:45%;font-weight:700}.mod-input>input,.mod-input>label{display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline}.mod-input.disabled{color:#888}.mod-input.disabled input{border-color:#ccc;background-color:#eee;color:#999}.mod-input.invalid label{color:#911}.mod-input.invalid input{border-color:#e65;background-color:#fdd}.mod-input.valid label{color:#191}.mod-input.valid input{border-color:#6e5;background-color:#dfd}
View
22 gh-pages/section-1.html
@@ -88,6 +88,17 @@ <h1 class="kss-title" id="kss-title-main"><span class="kss-ref">1.0</span> - Mod
</tr>
<tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>&quot;Press&quot; the button down when clicked.</p>
+</td>
+ <td class="kss-mod-name"><p>:active</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button pseudo-class-active">Link Button</a>
+<button class="button pseudo-class-active">Button Element</button>
+<input type="button" class="button pseudo-class-active" value="input[type='button']"/></td>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
<td class="kss-mod-desc"><p>Indicate that the button is the primary feature of this form.</p>
</td>
<td class="kss-mod-name"><p>.primary</p></td>
@@ -132,12 +143,13 @@ <h1 class="kss-title" id="kss-title-main"><span class="kss-ref">1.0</span> - Mod
$(document).ready(function(){
var sidebarAdjust = function() {
// Match footer/body height
- var heightNav = $('#kss-nav').height(),
- heightMain = $('#kss-main').height();
+ var height = Math.max($(window).height(), $('#kss-main').height());
- if (heightNav > heightMain) { $('#kss-main').height(heightNav); }
- if (heightMain > heightNav) { $('#kss-nav').height(heightMain); }
- console.log('adjust');
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
};
$(window).resize(sidebarAdjust);
View
17 gh-pages/section-2.html
@@ -53,11 +53,7 @@ <h1 class="kss-title" id="kss-title-main"><span class="kss-ref">2.0</span> - For
<section class="kss-depth-2">
<h1 class="kss-title"><span class="kss-ref">2.1</span> - Text Input</h1>
- <p>Below are the text-oriented form elements used on the site.
-
-</p>
-<p>This could actually be a <strong>complete</strong> Markdown summary of the following sections.
-But I wouldn&apos;t know what to write. Here&apos;s a link to <a href="http://www.google.com">Google</a> though.</p>
+ <p>Below are the text-oriented form elements used on the site.</p>
</section>
@@ -189,12 +185,13 @@ <h1 class="kss-title"><span class="kss-ref">2.1</span> - Text Input</h1>
$(document).ready(function(){
var sidebarAdjust = function() {
// Match footer/body height
- var heightNav = $('#kss-nav').height(),
- heightMain = $('#kss-main').height();
+ var height = Math.max($(window).height(), $('#kss-main').height());
- if (heightNav > heightMain) { $('#kss-main').height(heightNav); }
- if (heightMain > heightNav) { $('#kss-nav').height(heightMain); }
- console.log('adjust');
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
};
$(window).resize(sidebarAdjust);
View
11 lib/template/index.html
@@ -96,12 +96,13 @@ <h1 class="kss-title"><span class="kss-ref">{{ reference }}</span> - {{ header }
$(document).ready(function(){
var sidebarAdjust = function() {
// Match footer/body height
- var heightNav = $('#kss-nav').height(),
- heightMain = $('#kss-main').height();
+ var height = Math.max($(window).height(), $('#kss-main').height());
- if (heightNav > heightMain) { $('#kss-main').height(heightNav); }
- if (heightMain > heightNav) { $('#kss-nav').height(heightMain); }
- console.log('adjust');
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
};
$(window).resize(sidebarAdjust);
View
38 lib/template/public/kss.less
@@ -111,4 +111,40 @@ li.L1,
li.L3,
li.L5,
li.L7,
-li.L9 { background: #eee }
+li.L9 { background: #eee }
+
+// ------------------------------------------------------------------------------
+// @group Mobile/Tablet Styling
+// ------------------------------------------------------------------------------
+@media screen and (max-width: 768px) {
+ #kss-main {
+ position:static;
+ width:90%;
+ margin:0 auto;
+ }
+
+ #kss-nav {
+ position:static;
+ display:block;
+ width:auto;
+ margin:0;
+ background:0;
+ box-shadow:none;
+ border-bottom:1px solid #ddd;
+ nav>ul {
+ margin-top:0.5em;
+ margin-bottom:0.5em;
+
+ &>li {
+ display:inline-block;
+ padding-right:1.5em;
+ }
+ }
+ }
+
+ #kss-header>hgroup>h1 {
+ margin-top:0;
+ margin-bottom:0;
+ }
+}
+// @end

0 comments on commit 1346886

Please sign in to comment.
Something went wrong with that request. Please try again.