docs/styleguide/scaffolding.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Scaffolding - SugarCRM Patterns and Styleguide</title>
   6     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   7     <meta name="apple-mobile-web-app-capable" content="yes">
   8     <meta name="apple-mobile-web-app-status-bar-style" content="black">
   9     <meta name="description" content="">
  10     <meta name="author" content="">
  11
  12     <!-- HTML5 shim, for IE6-8 support of HTML elements -->
  13     <!--[if lt IE 9]>
  14       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  15     <![endif]-->
  16
  17     <link href="../../themes/default/css/bootstrap.css" rel="stylesheet">
  18
  19     <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
  20     <link href="../../themes/default/images/sugar_icon.ico" rel="SHORTCUT ICON">
  21   </head>
  22   <body data-spy="scroll" data-target=".subnav" data-offset="60">
  23     <div class="navbar navbar-fixed-top">
  24       <div class="navbar-inner">
  25         <div class="container">
  26           <a class="cube" href="index.html" rel="tooltip" title="Dashboard"></a>
  27           <div class="nav-collapse">
  28             <ul class="nav">
  29               <li class="">
  30                 <a href="index.html">Overview</a>
  31               </li>
  32               <li class="active">
  33                 <a href="scaffolding.html">Scaffolding</a>
  34               </li>
  35               <li class="">
  36                 <a href="base-css.html">Base CSS</a>
  37               </li>
  38               <li class="">
  39                 <a href="components.html">Components</a>
  40               </li>
  41               <li class="">
  42                 <a href="widgets.html">Widgets</a>
  43               </li>
  44               <li class="">
  45                 <a href="less.html">Quick Styles</a>
  46               </li>
  47
  48             </ul>
  49           </div>
  50         </div>
  51       </div>
  52     </div>
  53     <div class="container">
  54       <header class="jumbotron subhead" id="overview">
  55         <h1>Scaffolding</h1>
  56         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
  57         <div class="subnav">
  58           <ul class="nav nav-pills">
  59             <li><a href="#grid-system">Grid system</a></li>
  60             <li><a href="#layouts">Layouts</a></li>
  61             <li><a href="#responsive">Responsive design</a></li>
  62           </ul>
  63         </div>
  64       </header>
  65       <section id="grid-system">
  66         <div class="page-header">
  67           <h1>Grid system <small>12 columns with a responsive twist</small></h1>
  68         </div>
  69         <h2>Default 940px grid</h2>
  70         <div class="row show-grid">
  71           <div class="span1">1</div>
  72           <div class="span1">1</div>
  73           <div class="span1">1</div>
  74           <div class="span1">1</div>
  75           <div class="span1">1</div>
  76           <div class="span1">1</div>
  77           <div class="span1">1</div>
  78           <div class="span1">1</div>
  79           <div class="span1">1</div>
  80           <div class="span1">1</div>
  81           <div class="span1">1</div>
  82           <div class="span1">1</div>
  83         </div>
  84         <div class="row show-grid">
  85           <div class="span4">4</div>
  86           <div class="span4">4</div>
  87           <div class="span4">4</div>
  88         </div>
  89         <div class="row show-grid">
  90           <div class="span4">4</div>
  91           <div class="span8">8</div>
  92         </div>
  93         <div class="row show-grid">
  94           <div class="span6">6</div>
  95           <div class="span6">6</div>
  96         </div>
  97         <div class="row show-grid">
  98           <div class="span12">12</div>
  99         </div>
 100         <div class="row">
 101           <div class="span4">
 102             <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
 103             <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
 104           </div>
 105           <div class="span4">
 106       <pre class="prettyprint linenums">
 107       &lt;div class="row"&gt;
 108         &lt;div class="span4"&gt;...&lt;/div&gt;
 109         &lt;div class="span8"&gt;...&lt;/div&gt;
 110       &lt;/div&gt;
 111       </pre>
 112           </div>
 113           <div class="span4">
 114             <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
 115           </div>
 116         </div><!-- /row -->
 117
 118         <br>
 119
 120         <h2>Offsetting columns</h2>
 121         <div class="row show-grid">
 122           <div class="span4">4</div>
 123           <div class="span4 offset4">4 offset 4</div>
 124         </div><!-- /row -->
 125         <div class="row show-grid">
 126           <div class="span3 offset3">3 offset 3</div>
 127           <div class="span3 offset3">3 offset 3</div>
 128         </div><!-- /row -->
 129         <div class="row show-grid">
 130           <div class="span8 offset4">8 offset 4</div>
 131         </div><!-- /row -->
 132       <pre class="prettyprint linenums">
 133       &lt;div class="row"&gt;
 134         &lt;div class="span4"&gt;...&lt;/div&gt;
 135         &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
 136       &lt;/div&gt;
 137       </pre>
 138
 139         <br>
 140
 141         <h2>Nesting columns</h2>
 142         <div class="row">
 143           <div class="span6">
 144             <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
 145             <h4>Example</h4>
 146             <div class="row show-grid">
 147               <div class="span6">
 148                vel 1 of column
 149                 <div class="row show-grid">
 150                   <div class="span3">
 151                    vel 2
 152                   </div>
 153                   <div class="span3">
 154                    vel 2
 155                   </div>
 156                 </div>
 157               </div>
 158             </div>
 159           </div>
 160           <div class="span6">
 161       <pre class="prettyprint linenums">
 162       &lt;div class="row"&gt;
 163         &lt;div class="span12"&gt;
 164          vel 1 of column
 165           &lt;div class="row"&gt;
 166             &lt;div class="span6"&gt;Level 2&lt;/div&gt;
 167             &lt;div class="span6"&gt;Level 2&lt;/div&gt;
 168           &lt;/div&gt;
 169         &lt;/div&gt;
 170       &lt;/div&gt;
 171       </pre>
 172           </div>
 173         </div>
 174
 175         <h2>Grid customization</h2>
 176         <table class="table table-bordered table-striped">
 177           <thead>
 178             <tr>
 179               <th>Variable</th>
 180               <th>Default value</th>
 181               <th>Description</th>
 182             </tr>
 183           </thead>
 184           <tbody>
 185             <tr>
 186               <td><code>@gridColumns</code></td>
 187               <td>12</td>
 188               <td>Number of columns</td>
 189             </tr>
 190             <tr>
 191               <td><code>@gridColumnWidth</code></td>
 192               <td>60px</td>
 193               <td>Width of each column</td>
 194             </tr>
 195             <tr>
 196               <td><code>@gridGutterWidth</code></td>
 197               <td>20px</td>
 198               <td>Negative space between columns</td>
 199             </tr>
 200             <tr>
 201               <td><code>@siteWidth</code></td>
 202               <td><em>Computed sum of all columns and gutters</em></td>
 203               <td>Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin</td>
 204             </tr>
 205           </tbody>
 206         </table>
 207         <div class="row">
 208           <div class="span4">
 209             <h3>Variables in LESS</h3>
 210             <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.</p>
 211           </div>
 212           <div class="span4">
 213             <h3>How to customize</h3>
 214             <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
 215           </div>
 216           <div class="span4">
 217             <h3>Staying responsive</h3>
 218             <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
 219           </div>
 220         </div><!-- /row -->
 221
 222       </section>
 223       <section id="layouts">
 224         <div class="page-header">
 225           <h1>Layouts <small>Basic templates to create webpages</small></h1>
 226         </div>
 227
 228         <div class="row">
 229           <div class="span6">
 230             <h2>Fixed layout</h2>
 231             <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
 232             <div class="minicon-layout">
 233               <div class="minicon-layout-body"></div>
 234             </div>
 235       <pre class="prettyprint linenums">
 236       &lt;body&gt;
 237         &lt;div class="container"&gt;
 238           ...
 239         &lt;/div&gt;
 240       &lt;/body&gt;
 241       </pre>
 242           </div><!-- /col -->
 243           <div class="span6">
 244             <h2>Fluid layout</h2>
 245             <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
 246             <div class="minicon-layout fluid">
 247               <div class="minicon-layout-sidebar"></div>
 248               <div class="minicon-layout-body"></div>
 249             </div>
 250       <pre class="prettyprint linenums">
 251       &lt;div class="container-fluid"&gt;
 252         &lt;div class="row-fluid"&gt;
 253           &lt;div class="span2"&gt;
 254             &lt;!--Sidebar content--&gt;
 255           &lt;/div&gt;
 256           &lt;div class="span10"&gt;
 257             &lt;!--Body content--&gt;
 258           &lt;/div&gt;
 259         &lt;/div&gt;
 260       &lt;/div&gt;
 261       </pre>
 262           </div><!-- /col -->
 263         </div><!-- /row -->
 264       </section>
 265       <section id="responsive">
 266         <div class="page-header">
 267           <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
 268         </div>
 269         <!-- Supported devices -->
 270         <div class="row">
 271           <div class="span4">
 272             <img src="img/responsive-illustrations.png" alt="Responsive devices">
 273           </div>
 274           <div class="span8">
 275             <h2>Supported devices</h2>
 276             <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
 277             <table class="table table-bordered table-striped">
 278               <thead>
 279                 <tr>
 280                   <th>Label</th>
 281                   <th>Layout width</th>
 282                   <th>Column width</th>
 283                   <th>Gutter width</th>
 284                 </tr>
 285               </thead>
 286               <tbody>
 287                 <tr>
 288                   <td>Smartphones</td>
 289                   <td>480px and below</td>
 290                   <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
 291                 </tr>
 292                 <tr>
 293                   <td>Portrait tablets</td>
 294                   <td>480px to 768px</td>
 295                   <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
 296                 </tr>
 297                 <tr>
 298                   <td>Landscape tablets</td>
 299                   <td>768px to 980px</td>
 300                   <td>44px</td>
 301                   <td>20px</td>
 302                 </tr>
 303                 <tr>
 304                   <td>Default</td>
 305                   <td>980px and up</td>
 306                   <td>60px</td>
 307                   <td>20px</td>
 308                 </tr>
 309                 <tr>
 310                   <td>Large display</td>
 311                   <td>1210px and up</td>
 312                   <td>70px</td>
 313                   <td>30px</td>
 314                 </tr>
 315               </tbody>
 316             </table>
 317
 318             <h3>What they do</h3>
 319             <p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
 320             <ul>
 321               <li>Modify the width of column in our grid</li>
 322               <li>Stack elements instead of float wherever necessary</li>
 323               <li>Resize headings and text to be more appropriate for devices</li>
 324             </ul>
 325           </div>
 326         </div>
 327
 328         <br>
 329
 330         <!-- Media query code -->
 331         <h2>Using the media queries</h2>
 332         <div class="row">
 333           <div class="span5">
 334             <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>
 335             <ol>
 336               <li>Use the compiled responsive version, bootstrap-responsive.css</li>
 337               <li>Add @import "responsive.less" and recompile Bootstrap</li>
 338               <li>Modify and recompile responsive.less as a separate</li>
 339             </ol>
 340             <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
 341           </div>
 342           <div class="span7">
 343             <pre class="prettyprint linenums">
 344               // Landscape phones and down
 345               @media (max-width: 480px) { ... }
 346
 347               // Landscape phone to portrait tablet
 348               @media (max-width: 768px) { ... }
 349
 350               // Portrait tablet to landscape and desktop
 351               @media (min-width: 768px) and (max-width: 980px) { ... }
 352
 353               // Large desktop
 354               @media (min-width: 1200px) { .. }
 355             </pre>
 356           </div>
 357         </div>
 358       </section>
 359     </div>
 360
 361     <script src="../../cache/include/javascript/sugar_grp1_jquery.js"></script>
 362     <script src="js/google-code-prettify/prettify.js"></script>
 363     <script src="js/application.js"></script>
 364
 365   </body>
 366 </html>