Prestashop Theme Boilerplate - A 'Blank Canvas' Theme For Developers

[Mark Hesketh]

Prestashop Theme Boilerplate is a 'blank canvas' theme built for developers to use as a foundation when starting a new Prestashop theme or project.

 

With Prestashop 1.5 RC1 now available, it feels a good time to get started. I'd really appreicate feedback/ideas/help from the community, so please post your thoughts below.

 

Download / Get involved

• Github repository
  
• Download .zip of latest version
  (The theme is incomplete, and mostly similar to the default theme at the moment)
  

Articles / Information

• Prestashop Theme Boilerplate - PrestaDB
  
• Prestashop Starter Theme / Boilerplate - My Blog Post
  

How does it help?

When starting a new theme, you'd usually take another and strip back all it's design, structure and functionality, creating a starting point, while carefully attempting to retain Prestashop's features.

 

This took a lot of time, every time.

 

Based upon the new default Prestashop theme, the Prestashop Theme Boilerplate will be a more suitable starting point.

 

Initial ideas & features

• HTML5
  Valid & semantic markup, following techniques from HTML5 Boilerplate.
  
• Optimised for page speed.
  Focus on speed and performance e.g. order scripts correctly, keep requests to a minimum etc
  
• White canvas design
  Usable as a theme, but very minimal giving structure ready to be built upon.
  
• Commented code
  Briefly describe templates, sections and techniques (using Smarty comments).
  
• Full feature compatibility
  The theme will work with every setting in the back office, from colour pickers to multi-shipping.
  
• Works with all default modules.
  This means the theme is much more likely to be compatible with 3rd party modules, too.
  
• Simplify templates
  Some templates contain a lot of ‘logic’ and need to be re-written.
   
  For example: The checkout pages could be seperated to individual One Page Checkout and 5-step checkout template sections, as they are currently very confusing.
  
• Remove the bloat
  
  • Unneccessary CSS / JavaScript not required by core.
    
  • Default theme’s images replaced with CSS3 alternatives (buttons, backgrounds etc).
    
  • Unneccessary IDs, classes and tags in HTML.
    

  [*]Documentation

  Provide documentation including best practices and techniques when creating a theme using the Boilerplate.

Features being considered

These are some points I’ve considered, but would like feedback on whether they should be included or if they’d be better left for the individual developer to include themselves.

 

I’m keen to keep the theme as simple and ‘bloat free’ as possible. If something is not absolutely neccessary then its not included, otherwise the Boilerplate loses all its purpose.

• Responsive / Adapative / Mobile First
  Optimised design and layout that adapts to multiple screen sizes (mobile optimised)
  
