From 0618dddc5a5ec4dbc4d83aa6bd9cc75bfe59a725 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 16:11:02 +0100 Subject: [PATCH 1/6] Added some more col width shortcut classes --- scss/_mixins.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/_mixins.scss b/scss/_mixins.scss index a388633..cb929ca 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -138,8 +138,11 @@ .fourteen { width: (14*$grid-column-width - $grid-gutter); } .fifteen { width: (15*$grid-column-width - $grid-gutter); } .sixteen { width: (16*$grid-column-width - $grid-gutter); } - .one-third { width: ($grid-container-width/3) - $grid-gutter; } - .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } + .one-third { width: ($grid-container-width/3) - $grid-gutter; } + .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } + .one-half { width: ($grid-container-width/2) - $grid-gutter; } + .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } + .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} .offset-by-one { padding-left: $grid-column-width; } From 6a889c6cb4981692c6354dbdc9ad5acd749749e9 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 16:14:20 +0100 Subject: [PATCH 2/6] Updated mobile grid styles inline with changes made to mixin --- scss/_grid.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index 63a6354..95b27e7 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -53,8 +53,19 @@ & .fifteen, & .sixteen, & .one-third, - & .two-thirds { width: $mobile-column-width; } + & .two-thirds, + & .one-half, + & .one-quarter, + & .three-quarters + { width: $mobile-column-width; } + +/* +.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } + .one-half { width: ($grid-container-width/2) - $grid-gutter; } + .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } + .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} + */ .column, .columns { margin: 0; } From d2637aaeba50ae4d60da5f05cd8f5fa70557afc0 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 16:16:14 +0100 Subject: [PATCH 3/6] Updated output CSS files --- css/skeleton.css | 22 ++++++++++++++++++++-- css/skeleton.min.css | 2 +- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index 9e005a9..12efc8a 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -118,6 +118,12 @@ body { width: 300px; } .container .two-thirds { width: 620px; } + .container .one-half { + width: 460px; } + .container .one-quarter { + width: 220px; } + .container .three-quarters { + width: 700px; } .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { @@ -188,6 +194,12 @@ body { width: 236px; } .container .two-thirds { width: 492px; } + .container .one-half { + width: 364px; } + .container .one-quarter { + width: 172px; } + .container .three-quarters { + width: 556px; } .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { @@ -231,8 +243,14 @@ body { margin-left: 0; } } @media only screen and (max-width: 767px) { .container { - width: 90%; } - .container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds { + width: 90%; + /* + .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } + .one-half { width: ($grid-container-width/2) - $grid-gutter; } + .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } + .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} + */ } + .container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds, .container .one-half, .container .one-quarter, .container .three-quarters { width: 100%; } .container .column, .container .columns { margin: 0; } diff --git a/css/skeleton.min.css b/css/skeleton.min.css index 0799204..575d056 100644 --- a/css/skeleton.min.css +++ b/css/skeleton.min.css @@ -1,2 +1,2 @@ /* Skeleton-SCSS 1.0.2 17-05-2013 */ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:10px}.add-bottom{margin-bottom:20px}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha,.omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:50px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:40px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:34px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:30px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:24px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px}p img{margin:0}.lead{font-size:21px;line-height:27px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:10px}.add-bottom{margin-bottom:20px}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha,.omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:50px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:40px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:34px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:30px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:24px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px}p img{margin:0}.lead{font-size:21px;line-height:27px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file From 277edd7740aa152a016fbb85743dcc90f8ff4d79 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 16:18:23 +0100 Subject: [PATCH 4/6] Removed commented crap that shouldnt have been committed --- scss/_grid.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index 95b27e7..ff1c063 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -59,13 +59,6 @@ & .three-quarters { width: $mobile-column-width; } - -/* -.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } - .one-half { width: ($grid-container-width/2) - $grid-gutter; } - .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } - .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} - */ .column, .columns { margin: 0; } From c1c6c5177cfdc789f58d4043d6711f26fcbe601e Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 16:20:59 +0100 Subject: [PATCH 5/6] Running 2 travis builds is a pointless waste of CPU time. --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index a4b627d..6860669 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,6 @@ language: node_js node_js: - "0.10" - - "0.11" before_script: - npm install -g grunt-cli - gem install sass \ No newline at end of file From 703ff16f151201aa505d122f3e9d7a4fbc8c9bb6 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Tue, 28 May 2013 20:35:21 +0100 Subject: [PATCH 6/6] Renamed to Ribs --- Gruntfile.js | 10 +++++----- README.md | 19 ++++++++++--------- component.json | 6 +++--- css/{skeleton.css => Ribs.css} | 22 ++++++---------------- css/Ribs.min.css | 2 ++ css/skeleton.min.css | 2 -- index.html | 9 +++++---- package.json | 18 +++++++++--------- scss/{skeleton.scss => Ribs.scss} | 14 ++++---------- scss/_grid.scss | 2 +- 10 files changed, 45 insertions(+), 59 deletions(-) rename css/{skeleton.css => Ribs.css} (96%) create mode 100644 css/Ribs.min.css delete mode 100644 css/skeleton.min.css rename scss/{skeleton.scss => Ribs.scss} (83%) diff --git a/Gruntfile.js b/Gruntfile.js index b5ddd01..6bb0afd 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,7 +6,7 @@ module.exports = function(grunt) { sass: { dist: { files: { - 'css/skeleton.css': 'scss/skeleton.scss', + 'css/Ribs.css': 'scss/Ribs.scss', } } }, @@ -16,7 +16,7 @@ module.exports = function(grunt) { import: false, csslintrc: '.csslintrc' }, - src: ['css/skeleton.css'] + src: ['css/Ribs.css'] } }, cssmin: { @@ -25,7 +25,7 @@ module.exports = function(grunt) { banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' }, files: { - 'css/skeleton.min.css': 'css/skeleton.css' + 'css/Ribs.min.css': 'css/Ribs.css' } }, }, @@ -40,8 +40,8 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.registerTask('lint', ['sass', 'csslint']); + grunt.registerTask('test', ['sass', 'csslint']); grunt.registerTask('minify', ['cssmin']); - grunt.registerTask('build', ['sass', 'cssmin']); + grunt.registerTask('default', ['sass', 'cssmin']); }; \ No newline at end of file diff --git a/README.md b/README.md index 18c4469..5e3378a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -Skeleton SCSS +Ribs ============= -> This is my opinionated fork of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot. +> Ribs is the evolution of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot. ## Whats different here? My fork has one significant difference over the original project, that is a full SCSS conversion to make use of more modern technologies and to expose a lot more customisation options quickly and easily. @@ -11,21 +11,21 @@ As time goes by I will gradually extend the available options and build a packag Either clone this repository and drop in manually, or install from bower: ``` -bower install --save Skeleton-SCSS +bower install --save ribs ``` ## Build status The project is set up to build and run csslint on Travis: -Master: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png)](https://travis-ci.org/nickpack/Skeleton-SCSS) -Development: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png?branch=develop)](https://travis-ci.org/nickpack/Skeleton-SCSS) +Master: [![Build Status](https://travis-ci.org/nickpack/Ribs.png)](https://travis-ci.org/nickpack/Ribs) +Development: [![Build Status](https://travis-ci.org/nickpack/Ribs.png?branch=develop)](https://travis-ci.org/nickpack/Ribs) ## Building I've added grunt configuration to the repository for those of you that use it. There are 4 main tasks added: -* build - Runs Sass to create the stylesheet from the source files, places the output in ./css then creates a minified version of the file and places it into the same directory -* lint - This runs CSSLint over the output CSS file (Note that there are a few bits in skeleton that I need to fix!) -* minify - This literally just runs cssmin, useful if you've edited skeleton.css directly +* default - Runs Sass to create the stylesheet from the source files, places the output in ./css then creates a minified version of the file and places it into the same directory +* test - This runs CSSLint over the output CSS file (Note that there are a few bits in skeleton that I need to fix!) +* minify - This literally just runs cssmin, useful if you've edited Ribs.css directly * watch - This will monitor the scss directory for changes and automatically rebuild the css and minified css (Effectively the same as sass --watch but with added minification) ### To get started with the grunt tools @@ -35,6 +35,7 @@ Then following that, from the root dir of this project, run `npm install` which You should be good to go. ## Changelog +* May 28, 2013 - Rename project to Ribs * May 17, 2013 - (v1.0.2) Travis CI build configuration, and minor refactor to remove as many of the warnings from CSSLint as was feasible to do - MAY CAUSE REGRESSIONS. * May 17, 2013 - (v1.0.1) Added grunt build tools * Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission. @@ -53,5 +54,5 @@ Copyright (c) 2013 Nick Pack Based on the original skeleton project which is Copyright 2011 Dave Gamache Licensed under the MIT license. -[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/nickpack/Skeleton-SCSS/trend.png)](https://bitdeli.com/free "Bitdeli Badge") +[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/nickpack/Ribs/trend.png)](https://bitdeli.com/free "Bitdeli Badge") diff --git a/component.json b/component.json index 64f999c..0a1f0ac 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { - "name": "Skeleton-SCSS", + "name": "Ribs", "version": "1.0.2", - "main": "css/skeleton.css", + "main": "css/Ribs.css", "ignore": [ "**/.*", "node_modules", @@ -9,6 +9,6 @@ ], "repository": { "type": "git", - "url": "https://github.com/nickpack/Skeleton-SCSS.git" + "url": "https://github.com/nickpack/Ribs.git" } } \ No newline at end of file diff --git a/css/skeleton.css b/css/Ribs.css similarity index 96% rename from css/skeleton.css rename to css/Ribs.css index 12efc8a..25aea3b 100644 --- a/css/skeleton.css +++ b/css/Ribs.css @@ -1,13 +1,11 @@ /* -* Skeleton SCSS V1.0.2 +* Ribs V1.0.2 * Skeleton is Copyright 2011, Dave Gamache * -* SCSS Conversion and Mixins by Nick Pack -* -* www.getskeleton.com +* Ribs is the evolution of Skeleton by Nick Pack * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 +* 28/05/2013 */ /* ul, ol with disc, square etc. */ /* #Reset & Basics (Inspired by E. Meyers) @@ -61,8 +59,6 @@ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } -/* #Forms -================================================== */ .container { position: relative; margin: 0 auto; @@ -238,18 +234,12 @@ body { .container .omega { margin-left: 10px; } - .alpha, .omega { + .alpha-omega { margin-right: 0; margin-left: 0; } } @media only screen and (max-width: 767px) { .container { - width: 90%; - /* - .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } - .one-half { width: ($grid-container-width/2) - $grid-gutter; } - .one-quarter { width: ($grid-container-width/4) - $grid-gutter; } - .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} - */ } + width: 90%; } .container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds, .container .one-half, .container .one-quarter, .container .three-quarters { width: 100%; } .container .column, .container .columns { @@ -640,7 +630,7 @@ legend span { max-width: 100%; height: auto; } -/* #Media Queries +/* #Example Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */ diff --git a/css/Ribs.min.css b/css/Ribs.min.css new file mode 100644 index 0000000..e3baa3b --- /dev/null +++ b/css/Ribs.min.css @@ -0,0 +1,2 @@ +/* Ribs 1.0.2 28-05-2013 */ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:10px}.add-bottom{margin-bottom:20px}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha-omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:50px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:40px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:34px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:30px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:24px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px}p img{margin:0}.lead{font-size:21px;line-height:27px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file diff --git a/css/skeleton.min.css b/css/skeleton.min.css deleted file mode 100644 index 575d056..0000000 --- a/css/skeleton.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/* Skeleton-SCSS 1.0.2 17-05-2013 */ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:10px}.add-bottom{margin-bottom:20px}body{background:#fff;font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#444;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.container{position:relative;margin:0 auto;padding:0}.container .alpha{margin-left:0}.container .omega{margin-right:0}.column,.columns{float:left;margin-left:10px;margin-right:10px}.row{margin-bottom:20px}.container{width:960px}.container .one{width:40px}.container .two{width:100px}.container .three{width:160px}.container .four{width:220px}.container .five{width:280px}.container .six{width:340px}.container .seven{width:400px}.container .eight{width:460px}.container .nine{width:520px}.container .ten{width:580px}.container .eleven{width:640px}.container .twelve{width:700px}.container .thirteen{width:760px}.container .fourteen{width:820px}.container .fifteen{width:880px}.container .sixteen{width:940px}.container .one-third{width:300px}.container .two-thirds{width:620px}.container .one-half{width:460px}.container .one-quarter{width:220px}.container .three-quarters{width:700px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (max-width:959px){.container{width:768px}.container .one{width:28px}.container .two{width:76px}.container .three{width:124px}.container .four{width:172px}.container .five{width:220px}.container .six{width:268px}.container .seven{width:316px}.container .eight{width:364px}.container .nine{width:412px}.container .ten{width:460px}.container .eleven{width:508px}.container .twelve{width:556px}.container .thirteen{width:604px}.container .fourteen{width:652px}.container .fifteen{width:700px}.container .sixteen{width:748px}.container .one-third{width:236px}.container .two-thirds{width:492px}.container .one-half{width:364px}.container .one-quarter{width:172px}.container .three-quarters{width:556px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}.container{width:768px}.container .alpha{margin-right:10px}.container .omega{margin-left:10px}.alpha,.omega{margin-right:0;margin-left:0}}@media only screen and (max-width:767px){.container{width:90%}.container .one,.container .two,.container .three,.container .four,.container .five,.container .six,.container .seven,.container .eight,.container .nine,.container .ten,.container .eleven,.container .twelve,.container .thirteen,.container .fourteen,.container .fifteen,.container .sixteen,.container .one-third,.container .two-thirds,.container .one-half,.container .one-quarter,.container .three-quarters{width:100%}.container .column,.container .columns{margin:0}.container .offset-by-one,.container .offset-by-two,.container .offset-by-three,.container .offset-by-four,.container .offset-by-five,.container .offset-by-six,.container .offset-by-seven,.container .offset-by-eight,.container .offset-by-nine,.container .offset-by-ten,.container .offset-by-eleven,.container .offset-by-twelve,.container .offset-by-thirteen,.container .offset-by-fourteen,.container .offset-by-fifteen{padding-left:0}}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:before,.clearfix:after,.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:46px;line-height:50px;margin:0 0 14px}h2{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:35px;line-height:40px;margin:0 0 10px}h3{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:34px;margin:0 0 8px}h4{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:21px;line-height:30px;margin:0 0 4px}h5{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:17px;line-height:24px}h6{color:#181818;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:14px;line-height:21px}.subheader{color:#777}p{margin:0 0 20px}p img{margin:0}.lead{font-size:21px;line-height:27px;color:#777}em{font-style:italic}strong{font-weight:700;color:#333}small{font-size:80%}blockquote,blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic}blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited,blockquote cite a:visited{color:#555}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0}a,a:visited{color:#333;text-decoration:underline}a:hover,a:focus{color:#000;text-decoration:none;outline:0}p a,p a:visited{line-height:inherit}ul,ol{margin:0 0 20px}ul{list-style:none outside}ol{list-style:decimal}ol,ul.square,ul.circle,ul.disc{margin:0 0 0 30px}ul.square{list-style:square outside}ul.circle{list-style:circle outside}ul.disc{list-style:disc outside}ul ul,ul ol,ol ol,ol ul{margin:4px 0 5px 30px;font-size:90%}li{line-height:18px;margin:0 0 12px}.large li{line-height:21px}li p{line-height:21px}.button,button,input[type=submit],input[type=reset],input[type=button]{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #aaa;border-top:1px solid #ccc;border-left:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#444;display:inline-block;font-size:11px;font-weight:700;text-decoration:none;text-shadow:0 1px rgba(255,255,255,.75);cursor:pointer;margin:0 0 20px;line-height:normal;padding:8px 10px;font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background-color:#ccc;background-color:rgba(153,153,153,.3);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(0,0,0,.3)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(0,0,0,.3));background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(0,0,0,.3));background-repeat:repeat-x;color:#222;border:1px solid #888;border-top:1px solid #aaa;border-left:1px solid #aaa}.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{background-color:#ccc;background-color:rgba(153,153,153,.2);background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.2)),to(rgba(0,0,0,.2)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(0,0,0,.2));background-image:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.2));background-repeat:repeat-x;border:1px solid #666}.button .full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{width:100%;padding-left:0;padding-right:0;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin:0 0 20px}fieldset{margin:0 0 20px}input[type=search],input[type=url]{-webkit-appearance:textfield;-moz-appearance:textfield}input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=number],input[type=tel],textarea,select{border:1px solid #ccc;padding:6px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#777;width:210px;max-width:100%;display:block;margin:0 0 20px;background:#fff}select{padding:0}input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus{border:1px solid #aaa;color:#444;outline:0;-moz-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(0,0,0,.2)}textarea{min-height:60px}label,legend{display:block;font-weight:700;font-size:13px}select{width:220px}input[type=checkbox]{display:inline}label span,legend span{font-weight:400;font-size:13px;color:#444}.scale-with-grid{max-width:100%;height:auto} \ No newline at end of file diff --git a/index.html b/index.html index 47cf571..df748c7 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ - + diff --git a/package.json b/package.json index 1380ba8..43a5b95 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "name": "Skeleton-SCSS", - "title": "Skeleton SCSS", - "description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", + "name": "Ribs", + "title": "Ribs", + "description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", "version": "1.0.2", - "homepage": "https://github.com/nickpack/Skeleton-SCSS", + "homepage": "https://github.com/nickpack/Ribs", "author": { "name": "Nick Pack", "email": "nick@nickpack.com", @@ -11,23 +11,23 @@ }, "repository": { "type": "git", - "url": "git@github.com:nickpack/Skeleton-SCSS.git" + "url": "git@github.com:nickpack/Ribs.git" }, "bugs": { - "url": "https://github.com/nickpack/Skeleton-SCSS/issues" + "url": "https://github.com/nickpack/Ribs/issues" }, "licenses": [ { "type": "MIT", - "url": "https://github.com/nickpack/Skeleton-SCSS/blob/master/LICENSE-MIT" + "url": "https://github.com/nickpack/Ribs/blob/master/LICENSE-MIT" } ], "scripts": { - "test": "grunt lint" + "test": "grunt test" }, "main": "./index", "keywords": [ - "static" + "static", "skeleton", "ribs" ], "devDependencies": { "grunt": "~0.4.1", diff --git a/scss/skeleton.scss b/scss/Ribs.scss similarity index 83% rename from scss/skeleton.scss rename to scss/Ribs.scss index ca44791..4a868dc 100644 --- a/scss/skeleton.scss +++ b/scss/Ribs.scss @@ -1,13 +1,11 @@ /* -* Skeleton SCSS V1.0.2 +* Ribs V1.0.2 * Skeleton is Copyright 2011, Dave Gamache * -* SCSS Conversion and Mixins by Nick Pack -* -* www.getskeleton.com +* Ribs is the evolution of Skeleton by Nick Pack * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 +* 28/05/2013 */ @import "_variables"; @@ -24,10 +22,6 @@ body { -ms-text-size-adjust: 100%; } -/* #Forms -================================================== */ - - @import "_grid"; @import "_typography"; @import "_links"; @@ -35,7 +29,7 @@ body { @import "_forms"; @import "_images"; -/* #Media Queries +/* #Example Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ diff --git a/scss/_grid.scss b/scss/_grid.scss index ff1c063..85b89e3 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -27,7 +27,7 @@ & .omega { margin-left: 10px; } } - .alpha, .omega { + .alpha-omega { margin-right: 0; margin-left: 0; } }