From f03e170054be081738493c6dace4b37a7a3d40cd Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 14:08:03 -0800 Subject: [PATCH] scaffolding i18n --- docs/templates/pages/scaffolding.mustache | 134 +++++++++++----------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index c586af1b91..7c0c12e8f4 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,12 +1,12 @@
-

Scaffolding

-

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

+

{{_i}}Scaffolding{{/i}}

+

{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

@@ -16,7 +16,7 @@ ================================================== -->
-

Grid system 12 columns with a responsive twist

+

{{_i}}Grid system 12 columns with a responsive twist{{/i}}

Default 940px grid

@@ -53,8 +53,8 @@
-

The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

-

It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.

+

{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

+

{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}

@@ -65,7 +65,7 @@
-

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.

+

{{_i}}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.{{/i}}

@@ -84,20 +84,20 @@
-

Nesting columns

+

{{_i}}Nesting columns{{/i}}

-

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

-

Example

+

{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}

+

{{_i}}Example{{/i}}

- Level 1 of column + {{_i}}Level 1 of column{{/i}}
- Level 2 + {{_i}}Level 2{{/i}}
- Level 2 + {{_i}}Level 2{{/i}}
@@ -107,10 +107,10 @@ 
 <div class="row">
   <div class="span12">
-    Level 1 of column
+    {{_i}}Level 1 of column{{/i}}
     <div class="row">
-      <div class="span6">Level 2</div>
-      <div class="span6">Level 2</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
     </div>
   </div>
 </div>
@@ -118,50 +118,50 @@
-

Grid customization

+

{{_i}}Grid customization{{/i}}

- - - + + + - + - + - + - - + +
VariableDefault valueDescription{{_i}}Variable{{/i}}{{_i}}Default value{{/i}}{{_i}}Description{{/i}}
@gridColumns 12Number of columns{{_i}}Number of columns{{/i}}
@gridColumnWidth 60pxWidth of each column{{_i}}Width of each column{{/i}}
@gridGutterWidth 20pxNegative space between columns{{_i}}Negative space between columns{{/i}}
@siteWidthComputed sum of all columns and guttersCounts number of columns and gutters to set width of the .fixed-container() mixin{{_i}}Computed sum of all columns and gutters{{/i}}{{_i}}Counts number of columns and gutters to set width of the .fixed-container() mixin{{/i}}
-

Variables in LESS

-

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.

+

{{_i}}Variables in LESS{{/i}}

+

{{_i}}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.{{/i}}

-

How to customize

-

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.

+

{{_i}}How to customize{{/i}}

+

{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.{{/i}}

-

Staying responsive

-

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.

+

{{_i}}Staying responsive{{/i}}

+

{{_i}}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.{{/i}}

@@ -173,13 +173,13 @@ ================================================== -->
-

Layouts Basic templates to create webpages

+

{{_i}}Layouts Basic templates to create webpages{{/i}}

-

Fixed layout

-

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

+

{{_i}}Fixed layout{{/i}}

+

{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}

@@ -192,8 +192,8 @@
-

Fluid layout

-

<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

+

{{_i}}Fluid layout{{/i}}

+

{{_i}}<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}

@@ -221,7 +221,7 @@ ================================================== -->
-

Responsive design Media queries for various devices and resolutions

+

{{_i}}Responsive design Media queries for various devices and resolutions{{/i}}

@@ -229,42 +229,42 @@ Responsive devices
-

Supported devices

-

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:

+

{{_i}}Supported devices{{/i}}

+

{{_i}}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:{{/i}}

- - - - + + + + - + - + - + - + - + - + - + @@ -272,12 +272,12 @@
LabelLayout widthColumn widthGutter width{{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
Smartphones{{_i}}Smartphones{{/i}} 480px and belowFluid columns, no fixed widths{{_i}}Fluid columns, no fixed widths{{/i}}
Portrait tablets{{_i}}Portrait tablets{{/i}} 480px to 768pxFluid columns, no fixed widths{{_i}}Fluid columns, no fixed widths{{/i}}
Landscape tablets{{_i}}Landscape tablets{{/i}} 768px to 940px 44px 20px
Default{{_i}}Default{{/i}} 940px and up 60px 20px
Large display{{_i}}Large display{{/i}} 1210px and up 70px 30px
-

What they do

-

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

+

{{_i}}What they do{{/i}}

+

{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

    -
  • Modify the width of column in our grid
    • -
  • Stack elements instead of float wherever necessary
    • -
  • Resize headings and text to be more appropriate for devices
    • +
  • {{_i}}Modify the width of column in our grid{{/i}}
    • +
  • {{_i}}Stack elements instead of float wherever necessary{{/i}}
    • +
  • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
@@ -285,29 +285,29 @@
-

Using the media queries

+

{{_i}}Using the media queries{{/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}}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. Use the compiled responsive version, bootstrap.reponsive.css
    2. -
  2. Add @import "responsive.less" and recompile Bootstrap
    3. -
  3. Compile responsive.less as a separate file and include that
    4. +
  4. {{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
    5. +
  5. {{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
    6. +
  6. {{_i}}Compile responsive.less as a separate file and include that{{/i}}
-

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

+

{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}

-  // Landscape phones and down
+  // {{_i}}Landscape phones and down{{/i}}
   @media (max-width: 480px) { ... }
 
-  // Landscape phone to portrait tablet
+  // {{_i}}Landscape phone to portrait tablet{{/i}}
   @media (min-width: 480px) and (max-width: 768px) { ... }
 
-  // Portrait tablet to landscape and desktop
+  // {{_i}}Portrait tablet to landscape and desktop{{/i}}
   @media (min-width: 768px) and (max-width: 940px) { ... }
 
-  // Large desktop
+  // {{_i}}Large desktop{{/i}}
   @media (min-width: 1210px) { .. }