9

After reading the new (unfinished) Bootstrap 3 docs I am wondering how to create semantic mobile grid.

In short. How to convert this:

<div class="row">
  <div class="col col-lg-6 col-sm-6">6</div>
  <div class="col col-lg-6 col-sm-6">6</div>
</div>

To this and preserve the small mobile grid:

<div class="wrapper">
  <div class="left">6</div>
  <div class="right">6</div>
</div>

Less

.wrapper {  .make-row(); }
.left    { .make-column(6); // this creates only large grid }
.right   { .make-column(6); }
edsioufi
  • 8,297
  • 3
  • 36
  • 42
howtodothis
  • 1,265
  • 4
  • 17
  • 30

2 Answers2

11

PART 1: Rant

I hate bootstrappers using html div classes as a presentation layer to their HTML!!! I applaud you looking to program your site correctly.

It reminds me of the 90s and early 2000s when we were all building websites with tables... are we going backwards people?

<div class="col-6 col-lg-6 col-sm-6">6</div>
<div class="col-6 col-lg-6 col-sm-6">6</div>

vs

<table><tr><td>6</td><td>6</td></tr></table>

I'm waiting for the day that Google imposes penalties on non-semantic markup.

PART 2: Solution

Anyhow, pulling this back to the question...

For bootstrap 3, as far as I am aware, you cannot use .make-column(6) etc... as per Bass Jobsen's answer because you need to specify the size of the window / screen. lg / md / sm / xs

Here is how I would do it...

main.less

@import 'bootstrap.less';

.wrapper {
    .container;
    .make-row();
    .clearfix();
}

.content-main { // Change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}
.content-sidebar { // change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <style rel="stylesheet/less" src="less/main.less" />
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>

    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->   
</head>
<body>
    <div class="wrapper">
        <div class="content-main">
            <div class="page-title">
                <!-- Page Title Stuff -->
            </div>
            <div class="page-content">
                <!-- Page Content Stuff -->
            </div>
        </div>
        <div class="content-sidebar"><!-- Page Footer Stuff --></div>
    </div>  
</body>

Gravy
  • 12,264
  • 26
  • 124
  • 193
  • 3
    This answer uses the mixins provided by Bootstrap which is good. I would be wary of putting `.container` and `.make-row` on the same element though because they have different margins (auto margins for container, and negative margins of half the gutter size for rows). Therefore, your rows should be placed inside of any containers. – rmarscher Sep 18 '13 at 20:04
4

If i understand your question well i think you should use:


<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>

Where col-span-6 is your class for the large grid and col-small-span-6 for the small grid. If you leave col-small-span-6 your div will stack. The small grid don't use the col-span-* classes.

See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

So your html should be:

<div class="row">
  <div class="col-6 col-lg-6 col-sm-6">6</div>
  <div class="col-6 col-lg-6 col-sm-6">6</div>
</div>

LESS The latest version: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip doesn't contain a .make-small-column function any more. See also: https://github.com/twbs/bootstrap/pull/8302 .make-column() will add a media query for min-width: @grid-float-breakpoint so on the small grid your columns will stack always using this function.

You could try:

// Generate the small columns
.make-small-column(@columns) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @max : (@grid-float-breakpoint - 1 );
  // Calculate width based on number of columns available
  @media (max-width: @max) {
    width: percentage((@columns / @grid-columns));
  }
}

.wrapper {  .make-row(); }
.left    { .make-column(6); .make-small-column(6);}
.right   { .make-column(6); .make-small-column(6);}

UPDATE

The answer above will be based on the release candidates of Twitter's Bootstrap 3. The final version of Twitter's Bootstrap 3 has 4 grid extra small (xs), small (sm), medium (md) and large (lg). Also the Less code has been change according these grids. So use the .make-{x}-column mixins as described by @gravy in his answer: https://stackoverflow.com/a/18667955/1596547

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224