Amend the Template Structure

♥GLWalker · January 6, 2015

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.

burt · January 6, 2015

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

burt · January 7, 2015

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

♥joli1811 · January 7, 2015

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

♥GLWalker · January 7, 2015

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.

burt · January 7, 2015

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 ?

♥GLWalker · January 7, 2015

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! :)

Dan Cole · January 8, 2015

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

♥GLWalker · January 29, 2015

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.

burt · January 30, 2015

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.

Amend the Template Structure

Recommended Posts

♥GLWalker

Link to comment

Share on other sites

burt

Link to comment

Share on other sites

burt

Link to comment

Share on other sites

♥joli1811

Link to comment

Share on other sites

♥GLWalker

Link to comment

Share on other sites

burt

Link to comment

Share on other sites

♥GLWalker

Link to comment

Share on other sites

Dan Cole

Link to comment

Share on other sites

♥GLWalker

Link to comment

Share on other sites

burt

Link to comment

Share on other sites

Archived

Browse

Activity