prestashop / community-theme-16 Goto Github PK

Basic PrestaShop 1.6 Bootstrap theme which focuses on extendability. This theme is maintained by PrestaShop community, not by PrestaShop SA.

License: Academic Free License v3.0

Smarty 49.50% CSS 4.26% PHP 23.90% JavaScript 22.34%

prestashop-theme prestashop-1-6

community-theme-16's Introduction

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.7 Font Awesome | 4.3.0 | 4.6.3 jquery.uniform.js | 2.1.2 | - jquery.total-storage.js | 1.1.2 | 1.1.2 js-url | - | 2.3.0 bourbon | - | ^4.2.6

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:

Create a development installation of PrestaShop (e.g. /presta/)
Clone the repository somewhere else (e.g. /community-theme-16/)
Build theme .zip archive in /community-theme-16 and install it via back-office in /presta/.
Move repository files from /community-theme-16/ "on top" (merge) to PrestaShop installation /presta/. Don't forget to move hidden dot files and folders!
Delete /community-theme-16/. You can now do everything in /presta/.
Change theme files, build CSS, preview changes in your browser.
(Optional) Push fixes, improvements to your forked repository and make a pull request to the origin.

To build this theme, these tools are required:

Node.js & npm.

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 tools are installed and have the correct versions, type the following in your terminal:

node -v
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.

Don't forget: you need to cd into the root folder of the cloned repository or the root folder of PrestaShop installation (in you moved repository files "on top" of PrestaShop installation).

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

npm run 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.

Build commands

We use npm scripts to call gulp commands so you don't have to install gulp globally on your system.

npm run build           // Sequentially runs all of the commands below, outputs a theme .zip archive
                        // in the root folder, ready to be installed to PrestaShop or published.

npm run create-folders  // Creates empty theme folders like pdf/, pdf/lang/, which are not included
                        // repository, but should be in the final theme archive.

npm run compile-css     // Compiles .scss files to .css files using gulp-sass package.

npm run watch-sass      // Watches for changes in theme .scss files and automatically launches
                        // compile-css task when a .scss has been modified and saved

npm run clean-up        // Removes files which should not be in the archive, like cache files

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

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

npm run create-zip      // Adds Config.xml, /themes/ and /modules/ folder files to
                        // theme .zip archive and outputs it in root directory

npm run scan-translations  // Scans .tpl files in /themes/, /modules/ folders and detects
                           // translatable Smarty strings which have incorrect context

Build options

We have added a couple of options to package.json file, which you can change:

themeName          // Theme directory and name, used to collect files during build process

themeModulePrefix  // Affects which theme modules are compiled and included to theme archive

sourcemaps         // Enables/disables the creation of theme .scss file sourcemaps

Bourboun

Bourboun is a Sass mixin library. It is available in all theme .scss files, because it is imported globally during .scss compilation task. See gulpfile.js for more details.

Bourbon is not required, you may remove it if you wish so. You'll need to remove the calls to these mixins too. Bourbon provides the same mixins as Compass does. Compass tool and Compass mixins were heavily used in the default-bootstrap theme (from which this theme originates), but it has been replaced with Bourbon, which provided a significant performance boost and no necessary code changes.

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.

community-theme-16's People

Contributors

Stargazers

Watchers

community-theme-16's Issues

Remove reponsive-tables.css

We should use .table-responsive instead

Refactor blockcategories

Have already done it a couple of times, going to use Bootstrap's collapse.js and .list-group

Remove text shadows

Refactor top nav into Bootstrap's navbar

Review HTML element roles

http://knowledge.onsubject.com/2011/02/06/html-role-attributes/

Add basic project files

There should be .gitignore, .gitattributes and other project files in the repository for basic workflow.

Lock ajax forms with CSS overlay

$el.addLoadingOverlay('sm');

$el.removeLoadingOverlay();

Puts CSS class on the element .loading-overlay, which prevents interaction. This method should be used on Ajax forms to prevent multiple submissions. Also focuses out inputs .focusout()

Copy the files from default-bootstrap

Initial theme files should be copied from

PrestaShop/PrestaShop/tree/develop/themes/default-bootstrap

Folders cache and css should be excluded.

Change .form-control glow color to $brand-primary

Normalize global font

Remove hardcoded Open Sans font, leave default bootstrap font.
This means removing hardcoded rules like font-family: 'Open Sans' from stylesheets

Touch detection

Touch (possible) devices should be detected on load and body class .has-touch added

Refactor logo block style

Missing directory 'cache'

There is a missing directory in the theme dir.
There should be a 'cache' directory in the root of the theme. Else the cache will not work and you get an error in the BO.

Trim global styles

Remove repeating styles, styles that dont differ much from Boostrap styles, etc.

Standardize .alert elements

<p> should be used for text and info blocks only. Refactor alerts to use <div>

Use url.js where possible

https://github.com/websanova/js-url

Currently, X functions do regex search for query parameters, then do RegEx, replace, etc.
This is much is much simpler, can be used together with $.param to serialize query and redirect.

Also, window.location should be used instead of document.location

Introduce Bower or NPM FO pacakges to workflow

Bower would be nice, we can even change the downloads directory, the biggest problems imo is asset management. Any opinions?

Nicer alert/error messages

https://github.com/lipis/bootstrap-sweetalert

Make something useful out of blocktopmenu

I have an override for the module file, which would enable to build any find of menu (HTML would not be hardcoded any more). Don't know whether we should use it, I'm leaning more towards not.

The component to use for a menu would be http://geedmo.github.io/yamm3/

Now, the problems will be extracting the menu list and using it in the new menu component.

Yamm3 in action:
http://i.imgur.com/BW9pWBc.png

Remove hardcorded references to FontAwesome

[+] Theme configuration module

There already are things that need to be confugred, for example:

page copyright footer on/off (will be moved from blockcms module)

Remove "Read more" toggles

In category description

Better compatibility for displayNav hooks

In dev branch, we already refactored everything to be an li for <ul class="nav navbar-nav navbar-right">, but perhaps displayNav should put theme-styled navbar blocks instead of li and li could be placed used separate hook

Remove "display all pictures toggle"

In the product page

Flexible breadcrumbs

Breadcrumb markup cannot be changed, the only solution would to resort to hacking with RegEx

Incorrect config file

There seem to be some problems when I zip up the files and try to import the theme in PS 1.6.1.3
The importer is complaining about a config file, and when I compare the config file to another config.xml (that does work) there seem to be a lot of things missing.......

Developer guide

Notes containing instructions about:

what has been removed
what needs to be taken care when installing new modules
development workflow instructions

Remove line classes

