Skip to content

B
bootstrap
Commit 9553b1e3 authored by Mark Otto's avatar Mark Otto
Browse files
Options

update docs to include separate responsive css, update docs to highlight... 

update docs to include separate responsive css, update docs to highlight proper file name, updated makefile to build responsive separately
parent c3811999
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 253 deletions
Makefile
View file @ 9553b1e3
......@@ -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."; \
......
bootstrap-responsive.css 0 → 100644
View file @ 9553b1e3
.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: "&darr;";
}
.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); }
}
*/
bootstrap-responsive.min.css 0 → 100644
View file @ 9553b1e3
.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:"&darr;";} .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;}}
bootstrap.css
View file @ 9553b1e3
......@@ -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: "&darr;";
}
.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
bootstrap.min.css
View file @ 9553b1e3
......@@ -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:"&darr;";} .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;}}
docs/base-css.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/components.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/download.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/index.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/javascript.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/less.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/scaffolding.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......@@ -355,7 +356,7 @@
<div class="span5">
<p>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:</p>
<ol>
<li>Use the compiled responsive version, bootstrap.reponsive.css</li>
<li>Use the compiled responsive version, bootstrap-reponsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Modify and recompile responsive.less as a separate</li>
</ol>
......
docs/templates/layout.mustache
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
docs/templates/pages/scaffolding.mustache
View file @ 9553b1e3
......@@ -292,7 +292,7 @@
<div class="span5">
<p>{{_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}}</p>
<ol>
<li>{{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}</li>
<li>{{_i}}Use the compiled responsive version, bootstrap-reponsive.css{{/i}}</li>
<li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li>
</ol>
......
docs/upgrading.html
View file @ 9553b1e3
......@@ -14,6 +14,7 @@
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
<link href="../bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
......
lib/bootstrap.less
View file @ 9553b1e3
......@@ -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
lib/responsive.less
View file @ 9553b1e3
......@@ -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
// ------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment