diff --git a/Makefile b/Makefile index f4324e5665..612f77fdf5 100644 --- a/Makefile +++ b/Makefile @@ -2,6 +2,9 @@ VERSION=2.0.0 BOOTSTRAP = ./bootstrap.css BOOTSTRAP_MIN = ./bootstrap.min.css BOOTSTRAP_LESS = ./lib/bootstrap.less +BOOTSTRAP_RESPONSIVE = ./bootstrap-responsive.css +BOOTSTRAP_RESPONSIVE_MIN = ./bootstrap-responsive.min.css +BOOTSTRAP_RESPONSIVE_LESS = ./lib/responsive.less LESS_COMPRESSOR ?= `which lessc` UGLIFY_JS ?= `which uglifyjs` WATCHR ?= `which watchr` @@ -16,6 +19,10 @@ build: lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \ lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \ rm -f ${BOOTSTRAP_LESS}.tmp; \ + sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"`date`"'/' <${BOOTSTRAP_RESPONSIVE_LESS} >${BOOTSTRAP_RESPONSIVE_LESS}.tmp; \ + lessc ${BOOTSTRAP_RESPONSIVE_LESS}.tmp > ${BOOTSTRAP_RESPONSIVE}; \ + lessc ${BOOTSTRAP_RESPONSIVE_LESS}.tmp > ${BOOTSTRAP_RESPONSIVE_MIN} --compress; \ + rm -f ${BOOTSTRAP_RESPONSIVE_LESS}.tmp; \ echo "Bootstrap successfully built! - `date`"; \ else \ echo "You must have the LESS compiler installed in order to build Bootstrap."; \ diff --git a/bootstrap-responsive.css b/bootstrap-responsive.css new file mode 100644 index 0000000000..4a924da68d --- /dev/null +++ b/bootstrap-responsive.css @@ -0,0 +1,245 @@ +.hidden { + display: none; + visibility: hidden; +} +@media (max-width: 480px) { + .navbar .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .navbar .nav, .navbar .nav > li:last-child a { + -webkit-border-radius: 0 0 4px 0; + -moz-border-radius: 0 0 4px 0; + border-radius: 0 0 4px 0; + } + .navbar .nav > li { + float: none; + display: none; + } + .navbar .nav > li > a { + float: none; + background-color: #222; + } + .navbar .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .navbar .nav > .active > a { + background-color: transparent; + } + .navbar .nav > .active > a:hover { + background-color: #333; + } + .navbar .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; + content: "↓"; + } + .navbar .nav:hover > li { + display: block; + } + .navbar .nav:hover > li > a:hover { + background-color: #333; + } + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-left: 0; + } + .modal { + position: absolute; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } + .modal-header .close { + padding: 10px; + } +} +@media (max-width: 768px) { + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + .container { + width: auto; + padding: 0 20px; + } + .row { + margin-left: 0; + } + .row > [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} +@media (min-width: 768px) and (max-width: 940px) { + .container { + width: 748px; + } + .span1 { + width: 44px; + } + .span2 { + width: 108px; + } + .span3 { + width: 172px; + } + .span4 { + width: 236px; + } + .span5 { + width: 300px; + } + .span6 { + width: 364px; + } + .span7 { + width: 428px; + } + .span8 { + width: 492px; + } + .span9 { + width: 556px; + } + .span10 { + width: 620px; + } + .span11 { + width: 684px; + } + .span12 { + width: 748px; + } + .offset1 { + margin-left: 64px; + } + .offset2 { + margin-left: 128px; + } + .offset3 { + margin-left: 192px; + } + .offset4 { + margin-left: 256px; + } + .offset5 { + margin-left: 320px; + } + .offset6 { + margin-left: 384px; + } + .offset7 { + margin-left: 448px; + } + .offset8 { + margin-left: 512px; + } + .offset9 { + margin-left: 576px; + } + .offset10 { + margin-left: 640px; + } + .offset11 { + margin-left: 704px; + } + .offset12 { + margin-left: 768px; + } +} +/* +@media (min-width: 1210px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + .container { + width: @siteWidth; + } + .row { + margin-left: @gridGutterWidth * -1; + } + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} +*/ diff --git a/bootstrap-responsive.min.css b/bootstrap-responsive.min.css new file mode 100644 index 0000000000..5c45bd12b7 --- /dev/null +++ b/bootstrap-responsive.min.css @@ -0,0 +1,3 @@ + +.hidden{display:none;visibility:hidden;} +@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/bootstrap.css b/bootstrap.css index 85b515ecc3..d90ec91889 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Wed Jan 25 09:53:40 PST 2012 + * Date: Wed Jan 25 10:01:08 PST 2012 */ article, aside, @@ -3011,248 +3011,3 @@ a.thumbnail:hover { .invisible { visibility: hidden; } -.hidden { - display: none; - visibility: hidden; -} -@media (max-width: 480px) { - .navbar .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .navbar .nav, .navbar .nav > li:last-child a { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; - } - .navbar .nav > li { - float: none; - display: none; - } - .navbar .nav > li > a { - float: none; - background-color: #222; - } - .navbar .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .navbar .nav > .active > a { - background-color: transparent; - } - .navbar .nav > .active > a:hover { - background-color: #333; - } - .navbar .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - filter: alpha(opacity=100); - -moz-opacity: 1; - opacity: 1; - content: "↓"; - } - .navbar .nav:hover > li { - display: block; - } - .navbar .nav:hover > li > a:hover { - background-color: #333; - } - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .form-horizontal .controls { - margin-left: 0; - } - .form-horizontal .control-list { - padding-top: 0; - } - .form-horizontal .form-actions { - padding-left: 0; - } - .modal { - position: absolute; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } - .modal-header .close { - padding: 10px; - } -} -@media (max-width: 768px) { - .navbar-fixed { - position: absolute; - } - .navbar-fixed .nav { - float: none; - } - .container { - width: auto; - padding: 0 20px; - } - .row { - margin-left: 0; - } - .row > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } -} -@media (min-width: 768px) and (max-width: 940px) { - .container { - width: 748px; - } - .span1 { - width: 44px; - } - .span2 { - width: 108px; - } - .span3 { - width: 172px; - } - .span4 { - width: 236px; - } - .span5 { - width: 300px; - } - .span6 { - width: 364px; - } - .span7 { - width: 428px; - } - .span8 { - width: 492px; - } - .span9 { - width: 556px; - } - .span10 { - width: 620px; - } - .span11 { - width: 684px; - } - .span12 { - width: 748px; - } - .offset1 { - margin-left: 64px; - } - .offset2 { - margin-left: 128px; - } - .offset3 { - margin-left: 192px; - } - .offset4 { - margin-left: 256px; - } - .offset5 { - margin-left: 320px; - } - .offset6 { - margin-left: 384px; - } - .offset7 { - margin-left: 448px; - } - .offset8 { - margin-left: 512px; - } - .offset9 { - margin-left: 576px; - } - .offset10 { - margin-left: 640px; - } - .offset11 { - margin-left: 704px; - } - .offset12 { - margin-left: 768px; - } -} -/* -@media (min-width: 1210px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); - } - .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; - } - - .container { - width: @siteWidth; - } - .row { - margin-left: @gridGutterWidth * -1; - } - [class*="span"] { - margin-left: @gridGutterWidth; - } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - -} -*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index cd155d561d..01342ea849 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -540,5 +540,3 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .hide{display:none;} .show{display:block;} .invisible{visibility:hidden;} -.hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:absolute;top:20px;left:20px;right:20px;width:auto;margin:0;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/base-css.html b/docs/base-css.html index 6b6bd5c51a..7902434268 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -14,6 +14,7 @@ + diff --git a/docs/components.html b/docs/components.html index c1cec739cd..e527801838 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,6 +14,7 @@ + diff --git a/docs/download.html b/docs/download.html index 1d74c4f78b..7c03675196 100644 --- a/docs/download.html +++ b/docs/download.html @@ -14,6 +14,7 @@ + diff --git a/docs/index.html b/docs/index.html index 83e65c97e6..4e3ecd038c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,6 +14,7 @@ + diff --git a/docs/javascript.html b/docs/javascript.html index c6682660f8..9ef609138c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -14,6 +14,7 @@ + diff --git a/docs/less.html b/docs/less.html index e10c8899b0..1e6c48253e 100644 --- a/docs/less.html +++ b/docs/less.html @@ -14,6 +14,7 @@ + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 3a903cf573..7f2bbc09f3 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -14,6 +14,7 @@ + @@ -355,7 +356,7 @@

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

    -
  1. Use the compiled responsive version, bootstrap.reponsive.css
    2. +
  2. Use the compiled responsive version, bootstrap-reponsive.css
  3. Add @import "responsive.less" and recompile Bootstrap
  4. Modify and recompile responsive.less as a separate
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 1fec7788ef..0bcfaeb63a 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -14,6 +14,7 @@ + diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index aea8002ad0..a89f93d8e1 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -292,7 +292,7 @@

{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}

    -
  1. {{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
    2. +
  2. {{_i}}Use the compiled responsive version, bootstrap-reponsive.css{{/i}}
  3. {{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
  4. {{_i}}Modify and recompile responsive.less as a separate{{/i}}
diff --git a/docs/upgrading.html b/docs/upgrading.html index 75b8e7327b..33b4d939aa 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -14,6 +14,7 @@ + diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 67642d1c45..8d307d4271 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -57,6 +57,3 @@ // Utility classes @import "utilities.less"; // Has to be last to override when necessary - -// Responsive -@import "responsive.less"; \ No newline at end of file diff --git a/lib/responsive.less b/lib/responsive.less index 416a8da7b7..452116ea0d 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,6 +3,14 @@ // ------------------------------------------------------------- +// REPEAT VARIABLES & MIXINS +// ------------------------- +// Required since we compile the responsive stuff separately + +@import "variables.less"; // Modify this for custom colors, font-sizes, etc +@import "mixins.less"; + + // RESPONSIVE CLASSES // ------------------