Remove class clutter like this:

    {assign var='nbItemsPerLine' value=3}
    {assign var='nbItemsPerLineTablet' value=2}
    {assign var='nbLi' value=$suppliers_list|@count}
    {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
    {math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}

    <ul id="suppliers_list" class="list row">
      {foreach from=$suppliers_list item=supplier name=supplier}
        {math equation="(total%perLine)" total=$smarty.foreach.supplier.total perLine=$nbItemsPerLine assign=totModulo}
        {math equation="(total%perLineT)" total=$smarty.foreach.supplier.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}

Product page image zoom

This may be a nice alternative:

http://imgix.github.io/drift/

Split global.scss into smaller files

Refactor picture thumb carousel in product page

Refactor into thumbnails places in .col-*

Clean up - reorganize global.scss

Split into smaller partials, move files, rules but dont change them

Add basic documentation

There should be basic information about the repository in the README files about the repository,
goals, features and contributing.

All images inside .rte receive .img-responsive

At global.js: $('.rte img').addClass('img-responsive'). This would force images to stay inside the container and not overflow.

Test page demonstrating component styles

Something like https://bootswatch.com/cosmo/, where you could view everything at once

Refactor search box style

Semantic HTML markup

Semantic elements like <aside>, <address> should be used more often, for example on page laoyout columns

Use default height of form-control

Right now, the global.css locks .form-control height at 27px.

Solve .button crisis

partials/_buttons.tpl:

//buttons
input.button_mini,
input.button_small,
input.button,
input.button_large,
input.button_mini_disabled,
input.button_small_disabled,
input.button_disabled,
input.button_large_disabled,
input.exclusive_mini,
input.exclusive_small,
input.exclusive,
input.exclusive_large,
input.exclusive_mini_disabled,
input.exclusive_small_disabled,
input.exclusive_disabled,
input.exclusive_large_disabled,
a.button_mini,
a.button_small,
a.button,
a.button_large,
a.exclusive_mini,
a.exclusive_small,
a.exclusive,
a.exclusive_large,
span.button_mini,
span.button_small,
span.button,
span.button_large,
span.exclusive_mini,
span.exclusive_small,
span.exclusive,
span.exclusive_large,
span.exclusive_large_disabled {
  position: relative;
  display: inline-block;
  padding: 5px 7px;
  border: 1px solid #cc9900;
  font-weight: bold;
  color: black;
  background: url(../img/bg_bt.gif) repeat-x 0 0 #f4b61b;
  cursor: pointer;
  white-space: normal;
  text-align: left;
}

*:first-child+html input.button_mini,
*:first-child+html input.button_small,
*:first-child+html input.button,
*:first-child+html input.button_large,
*:first-child+html input.button_mini_disabled,
*:first-child+html input.button_small_disabled,
*:first-child+html input.button_disabled,
*:first-child+html input.button_large_disabled,
*:first-child+html input.exclusive_mini,
*:first-child+html input.exclusive_small,
*:first-child+html input.exclusive,
*:first-child+html input.exclusive_large,
*:first-child+html input.exclusive_mini_disabled,
*:first-child+html input.exclusive_small_disabled,
*:first-child+html input.exclusive_disabled,
*:first-child+html input.exclusive_large_disabled {
  border: none;
}

//hover button
input.button_mini:hover,
input.button_small:hover,
input.button:hover,
input.button_large:hover,
input.exclusive_mini:hover,
input.exclusive_small:hover,
input.exclusive:hover,
input.exclusive_large:hover,
a.button_mini:hover,
a.button_small:hover,
a.button:hover,
a.button_large:hover,
a.exclusive_mini:hover,
a.exclusive_small:hover,
a.exclusive:hover,
a.exclusive_large:hover {
  text-decoration: none;
  background-position: left -50px;
}

//active button
input.button_mini:active,
input.button_small:active,
input.button:active,
input.button_large:active,
input.exclusive_mini:active,
input.exclusive_small:active,
input.exclusive:active,
input.exclusive_large:active,
a.button_mini:active,
a.button_small:active,
a.button:active,
a.button_large:active,
a.exclusive_mini:active,
a.exclusive_small:active,
a.exclusive:active,
a.exclusive_large:active {
  background-position: left -100px;
}

[*] FO: Clean up icon elements

Remove classes .left .right.
Add .icon class to all icons

Reorder displayNav hook positions

Use .pager instead of .footer_links

Refactor header blocks

Remove remnants of footable plugin

Some tables have leftover classes and attributes used in footable jquery plugin

Getting more done in GitHub with ZenHub

Hola! @gskema has created a ZenHub account for the PrestaShop organization. ZenHub is the leading team collaboration and project management solution built for GitHub.

How do I use ZenHub?

To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.

What can ZenHub do?

ZenHub adds a series of enhancements directly inside the GitHub UI:

Real-time, customizable task boards for GitHub issues;
Burndown charts, estimates, and velocity tracking based on GitHub Milestones;
Personal to-do lists and task prioritization;
“+1” button for GitHub issues and comments;
Drag-and-drop file sharing;
Time-saving shortcuts like a quick repo switcher.