0

i would use the offset variable in a mixin of Twitter Bootstrap SASS but it's not seem to work .

#headSearch{
 @include makeColumn(6,2);

}

accordingly the TBS sass code base :

@mixin makeColumn($columns: 1, $offset: 0) {
  float: left;
  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

thanks

EDIT:

<div id="main">



 <!-- ______________________ CONTENT TOP REGION _______________________ -->
          <?php if (!empty($page['content_top'])): ?>
 <div class="rowZone">
 <section id="content-top"> <?php print render($page['content_top']); ?> </section><!-- /#content-top -->
          </div><!-- /rowZone -->
              <?php endif; ?>


   <!-- ______________________ ZONE DIAPO PANORAMIQUE _______________________ -->
               <?php if (!empty($page['DiapoHP'])): ?>
   <div class="rowZone">
       <section id="HPDiapo"><?php print render($page['DiapoHP']); ?></section>
       </div><!-- /rowZone -->
   <?php endif; ?>

<!-- ______________________ HOMEPAGE BAS _______________________ -->
<div class="rowZone">
<!-- ______________________ PARTIE BAS GAUCHE _______________________ -->

    <?php if (!empty($page['HPBasGauche'])): ?>

<section id="BasGaucheHP"> 
        <?php print render($page['HPBasGauche']); ?></section>

<?php endif; ?>

<!-- ______________________ PARTIE BAS DROITE _______________________ -->
    <?php if (!empty($page['HPBasDroit'])): ?>

<section id="BasDroitHP">
        <?php print render($page['HPBasDroit']); ?>
    </section><!-- /BasDroitHP --> 

<?php endif; ?>
    </div><!-- /rowZone -->
 </div> <!-- /mainPage -->

and the scss code :

@import "../bootstrap/lib/bootstrap.scss";
@import "../bootstrap/lib/responsive.scss";
#main{
  @include clearfix;
}
.rowZone{
  @extend .row-fluid; }
#HPDiapo{
  @include makeColumn(12);
  @include clearfix;
  padding:10px 0 0;
}
#content-top{
    @include makeColumn(12);
    @include clearfix;
   }
#BasGaucheHP{
      @include makeColumn(6);
      @include clearfix;
}
#BasDroitHP{
 @include makeColumn(6);
}

i understand i don't need the clearfix mixin alreadey include into the makeRow mixin i guess. the idea, in my mind, is to put columns into a row into a container,and each row stack themselves (idem on mobile). actually i don't know if i need to use fluid row for responsive design or fixed layout is enought. then, do my logical good ?

thanks

webmaster pf
  • 389
  • 1
  • 5
  • 23
  • Welcome to SO @webmaster. Could you provide a detailed explanation of your problem? *It's not seem to work* it isn't a proper explanation about what it is happening to you. Did you put `headSearch` inside a `row`? Could you provide us your HTML layout? – Pigueiras May 27 '13 at 16:13
  • i would to put the second block to the right with the offset option. `
    ...
    ...
    `     – webmaster pf May 28 '13 at 06:58
  • after restart server it seem to work good. But my layout doesn't adapt to screen size..do i use rowFluid instead row ? – webmaster pf May 28 '13 at 10:03
  • `@include makeRowFluid;` doesn't work...but the fluid way is the good one – webmaster pf May 28 '13 at 10:16
  • Take a look at my answer here: http://stackoverflow.com/questions/16511875/bootstrap-only-for-mixins-placeholders-with-semantic-classes/16512152#16512152. That behaviour is the expected behaviour using that mixins. – Pigueiras May 28 '13 at 23:40
  • great explanation in your post,but i don't understand why my code doesn't place row one after one, and no resize well on mobile.i post my code in the original post for more comprehensive. – webmaster pf May 29 '13 at 15:12
  • what do you think about use the makeRow mixin for the firsts columns and the @extend spanX ofr the lasts columns elements ? because only the firsts elements need clearfix.. – webmaster pf May 30 '13 at 08:14
  • I have to say that TB it's not thought for using mixins with that purpose. Be cautious with `@extend`, most of the times it will generate too much garbage and really long selectors. If you really want to have your own classes in your HTML, use two classes like `class=rowZone row`. I think there is nothing wrong with that. – Pigueiras May 30 '13 at 08:29

0 Answers0