Jump to content

Recommended Posts

@@burt

 

Per my previous post, I would like to make a proposal for slight change to the template structure/markup for better theme control and overall layout.

 

Ive been looking at a lot of the bootstrip examples and do feel we would be more on target by changing the structure to follow as outlined below:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <nav>navigation_content</nav>
      
    <div class="row">
      <div class="col-sm-12">messageStack_header</div>
    </div>
      
    <header id="modular-header" class="BOOTSTRAP_CONTAINER">
      <div id="header" class="row">
        header_content
      </div>
    </header>
     
    <section id="bodyWrapper" class="BOOTSTRAP_CONTAINER">
        
      <div class="row">
        <div id="bodyContent" class="col-md-* col-md-push-*">
          
          <div class="row">
            <div class="col-xs-12">
              <div class="alert alert-danger">error_message</div>
            </div>
          </div>
            
          <div class="row">
            <div class="col-xs-12">
              <div class="alert alert-info">info_message</div>
            </div>
          </div>
            
          <div class="contentContainer">main_content_per_page</div>
            
        </div> <!-- bodyContent //-->
          
        <aside id="columnLeft" class="col-md-*  col-md-pull-*">
          boxes_column_left
        </aside>
          
        <aside id="columnRight" class="col-md-*">
          boxes_column_right
        </aside>
          
      </div><!-- row -->
    </section> <!--bodyWrapper-->
      
    <footer id="modular-footer" class="BOOTSTRAP_CONTAINER">
      <div id="footer" class="row">
        footer_content
      </div>
      <div id="footer-extra" class="row">
        footer_suffix_content
      </div>
    </footer>
      
  </body>
</html>

Pay no emphasis to the HTML5 elements, they are only there for empahasis!

 

Basically every section would have its own container wrapped around it, yet eveything is still stackable and in order.

 

row classes have been inserted where need be before any dections that would use a col-sm-* class

 

error and info messages have been moved down after the bodyContent opening div to place them better into the view of everything and avoid breaking design by having them float under the header.

 

id's applied to each section mainly for design purposes, and allows to set the bootstrap contianer for each section - wait thats design!

 

I only wonder if placing the footer and footer-extra into one container should be broke into 2 parts, so that the footer-extra has the ability to act like the top nav with nothing wrapping it but itself.

 

 

I really wouldnt even include the header and footer anymore either, just the code to grab the content.

 

So thats my proposal of the day, have tested it on my local and everything lays out as were used to seeing.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

proposal of the day

Could you fork the current master, and put your proposal into code so that I can easily have a play with it...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

I've looked at the code and in general the idea is sound and should be taken forward. But we also want/need to keep backwards compatibility a little bit so I'm not sure that we should remove header and footer files. Thoughts ?

 

234bs should reflect 234 as much as possible. 235bs <> 235. 236bs <> 236

 

Thoughts ?

 

For 2.4, things are different and can be changed as we like..

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Yes definitely need the backwards compatibility with the bootstrap 2.3 series I think will it be a milestone for many years to come even now there are still so many addons etc whch could be updated for the 2.3 series and then to bootstrap.

With the 2.4 series time then for the quantum leap and forget about backwards compatibility.  This should then coincide with the commercial addon area at the latest so the commercial interest will drive forward the new platform.

Just my opinion

 

Think this 2.3. series will be the golden year for a long time to come now its responsive there is a breathing space with the 2.4 series


To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

No harm leaving the header and footer files, the code placed in template_top and bottom would just be moved into those files, much like it was before but with the addition changes for wrapping the area.

 

My main thought on doing away with those files was the .00000001% gain by not having to include 2 more files, and looking at the previous column left and right that were removed in favor of the code directly in the template_bottom file.

 

 

I will change the struture on my fork and resubmit.

 

I would however like to know thoughts on using HTML5 section, header, and aside elements. We do already use nav and footer elements, so it seems that adding in the other markup makes sense to those, both human and bot,  that follow HTML5 standards.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

I would however like to know thoughts on using HTML5 section, header, and aside elements. We do already use nav and footer elements, so it seems that adding in the other markup makes sense to those, both human and bot,  that follow HTML5 standards.

 

Its the way forward, for certain.   Is aside correct for side columns ?

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

I had to look back and check myself, heres my results:

 

In short, an aside is anything that contians something that can be referred to as a side note or information away from or related to the main content. Even a blockquote can be marked up in an aside and it is considered proper markup. 

 

- However - upon revisiting some prevoius info on aside, and having the understanding of it I did not quite grasp when I started using HTML5 a few years ago, I will ditch the side column markup as an aside and go back to the div element. Though no harm would come in using aside, the actual use of it as a side column would be amatuer.

 

Items that would be better represented as a aside in existing build would be things such as the product_reviews content module,  best_sellers, manufacturer_info, anything directly related to the product or category being viewed, or somehow related to the site in the same way the product/category being viewed is, such as a list of links to sub categories, or related products <-- though that can be argued, but much of HTML5 can be.

 

I'll change the commit again! :)


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

One thing I noticed relating to page design/templates and have been changing in each of the main page files is the contentContainer class.   In one of the sites I've been working on I wanted the content of the various pages to be displayed within wells and I found myself changing the div contentContainer class to div wells.  I don't know if that is the best way to achieve what I wanted but it works and as I was updating the code it occurred to me that for template designers it might be nice to be able to change that div class to a variable like @@burt did recently with the Bootstrap settings/variables he added to the admin area.   Anyway if we're going to get into changing the basic format of the pages this might be worth considering while we're in that neighborhood...just a thought for whatever it might be worth.

 

Dan

Edited by Dan Cole

Share this post


Link to post
Share on other sites

I have recently worked on a template, using the structure I proposed. In making the header - as a content module - I came across an issue with using the <header> element. See I wanted to close of the header to make the breadcrumb move over to top of the bodyWrapper in line with the bodyContent area, and then apply style to blend it together so it looked like it was all part of the bodyContent div.

 

So anyhow, if using header element, I would have to close the header, and then open a new header that would close further down inside template top - so ideally we should stay with the standard div tag for such things. The addition wrapper for BOOTSTRAP_CONTAINER was of no effect either way as it can be closed with in the header, or left open - all depending on the complexity of the design, but many ways to work with it becuase it is using a standard div.

 

 

@@Dan Cole

I have also noticed there are pages that need some tidy up and further use of the contentText class for a consistent design flow.

 

@@burt

I have seen a lot of bug fixes and tweaks coming through, so I will probably make a new for, apply what I have learned from the original proposal, and then go through and make the smaller tweaks as I just mentioned above. Some places we have divs with maekup like : class="contentText row" and that doesn't work very well as it changes the margins. I feel some of the button areas also need to be additionally wrapped with contentText.  All and all just for consistant design - some themers will never do a thing with contentText, while other will add classed to them for desired look.

 

If anyone wants a quick view of what im talking about, add this to teplate_bottom.php

<script>
(function ($) {
	$('.contentText').addClass('well well-small');
})(jQuery);
</script>

Some of the main issues are within the account pages, so look around and you'll now easily spot what needs what.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Ok. I made some comments on the original commit the other day...

 

Bear in mind that all pages would be going modular at some point in the future.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×