Layout - Wagn

Layout

custom layouts

Layout rules allow you to choose a layout for any Set of cards. And with a little knowledge of HTML and inclusion, you can easily create your own layouts.

+example

Here are all of the layouts in use on wagn.org:

decko org layout

bruce layout 2

Slide Layout

Home Layout

Recent Layout

+howto

A *layout rule works like any other rule (see the rules documentation to learn about navigating to and editing rules).

Here is the layout card currently in use on wagn.org. ("Bruce" is just the name we gave this skin because it sounds like "bruise"; our skin is black and blue.)

<!DOCTYPE HTML>
<html>
  <head>
    {{*head|core}}
  </head>
  
  <body id="wagn">
    <div id="wrapper">
      <div id="top-bar">
        {{bruce top bar|core}}
      </div>
    
      <div id="container">
        <div id="primary">
          {{_main|titled;show: menu}}
        </div>
    
        <div id="secondary">
          {{bruce sidebar|core}}
        </div>
      </div>
    </div>
  </body>
</html>

(See raw HTML syntax)

Notice how the layout uses standard Inclusion Syntax. These inclusions work just like any normal inclusion -- it simply includes those cards.

For a layout to function correctly, it must include these two cards:

{{*head}} -- without this inclusion, javascript won't work, so your Wagn will lose all its dynamic functionality
{{_main}} -- this "contextual names" determines where the main card goes. For example, if you go to a card named "Hot Dog", then the Hot Dog card will appear where this inclusion shows up in the layout. Without this inclusion, every card with this layout will look the same.

Note: the default views for cards included anywhere outside the main card is core, rather than the usual content.

+tips

If you manage to break your Wagn while messing around with layouts, try adding ?layout=blank to the end of your url. This will give you access to a functioning, built-in layout
- Eg. http://www.wagn.org/Documentation?layout=blank.
This trick is often most useful in combination with a custom view (eg "edit" or "options").
- Eg. http://www.wagn.org/Documentation?layout=blank&view=edit.
Similarly, you can test layouts before using them by adding "?layout=[layout name]" at the end of most URLs.

+discussion

Hey Guys! I'm excited about the new layouts infrastructure!

Simple. Elegant. Flexible. Just like wagneering. Well Done! I look forward to playing with it more.

This is amazing! I am so glad to find this. I was considering Semantic MediaWiki for a project, but the ease and grace of Wagn is superb, as with this custom layout feature. Well done! Excellent crafting!

--Patrick (Not signed in).....Sun Oct 25 14:58:07 -0700 2009

Great job. Getting very close to the 'Everything-is-a-Card' meme.

--WG (Not signed in).....Mon Oct 26 08:52:55 -0700 2009

Layouts now work with any Set, not just *all.

--John Abbe.....Tue Apr 27 02:24:59 -0700 2010

The list (in +examples) of "all" layouts isn't complete, and I can't think of a way to get all layouts, since some (e.g. mobile) aren't referred to by a +*layout card. Ideas?

--John Abbe.....Thu Jan 27 16:34:09 -0800 2011

Tickets relevant to custom layouts

Tickets relevant to Layout