Frontend templates, Bootstrap3 and theme customization - a missed opportunity?

[Paul Walsh]

I see that since ~ December we have BS3 templates for the frontend on the master branch.

That's great!

In an earlier thread discussing front end improvements for Oscar (thread), I made the following suggestion:

* Remove direct references to bootstrap from the template layer (.well, .control-group, etc.) - instead, use non-bootstrap semantic class names, which can be implemented with bootstrap mixins in LESS. Using bootstrap like this is better anyway, IMHO, and leads to less chaining of classes in HTML.

So, now we are on Bootstrap3 and that is great, but we still have bootstrap class names throughout the default templates. 

I understand it can be hard to see the problem with this if you always use bootstrap, or, just want to do small style tweaks to the default theme, but it is a real missed opportunity for deeper customization.

I've seen other people mention maybe doing a Zurb theme for Oscar; I've done a theme with a small LESS library I wrote: these type of excursions are much more painful when the **HTML is coupled to the CSS framework**. It pretty much means you have to do your own templates, or, use the declarative bootstrap CSS class names in your own non-bootstrap code.

I've give an example of what we have, and how it could be different:

https://github.com/django-oscar/django-oscar/blob/master/src/oscar/templates/oscar/checkout/preview.html#L31

 <div class="form-group form-actions clearfix"> <div class="row"> <div class="col-sm-3 col-sm-offset-9"> <button id='place-order' type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="{% trans 'Submitting...' %}">{% trans "Place order" %}</button> </div> </div> </div>

could be:

<div class="checkout-action-group">
    <div class="checkout-buttons">SUBMIT BUTTON, etc.</div>
</div>

And, seeing as the CSS in Oscar *is* being written in LESS anyway, use the bootstrap mixins the create these classes instead of chaining/declaring them in HTML.

* http://slicejack.com/bootstrap-with-less-workflow/

* http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/

Why do I think this is better?

* Separation of concerns

* Oscar is a framework; the default theme can/should follow suit

* Custom CSS/LESS/SASS backends/themes can make **much** better use of the shipped templates if they use semantic classes, and not bootstrap class declarations: more DIY

To elaborate on the last point, with my simple example above, if I want to implement a theme using Zurb Foundation, my MVP implementation is to write .checkout-action-group and .checkout-buttons in LESS using Zurb. 

Using templates as they are currently in Oscar, I would need to rewrite the template as well (or, implement each bootstrap class in Zurb). When you multiply that out for each template/partial in the Oscar frontend, that is a lot of changes to make, and more importantly, a lot to keep track of as new versions of Oscar are shipped (this is critical, as I've found out the hard way, as there is some quite important **logic** in some Oscar templates).

So, I'm just putting this out there for consideration/discussion.

[Joshua Wedekind]

I like this idea.

But I also know it would be a lot of work.

I've successfully taken the Oscar default template, and written a highly-customized Zurb Foundation template. It took forever, and will only work on this one client's website (due to the numerous customizations).

If you make what you are describing, people (like me) would probably buy it.

~Josh

[Maik Hoepfel]

Paul,

I understand your concern, and I fully agree what you suggest would be the best solution in an ideal world. 

But the reality is that at the moment, most Oscar contributors don't seem to be able or willing to contribute a lot of frontend code. I know that both David and I are not well versed when it comes to frontend work, and hence it can be tricky to review. 

Bootstrap is quite popular among developers, and the chances of getting contributions with a basic Bootstrap skeleton are higher than when a potential contributor has to also learn our frontend framework.

Furthermore, most Oscar implementations I'm aware of completely switch out the templates set. So as far as the frontend goes, little attention is paid. 

I hope this makes sense. 

Regards,

Maik

--
https://github.com/tangentlabs/django-oscar
http://django-oscar.readthedocs.org/en/latest/
https://twitter.com/django_oscar
---
You received this message because you are subscribed to the Google Groups "django-oscar" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-oscar...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-oscar.

To view this discussion on the web, visit https://groups.google.com/d/msgid/django-oscar/62b3a7c7-3782-4390-a0f7-1c68205402b9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.