diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ecd96d35..8b2b0eb4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -920,6 +920,11 @@ form.bs-docs-example { margin-top: 30px; margin-right: 0; } + + /* Space out the show-grid examples */ + .row-desktop.show-grid [class*="span"] { + margin-bottom: 5px; + } } /* Tablet to desktop @@ -1072,16 +1077,6 @@ form.bs-docs-example { border-top-width: 0px; padding: 0; } -<<<<<<< HEAD -======= - - /* Space out the show-grid examples */ - .row-desktop.show-grid [class*="span"] { - margin-bottom: 5px; - } -} - ->>>>>>> Added support for semifluid layouts /* Modal example */ .modal-example .modal { diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index d2f88b14..41afb868 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -38,6 +38,7 @@ +<<<<<<< HEAD

{{_i}}What's different?{{/i}}

@@ -48,6 +49,8 @@

{{_i}}Sometimes a button will pull to much attention to an action. In those cases, you can use action links instead.{{/i}}

{{_i}}Action links look distinctly different than normal links.{{/i}}

+
+

{{_i}}Iconic icons{{/i}}

{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}

@@ -61,6 +64,10 @@

{{_i}}Semi-fluid layout{{/i}}

{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}

+
+

{{_i}}Desktop rows{{/i}}

+

{{_i}}By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.{{/i}}

+
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index bbc58c84..e87c0300 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -482,6 +482,22 @@
  • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
  • + +

    {{_i}}Desktop rows{{/i}}

    +

    {{_i}}By default columns of a .row are show next to each other, however for phones the columns are show underneath each other. By adding the class .row-desktop to a row, + it will display the columns underneath each other for tablets as well.{{/i}}

    +

    {{_i}}Test case{{/i}}

    +

    {{_i}}Resize your browser to see the rows behave differently. They look the same for desktops and phones, but different for tablets.{{/i}}

    +
    +
    Normal row 1
    +
    Normal row 2
    +
    Normal row 3
    +
    +
    +
    Desktop row 1
    +
    Desktop row 2
    +
    Desktop row 3
    +
    diff --git a/less/jasny/responsive.less b/less/jasny/responsive.less index 3abd9df2..dc31c333 100644 --- a/less/jasny/responsive.less +++ b/less/jasny/responsive.less @@ -14,6 +14,7 @@ // Grid system and page structure @import "layouts-semifluid.responsive.less"; +@import "row-desktop.responsive.less"; // Base CSS @import "forms.responsive.less";