Étiquette : grid

[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>

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>

// 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 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; }

1 2 3 4 5

.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%); } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.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; } }

1 2 3 4 5 6 7 8 9 10 11 12

.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;   } }

[CSS] Grid: ressources en ligne, bonnes pratiques et astuces

12/04/2017 / admin

• GRID GARDEN – A game for learning CSS grid layout

[Magento 1.9] Remplacer les sprites d’affichage Grid et List dans la page catalog-category-view par des icônes issus d’une police

06/02/2017 / admin

Grosse gruge, mais bon …

;(function ($, window, undefined){ $(document).ready(function(){ $('.toolbar').find('.view-mode').children('.grid').html('<i class="icon-gpv_grid" />'); $('.toolbar').find('.view-mode').children('.list').html('<i class="icon-gpv_list" />'); }); }(jQuery, window));

1 2 3 4 5 6

;(function ($, window, undefined){   $(document).ready(function(){     $('.toolbar').find('.view-mode').children('.grid').html('<i class="icon-gpv_grid" />');     $('.toolbar').find('.view-mode').children('.list').html('<i class="icon-gpv_list" />');   }); }(jQuery, window));