Themes

Sounds like a plan when you compare the top of https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/core.less and https://github.com/bmbrands/theme_bootstrap/blob/master/less/moodle/core.less.  I wonder how much there actually is?  Could be quite small.  But... as I've found with MDL-43112, changing the code is easy, writing the test to demonstrate that nothing was harmed in the process or that an icon moving one pixel to the left is ok, is the hard part.  Therefore, despite the process of changing the LESS might be easy, writing the test plan to demonstrate that all of the screens that could be affected are 'not' is the issue.  Unless there is a leap of faith that the improvement is logical and any 'pixel' issues can be rectified in release testing, where 'personpower' is utilised to check everything.

However... In reality what needs to happen is to reduce the amount of CSS in the first place, down to a more manageable less granular, component based set of reusable entities.  But leave specific classes in if theme designers want to target 'this' or 'that' pixel where no other means of selector specification would work.  Less is more when there is a reduction in the quantity of code and therefore amount of test coverage required.

Reduce, refactor, improve.  Simples!

Hi Mary,

That would be a great idea! I would love to be able to simply pull in any framework I like and combine it with moodle less files.

Before that is even possible Moodle css and html would need to be broken down into components or atoms which would allow us to apply framework styling to them. With MDL-36558 being discussed it looks like this could already be in Moodle 2.8. It would be a major change in Moodle but essential to making the front-end manageable.

So basically we could have some markup like this:

<div class ="forum-post">
    <div class = "forum-title">
        <a href="userpage><img class="profilepic">pic
        <a>
        <div class="bd">
        </div>
    </div>
    ...
</div>

 Where we can link framework classes in less.

.forum-post {
    .panel .panel-default;
}
.forum-title {
    .panel-heading;
    .media-box;
}

The hard part would be to identify all different components in Moodle and allow them to be re-used in many different contexts.

This video  on Style Guide Driven development posted by David describes a project much like Moodle where they have redesigned both the front end and back end of a webapp. So in concluding. With a nice elementlibrary that is independent of a css framework we would need less HTML, CSS and testing to make cool themes and plugins.