diff --git a/css/responsiveboilerplate.css b/css/responsiveboilerplate.css index 748e1d5..9300b05 100644 --- a/css/responsiveboilerplate.css +++ b/css/responsiveboilerplate.css @@ -1,12 +1,7 @@ -/*!* ResponsiveBoilerplate v2.3.2 - 2013-12-27. -* Author: Fernando Monteiro - Licensed under MIT license. -*/ /*WARNING: Never change the CSS files. Use the respective LESS files, otherwise your work here will be cleaned on next Grunt.js build*/ - /* #Reset ================================================================================================= */ - html, body, div, @@ -88,14 +83,13 @@ time, mark, audio, video { - padding: 0; margin: 0; - font: inherit; + padding: 0; + border: 0; font-size: 100%; + font: inherit; vertical-align: baseline; - border: 0; } - article, aside, details, @@ -109,21 +103,17 @@ nav, section { display: block; } - body { line-height: 1; } - ol, ul { list-style: none; } - blockquote, q { quotes: none; } - blockquote:before, blockquote:after, q:before, @@ -131,92 +121,75 @@ q:after { content: ''; content: none; } - table { border-collapse: collapse; border-spacing: 0; } - /* ClearFix =============================================================================================== */ - .clearfix { *zoom: 1; } - .clearfix:before, .clearfix:after { display: table; - line-height: 0; content: ""; + line-height: 0; } - .clearfix:after { clear: both; } - /* Media - Fluid Images - Video ============================================================================================== */ - figure { margin: 0; } - img, object, embed, video { - _width: 100%; max-width: 100%; + _width: 100%; } - /* Fluid images */ - img { - height: auto; - vertical-align: middle; - border: 0; -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; + border: 0; -ms-interpolation-mode: bicubic; -} + vertical-align: middle; + /* Improve IE's resizing of images */ + height: auto; +} /* Correct IE9 overflow */ - svg:not(:root) { overflow: hidden; } - /* Avoid Google maps broken with max-width 100% */ - img[src*="maps.gstatic.com"], img[src*="googleapis.com"] { max-width: none; } - /* Links (No outline borders) ============================================================================================== */ - a:hover, a:active { outline: 0; } - /* Responsive Navigation Basic Style ===============================================================================================*/ - #menu { display: none; } - @media screen and (max-width: 768px) { #menu { display: block; - padding: 5px; + background: #dddddd; font-size: 1.35em; text-align: right; cursor: pointer; - background: #dddddd; + padding: 5px; } #menu span { margin-right: 10px; @@ -225,128 +198,152 @@ a:active { display: none; } #nav ul { - padding: 2%; margin: 0 auto; + padding: 2%; background-color: #dddddd; } #nav li { - display: block; width: 100%; + display: block; } } - /* Grid Columns ================================================================================================*/ - /*We strong recommend use the container tag one time only, just to center your grids on the page*/ - .container { padding-right: 20px; padding-left: 20px; *zoom: 1; } - .container:before, .container:after { display: table; - line-height: 0; content: ""; + line-height: 0; } - .container:after { clear: both; } - /* Fluid Default grid for 1024px screen resolution, grid based for 940px*/ - .content { width: 100%; *zoom: 1; } - .content:before, .content:after { display: table; - line-height: 0; content: ""; + line-height: 0; } - .content:after { clear: both; } - .content [class*="col"] { float: left; margin-left: 2.127659574468085%; *margin-left: 2.074468085106383%; + position: relative; } - .content [class*="col"]:first-child { margin-left: 0; } - .content .col12 { width: 100%; *width: 99.94680851063829%; } - .content .col11 { width: 91.48936170212765%; *width: 91.43617021276594%; } - .content .col10 { width: 82.97872340425532%; *width: 82.92553191489361%; } - .content .col9 { width: 74.46808510638297%; *width: 74.41489361702126%; } - .content .col8 { width: 65.95744680851064%; *width: 65.90425531914893%; } - .content .col7 { width: 57.44680851063829%; *width: 57.39361702127659%; } - .content .col6 { width: 48.93617021276595%; *width: 48.88297872340425%; } - .content .col5 { width: 40.42553191489362%; *width: 40.37234042553192%; } - .content .col4 { width: 31.914893617021278%; *width: 31.861702127659576%; } - .content .col3 { width: 23.404255319148934%; *width: 23.351063829787233%; } - .content .col2 { width: 14.893617021276595%; *width: 14.840425531914894%; } - .content .col1 { width: 6.382978723404255%; *width: 6.329787234042553%; } - +.content .push12 { + left: 100%; + *left: 99.94680851063829%; +} +.content .push11 { + left: 93.61702127659575%; + *left: 93.56382978723404%; +} +.content .push10 { + left: 85.1063829787234%; + *left: 85.0531914893617%; +} +.content .push9 { + left: 76.59574468085106%; + *left: 76.54255319148935%; +} +.content .push8 { + left: 68.08510638297872%; + *left: 68.03191489361701%; +} +.content .push7 { + left: 59.57446808510638%; + *left: 59.52127659574468%; +} +.content .push6 { + left: 51.06382978723404%; + *left: 51.01063829787234%; +} +.content .push5 { + left: 42.5531914893617%; + *left: 42.5%; +} +.content .push4 { + left: 34.04255319148936%; + *left: 33.98936170212766%; +} +.content .push3 { + left: 25.53191489361702%; + *left: 25.47872340425532%; +} +.content .push2 { + left: 17.02127659574468%; + *left: 16.96808510638298%; +} +.content .push1 { + left: 8.51063829787234%; + *left: 8.457446808510639%; +} /* Fluid grid to 1280px screen resolution, grid based for 1120px*/ - @media (min-width: 1200px) { .content { width: 100%; @@ -355,8 +352,8 @@ a:active { .content:before, .content:after { display: table; - line-height: 0; content: ""; + line-height: 0; } .content:after { clear: both; @@ -365,6 +362,7 @@ a:active { float: left; margin-left: 1.694915254237288%; *margin-left: 1.641723764875586%; + position: relative; } .content [class*="col"]:first-child { margin-left: 0; @@ -417,28 +415,74 @@ a:active { width: 6.779661016949152%; *width: 6.72646952758745%; } + .content .push12 { + left: 100%; + *left: 99.94680851063829%; + } + .content .push11 { + left: 93.22033898305085%; + *left: 93.16714749368914%; + } + .content .push10 { + left: 84.74576271186439%; + *left: 84.69257122250268%; + } + .content .push9 { + left: 76.27118644067795%; + *left: 76.21799495131624%; + } + .content .push8 { + left: 67.79661016949152%; + *left: 67.7434186801298%; + } + .content .push7 { + left: 59.32203389830509%; + *left: 59.268842408943385%; + } + .content .push6 { + left: 50.847457627118644%; + *left: 50.79426613775694%; + } + .content .push5 { + left: 42.37288135593219%; + *left: 42.31968986657049%; + } + .content .push4 { + left: 33.89830508474576%; + *left: 33.845113595384056%; + } + .content .push3 { + left: 25.423728813559322%; + *left: 25.37053732419762%; + } + .content .push2 { + left: 16.94915254237288%; + *left: 16.895961053011177%; + } + .content .push1 { + left: 8.47457627118644%; + *left: 8.421384781824738%; + } } - /* General small screen Mobile down size from 768px, display all columns in block ============================================================================================== */ - @media handheld, only screen and (max-width: 768px) { body { - font-size: 1.0; + font-size: 1.0em; -webkit-text-size-adjust: none; - -ms-text-size-adjust: none; + -ms-text-size-adjust: none; } .container { - padding-right: 10px; padding-left: 10px; + padding-right: 10px; } .content { width: 100%; } [class*="col"], .content [class*="col"] { - display: block; float: none; + display: block; width: 100%; margin-left: 0; } @@ -447,15 +491,10 @@ a:active { width: 100%; } } - /* Custom sizes ============================================================================================== */ - @media screen and (max-width: 400px) { - { - /* Helpers for windows phone 8 */ - - } + /* Helpers for windows phone 8 */ @-ms-viewport { width: device-width; } @@ -463,49 +502,26 @@ a:active { width: device-width; } } - @media screen and (max-width: 480px) { - { - /* Add your styles for devices with a maximum width of 480 */ - - } + /* Add your styles for devices with a maximum width of 480 */ } - @media screen and (max-width: 768px) { - { - /* Add your styles for devices with a maximum width of 768 */ - - } + /* Add your styles for devices with a maximum width of 768 */ } - @media screen and (max-width: 320px) { - { - /* Add your styles for devices with a maximum width of 320 */ - - } + /* Add your styles for devices with a maximum width of 320 */ } - @media screen and (max-width: 1024px) { - { - /* Add your styles for devices with a maximum width of 1024 */ - - } + /* Add your styles for devices with a maximum width of 1024 */ +} +@media screen and (min-width: 1200px) { + /* Add your styles for devices with a minimum width of 1200 */ } - /* iPads (landscape) ----------- */ - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { - { - /* Add your styles for devices with a maximum width of 1024 */ - - } + /* Add your styles for devices with a maximum width of 1024 */ } - /* iPads (portrait) ----------- */ - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { - { - /* Add your styles for devices with a maximum width of 768 */ - - } -} \ No newline at end of file + /* Add your styles for devices with a maximum width of 768 */ +} diff --git a/css/responsiveboilerplate.min.css b/css/responsiveboilerplate.min.css index ad5b397..8083ab0 100644 --- a/css/responsiveboilerplate.min.css +++ b/css/responsiveboilerplate.min.css @@ -1,4 +1 @@ -/*!* ResponsiveBoilerplate v2.3.2 - 2013-12-27. -* Author: Fernando Monteiro - Licensed under MIT license. -*/ -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{padding:0;margin:0;font:inherit;font-size:100%;vertical-align:baseline;border:0}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}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}figure{margin:0}img,object,embed,video{_width:100%;max-width:100%}img{height:auto;vertical-align:middle;border:0;-moz-box-sizing:border-box;box-sizing:border-box;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}img[src*="maps.gstatic.com"],img[src*="googleapis.com"]{max-width:none}a:hover,a:active{outline:0}#menu{display:none}@media screen and (max-width:768px){#menu{display:block;padding:5px;font-size:1.35em;text-align:right;cursor:pointer;background:#ddd}#menu span{margin-right:10px}#nav{display:none}#nav ul{padding:2%;margin:0 auto;background-color:#ddd}#nav li{display:block;width:100%}}.container{padding-right:20px;padding-left:20px;*zoom:1}.container:before,.container:after{display:table;line-height:0;content:""}.container:after{clear:both}.content{width:100%;*zoom:1}.content:before,.content:after{display:table;line-height:0;content:""}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.48936170212765%;*width:91.43617021276594%}.content .col10{width:82.97872340425532%;*width:82.92553191489361%}.content .col9{width:74.46808510638297%;*width:74.41489361702126%}.content .col8{width:65.95744680851064%;*width:65.90425531914893%}.content .col7{width:57.44680851063829%;*width:57.39361702127659%}.content .col6{width:48.93617021276595%;*width:48.88297872340425%}.content .col5{width:40.42553191489362%;*width:40.37234042553192%}.content .col4{width:31.914893617021278%;*width:31.861702127659576%}.content .col3{width:23.404255319148934%;*width:23.351063829787233%}.content .col2{width:14.893617021276595%;*width:14.840425531914894%}.content .col1{width:6.382978723404255%;*width:6.329787234042553%}@media(min-width:1200px){.content{width:100%;*zoom:1}.content:before,.content:after{display:table;line-height:0;content:""}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:1.694915254237288%;*margin-left:1.641723764875586%}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.52542372881356%;*width:91.47223223945186%}.content .col10{width:83.0508474576271%;*width:82.99765596826539%}.content .col9{width:74.57627118644066%;*width:74.52307969707896%}.content .col8{width:66.10169491525423%;*width:66.04850342589252%}.content .col7{width:57.6271186440678%;*width:57.5739271547061%}.content .col6{width:49.152542372881356%;*width:49.099350883519655%}.content .col5{width:40.677966101694906%;*width:40.624774612333205%}.content .col4{width:32.20338983050847%;*width:32.15019834114677%}.content .col3{width:23.728813559322035%;*width:23.675622069960333%}.content .col2{width:15.254237288135592%;*width:15.20104579877389%}.content .col1{width:6.779661016949152%;*width:6.72646952758745%}}@media handheld,only screen and (max-width:768px){body{font-size:1.0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}.container{padding-right:10px;padding-left:10px}.content{width:100%}[class*="col"],.content [class*="col"]{display:block;float:none;width:100%;margin-left:0}.col12,.content .col12{width:100%}}@media screen and (max-width:400px){{}@-ms-viewport{width:device-width}@viewport{width:device-width}}@media screen and (max-width:480px){{}}@media screen and (max-width:768px){{}}@media screen and (max-width:320px){{}}@media screen and (max-width:1024px){{}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){{}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){{}} \ 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}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}figure{margin:0}img,object,embed,video{max-width:100%;_width:100%}img{-moz-box-sizing:border-box;box-sizing:border-box;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;height:auto}svg:not(:root){overflow:hidden}img[src*="maps.gstatic.com"],img[src*="googleapis.com"]{max-width:none}a:hover,a:active{outline:0}#menu{display:none}@media screen and (max-width:768px){#menu{display:block;background:#ddd;font-size:1.35em;text-align:right;cursor:pointer;padding:5px}#menu span{margin-right:10px}#nav{display:none}#nav ul{margin:0 auto;padding:2%;background-color:#ddd}#nav li{width:100%;display:block}}.container{padding-right:20px;padding-left:20px;*zoom:1}.container:before,.container:after{display:table;content:"";line-height:0}.container:after{clear:both}.content{width:100%;*zoom:1}.content:before,.content:after{display:table;content:"";line-height:0}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;position:relative}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.48936170212765%;*width:91.43617021276594%}.content .col10{width:82.97872340425532%;*width:82.92553191489361%}.content .col9{width:74.46808510638297%;*width:74.41489361702126%}.content .col8{width:65.95744680851064%;*width:65.90425531914893%}.content .col7{width:57.44680851063829%;*width:57.39361702127659%}.content .col6{width:48.93617021276595%;*width:48.88297872340425%}.content .col5{width:40.42553191489362%;*width:40.37234042553192%}.content .col4{width:31.914893617021278%;*width:31.861702127659576%}.content .col3{width:23.404255319148934%;*width:23.351063829787233%}.content .col2{width:14.893617021276595%;*width:14.840425531914894%}.content .col1{width:6.382978723404255%;*width:6.329787234042553%}.content .push12{left:100%;*left:99.94680851063829%}.content .push11{left:93.61702127659575%;*left:93.56382978723404%}.content .push10{left:85.1063829787234%;*left:85.0531914893617%}.content .push9{left:76.59574468085106%;*left:76.54255319148935%}.content .push8{left:68.08510638297872%;*left:68.03191489361701%}.content .push7{left:59.57446808510638%;*left:59.52127659574468%}.content .push6{left:51.06382978723404%;*left:51.01063829787234%}.content .push5{left:42.5531914893617%;*left:42.5%}.content .push4{left:34.04255319148936%;*left:33.98936170212766%}.content .push3{left:25.53191489361702%;*left:25.47872340425532%}.content .push2{left:17.02127659574468%;*left:16.96808510638298%}.content .push1{left:8.51063829787234%;*left:8.457446808510639%}@media(min-width:1200px){.content{width:100%;*zoom:1}.content:before,.content:after{display:table;content:"";line-height:0}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:1.694915254237288%;*margin-left:1.641723764875586%;position:relative}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.52542372881356%;*width:91.47223223945186%}.content .col10{width:83.0508474576271%;*width:82.99765596826539%}.content .col9{width:74.57627118644066%;*width:74.52307969707896%}.content .col8{width:66.10169491525423%;*width:66.04850342589252%}.content .col7{width:57.6271186440678%;*width:57.5739271547061%}.content .col6{width:49.152542372881356%;*width:49.099350883519655%}.content .col5{width:40.677966101694906%;*width:40.624774612333205%}.content .col4{width:32.20338983050847%;*width:32.15019834114677%}.content .col3{width:23.728813559322035%;*width:23.675622069960333%}.content .col2{width:15.254237288135592%;*width:15.20104579877389%}.content .col1{width:6.779661016949152%;*width:6.72646952758745%}.content .push12{left:100%;*left:99.94680851063829%}.content .push11{left:93.22033898305085%;*left:93.16714749368914%}.content .push10{left:84.74576271186439%;*left:84.69257122250268%}.content .push9{left:76.27118644067795%;*left:76.21799495131624%}.content .push8{left:67.79661016949152%;*left:67.7434186801298%}.content .push7{left:59.32203389830509%;*left:59.268842408943385%}.content .push6{left:50.847457627118644%;*left:50.79426613775694%}.content .push5{left:42.37288135593219%;*left:42.31968986657049%}.content .push4{left:33.89830508474576%;*left:33.845113595384056%}.content .push3{left:25.423728813559322%;*left:25.37053732419762%}.content .push2{left:16.94915254237288%;*left:16.895961053011177%}.content .push1{left:8.47457627118644%;*left:8.421384781824738%}}@media handheld,only screen and (max-width:768px){body{font-size:1.0em;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}.container{padding-left:10px;padding-right:10px}.content{width:100%}[class*="col"],.content [class*="col"]{float:none;display:block;width:100%;margin-left:0}.col12,.content .col12{width:100%}}@media screen and (max-width:400px){@-ms-viewport{width:device-width}@viewport{width:device-width}} \ No newline at end of file diff --git a/less/gridColumns.less b/less/gridColumns.less index 9f0664c..07cb597 100644 --- a/less/gridColumns.less +++ b/less/gridColumns.less @@ -43,13 +43,30 @@ (~".col@{index}") { .createColumns(@index); } .columnsX(@index - 1); } + .pushX (@index) when (@index > 0) and (@index < @RbgridColumns) { + (~".push@{index}") { .pushColumns(@index); } + .pushX(@index - 1); + } + .pushX (12) { + .push12 { + left: (@RbfluidgridColumnWidth * 12) + (@RbfluidgridGutterWidth * 11); + *left: (@RbfluidgridColumnWidth * 12) + (@RbfluidgridGutterWidth * 11) - (.5 / @RbgridRowWidth * 100 * 1%) + } + } .columnsX (0) {} + .pushX (0) {} .createColumns (@columns) { width: (@RbfluidgridColumnWidth * @columns) + (@RbfluidgridGutterWidth * (@columns - 1)); *width: (@RbfluidgridColumnWidth * @columns) + (@RbfluidgridGutterWidth * (@columns - 1)) - (.5 / @RbgridRowWidth * 100 * 1%); } + + .pushColumns (@columns) { + left: (@RbfluidgridColumnWidth * @columns) + (@RbfluidgridGutterWidth * @columns); + *left: (@RbfluidgridColumnWidth * @columns) + (@RbfluidgridGutterWidth * @columns) - (.5 / @RbgridRowWidth * 100 * 1%); + } + .content { width: 100%; .clearfix(); @@ -57,12 +74,15 @@ float: left; margin-left: @RbfluidgridGutterWidth; *margin-left: @RbfluidgridGutterWidth - (.5 / @RbgridRowWidth * 100 * 1%); + position: relative; } [class*="col"]:first-child { margin-left: 0; } .columnsX (@RbgridColumns); + .pushX (12); + .pushX (@RbgridColumns - 1); } } diff --git a/less/mediaqueries.less b/less/mediaqueries.less index b52644b..77c8345 100644 --- a/less/mediaqueries.less +++ b/less/mediaqueries.less @@ -52,6 +52,9 @@ @media screen and (max-width: 1024px) { /* Add your styles for devices with a maximum width of 1024 */ } + @media screen and (min-width: 1200px) { + /* Add your styles for devices with a minimum width of 1200 */ + } /* iPads (landscape) ----------- */