...
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.
Table of Contents |
---|
Bootstrap
About Bootstrap
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.
...
The main classes for these contexts are:
navbar
andnavbar-inner
: classes container de la barre de navigationContainer class for the navigation bar.navbar-fixed-top
: pour accrocher la barre de navigation en haut de la To attach the navigation bar to the top of the page.brand
: pour le titre du siteFor the site's title/store name.nav
,nav-tabs
andnav-pills
: pour les ongletsFor the navigation tabs.btn
andbtn-navba
: pour les boutonsFor the buttons.nav-collapse
,collapse
,data-toggle
,data-target
: pour afficher et fermer automatiquementTo automatically hide/show content.icon-th-list
: pour afficher un icon (uniquement sur les petits écrans ..th..)To display an icon (on small screens only:th
).
Here is an example of a navigation bar with a menu on the right:
Code Block |
---|
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span></a>
<a href="#" class="brand">SiteTitle</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div> |
Here is an example of menu tab:
Code Block |
---|
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li class="divider"></li>
<li><a class="disabled" href="#">Trash</a></li>
</ul>
</li>
</ul> |
Tables
Main classes for tables:
table
,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).success
,warning
,danger
, etc.: To change the background color of a row or of a cell.
Sample usage::
Code Block |
---|
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="warning">
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table> |
Panels
Main classes for this context:
panel
,panel-body
: To define a panel.panel-default
,panel-primary
,panel-success
,panel-info
,panel-warning
andpanel-danger
: To adapt the layout to the panel.panel-heading
andpanel-title
: To add a header and a title to the panel.panel-footer
: To add a footer to the panel.
Sample usage:
Code Block |
---|
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Panel Title</h1>
</div>
<div class="panel-body">
This is the content of the panel.
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a href="#" class="btn btn-default">Go Back</a>
</div>
</div>
</div> |
Images
img-rounded
: To display an image with rounded borders.img-circle
: To display an image within a circle.img-thumbnail
: To handle thumbnails.
Sample usage:
Code Block |
---|
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="thumbnail">
<img src="avatar.jpg" alt="Sample Image">
<div class="caption">
<h3>label</h3><p>description...</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="thumbnail">
<img src="avatar.jpg" alt="Sample Image">
<div class="caption">
<h3>label</h3><p>description...</p>
</div>
</div>
</div>
</div>
</div> |
Lists
Main classes:
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.
Breadcrumb example:
Code Block |
---|
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li class="active">Accessories</li>
</ul> |
Header and paragraph example:
Code Block |
---|
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">What is HTML?</h4>
<p class="list-group-item-text">HTML stands for HyperText Markup Language.
HTML is the main markup language for describing the structure of Web pages.</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">What is Twitter Bootstrap?</h4>
<p class="list-group-item-text">Twitter Bootstrap is a powerful front-end framework for faster
and easier web development. It is a collection of HTML and CSS based design template.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">What is CSS?</h4>
<p class="list-group-item-text">CSS stands for Cascading Style Sheet. CSS allows you to specify
various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
</a>
</div> |
Forms
Main classes:
form-inline
andform-horizontal
on theform
element.form-group
on the div that groups thelabel
and thetextarea
. Enables automatic adjustment of spacing.form-control
on theinput
,textarea
andselect
elements– 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:
Code Block |
---|
<div class="form-group">
<label class="sr-only" for="exampleInput">Email address, label not visible</label>
<input type="email" class="form-control" id="exampleInput" placeholder="Enter email">
</div> |
Classes that change the appearance of zones depending on content validation:
has-warning
has-error
has-success
Classes that enable the display of an icon in the textarea:
glyphicon et form-control-feedback
glyphicon-ok
glyphicon-warning-sign
glyphicon-remove
For instance:
Code Block |
---|
<div class="form-group has-warning">
<label class="control-label" for="input1">Label with warning</label>
<input type="text" class="form-control" id="input1">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div> |
Buttons and links
Main classes:
btn
: Base class for buttonsbtn-default
,btn-primary
,btn-success
,btn-info
,btn-warning
,btn-danger
,btn-link
: To change the button's appearancebtn-lg
,btn-sm
andbtn-xs
: To change the button's size.btn-block
: To change the size of the parent element.active
anddisabled
: to change the availability of a button.
Code Block |
---|
<span class="button ajax_add_to_cart_button btn btn-default disabled">
<span>{l s='Add to cart'}</span>
</span>
<a itemprop="url" class="button lnk_view btn btn-default"
href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
<span>{l s='More'}</span>
</a>
<button type="submit" name="submitMessage" id="submitMessage"
class="button btn btn-default button-medium">
<span>{l s='Send'}<i class="icon-chevron-right right"></i></span>
</button> |
Sass
About Sass
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
.scss
extension. - Can use semicolons and parenthesis.
- Extension of CSS3.
- SASS syntax, or "indented syntax":
- Older syntax, less used.
- Files use the
.sass
extension. - 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:
Code Block | ||
---|---|---|
| ||
h1 {color: #000; background: #fff} |
Code Block | ||
---|---|---|
| ||
h1
color: #000
background: #fff
|
Installation
Sass (and Compass, see below) require the installation of the Ruby language on your machine.
Compass
FontAwesome