PrestaShop 1.6 Community Theme

Disclaimer

THIS THEME IS MAINTAINED BY THE PRESTASHOP COMMUNITY, NOT BY PRESTASHOP SA.

Screenshots

About

Community theme is a fork of the default PrestaShop 1.6 theme default-bootstrap taken from 1.6.1.x branch. The purpose of this theme is to provide a solid and flexible foundation for building new PrestaShop 1.6 themes. This theme is oriented more towards the developers, who can extend and adapt this theme to the shop's needs.

The main features of this theme:

• Removed unnecessary styles, functions, elements
• Updated libraries (Bootstrap, Font Awesome)
• Wider usage Bootstrap 3 styles, utilities and components
• Reduced stylesheet size
• Simplified HTML markup
• Improved SEO markup and microdata
• Easier custom theme development
• gulpfile.js for building theme archive
• Restructured .scss files for easier theme development
• Removed uniform.js
• Reindented and cleaned up template, JS and CSS files
• Plain Bootstrap styles
• All Bootstrap components are included
• Refactored header and footer blocks, easily modifiable
• New top menu modules
• Refactored blockcart, left column block styles
• Refactored product list template: JS code that compile product list HTML has been removed
• Refactored jQuery Zoom option for product page
• Refactored product page, reworked images
• Trimmed order, registration and login form styles
• Cleaned up my-account, 404, cms, cms category, comparison pages
• Cleaned up contact-form, maintenance, manufacturer, supplier pages
• Cleaned up guest-tracking, stores, index pages
• Cleaned up homeslider, themeconfigurator, blockfacebook, blockcms, blockcmsinfo pages
• JS function for detecting mobile and touch device

Bug fixes in the default-bootstrap will be integrated to this theme regularly.

Guidelines and goals

• Semantic HTML markup should be used where possible
• CSS styles must be kept to a minimum
• Bootstrap components should be used where it makes sense or where they fit semantically
• Bootstrap components should not be transformed into other, shop specific components, which deserve their own component. E.g. .product-list-item.
• Elements should be marked up with microdata where matching objects and properties exist.
• Theme components and styles should be consolidated and reused.
• Libraries should be kept updated
• JavaScript files must be formatted to a standard.
• Overrides may be used or included to provide better support and development
• Changes may affect third party module template styles, but be easily fixable
• General compatibility should not be totally broken

Libraries and dependencies

                    | default-bootstrap | community-theme-16

----------------------- | ----------------- | ------------- Bootstrap | 3.0.0 | 3.3.6 Font Awesome | 4.3.0 | 4.5.0 jquery.uniform.js | 2.1.2 | - jquery.total-storage.js | 1.1.2 | 1.1.2 js-url | - | 2.3.0

Installation

If you would like to install this theme, you should download the latest, prepackaged vx.x.x-community-theme-16.zip theme archive from Releases tab. It contains compiled .css files, full folder structure, index.php file in every folder. Unnecessary files are removed. Prepackaged theme archive can be uploaded and installed via PrestaShop back-office. Files from dev branch are not packaged, you must build a theme archive from them yourself.

Development

In this repository, files are not ready to be zipped and installed as theme. Instead, a build process is used, which automatically builds .css files, copies index.php files, creates required folder and does other things, so you don't have to do them manually. In the end, build process outputs theme .zip file which can be installed normally. It keeps the repository clean (we don't have to copy index.php 500 times or deal with messy compiled .css commits).

If would like to be able to use this build process and preview the changes at the same time, we suggest doing this:

1. Create a dedicated development installation of PrestaShop
2. Clone the repository
3. Build theme .zip archive and install it via back-office.
4. Move repository files on top of PrestaShop installation files.
5. Change theme files, build theme, preview changes in browser
6. (Optional) Push changes to a forked repository and make a pull request.

To build this theme, two tools are required:

1. Compass tool.
2. Node.js & npm.

We recommend that you install Compass via rubygems package manager. This will give you the latest version of Compass: 1.0.3. Compass is required to build .css files from .scss files.

npm package manager comes together with Node.js. You should install Node.js first and then do a self-update of npm:

sudo npm install npm -g

This will give you the updated version of npm, which is used to build this theme.

To verify that both tools are installed and have the correct versions, type the following in your terminal:

compass -v  // Should output 1.0.3 or higher
npm -v      // Should output 3.5.2 or higher

Once these tools are available, navigate to your cloned repository and run npm install command:

cd community-theme-16/
npm install

This will install Node.js modules (packages) from npmjs.com which are used in gulpfile.js to build the theme.

After the modules are installed, you may then run the build command:

gulp build

which will run the build steps defined in gulpfile.js and output theme .zip archive in root folder of the cloned repository. This theme .zip archive can then be distributed and installed via PrestaShop back-office.

P.S. If you can't or won't install Node.js & npm, you can make do without them. You can always do the packaging steps manually. The only required tools is Compass, which you can use by itself to compile .css files. Just navigate to theme folder and run compass compile.

Gulp commands

Gulp build command is composed of several specific tasks (sub-commands), which you can run individually:

gulp create-folders  // Creates empty theme folders like pdf/, pdf/lang/, which are not included
                     // repository, but should be in theme archive

gulp compile-css     // Runs shell process 'compass compile'. Optional flag maybe passed: --force

gulp clean-up        // Removes files which we don't want to include in the archive, like cache files

gulp copy-index      // Copies index.php to all directories and subdirectories inside theme folder

gulp format-js       // Formats .js files using JavaScript style rules defined
                     // in .jscsrc using JSCS tool

gulp create-zip      // Adds Config.xml and theme folder to .zip archive and outputs
                     // the file in root directory

Contributing

Contributions are welcome! Your changes should be in agreement with the theme guidelines and goals described above. Before you make your pull request, we recommend that you join our gitter room to discuss it.

If you want to make a pull request, we ask that you keep to the same contribution rules as described in PrestaShop/PrestaShop.

We would like to emphasize the commit message norm: How to write a commit message. Because this is a theme, you may omit the type in your commit message or write your own, more descriptive type: e.g SEO, JS, etc.

License

Community theme is open-sourced software licensed under the AFL v3.0.