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

Versions Compared

Old Version 1

changes.mady.by.user Xavier Borderie

Saved on

compared with

New Version 2

changes.mady.by.user Xavier Borderie

Saved on

Key

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

...

Starting with version 1.6, PrestaShop theme API heavily relies on the Bootstrap framework (version 3), together with Sass and Compass. Simply put, if you want to build a 1.6-compatible theme, you must use these technologies.

...

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

General technical information

Bootstrap uses some specific HTML elements which make it a requirement to use HTML5. Be careful to use the proper HTML5 doctype for all your template files!
Likewise, CSS3 is used for many CSS properties.

Code Block
<!DOCTYPE html>
<html lang="fr">
...
</html>

Bootstrap 3 is made to be mobile friendly from the start of your project: instead of adding optional mobile styles to your project, these styles are built into the core of the project, ensure that it displays well on all devices.
In order to ensure that your project renders well and that the touch zoom works as expected, you must add the viewport meta tag to your template's head element:

Code Block
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bootstrap makes it easy to build a responsive design, and you can use a little trick to make your images responsive too: use Bootstrap's img-responsive class on the image. That class will make your image use max-width: 100%; and height: auto; in order to adapt to the parent element.

Code Block
<img src="http://example.com/img/image.jpg" class="img-responsive" alt="Description of the image">

Fluid grid system

Bootstrap uses a 12-column grid system, which helps you build a fluid layout. You can use media queries to indicate breakpoints to the grid system, so that it can scale up or down its number of columns depending on the screen size. The default size is tailored for very small screen sizes (up to 480px width, for small phones), so no media query is required there. Bigger screen size are managed using the following queries:

Code Block
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Bootstrap uses class prefixes to differentiate devices:

  • .col-xs-...: Phones (< 768px)

  • .col-sm-...: Tablets (≥768 px)

  • .col-md-...: Desktops (≥992 px)

  • .col-lg-...: Large desktops (≥1200 px)

For instance:

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

For each device, Bootstrap also provides CSS classes, allowing you to change the column's position:

  • col-size-push-col: move column to the left.

  • col-size-pull-col: move column to the right.

  • col-size-offset-col : position column according to other column.

For instance:

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