Handling of themes, templates, skins and everything visual.

Features: Theming
 Skins

Posted by Nao, on May 9th, 2011, 06:35 PM   (4,098 views)

Feature: Skins (previously 'stylings')
Developer: Nao
Target: everyone (mainly themers)
Status: 95% (believed to be complete; but I added so many features since then... It's probably going to evolve even more.)
Comment:

Skins are Wedge's answer to SMF's CSS variants.
The theme folder's "css" folder is now a "skins" folder with a nested structure. It is one of the most complex new features in Wedge, so it's difficult to describe it thoroughly in a single paragraph. I'll write some proper documentation when the time comes.

In the meantime, just know this: a skin can totally redefine most aspects of a theme without any code modding. Replace or add to the current stylesheets, add jQuery code or remote JavaScript files, rewrite template macros, and optionally set these only for specific browsers. Most importantly, skins allow you to redefine the structure of the template skeleton, which is Wedge's way of handling what SMF called 'template layers' and 'sub-templates' in a way that actually makes sense for designers.

You can also customize the current CSS yourself (add a custom.css file to the skin), or create new skins that inherit (or completely replace) settings from their 'parent' skins. Choose a default skin for guests, play with inheritance by physically moving folders... Themers can expect a lot of fun playing with Wedge.

4 replies
 CSS caching

Posted by Nao, on May 10th, 2011, 06:43 PM   (4,265 views) « 1 2 »

Feature: CSS caching
Developer: Nao
Target: everyone
Status: 100% (believed to be complete.)
Comment:

This is pretty much the same as for JavaScript caching, except that there's only one code path for CSS, since there aren't 50 ways to minify stylesheets.

Now, I'd just like to point out that thanks to the preparser, Wedge's cached CSS files will also embed all of the icon data, saving you yet another number of additional hits that servers and browsers usually don't like too much. IE6 and IE7 don't support data embedding, so they'll simply keep using external links. Who uses these stupid browsers anyway?

25 replies
 Wess: the Wedge preprocessor for CSS

Posted by Nao, on May 10th, 2011, 07:01 PM   (7,490 views) « 1 2 »

Feature: Wess (or WESS, or WeCSS, as you like...)
Developer: Nao
Target: themers, modders
Status: 100% (believed to be complete; given its nature, however, new features are being added regularly as needed.)
Comment:

This is one of the features that make me glad I made them, even though it took me many months of work. For the record, back in January 2011, I read an article about Sass, a CSS pre-parser written in Ruby. I already had plans to write something in that style, but they were nowhere near as advanced as their implementation, so I took inspiration and wrote my own PHP version. As a result, it's about 20 times smaller than Sass, and much faster. It's also a bit less elegant (in that it doesn't optimize resulting rules), and stricter in its structure, but I consider this to be a good thing. Finally, Wess also deals with JavaScript and CSS compression, although the line between Class-CSS[1] and Subs-Cache[2] is becoming increasingly blurrier. (Is that proper English?)

Given that Wess is an extremely complete (and sometimes overwhelming) implementation, it deserves, and will eventually get, its own documentation in the near future.
In the meantime, here's an incomplete list of features:

- selector inheritance ('extends' keyword),
  - multiple inheritance (both from and to),
  - prevent single rules from being inherited by children ('final' keyword),
  - cancel inheritance ('unextends' keyword, useful for inherited skins),
  - delete a property entirely ('@remove' command),
  - reset a selector's earlier styles ('@reset' command, also useful for inherited skins),
  - declare virtual selectors that will disappear once they're mixed or inherited.
- nested selectors,
- normal or simplified syntax (no {}; etc.),
- color manipulation functions,
- math functions,
- mixins (supporting parameters),
- variables,
- @if/@else/@endif (test for a browser or environment, and execute CSS accordinly),
- @is (basically an inline @if),
- & shortcut (current selector),
- cross-browser gradients,
- prefix-free CSS3 styles (just the common ones),
- grouping of properties with identical values (e.g. height, line-height: 20px),
- RGBA emulation in IE,
- and inline graphics where supported (can be disabled on a per-file basis.)

The example below is taken straight from our current index.css, and it uses many of the aforementioned features... Try to figure out what does what!

.catbase virtual
   overflow: hidden
   border-radius: 5px
   padding: 5px 10px 5px
   margin-bottom: 4px
   border: 1px solid rgba(0,0,0, .15)
   font: 700 1.4em/20px $big_font
   img
      vertical-align: -3px

.cat extends .catbase
   background-color: #b3afa9
   color: white
   a
      color: white
      text-decoration: underline
      font-size: .92em
      text-shadow: none
      :hover
         color: #fc9
     .cat final
   background-color: #c3b9c3
   border-color: #fd9604
   border-width: 2px 0 0 0
   text-shadow: black 0 1px 2px
   .table_list &
      margin: -5px

.title extends .cat
   padding: 4px 8px
   border, margin: 0
   #sidebar &
      margin-top: 6px
   a
      color: #faf8f8
 1. The main Wess core...
 2. The list of functions that create the actual CSS and JS files and pass them through Wess or other functions.


29 replies
 New theme

Posted by Nao, on May 6th, 2011, 07:30 PM   (9,934 views) « 1 2 3 »

Feature: New theme
Developer: Nao
Target: everyone
Status: 100% (complete; details are updated as I feel like it.)
Comment:

Gone are Core, Babylon, Classic and Curve. None of SMF's themes had our preference. So we took the (pretty good) Curve codebase and built a new default theme upon it, using HTML5, CSS3 and jQuery.
Its main goal is to be easily extensible, which is achieved through the new Skins feature. See below, as well as the 'Forward thinking' section. Wedge's theme is both beautiful and has the cleanest possible code.

42 replies
 CSS and JavaScript minification

Posted by Nao, on May 10th, 2011, 06:43 PM   (3,137 views)

Feature: CSS and JavaScript minification
Developer: Nao
Target: everyone
Status: 100% (believed to be complete.)
Comment:

Wedge likes bandwidth optimization. Wedge is sad when its pages don't show up immediately. Wedge is a good boy.
Whenever you upload a modified CSS/JS file to your styles or scripts folder, it will catch it, minify it on the fly and cache it.
Minification is a process that removes all comments, whitespace and things that aren't needed for the code to work. CSS is easy to minify, but JS is sometimes a bit capricious, so I added support for JSMin minification (the safe one), Packer 3.0 (the efficient one), and no minification at all (useful for debugging your scripts.)

We recommend using Packer, it's nearly as efficient as UglifyJS. A note to modders: just make sure your JavaScript passes JSLint validation, or at least you don't forget to add semi-colons at the end of var fn = function () { ... }; declarations, otherwise Packer will choke on it (it's fixable, but we'd rather not make the script slower because of lazy programmers.)

13 replies
 Permanent sidebar

Posted by Nao, on May 7th, 2011, 01:04 PM   (14,219 views) « 1 2 3 4 »

Feature: Permanent sidebar
Developer: Nao
Target: users, modders, themers
Status: 100% (complete; might need to add features in the future.)
Comment:

This is one of our most controversial moves. Well, maybe not, but at least one that could be questioned.
Basically, Wedge now always shows a sidebar on the page, and moves it to the bottom if the page is too narrow. It systematically shows your user box (hello user, date, avatar, unread posts, unread replies) at the top, and RSS links at the bottom, and then adds contextual data based on the current page. Calendar pages show day links in the sidebar. Media item pages may show item details in the sidebar (although they'll usually use their own additional sidebar.) Dropdown menus may be moved to the sidebar... Things like that.

In addition, modders can easily add any kind of block to the sidebar by calling loadBlock('my_block_function', ':side'). The same can be done with the top template, which is a series of blocks (sub-templates) that are called before the main template is actually shown, allowing you to add important information at the top without reorganizing everything.

54 replies
 JavaScript caching

Posted by Nao, on May 10th, 2011, 06:43 PM   (9,951 views) « 1 2 3 »

Feature: JavaScript caching
Developer: Nao
Target: everyone
Status: 100% (believed to be complete.)
Comment:

Right after minifying your CSS and JS files, Wedge will cache them and gzip them. The good point is that it's smart enough to cache multiple files together, relieving the server a bit.

I'll use my script.js example again. At the time of writing, the regular script.js/theme.js duo is about 50KB in SMF2 (split over two files), less than 30KB in Wedge (with many extra functions in them), and the actual stuff you download is a single 6KB file, after minification and gzipping. Meanwhile in the wasteland, SMF2 still sends you 50KB of data. Because everyone knows all end-users absolutely need to have comments in the JavaScript code they execute.

31 replies
 Template macros

Posted by Nao, on May 9th, 2011, 06:36 PM   (2,040 views)

Feature: Macros
Developer: Nao
Target: themers, users
Status: 95% (believed to be complete. May need to add features later)
Comment:

Wedge allows skins to define macros in the index template, i.e. blocks of HTML code that you can customize on the fly. You can then call them through <we:yourmacro yourparams="...">Your body</we:youmacro> in all templates. Skins can then override these macros easily.
You can set macros conditionally, i.e. have a macro show up only for members or guests, have another macro show in a certain way to IE6 users and another way to users of other browsers, etc. It's pretty powerful all in all.

Macros available at press time: category, title and title2 headers, block (regular box with optional header and footer), and various wrappers needed for proper sidebar handling.

4 replies