• LESS Framework (http://lesscss.org/)
  LESS is a popular CSS pre-processor that allows you to do much more with CSS. Checkout the website for details.
   
  I’ve personally started using LESS in all my projects for the last 6 months and would highly recommend it.
   
  Frameworks such as Twitter Bootstrap use LESS, but would Prestashop developers like it included?
  

Your feedback / ideas.

I’d really appreciate any feedback or ideas you may have regarding the above.

 

Additionally, if you’d like to get involved and help visit the Github repository and fork the code!

 

I really think this could be something useful to the Prestashop community, and the more people who get involved and bring ideas forward, the better it will become.

 

Thanks,

 

Mark

[BrightEyesDavid]

Hi Mark,

 

I'm a very new user of Prestashop and hope to be getting to know it better soon, so I don't have much detailed feedback but based on my experiences with other e-commerce frameworks I really like everything you've outlined and can see how something like this is a massive gain.

 

I'm thinking responsiveness could be included, and if it's done in such a way that a developer can tweak breakpoints as they see fit it should be a big benefit. I know Compass has relatively recently released some functionality specific to responsive design and breakpoints, and maybe LESS also allows this kind of thing to be done in such a way that each breakpoint only has to be defined once.

 

(Related: I'm trying to switch to em widths rather than pixels so that the layout changes based on the content and not our assumptions of likely viewport widths).

 

Regarding LESS, would it be the case that a developer would add their own theme-specific CSS in addition to your boilerplate CSS in a separate CSS file, meaning that it doesn't matter whether they use LESS/Compass/straight CSS/whatever? Anyway, I'd personally like to see all stying remain simple and not force the developer to use any particular pre-processor.

 

Also, if a developer adds an extra file (rather than editing your CSS files), the boilerplate could easily be updated without losing custom styling.

[Mark Hesketh]

Hi David, thanks for you thoughts.

 

(Related: I'm trying to switch to em widths rather than pixels so that the layout changes based on the content and not our assumptions of likely viewport widths).

This is one of the main reasons I have been considering including LESS. Its very useful for fluid responsive web design.

 

Rather than calculating a load of ems or % every time, you can create a mixin in LESS to do all the calculations for you, where you just specify the width you want and the width of the parent element.

 

You'll then have a site that not just changes at break points, but resizes between those break points too.

 

It also means you don't need a bunch of classes for a grid system. Check out http://semantic.gs/ for an example of what I mean.

 

Doing this without LESS or similar would mean doing this calculations manually, so I can't really see adding a responsive layout to this theme without using LESS as the CSS won't be intuitive to edit.

 

Regarding LESS, would it be the case that a developer would add their own theme-specific CSS in addition to your boilerplate CSSin a separate CSS file, meaning that it doesn't matter whether they use LESS/Compass/straight CSS/whatever? Anyway, I'd personally like to see all stying remain simple and not force the developer to use any particular pre-processor.

 

Also, if a developer adds an extra file (rather than editing your CSS files), the boilerplate could easily be updated without losing custom styling.

Thats a good idea. If the CSS is minimal enough it could just be built upon and overridden as needed without too many issues I'd bet.

 

The only issue I find with LESS is that the CSS it produces can never be as efficient as pure CSS written by someone paying real attention to detail. But in my opinion the benefits far outweigh this.

Edited June 25, 2012 by Mark Hesketh (see edit history)

[BrightEyesDavid]

Rather than calculating a load of ems or % every time, you can create a mixin in LESS to do all the calculations for you, where you just specify the width you want and the width of the parent element.

 

You'll then have a site that not just changes at break points, but resizes between those break points too.

 

It also means you don't need a bunch of classes for a grid system. Check out http://semantic.gs/ for an example of what I mean.

 

Doing this without LESS or similar would mean doing this calculations manually, so I can't really see adding a responsive layout to this theme without using LESS as the CSS won't be intuitive to edit.

 

Yes, I also like grid systems that don't require "grid" class names.

 

But I didn't explain myself very well, and was referring to mixins related directly to the breakpoints (not fluid width layouts). See here and here. So with this kind of technique, the developer would be able to change the breakpoints you've decided on very easily, because they would be defined only once in the LESS/Sass (I don't know whether or not a method for this exists in LESS).

 

Thats a good idea. If the CSS is minimal enough it could just be built upon and overridden as needed without too many issues I'd bet.

 

I reckon so, too.

 

The only issue I find with LESS is that the CSS it produces can never be as efficient as pure CSS written by someone paying real attention to detail. But in my opinion the benefits far outweigh this.

 

I agree the benefits pre-processors bring are worth it, but I feel that in Compass the CSS can be as optimised as I choose to make it and that there are no blocking factors.

 

According to Chris Coyier (see the "The @extend Concept" section), LESS doesn't have an equivalent of @extend. This alone would be a reason I'd never consider switching to LESS, as @extend gives you that option of not repeating properties and values whilst still being able to work in a selector that isn't specifically for the desired properties and values.

 

But, as mentioned, it shouldn't really matter too much what is used for a boilerplate as the developer should be able to use whatever they like for overriding anyway. More important is how easy it is for them to change your chosen breakpoints, as mentioned above.

 

Something else maybe worth considering: normalize.css

Edited June 26, 2012 by BrightEyesDavid (see edit history)

[mexique1]

Hey !

 

I'm also really interested in this kind of project, I'll have some time soon to contribute.

 

What has happened to Twitter Bootstrap, did you abandon it ?

 

 

There is also another big issue with how PrestaShop themes are made : JavaScript.

The JavaScript API is really poor and invasive, there are lots of $(document).ready you can't get rid of, and most of the JavaScript code has hardoded selectors.

We need to rewrite a clean JS API for PrestaShop.

 

About the usage of any CSS framework...

In any case, we NEED a grid framework, or the boilerplate wouldn't help much. Now it's a matter of choosing the one that best fit our needs. Obviously, the boilerplate will bring ready-to-use CSS IDs and classes.

 

Don't know if you heard about it, but I made a free module which adds Smarty plugins : {pan}, in my signature.

You were talking about the lots of logic contained in the templates, I think it would be cool to encapsulate the repeated logic in Smarty functions, to simplify reading.

Really, I have already discussed this with another member of the forum, I think a solid base theme + a helper module would be a killer solution.

 

Really really hoping to see PrestaShop community bring a better solution !

 

Regards, Alex.

[netmechanics]

This is a great idea - my vote is for Twitter Bootstrap, not only do we get the grid, responsiveness etc but great form elements for making very quick and clean check out design.

 

A Prestashop version of Roots or BootstrapWP for Wordpress would solve a lot of problems in getting people started cleanly in Prestashop IMHO.

 

How can we help?

[BrightEyesDavid]

I don't know much about Twitter Bootstrap. Does it allow for proper "mobile-first" responsive design? In other words, is its first media query no media query at all, or does it assume the device has media query support?

[melriks]

There's a definite need for this type of project. The included free theme is just nasty to work with. Having a clean code base theme to start from would be a step in the right direction.

[Tito]

+1 for this project, great idea!

 

Though I do like the awesome LESS css framework, I would NOT include it in this 'boilerplate theme'.

It would make the theme less usable for users that haven't used LESS yet...

 

Theme dev/improvements could still be made using LESS, but exported/imported in the theme as standard css. Therefor making LESS usage 'optional' but not 'required' for the theme.

 

Cheers

[netmechanics]

Maybe a middle ground of providing uncompressed CSS files and the LESS files that made them? That way everybody can be happy...oh and REALLY good workflow documentation for people starting out (that cost me a few days when I first started using LESS wordpress themes)..

[Tito]

Any update on this project ?

I'm willing to help!

[Mark Hesketh]

Hi guys,

 

I'd taken a step back from this over the last month or so as things were really up in the air with Prestashop's development.

 

Now that 1.5 is officially released, I've started things up again. I'll be doing a big commit of all my recent changes at some point today onto Guthub, which includes updating the files from 1.5RC1 to the released 1.5.0.17.

 

I decided to not get bogged down with which framework to use, which grid, which css pre-processor etc etc. I was spending too long second guessing what people would want and nothing was actually getting coded. For now, I've opted for LESS/Semantic GS as a pre-processor and grid system as if I was building it just for me. Doing this has meant things have started happening, and we can talk about what works and what doesn't further down the line.

 

This is a great idea - my vote is for Twitter Bootstrap, not only do we get the grid, responsiveness etc but great form elements for making very quick and clean check out design.

While I really like Bootstrap, and initially considered it, I think it provides a bit too much bulk when Prestashop themes are already huge with the amount of files required due to Prestashop's architecture. The main thing I've been doing is simply overriding all the modules with HTML5 syntax / stripping unneeded classes/JS etc etc.

 

The more I work on this, the more I realise how much its needed. Stripping back the default theme is a bit of a nightmare.

 

My point is that if you like Bootstrap/Foundation or another framework, it should be really simple to add them in as the styles in this theme will be almost non-existant.

 

Maybe a middle ground of providing uncompressed CSS files and the LESS files that made them?

This is exactly what I opted for. While I understand not everyone wants to learn a preprocessor, I've also included the regular compiled/unminified CSS files in the repo too. The idea is for the CSS to be as minimal as absolutely possible, and so the compiled CSS should be very small.

 

Thanks for you support guys, if you have any suggestions/fixes etc, the easiest thing to do is post them to the issues section of the GitHub repo, or even get your hands dirty and fork a copy.

Edited September 21, 2012 by Mark Hesketh (see edit history)

[netmechanics]

Hey Mark,

 

Just downloaded and installed - looking good. I'd like to help, if you have any specific things I could do let me know and I'll have a go.

[describe]

Hi, interesting project.

Is this uptodate now?

[dkm30]

Hi there,

 

How do you go about removing the word default from the naming of the image when it is uploaded for a product. When i check the source code its asking for <img src="prestashop/img/home.jpg" /> when i go to check the file it has default added to them all. Anyway of fixing it.

[dkm30]

Just had a thought about the last message, the images that already come with the default store are not showing as well, so I'm guessing there could be a file or .TPL in the boilerplate that is not adding the default part to the URL for it not to show in the browser.

[dkm30]

Hi, all good found the probelm, the product list.tpl does not ask for the default name that is included when product image is uploaded. copied the product list.tpl from the default shop and worked perfectly. This is the code that should be added

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" />

[c.harrison1988]

+1 for this project.

 

I spend most of my time in Prestashop doing styling. Usually, slicing up HTML/CSS is the easiest part of web development, but because of Prestashop's absolutely retarded default theme, it is the most tedious part of Prestashop development. Defining heights on a heading?! WTF?!

 

I just wasted an afternoon fiddling about with the default theme's stupidity and decided to make a boilerplate for myself. But as you have already started, please let me know how I can help!

 

I agree that LESS should not be part of this. This project should be as simple as possible. Just make it work with all of Prestashop's AJAX features and then just get out of the developer's way. Let's not force people to learn any new concepts or do any work before they can start using this.

 

This boilerplate SHOULD be the default theme for Prestashop.

 

So, how can I help?

[turdi]

It's an awesome project.

 

I use the Blank Canvas for Joomla and it works great for me. Would definately use (maybe even buy, for decent price) a blank canvas for prestashop.

 

But today, the resposivness is a MUST in my opinion.

 

Can't wait when the project will reach it final stage!!

 

Thanks and good luck,

Edited March 26, 2013 by turdi (see edit history)

[jdietrich]

So is this project still going on? What needs to be done? My company is going to be doing a Prestashop install, and we're looking for the most efficient way to get it up and running quickly. We'd love to contribute to this if it will help both us and the community.

[Ricardo Vigatti]

I came from Magento Development, and when i started to work with Prestashop the first thing i've google on was: "Starter blank theme for prestashop".

 

This is a very nice and useful project for prestashop designers and developers.

 

I've read your post and one question that i have was: "Did this Boilerplate theme have Responsive Design by default, or we need to adapt some feature to use with it ?"

 

Cheers.

[JanetsCloset]

I was wondering is there a 1.6.0.11 version for this yet?

[jdietrich]

Unfortunately, it looks like this project has been abandoned for 3 years. I know I got no response a couple of years ago when I offered to help develop it.

 

I doubt there will ever be a 1.6.x version of it.

[JanetsCloset]

That's unfortunate. I might just have to use 1.5!

[implum]

I have been searching the web like crazy to find something like this. I really dont understand why their default theme is such a mess! I would love to use something like this. Anything for 1.6 version?