Bootstrap, Sass and Compass in PrestaShop 1.6
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.
Bootstrap is "a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." This tools makes it a lot simpler to build responsive web sites – meaning websites which adapt their design to the size of the screen, from mobile phone to giant TV.
A Bootstrap design is made of:
- 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.
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:
- Sitepoint has several free articles/tutorials : Understanding Twitter Bootstrap 3, Building Responsive Websites Using Twitter BootStrap, or Twitter Bootstrap Tutorial – Handling Complex Designs.
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.
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
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.
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:
Bootstrap uses class prefixes to differentiate devices by their screen sizes:
.col-xs-...: extra small, for phones (< 768px)
.col-sm-...: small, for tablets (≥768 px)
.col-md-...: medium, for desktops (≥992 px)
.col-lg-...: large, for large desktops and TVs (≥1200 px)
3columns 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-: move column to the right.
col-: position column according to other column.
col-md-push-2: On desktops, move this column by two columns to the left.
Bootstrap & Sass: Using variables and mixins
You can configure Bootstrap by editiing the variables in the
_variables.scss file. For instance:
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. For instance:
You can use use mixins to define new styles. For instance:
...for the following HTML code:
Bootstrap has many default CSS classes, and PrestaShop defines several more, to help you build a consistent design.
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.
hidden: To show/hide an element.
These classes are useful to show/hide an element depending on the device.
Navigation, tabs and menus
The main classes for these contexts are:
navbar-inner: Container class for the navigation bar.
navbar-fixed-top: To attach the navigation bar to the top of the page.
brand: For the site's title/store name.
nav-pills: For the navigation tabs.
btn-navba: For the buttons.
data-target: To automatically hide/show content.
icon-th-list: To display an icon (on small screens only:
Here is an example of a navigation bar with a menu on the right:
Here is an example of menu tab:
Main classes for tables:
table-responsive: To create a table and activate the scrolling on smaller screens.
table-striped: To add an alternating background in the rows.
table-bordered: To add a border.
table-hover: To add a background to the row when the mouse hovers it.
table-condensed: To divide the cellpadding in two (makes the table more compact).
danger, etc.: To change the background color of a row or of a cell.
Main classes for this context:
panel-body: To define a panel.
panel-danger: To adapt the layout to the panel.
panel-title: To add a header and a title to the panel.
panel-footer: To add a footer to the panel.
img-rounded: To display an image with rounded borders.
img-circle: To display an image within a circle.
img-thumbnail: To handle thumbnails.
list-unstyled: List without list-style and now padding-left.
list-inline: Horizontal list.
breadcrumb: Horizontal list for navigation path.
dl-horizontal: List with two aligned elements.
list-group: Panel-list-like display.
Header and paragraph example:
form-groupon the div that groups the
textarea. Enables automatic adjustment of spacing.
selectelements– which by default have a width of 100%.
A container that has the
form-group class always needs a label. To add a label and display it, you must use the
sr-only class. For instance:
Classes that change the appearance of zones depending on content validation:
Classes that enable the display of an icon in the textarea:
glyphicon et form-control-feedback
Buttons and links
btn: Base class for buttons
btn-link: To change the button's appearance
btn-xs: To change the button's size.
btn-block: To change the size of the parent element.
disabled: to change the availability of a button.
Sass is the acronym for "Syntactically Awesome Style Sheets". It is a language that you can use to build your CSS files.
While remaining CSS3-compatible, it brings a lot of features that make it easier to create consistent CSS rules with less work, most notably less copy-pasting: nesting, variables, classes, control directives (if, for, each, while), etc.
To achieve this, Sass requires the use of a preprocessors: it turns your Sass files into CSS files that all browsers can read.
Sass has two syntaxes it can use:
- SCSS syntax, or "Sassy CSS":
- The newer syntax, and the one PrestaShop uses.
- Files use the
- Can use semicolons and parenthesis.
- Extension of CSS3.
- SASS syntax, or "indented syntax":
- Older syntax, less used.
- Files use the
- Relies on tab indentation, just as in Python.
- No semicolon, no parenthesis.
- Properties must start with a newline.
You can see the difference between both syntaxes here:
Sass (and Compass, see below) require the installation of the Ruby language on your machine.