Étiquette : grille

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

19/02/2019 / admin

        <div id="pageStickyHeader" class="row page-StickyHeader">
          <div class="col-lg-2">
            <img src="image/logoCALL-new.jpg" alt="" class="img-responsive" />
          </div>
          <div class="col-lg-8">
            <form class="form-inline">
              <label for="input-id" class="sr-only">Rechercher un produit</label>
              <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="Rechercher un produit">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>
            </form>
          </div>
          <div class="col-lg-2">Favoris | Panier</div>
        </div>

</div>

<label for="input-id" class="sr-only">Rechercher un produit</label>

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>

</form>

</div>

<div class="col-lg-2">Favoris | Panier</div>

</div>

  // Partie sticky du bandeau
  let $pageStickyHeader = $('#pageStickyHeader');
  let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

  $pageStickyHeader
    .affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('#pageFooter').outerHeight(true))
        }
      }
    })
    .on('affix.bs.affix', function() {
      $(this).css('width', $pageStickyHeaderWidth);
    })
    .on('affix-top.bs.affix', function() {
      $(this).removeAttr('style');
    });
    // Fin: Partie sticky du bandeau

// Partie sticky du bandeau

let $pageStickyHeader = $('#pageStickyHeader');

let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

$pageStickyHeader

.affix({

offset: {

top: 100,

bottom: function () {

return (this.bottom = $('#pageFooter').outerHeight(true))

}

})

.on('affix.bs.affix', function() {

$(this).css('width', $pageStickyHeaderWidth);

})

.on('affix-top.bs.affix', function() {

$(this).removeAttr('style');

});

// Fin: Partie sticky du bandeau

.page-StickyHeader.affix {
  top: 0px;
  z-index: 100;
  background: #fff;
}

.page-StickyHeader.affix {

top: 0px;

z-index: 100;

background: #fff;

}

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

30/10/2017 / admin

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

  .footer {
    padding: $global-padding 0;
    @include flex-grid-row(
      $gutters: 0);

    &-column {
      @include flex-grid-size(
        $columns:  22.22222%);
      &:last-child {
        @include flex-grid-size(
          $columns: 33.33333%);
      }    
    }
  }

.footer {

padding: $global-padding 0;

@include flex-grid-row(

$gutters: 0);

&-column {

@include flex-grid-size(

$columns: 22.22222%);

&:last-child {

@include flex-grid-size(

$columns: 33.33333%);

}

Une rangée basée sur 8 colonnes

.row-8 {
  @include flex-grid-row($columns: 8);
  .column {
    @include flex-grid-column($columns: 1/8);
    &.large-6 {
      @include flex-grid-column($columns: 6/8);
    }
  }
  .columns {
    @extend .column;
  }
}

.row-8 {

@include flex-grid-row($columns: 8);

.column {

@include flex-grid-column($columns: 1/8);

&.large-6 {

@include flex-grid-column($columns: 6/8);

}

.columns {

@extend .column;

}

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

19/08/2016 / admin

Demo en live sur jsFiddle.net.

Fichier global-vars.js :

// Breakpoints
	// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/
	// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss
	// $screen-xs: 320px;
	// $screen-sm: 768px;
	// $screen-md: 1025px;
	// $screen-lg: 1225px;
	var bs_screen_sm_min = '768'; // tablet starts @768px
		bs_screen_md_min = '1025'; // desktop starts @1025px
		bs_screen_lg_min = '1225'; // large desktop starts @1225px
		bs_screen_xs_max = bs_screen_sm_min - 1; // 767px
		bs_screen_sm_max = bs_screen_md_min - 1; // 1024px
		bs_screen_md_max = bs_screen_lg_min - 1; // 1224px
  
	// enquire JS breakpoints
		bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';
		bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';
		bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';
		bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';
		bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';
		bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

// Breakpoints

// Usage: https://jsfiddle.net/frontenddeveloper/7k5hm834/4/

// Relative to Bootstrap 3 grid component, see /bootstrap/_variables.scss

// $screen-xs: 320px;

// $screen-sm: 768px;

// $screen-md: 1025px;

// $screen-lg: 1225px;

var bs_screen_sm_min = '768'; // tablet starts @768px

bs_screen_md_min = '1025'; // desktop starts @1025px

bs_screen_lg_min = '1225'; // large desktop starts @1225px

bs_screen_xs_max = bs_screen_sm_min - 1; // 767px

bs_screen_sm_max = bs_screen_md_min - 1; // 1024px

bs_screen_md_max = bs_screen_lg_min - 1; // 1224px

// enquire JS breakpoints

bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)';

bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)';

bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)';

bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)';

bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)';

bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)';

Fichier global-mediaqueries.js :

+ function($){
  'use strict';

  $(document).ready(function(){
    // enquire JS
    enquire.register(bpMobile, {
      match : function() {
       // console.log('bpMobile');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmartphone, {
      match : function() {
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        // console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpSmallDesktop, {
      match : function() {
        // console.log('bpSmallDesktop');
      },
      unmatch : function() {}
    });

    enquire.register(bpLargeDesktop, {
      match : function() {
        // console.log('bpLargeDesktop');
      },
      unmatch : function() {}
    });
  });
  
}(jQuery);

+ function($){

'use strict';

$(document).ready(function(){

// enquire JS

enquire.register(bpMobile, {

match : function() {

// console.log('bpMobile');

unmatch : function() {}

});

enquire.register(bpSmartphone, {

match : function() {

// console.log('bpSmartphone');

unmatch : function() {}

});

enquire.register(bpTablet, {

match : function() {

// console.log('bpTablet');

unmatch : function() {}

});

enquire.register(bpDesktop, {

match : function() {

// console.log('bpDesktop');

unmatch : function() {}

});

enquire.register(bpSmallDesktop, {

match : function() {

// console.log('bpSmallDesktop');

unmatch : function() {}

});

enquire.register(bpLargeDesktop, {

match : function() {

// console.log('bpLargeDesktop');

unmatch : function() {}

});

}(jQuery);

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

13/07/2016 / admin

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

bootstrap/mixins/grid-framework.scss
bootstrap/mixins/grid.scss
bootstrap/variables.scss
bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";

}

#{$list} {

position: relative;

// Prevent columns from collapsing when empty

min-height: 1px;

// Inner gutter via padding

padding-left: ceil(($grid-gutter-width / 2));

padding-right: floor(($grid-gutter-width / 2));

}

// [converter] This is defined recursively in LESS, but Sass supports real loops

@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {

@for $i from (1 + 1) through $grid-columns {

$list: "#{$list}, .col-#{$class}-#{$i}";

}

#{$list} {

float: left;

}

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

// Generate the extra large columns
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-xl-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-offset($columns) {
  @media (min-width: $screen-xl-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-push($columns) {
  @media (min-width: $screen-xl-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xl-column-pull($columns) {
  @media (min-width: $screen-xl-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the extra large columns

@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {

position: relative;

min-height: 1px;

padding-left: ($gutter / 2);

padding-right: ($gutter / 2);

@media (min-width: $screen-xl-min) {

float: left;

width: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-offset($columns) {

@media (min-width: $screen-xl-min) {

margin-left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-push($columns) {

@media (min-width: $screen-xl-min) {

left: percentage(($columns / $grid-columns));

}

@mixin make-xl-column-pull($columns) {

@media (min-width: $screen-xl-min) {

right: percentage(($columns / $grid-columns));

}

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop
//** Deprecated `$screen-xl` as of v3.0.1
$screen-xl:                  1600px !default;
$screen-xl-min:              $screen-xl !default;
//** Deprecated `$screen-xl-desktop` as of v3.0.1
$screen-xl-desktop:          $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-lg-max:              ($screen-xl-min - 1) !default;

//== Media queries breakpoints

//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra Large screen / wide desktop

//** Deprecated `$screen-xl` as of v3.0.1

$screen-xl: 1600px !default;

$screen-xl-min: $screen-xl !default;

//** Deprecated `$screen-xl-desktop` as of v3.0.1

$screen-xl-desktop: $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum

$screen-lg-max: ($screen-xl-min - 1) !default;

Rajouter les Container sizes :

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop
$container-extralarge-desktop:      (1600px) !default;
//** For `$screen-lg-min` and up.
$container-xl:                 $container-extralarge-desktop !default;

//== Container sizes

//## Define the maximum width of `.container` for different screen sizes.

// Extra Large screen / wide desktop

$container-extralarge-desktop: (1600px) !default;

//** For `$screen-lg-min` and up.

$container-xl: $container-extralarge-desktop !default;

grid.scss

Rajouter un Container widths pour le breakpoint xl :

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @media (min-width: $screen-xl-min) {
    width: $container-xl;
  }  
}

// Container widths

// Set the container width, and override it for fixed navbars in media queries.

.container {

@media (min-width: $screen-xl-min) {

width: $container-xl;

}

En toute fin de fichier, rajouter un Extra Large grid :

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(xl);
}

// Extra Large grid

// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-xl-min) {

@include make-grid(xl);

}

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

06/01/2016 / admin

Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

$grid-columns: 5;

@include make-grid(xs);

$grid-columns: 12;

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{
    position: relative;
    min-height: 1px;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    float: left;
}

@include make-grid(five-xs);

// Small grid
@media (min-width: $screen-sm-min) {
  @include make-grid(five-sm);
}

// Medium grid
@media (min-width: $screen-md-min) {
  @include make-grid(five-md);
}

// Large grid
@media (min-width: $screen-lg-min) {
  @include make-grid(five-lg);
}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

$grid-columns: 5; // on définit la valeur de $grid-columns à 5 pour 5 colonnes par rangées

[class*="col-five-"],[class^="col-five-"]{

position: relative;

min-height: 1px;

padding-left: $grid-gutter-width / 2;

padding-right: $grid-gutter-width / 2;

float: left;

}

@include make-grid(five-xs);

// Small grid

@media (min-width: $screen-sm-min) {

@include make-grid(five-sm);

}

// Medium grid

@media (min-width: $screen-md-min) {

@include make-grid(five-md);

}

// Large grid

@media (min-width: $screen-lg-min) {

@include make-grid(five-lg);

}

$grid-columns: 12; // suite à la génération de nos nouvelles classes, on réinitialise immédiatement la valeur de $grid-columns à 12 (ou 12 est la valeur par défaut dans _variables.scss de bootstrap)

[Bootstrap] Centrer horizontalement des colonnes de la grille dans un design responsive à l’aide de CSS

04/06/2015 / admin

Honteusement pompé de Bootstrap 3 responsive centered columns. Demo en ligne (toujours sur le site de l’auteur original) : Demo.

Une solution simple à mettre en place pour centrer horizontalement des colonnes multiples dans Bootstrap 3 (également valable pour supports mobile).

Ze problème

Il peut arriver que vous souhaitiez centrer horizontalement des colonnes Bootstrap, en général lorsque le nombre de ces dernières est impair, ou lorsque vous leur assignez une max-width et qu’elles ne remplissent pas la rangée row qui les contient.

Ze solution

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>

</div>

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

/* centered columns styles */

.row-centered {

text-align:center;

}

.col-centered {

display:inline-block;

float:none;

/* reset the text-align */

text-align:left;

/* inline-block space fix */

margin-right:-4px;

}

Vous pouvez aussi assigner une min-width, une max-width ou une largeur fixe aux colonnes.

.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

.col-fixed {

/* custom width */

width:320px;

}

.col-min {

/* custom min width */

min-width:320px;

}

.col-max {

/* custom max width */

max-width:320px;

}

[Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).

01/06/2015 / admin

Source : Introduces a new break point ‘xs1’ at 480px.

Utilisation :

Vous obtenez une batterie de nouvelles classes nommées d’après le modèle Bootstrap col-xs1-1, col-xs1-2, col-xs1-3, etc.. qui vous permettront de cibler les périphériques mobiles type smartphones en orientation paysage.

<div class="row">
    <div class="col-xs1-6 col-sm-3">box 1 content</div>
    <div class="col-xs1-6 col-sm-3">box 2 content</div>
    <div class="col-xs1-6 col-sm-3">box 3 content</div>
    <div class="col-xs1-6 col-sm-3">box 4 content</div>
</div>

<div class="col-xs1-6 col-sm-3">box 1 content</div>

<div class="col-xs1-6 col-sm-3">box 2 content</div>

<div class="col-xs1-6 col-sm-3">box 3 content</div>

<div class="col-xs1-6 col-sm-3">box 4 content</div>

</div>

Ces boîtes s’organiseront en mode 1×4 on 0 > 479px, 2×2 on 480 > 767px, 4×1 on 767 > *px.

Mise en place :

Dans la CSS Bootstrap, intercaler entre les styles définis pour les classes .col-xs- et .col-sm- :

/* https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision */

/*
This is compiled from the https://github.com/donquixote/bootstrap/tree/xs-AB-subdivision branch, which introduces a new break point 'xs1' at 480px.
See :
  * https://github.com/twbs/bootstrap/pull/12893
  * https://github.com/twbs/bootstrap/issues/10203#issuecomment-36443874
*/

.col-xs-1-1, .col-xs-1-2, .col-xs-1-3, .col-xs-1-4, .col-xs-1-5, .col-xs-1-6, .col-xs-1-7, .col-xs-1-8, .col-xs-1-9, .col-xs-1-10, .col-xs-1-11, .col-xs-1-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 480px) {
  .col-xs-1-1, .col-xs-1-2, .col-xs-1-3, .col-xs-1-4, .col-xs-1-5, .col-xs-1-6, .col-xs-1-7, .col-xs-1-8, .col-xs-1-9, .col-xs-1-10, .col-xs-1-11, .col-xs-1-12 {
    float: left;
  }
  .col-xs-1-12 {
    width: 100%;
  }
  .col-xs-1-11 {
    width: 91.66666667%;
  }
  .col-xs-1-10 {
    width: 83.33333333%;
  }
  .col-xs-1-9 {
    width: 75%;
  }
  .col-xs-1-8 {
    width: 66.66666667%;
  }
  .col-xs-1-7 {
    width: 58.33333333%;
  }
  .col-xs-1-6 {
    width: 50%;
  }
  .col-xs-1-5 {
    width: 41.66666667%;
  }
  .col-xs-1-4 {
    width: 33.33333333%;
  }
  .col-xs-1-3 {
    width: 25%;
  }
  .col-xs-1-2 {
    width: 16.66666667%;
  }
  .col-xs-1-1 {
    width: 8.33333333%;
  }
  .col-xs-1-pull-12 {
    right: 100%;
  }
  .col-xs-1-pull-11 {
    right: 91.66666667%;
  }
  .col-xs-1-pull-10 {
    right: 83.33333333%;
  }
  .col-xs-1-pull-9 {
    right: 75%;
  }
  .col-xs-1-pull-8 {
    right: 66.66666667%;
  }
  .col-xs-1-pull-7 {
    right: 58.33333333%;
  }
  .col-xs-1-pull-6 {
    right: 50%;
  }
  .col-xs-1-pull-5 {
    right: 41.66666667%;
  }
  .col-xs-1-pull-4 {
    right: 33.33333333%;
  }
  .col-xs-1-pull-3 {
    right: 25%;
  }
  .col-xs-1-pull-2 {
    right: 16.66666667%;
  }
  .col-xs-1-pull-1 {
    right: 8.33333333%;
  }
  .col-xs-1-pull-0 {
    right: 0%;
  }
  .col-xs-1-push-12 {
    left: 100%;
  }
  .col-xs-1-push-11 {
    left: 91.66666667%;
  }
  .col-xs-1-push-10 {
    left: 83.33333333%;
  }
  .col-xs-1-push-9 {
    left: 75%;
  }
  .col-xs-1-push-8 {
    left: 66.66666667%;
  }
  .col-xs-1-push-7 {
    left: 58.33333333%;
  }
  .col-xs-1-push-6 {
    left: 50%;
  }
  .col-xs-1-push-5 {
    left: 41.66666667%;
  }
  .col-xs-1-push-4 {
    left: 33.33333333%;
  }
  .col-xs-1-push-3 {
    left: 25%;
  }
  .col-xs-1-push-2 {
    left: 16.66666667%;
  }
  .col-xs-1-push-1 {
    left: 8.33333333%;
  }
  .col-xs-1-push-0 {
    left: 0%;
  }
  .col-xs-1-offset-12 {
    margin-left: 100%;
  }
  .col-xs-1-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xs-1-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xs-1-offset-9 {
    margin-left: 75%;
  }
  .col-xs-1-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xs-1-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xs-1-offset-6 {
    margin-left: 50%;
  }
  .col-xs-1-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xs-1-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xs-1-offset-3 {
    margin-left: 25%;
  }
  .col-xs-1-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xs-1-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xs-1-offset-0 {
    margin-left: 0%;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

/* https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision */

This is compiled from the https://github.com/donquixote/bootstrap/tree/xs-AB-subdivision branch, which introduces a new break point 'xs1' at 480px.

See :

* https://github.com/twbs/bootstrap/pull/12893

* https://github.com/twbs/bootstrap/issues/10203#issuecomment-36443874

.col-xs-1-1, .col-xs-1-2, .col-xs-1-3, .col-xs-1-4, .col-xs-1-5, .col-xs-1-6, .col-xs-1-7, .col-xs-1-8, .col-xs-1-9, .col-xs-1-10, .col-xs-1-11, .col-xs-1-12 {

position: relative;

min-height: 1px;

padding-left: 15px;

padding-right: 15px;

}

@media (min-width: 480px) {

.col-xs-1-1, .col-xs-1-2, .col-xs-1-3, .col-xs-1-4, .col-xs-1-5, .col-xs-1-6, .col-xs-1-7, .col-xs-1-8, .col-xs-1-9, .col-xs-1-10, .col-xs-1-11, .col-xs-1-12 {

float: left;

}

.col-xs-1-12 {

width: 100%;

}

.col-xs-1-11 {

width: 91.66666667%;

}

.col-xs-1-10 {

width: 83.33333333%;

}

.col-xs-1-9 {

width: 75%;

}

.col-xs-1-8 {

width: 66.66666667%;

}

.col-xs-1-7 {

width: 58.33333333%;

}

.col-xs-1-6 {

width: 50%;

}

.col-xs-1-5 {

width: 41.66666667%;

}

.col-xs-1-4 {

width: 33.33333333%;

}

.col-xs-1-3 {

width: 25%;

}

.col-xs-1-2 {

width: 16.66666667%;

}

.col-xs-1-1 {

width: 8.33333333%;

}

.col-xs-1-pull-12 {

right: 100%;

}

.col-xs-1-pull-11 {

right: 91.66666667%;

}

.col-xs-1-pull-10 {

right: 83.33333333%;

}

.col-xs-1-pull-9 {

right: 75%;

}

.col-xs-1-pull-8 {

right: 66.66666667%;

}

.col-xs-1-pull-7 {

right: 58.33333333%;

}

.col-xs-1-pull-6 {

right: 50%;

}

.col-xs-1-pull-5 {

right: 41.66666667%;

}

.col-xs-1-pull-4 {

right: 33.33333333%;

}

.col-xs-1-pull-3 {

right: 25%;

}

.col-xs-1-pull-2 {

right: 16.66666667%;

}

.col-xs-1-pull-1 {

right: 8.33333333%;

}

.col-xs-1-pull-0 {

right: 0%;

}

.col-xs-1-push-12 {

left: 100%;

}

.col-xs-1-push-11 {

left: 91.66666667%;

}

.col-xs-1-push-10 {

left: 83.33333333%;

}

.col-xs-1-push-9 {

left: 75%;

}

.col-xs-1-push-8 {

left: 66.66666667%;

}

.col-xs-1-push-7 {

left: 58.33333333%;

}

.col-xs-1-push-6 {

left: 50%;

}

.col-xs-1-push-5 {

left: 41.66666667%;

}

.col-xs-1-push-4 {

left: 33.33333333%;

}

.col-xs-1-push-3 {

left: 25%;

}

.col-xs-1-push-2 {

left: 16.66666667%;

}

.col-xs-1-push-1 {

left: 8.33333333%;

}

.col-xs-1-push-0 {

left: 0%;

}

.col-xs-1-offset-12 {

margin-left: 100%;

}

.col-xs-1-offset-11 {

margin-left: 91.66666667%;

}

.col-xs-1-offset-10 {

margin-left: 83.33333333%;

}

.col-xs-1-offset-9 {

margin-left: 75%;

}

.col-xs-1-offset-8 {

margin-left: 66.66666667%;

}

.col-xs-1-offset-7 {

margin-left: 58.33333333%;

}

.col-xs-1-offset-6 {

margin-left: 50%;

}

.col-xs-1-offset-5 {

margin-left: 41.66666667%;

}

.col-xs-1-offset-4 {

margin-left: 33.33333333%;

}

.col-xs-1-offset-3 {

margin-left: 25%;

}

.col-xs-1-offset-2 {

margin-left: 16.66666667%;

}

.col-xs-1-offset-1 {

margin-left: 8.33333333%;

}

.col-xs-1-offset-0 {

margin-left: 0%;

}

Intercaler entre .hidden-xs et .hidden-sm :

@media (max-width: 479px) {
  .hidden-xs, /* because .hidden-xs-1 class is unknown to Bootstrap JS (dropdown component, at least...) */
  .hidden-xs-1 {
    display: none !important;
  }
}

@media (max-width: 479px) {

.hidden-xs, /* because .hidden-xs-1 class is unknown to Bootstrap JS (dropdown component, at least...) */

.hidden-xs-1 {

display: none !important;

}

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

17/02/2015 / admin

Exemple de solution mise en place : http://www.despetitshauts.com/fr/t-shirtsm-courtes-25.html.

Tentative en exploitant la fonction `outerHeight` de jQuery

La solution ci-dessous semble fonctionner 🙂

Simulation : http://jsfiddle.net/frontenddeveloper/2s0s1eag/29/.
Même chose mais à partir de Bootstrap : http://jsfiddle.net/frontenddeveloper/51xxem3p/6/.

Tentative avec la propriété `columns` de CSS3

Simulation : http://jsfiddle.net/frontenddeveloper/5doayaa5/5/.

Pour :

On conserve un markup HTML cohérent (les éléments de la liste sont déclarés dans un ordre logique d’apparition)
On ne surcharge pas le serveur par l’emploi de JavaScript

Contre :

Pas compatible à partir d’IE9 (<a href="http://caniuse.com/#search=columns">columns</a>) (voir pour l’existence d’un polyfill qui gère les contraintes responsive)
Le contenu n’est pas ordonné de gauche à droite (rangée après rangée), mais de haut en bas (colonne après colonne)
Pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page, notamment en responsive
Comportement responsive pas terrible…

Tentative avec Bootstrap 3 et Masonry

Inspiré de : http://codepen.io/anon/pen/eIxCp. Simulation : http://jsfiddle.net/frontenddeveloper/rbgsypLm/2/.

Pour :

Le contenu est ordonné de gauche à droite (rangée après rangée)

Contre :

On est obligé de surcharger légèrement Bootstrap (.container { padding-left:0; padding-right:0; }) et le framework CSS peut poser problème lorsqu’il est couplé à Masonry…
On ne conserve pas un markup HTML cohérent (les éléments de la liste ne sont pas déclarés dans un ordre logique puisque le deuxième look est intercalé entre le produit 13 et le produit 14)… Avec tous les ennuis que cela comporte de gérer son imbrication au sein de la liste et de conserver un affichage cohérent (y compris en responsive) lorsque le nombre d’éléments change !
Toujours pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page
Comportement responsive catastrophique

Conclusions :

A moins de partir dans un dev JS très lourd qui prend en compte le nombre d’éléments à afficher pour replacer le 2ème look dans le DOM à chaque fois :

qu’on agit soit sur la largeur de la fenêtre (problématique responsive),
ou qu’on agit sur le nombre de produits à afficher (design prévu pour 2 looks et 16 produits – il peut y avoir moins de produits dans le rayon ou suite à un tri effectué par l’utilisateur)

…c’est pas possible d’avoir un affichage cohérent :/

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

14/01/2015 / admin

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Fonctionne et génère la batterie complète de styles nécessaires :

$grid-columns: 5; // Changer la valeur par défaut pour 5 colonnes

[class*="col-five-"],[class^="col-five-"]{
    position: relative;
    min-height: 1px;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    float: left;
}

@include make-grid(xs);

// Small grid
@media (min-width: $screen-sm-min) {
  @include make-grid(five-sm);
}

// Medium grid
@media (min-width: $screen-md-min) {
  @include make-grid(five-md);
}

// Large grid
@media (min-width: $screen-lg-min) {
  @include make-grid(five-lg);
}

$grid-columns: 12; // Toujours remettre la valeur par défaut qui se trouve dans _variables.scss

$grid-columns: 5; // Changer la valeur par défaut pour 5 colonnes

[class*="col-five-"],[class^="col-five-"]{

position: relative;

min-height: 1px;

padding-left: $grid-gutter-width / 2;

padding-right: $grid-gutter-width / 2;

float: left;

}

@include make-grid(xs);

// Small grid

@media (min-width: $screen-sm-min) {

@include make-grid(five-sm);

}

// Medium grid

@media (min-width: $screen-md-min) {

@include make-grid(five-md);

}

// Large grid

@media (min-width: $screen-lg-min) {

@include make-grid(five-lg);

}

$grid-columns: 12; // Toujours remettre la valeur par défaut qui se trouve dans _variables.scss

Ne fonctionne pas (génère des classes pour 12 colonnes) :

.columns-5{
  $grid-columns: 5;
  @include make-grid(toto);
}

.columns-5{

$grid-columns: 5;

@include make-grid(toto);

}

.columns-5{
  $grid-columns: 5;
  @include make-grid(xs);
  @media (min-width: $screen-sm-min) {
    @include make-grid(sm);
  }
  @media (min-width: $screen-md-min) {
    @include make-grid(md);
  }
  @media (min-width: $screen-lg-min) {
    @include make-grid(lg);
  }
}

.columns-5{

$grid-columns: 5;

@include make-grid(xs);

@media (min-width: $screen-sm-min) {

@include make-grid(sm);

}

@media (min-width: $screen-md-min) {

@include make-grid(md);

}

@media (min-width: $screen-lg-min) {

@include make-grid(lg);

}

Méthode pré-processeur pour 5 colonnes de largeurs égales

Source : Five equal columns in twitter bootstrap.
Méthode qui génère moins de code, mais uniquement des briques de largeur égale (20%).

SASS

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

.col-lg-2-4{

@include make-lg-column(2.4)

}

.col-md-2-4{

@include make-md-column(2.4)

}

.col-sm-2-4{

@include make-sm-column(2.4)

}

.col-md-push-2-4{

@include make-md-column-push(2.4)

}

.col-md-pull-2-4{

@include make-md-column-pull(2.4)

}

.col-md-offset-2-4{

@include make-md-column-offset(2.4)

}

LESS

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

.col-lg-2-4{

.make-lg-column(2.4)

}

.col-md-2-4{

.make-md-column(2.4)

}

.col-sm-2-4{

.make-sm-column(2.4)

}

.col-lg-2-4{

.make-lg-column(2.4)

}

.col-md-2-4{

.make-md-column(2.4)

}

.col-sm-2-4{

.make-sm-column(2.4)

}

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

Source : Quick tips: 5 columns layout with Twitter Bootstrap, 5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five.

/* 5 columns layout with Twitter Bootstrap 3 */
.col-xs-15, .col-xs-25, .col-xs-35, .col-xs-45,
.col-sm-15, .col-sm-25, .col-sm-35, .col-sm-45,
.col-md-15, .col-md-25, .col-md-35, .col-md-45,
.col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.col-xs-25 {
    width: 40%;
    float: left;
}

.col-xs-35 {
    width: 60%;
    float: left;
}

.col-xs-45 {
    width: 80%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
    
    .col-sm-25 {
        width: 40%;
        float: left;
    }

    .col-sm-35 {
        width: 60%;
        float: left;
    }

    .col-sm-45 {
        width: 80%;
        float: left;
    }    
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
    
    .col-md-25 {
        width: 40%;
        float: left;
    }

    .col-md-35 {
        width: 60%;
        float: left;
    }

    .col-md-45 {
        width: 80%;
        float: left;
    }    
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
    
    .col-lg-25 {
        width: 40%;
        float: left;
    }

    .col-lg-35 {
        width: 60%;
        float: left;
    }

    .col-lg-45 {
        width: 80%;
        float: left;
    }    
}

/* 5 columns layout with Twitter Bootstrap 3 */

.col-xs-15, .col-xs-25, .col-xs-35, .col-xs-45,

.col-sm-15, .col-sm-25, .col-sm-35, .col-sm-45,

.col-md-15, .col-md-25, .col-md-35, .col-md-45,

.col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45 {

position: relative;

min-height: 1px;

padding-right: 10px;

padding-left: 10px;

}

.col-xs-15 {

width: 20%;

float: left;

}

.col-xs-25 {

width: 40%;

float: left;

}

.col-xs-35 {

width: 60%;

float: left;

}

.col-xs-45 {

width: 80%;

float: left;

}

@media (min-width: 768px) {

.col-sm-15 {

width: 20%;

float: left;

}

.col-sm-25 {

width: 40%;

float: left;

}

.col-sm-35 {

width: 60%;

float: left;

}

.col-sm-45 {

width: 80%;

float: left;

}

@media (min-width: 992px) {

.col-md-15 {

width: 20%;

float: left;

}

.col-md-25 {

width: 40%;

float: left;

}

.col-md-35 {

width: 60%;

float: left;

}

.col-md-45 {

width: 80%;

float: left;

}

@media (min-width: 1200px) {

.col-lg-15 {

width: 20%;

float: left;

}

.col-lg-25 {

width: 40%;

float: left;

}

.col-lg-35 {

width: 60%;

float: left;

}

.col-lg-45 {

width: 80%;

float: left;

}

<div class="container">
    <div class="row">
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>
      <div class="col-md-15">.col-md-15</div>      
    </div>
</div>

</div>

[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

02/07/2014 / admin

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-tableau .votre-cellule img { width: 99.99%; }

1	.votre-tableau .votre-cellule img { width: 99.99%; }

Source : Bootstrap: Vertical align into a Grid v2 – CodePen

.row-table{
	display: table !important;
    width: 100%;
    /*width: 102.26%;*/
	/*width: calc(100% + 30px);*/
}

.row-table > [class*="col-"]{
	float: none !important;
	display: table-cell !important;
	vertical-align: middle;
}

.row-table > [class*="col-"].td-top{
	vertical-align: top !important;
}

.row-table > [class*="col-"].td-bottom{
	vertical-align: bottom !important;
}

.row-table{

display: table !important;

width: 100%;

/*width: 102.26%;*/

/*width: calc(100% + 30px);*/

}

.row-table > [class*="col-"]{

float: none !important;

display: table-cell !important;

vertical-align: middle;

}

.row-table > [class*="col-"].td-top{

vertical-align: top !important;

}

.row-table > [class*="col-"].td-bottom{

vertical-align: bottom !important;

}

Le mixin LESS

.row-table(){
  display: table !important;
  width: 100%;

  > [class*="col-"]{
    float: none !important;
    display: table-cell !important;
    vertical-align: middle;
  }
/*
  > [class*="col-"].td-top{
    vertical-align: top !important;
  }

  > [class*="col-"].td-bottom{
    vertical-align: bottom !important;
  }
*/
}

.row-table(){

display: table !important;

width: 100%;

> [class*="col-"]{

float: none !important;

display: table-cell !important;

vertical-align: middle;

}

> [class*="col-"].td-top{

vertical-align: top !important;

}

> [class*="col-"].td-bottom{

vertical-align: bottom !important;

}

Articles récents

Catégories

Archives

Méta

Étiquette : grille

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Une rangée basée sur 8 colonnes

Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

mixins/grid-framework.scss

mixins/grid.scss

variables.scss

grid.scss

[Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns

Créer une batterie de classes pour une grille 5 colonnes

[Bootstrap] Centrer horizontalement des colonnes de la grille dans un design responsive à l’aide de CSS

Ze problème

Ze solution

[Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).

Utilisation :

Mise en place :

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

Tentative en exploitant la fonction `outerHeight` de jQuery

Tentative avec la propriété `columns` de CSS3

Pour :

Contre :

Tentative avec Bootstrap 3 et Masonry

Pour :

Contre :

Conclusions :

[Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Méthode pré-processeur pour 5 colonnes de largeurs égales

SASS

LESS

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

Le mixin LESS

Une rangée basée sur 8 colonnes

mixins/grid-framework.scss

mixins/grid.scss

variables.scss

grid.scss

Créer une batterie de classes pour une grille 5 colonnes

Ze problème

Ze solution

Utilisation :

Mise en place :

Tentative en exploitant la fonction outerHeight de jQuery

Tentative avec la propriété columns de CSS3

Pour :

Contre :

Tentative avec Bootstrap 3 et Masonry

Pour :

Contre :

Conclusions :

Ressources en ligne :

Méthode SASS pour 5 colonnes (concept Bootstrap)

Méthode pré-processeur pour 5 colonnes de largeurs égales

SASS

LESS

Méthode alternative pour une palette complète sur 5 colonnes (CSS)

Le mixin LESS

Tentative en exploitant la fonction `outerHeight` de jQuery

Tentative avec la propriété `columns` de CSS3