Skin+howto

Note: before the Wagn 1.12 release, styling was done with a combination of (a) hard-coded styles and (b) the *css card.  None of the following applies to older releases.

choose a skin

As of Wagn 1.12, every card has a *style rule that determines the skin for its page.  Editing it is like editing any other rule.  After editing a *style rule you will need to reload a page (and thereby reload the CSS) to see the skin take effect.

understand skins

• CSS - CSS is the ultimate product of the skinning sytem; it's the way browsers understand styling rules.  Those wishing to edit CSS directly may do so by editing CSS cards (cards with the CSS type).  When viewing a CSS card's normal (HTML) page, you will see syntax highlighting.  When rendered as CSS (eg, by going to /my_css_card.css), you will see a comment above the css outlining the card's name
• SCSS - SCSS (a variant of sass), empowers CSS developers with capabilities like variables, mixins, and syntactic shortcuts.  In edit mode, SCSS shows just raw syntax.  When viewing it in HTML or CSS format, it compiles to CSS and renders just like CSS cards.
• Skin - Skin cards are just a list of other cards that produce CSS.  This makes it easy for different skins to re-use chunks of CSS.   In Wagn terms, they're really just glorified pointers.  In the future, we expect to hone the Skin editor to better fit the need of Skin developers; at present it merely offers a simple pointer interface.
• *style rules -style rules are simple pointers to skins and/or style cards (CSS / SCSS).  By default they are configured to show only Skin cards as options (and not, for example, low-level CSS cards).  But CSS geeks may change this at will :)
• style files - these temporary files get generated automatically whenever you save a *style rule.  They compile, concatenate, and compress the CSS.  And, like all wagn files, they are fingerprinted so that browsers can permanently cache them.  All of this means that they make Wagn stylesheets FAST.  

edit a skin

Editing a skin can involve editing any of the Skin, CSS, or SCSS cards involved.

Important:  you will likely need to do a hard refresh (ctl-shift-R or command-shift-R in many web browsers) to get changes to Skin, CSS, or SCSS cards to take effect. 

You can use the following tricks when editing these cards

• ?debug=style -- adding this to your url will deliver the CSS in separate sheets, so that you can easily navigate them with browser-based CSS tools.  This technique removes all the optimizations of "style files" (see above), so it can be quite a bit slower that normal rendering, but it's very useful when you're tweaking your styles and skins.
• ?style=[skin or stylesheet cardname] -- another good trick, add this to your url to specify which skin or stylesheet (CSS/SCSS) to use.  It can be used in combination with the debug trick if you want the stylesheets rendered separately. 

Note: we will soon prompt for immediate update when editing skin-related cards to simplify this process.

install a new skin

At present, installing a new skin requires a bit of cut and paste.  In the near future we plan to automate sharing cards between Wagns, which will dramatically simplify the process.

To copy a skin from another site, you will need to copy:

1. the Skin card itself, and
2. any items referred to by the Skin card, including CSS, SCSS, Images, and others Skins.