Commit c4481b54 authored by Mark Otto's avatar Mark Otto

improve CSS properties for centering content, the container, and fluid...

improve CSS properties for centering content, the container, and fluid container so as to not override properties where possible
parent 2589c0ac
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Fri Sep 2 15:07:03 PDT 2011 * Date: Fri Sep 2 20:59:16 PDT 2011
*/ */
/* Reset.less /* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
...@@ -182,7 +182,8 @@ textarea { ...@@ -182,7 +182,8 @@ textarea {
} }
.center-block { .center-block {
display: block; display: block;
margin: 0 auto; margin-left: auto;
margin-right: auto;
} }
.container { .container {
width: 940px; width: 940px;
...@@ -393,10 +394,12 @@ body { ...@@ -393,10 +394,12 @@ body {
} }
.container { .container {
width: 940px; width: 940px;
margin: 0 auto; margin-left: auto;
margin-right: auto;
} }
.container-fluid { .container-fluid {
padding: 0 20px; padding-left: 20px;
padding-right: 20px;
zoom: 1; zoom: 1;
margin-bottom: 18px; margin-bottom: 18px;
} }
......
...@@ -21,7 +21,7 @@ input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} ...@@ -21,7 +21,7 @@ input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;} textarea{overflow:auto;vertical-align:top;}
.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";} .clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;} .clearfix:after{clear:both;}
.center-block{display:block;margin:0 auto;} .center-block{display:block;margin-left:auto;margin-right:auto;}
.container{width:940px;margin:0 auto;zoom:1;margin-bottom:18px;}.container:before,.container:after{display:table;content:"";} .container{width:940px;margin:0 auto;zoom:1;margin-bottom:18px;}.container:before,.container:after{display:table;content:"";}
.container:after{clear:both;} .container:after{clear:both;}
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
...@@ -65,8 +65,8 @@ textarea{overflow:auto;vertical-align:top;} ...@@ -65,8 +65,8 @@ textarea{overflow:auto;vertical-align:top;}
.row .offset-two-thirds{margin-left:660px;} .row .offset-two-thirds{margin-left:660px;}
html,body{background-color:#fff;} html,body{background-color:#fff;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;}
.container{width:940px;margin:0 auto;} .container{width:940px;margin-left:auto;margin-right:auto;}
.container-fluid{padding:0 20px;zoom:1;margin-bottom:18px;}.container-fluid:before,.container-fluid:after{display:table;content:"";} .container-fluid{padding-left:20px;padding-right:20px;zoom:1;margin-bottom:18px;}.container-fluid:before,.container-fluid:after{display:table;content:"";}
.container-fluid:after{clear:both;} .container-fluid:after{clear:both;}
.container-fluid>.sidebar{float:left;width:220px;} .container-fluid>.sidebar{float:left;width:220px;}
.container-fluid>.content{min-width:700px;max-width:1180px;margin-left:240px;} .container-fluid>.content{min-width:700px;max-width:1180px;margin-left:240px;}
......
...@@ -70,7 +70,8 @@ ...@@ -70,7 +70,8 @@
// Center-align a block level element // Center-align a block level element
.center-block { .center-block {
display: block; display: block;
margin: 0 auto; margin-left: auto;
margin-right: auto;
} }
// Sizing shortcuts // Sizing shortcuts
......
...@@ -73,13 +73,15 @@ body { ...@@ -73,13 +73,15 @@ body {
// Container (centered, fixed-width layouts) // Container (centered, fixed-width layouts)
.container { .container {
width: 940px; width: @siteWidth;
margin: 0 auto; margin-left: auto;
margin-right: auto;
} }
// Fluid layouts (left aligned, with sidebar, min- & max-width content) // Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid { .container-fluid {
padding: 0 20px; padding-left: 20px;
padding-right: 20px;
.clearfix(); .clearfix();
> .sidebar { > .sidebar {
float: left; float: left;
......
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