PrestaShop 1.6
Child pages
  • Bootstrap, Sass and Compass in PrestaShop 1.6

Versions Compared

Old Version 2

changes.mady.by.user Xavier Borderie

Saved on

compared with

New Version 3

changes.mady.by.user Xavier Borderie

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Conventions for structuring HTML code and naming CSS classes.
  • A base CSS files (using the LESS or Sass format) built from a file of variables.
  • A JavaScript for the the more usual functions.
Info

Bootstrap uses a whole new way of working on web project that will really benefit all your forthcoming project – even non-PrestaShop ones! We strongly advise to dive into it:

General technical information

...

Bootstrap uses class prefixes to differentiate devices by their screen sizes:

  • .col-xs-...: Phones extra small, for phones (< 768px)

  • .col-sm-...: Tablets small, for tablets (≥768 px)

  • .col-md-...: Desktops medium, for desktops (≥992 px)

  • .col-lg-...: Large desktops large, for large desktops and TVs (≥1200 px)

For instance:

  • col-xs-3: 3 columns on phones.
  • col-md-4: 4 columns on desktops.

...

  • col-md-push-2: On desktops, move this column by two columns to the left.

Bootstrap & Sass: Using variables and mixins

Variables

You can configure Bootstrap by editiing the variables in the _variables.scss file. For instance:

Code Block
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;

Mixins

Info

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. For instance:

Code Block
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

You can use use mixins to define new styles. For instance:

Code Block
.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

...for the following HTML code:

Code Block
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Bootstrap classes

Bootstrap has many default CSS classes, and PrestaShop defines several more, to help you build a consistent design.

Helper classes

These classes are to be used when design an element that uses one of PrestaShop's Helper classes.

  • pull-left: For left float.

  • pull-right: For right float.

  • text-muted: For gray text.

  • clearfix: To prevent excessive size of floating blocks.

  • close: To create a close button (x).

  • caret: To indicate a dropdown effect.

  • center-block: To center an element.

  • show and hidden: To show/hide an element.

Responsive classes

These classes are useful to show/hide an element depending on the device.

  • visible-xs / hidden-xs

  • visible-sm / hidden-sm

  • visible-md / hidden-md

  • visible-lg / hidden-lg

  • visible-print / hidden-print

Navigation, tabs and menus

The main classes for these contexts are:

  • navbar and navbar-inner: classes container de la barre de navigation

  • navbar-fixed-top: pour accrocher la barre de navigation en haut de la page.

  • brand: pour le titre du site

  • nav, nav-tabs and nav-pills: pour les onglets

  • btn btn-navba: pour les boutons

  • nav-collapse, collapse, data-toggle, data-target: pour afficher et fermer automatiquement

  • icon-th-list: pour afficher un icon (uniquement sur les petits écrans ..th..)

FontAwesome