Damyon, my impression is that one main reason why people would like to use CSS frameworks is the difficult situation to style Moodle - to fill the gaps.
When I remember right you had written that HTML/classnames and CSS are closely connected. Agreed. The best way out as I see it would be to clean up Moodle HTML/classnames and build consistent CSS. And not think about third party CSS frameworks which might need to fit on top of it - this approach will diffuse the task.
At Vimeo if you may be interested: This talk by Brad Frost was held at beyond tellerrand 2013, May 27 – 29, in Düsseldorf where he announced his brand new Pattern Lab: http://vimeo.com/channels/beyondtellerrand/67476280
PS: You may notice the short sequence at 50:20 in his talk
An interesting view on the discussion how to setup Moodle HTML and CSS I discovered when I wrote the postings. Moodle developers decided against a development framework and did the work to setup Moodle from scratch. If that is considered a good strategy for Moodle to be able to deliver the environment needed this approach may be right for the front-end too. And now with the front-end team Moodle HQ has the competences.
I think it is.
Damyon you start this discussion in the very moment I am fundamentally rethinking my Moodle theme work. With the switch to responsive layouts and multi device delivery a lot must change.
Not only needs the layout to adopt to different screens but also the page weight (KB/MB delivered) needs to be reduced radically. And the content needs to be prepared fast on the server and rendered fast in the different browsers. So the key demands for Moodle pages which are capable to deliver an acceptable or even good user experience are responsive layouts and speed.
To implement responsive layouts is relative easy with Bootstrap. To work on the weight and speed is much more complicated. I know that the Moodle way to cascade themes by overriding CSS in several stages is not good for speed. To base the Moodle CSS on an existing framework is an easy starting point to get started immediately. But we buy in a lot of unused CSS.
A speedy and optimized solution you/we can get only by setting up the HTML structure and the CSS Moodle needs. Optimized for Moodle. One can steel everywhere and collect from existing approaches. Harry Roberts talked about "Architecting Scalable CSS" on the BeyondTellerand conference in May. His credo was "optimize". One slide I remember was "Each client needs their own Bootstrap" - I think the same is valid for Moodle.
When I look at the purecss.io/extend page today I like the way how Pure and parts of Bootstrap are combined. Moodle uses YUI - why not take purecss as a base and build the Moodle CSS on top. Use parts of Bootstrap where appropriate. And optimize, optimize, optimze.
By the way the pure "skin builder" looks interesting.
The Totara element library is nice, I checked it and used it immediately in my theme work. On the BeyondTellerrand conference I heard Brad Frost's talk about his new Pattern Lab. The description on the Github page:
"All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages."
When you look at the way the Pattern Library works you see it uses exactly the same structure as websites should be build. First define the "Atoms" like Type and other basic elements. Then create the molecules by combining the atoms. In the Pattern Library the "molecules" are not created from scratch but the atoms are "included" (Brad uses PHP and includes the atom files). The same with the next stage the "organisms" and so on.
The philosophy behind the Pattern Lab helps designers and developers to understand the structures. Start to create the basic elements and build the complex ones by combining the basic elements. Never invent new elements in complex structures - always use the basic elements. And when some new elements are needed create them as an atom. Think carefully if you really need a new atom or if you can get the solution by combining existing elements. Then build the new molecule together with the existing atoms. Create the organism you need for the page and put it into the page.
The basic concept of the Pattern Lab sounds quite similar to the Totara element library. Show what you have. The big difference is that in the Totara element library all pages are constructed from scratch. In the Pattern Lab the atoms are created. The higher complex structures work by including lower complex structures. Always with the good advice - take what you have - don't invent new. And you get the much desired consistency in the pages - automatically.
To find an entry point working with the Pattern Lab may be to set up two installations.
One to collect all the elements Moodle uses now to be able to find a way to detect the similar but slightly different atoms/molecules and replace them with one. This approach would help to enhance the consistency in Moodle pages with no/minimal modifications in the Moodle codebase.
The other to create new atoms using the much discussed new code/CSS structure with clean class naming. And form there build the molecules and so on to show how the pages should look in the future. This second Pattern Lab would help to build and understand and test the new approach.
What do you think?