This recipe will be about integration of yaml trough smaller modules.
The modules will integrate yaml and new functionality will be built around it.
A especial tmpl file has to be used to take adavantage of all the features provided by Yaml.
We will start with the yaml core to load css files in proper order and sent to the right places, with options checked and markups processed, to configure it the right way:
$HTMLHeaderFmtwith specific code for IEs.
Some of the files could be could merged and minified, creating 2 or three combinations of minified files.
The combinations would be mostly base with rtl and print.
Forms could be integrated, but to really use it we would have to change a some of pmwiki's current styles, wich are close to none, and also put on the html tags used in forms a yaml class accordingly.
That could be done from the recipe, the basic styling of forms is done on base.css. The gray-theme.css makes forms better looking.
Yaml has some good styles for basic navigational elements wich are horizontal list and vertical list, named respectivelly hlist.css and vlist.css.
use of this could be done by just linking to where the stylesheets are.
Perhaps create a file with the two merged and minified.
Yaml has different grids available to the designer. The first one comes from base.css and includes equalization, direction and 11 options for boxes.
Yaml also has a port of 960gs grids, with 12 and 16 boxes.
Integration is possible, just have to load the files properly to
Here is were we get into "screen" realm.
Yaml provides options to configure typography-rtl too.
But typography and page layout (the section bellow) are the two parts that make me unconfortable to do as modules, as I believe this two are part of the theming/skining process and the designer should only take yaml files as an example.
if we do the module:
Here is where a lot of magical stuff happens, like linearization and configuration of page layout to fit different screen sizes.
Yaml4 embraced RWD, AFAIK, wich means Responsive Web Design, and it is a series of rules/practices, to design a website for different devices with different screen resolutions AND orientations.
One of the first rules of RWD is to design for mobiles first! Wich means, no need for a separated mobile site.
I'm not completly sure how this would go for pmwiki. Pm chose very sensible defaults at first, we (I) users asked for stuff and did stuff for the appearance part, not knowing that the choices he had made for it, were based on studies about accessibility. BUT surely, Pm tried to make PmWiki as accessible as possible, but not device independent and for mobiles first.
The first pmwiki skin was narrow, I believe it was smaller than 800 pixels ... (pmwiki skin checked) ... it was width:720px and left aligned on version 1.0.0 .
Designing for mobiles first creates a series of small problems wich a designer has to solve, as an example, a designer has to work on how to load and display ads from mobiles to desktops.
I'm not completly sure if it is a good idea to turn this into a module, I guess from this part forward, the skin designer has to think about what he will implement or not, and chose to follow Yaml's decisions or not.
Tutoriais de Tecnologia Web