new layouts, css changes

1 view
Skip to first unread message

Ethan McCutchen

unread,
Nov 14, 2009, 5:43:48 PM11/14/09
to wagn...@googlegroups.com, wagn...@googlegroups.com
(note: because custom layouts now allows wagneers to play with layout HTML directly, I'm sending this to both wagneers and developers)

We've been working to trim down our basic layout even further and experimenting with a new HTML5 version.  Ultimately this is great news, because our naming and css are getting cleaner and simpler, which means they'll be much easier to work with.  However, wome of the simplifications could have an impact on css on your current wagns, particularly if you've done a lot of customization.  We're not deploying any of these changes to live sites yet, but I wanted to give everyone a heads up and get feedback as soon as I could.

Here's a look at the latest version of our default Wagn layout:


<!DOCTYPE HTML>
<html>
  <head>
    {{*head|naked}}
  </head>
 
  <body id="wagn">
    <header id="menu">
      [[/ | Home]]   [[/recent | Recent]]   {{*navbox|naked}} {{*account links|naked}}
    </header>
   
    <section id="primary">
      {{_main}}
    </section>
   
    <section id="secondary">
      <div id="logo">[[/ | {{*logo|naked}}]]</div>
      {{*sidebar|naked}}
      <div id="credit">Wheeled by  [[http://www.wagn.org|Wagn]] v. {{*version|naked}}</div>
      {{*alerts}}
    </section>
   
    {{*foot|naked}}
  </body>
</html>


As you can see, it's getting easier and easier to read and understand at a glance.  By way of comparison, here's the default layout that we had when we released the new layout feature (which was already considerably simplified).

Here are some of the key changes:
  • adding intuitive HTML5 tags like "section" and "header"
  • getting rid of css id and class names that suggest styling, like "page-right", "page-left", and "top-menu" so that it would be more natural to shift them around.
  • trimming excessive divs, like "bottom-menu" which does little but hold "credit" and "page" which just holds the other sections.
  • removing classes from unique elements, like "body", which now has only an id
  • representing all links (including *logo) in the wagn way.
Note that even if we decide, as we likely will, that it's too soon to put out HTML5, we will be moving forward with the new structure and naming convention.  So if you have custom css and want to keep your wagn on the upgrade path, you'll have two options:
  1. update your css to use the new structure (recommended), or
  2. use the old default layout (see below) as your default layout.  (for that you'll need to learn about custom layouts).
Because of all the css cleaning we've been doing, it's possible that you'll need to add a css tweak or two even if you choose route #2.  If you choose route #1, here are the most common changes:
  1. body.wagn --> body#wagn
  2. #top-menu --> #menu
  3. in many cases ".card-slot" is no longer necessary.
Contact sup...@wagn.org if you want to play with the changes before they're released (or pushed to the master git branch).

- ethan


old (current) default layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
    {{*head}}
  </head>
  <body id="wagn" class="wagn">
    <div id="top-menu">
      [[/ | Home]]
      [[/recent | Recent]]
      {{*navbox}}
 
      <span id="logging">
        {{*account links}}
      </span>
    </div>
    <div id="page">
      <div id="page-left">
        {{_main}}
      </div>
      <div id="page-right">
        <div id="logo">
          <a href="/">{{*logo}}</a>
        </div>
        <div id="sidebar">
          {{*sidebar}}
        </div>
        <div id="bottom-menu">
          <div id="credit">
            Wheeled by [[http://www.wagn.org|Wagn]] v. {{*version}}
          </div>
        </div>
        {{*alerts}}
      </div>
    </div>
 
    {{*foot}}
  </body>
</html>

--
Ethan McCutchen
One of the Wagneers, Wagn.org

Patterns.  They're not just for quilting anymore.
Reply all
Reply to author
Forward
0 new messages