Wedge

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

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

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

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