Feedback: Theme system

[Justin]

Our Plans

Though MyBB 2's theme system has not yet been developed, a number of pieces are already in place or in planning stages for when development of the theme system begins. Below are our current plans for MyBB 2's theme system:

Custom Stylesheets with built-in SASS support

As can be seen in the MyBB 2 repository on GitHub, we are already using SASS to dramatically simplify our stylesheets and the way they are managed. This includes built-in support for multiple stylesheets, theme variables, nesting, reuse of CSS using mixins, and much more.

Custom Views using the Twig templating engine

MyBB 2 already uses the Twig templating engine for views, which is comparable to templates in MyBB 1.x. Twig provides a number of features that allow us to reduce the number of templates included in the MyBB theme and make template management and customization of your forum's theme simpler.

Built-in asset manager for CSS and JavaScript

Current plans include using the Assetic asset management system to manage custom CSS and JavaScript in the Admin CP.

The Asset manager will allow the addition of custom stylesheets and JavaScript files/blocks to both the global asset collection, and to single pages/sections. All stylesheets and JS will be minified and combined to save bandwidth, and JavaScript will have a basic dependency system to ensure that dependencies are loaded (e.g.: if a script you add requires jQuery, the system will make sure it is loaded first).

This is still being thought out and there's no user interface to show yet, but we will certainly be talking about it as we plan it out.

Icon Library

Currently, MyBB 2 uses FontAwesome to provide a wide variety icons throughout the front end. We are currently planning to move to the use of SVG icons, which provide a number of benefits compared to icon fonts. Though not yet implemented, our plan is to allow easy inclusion of a wide variety of icons with a short line of code. This would allow plugin and theme authors to use additional icons beyond those that are used in the default MyBB theme.

Editor Enhancements

The current style and template editor provides basic syntax highlighting which can help a little. In 2.0, the editor will include tabbed editing (allowing the editing of multiple files within a single browser tab) along with changes being applied via AJAX rather than requiring a full page reload.

Additionally, we plan to include a preview system for stylesheet changes, allowing you to see what affect your changes have in real time.


Your Feedback

If you have any specific feedback on these plans, or on anything else you think we need to consider as we develop MyBB 2's theme system, please share it below.


Thanks,
The MyBB Team

[WallBB]

Thanks Justin S, all of these sounds amazing.
The best part being able to use SASS in MyBB, superb. Brings lots of excitement in terms of coding experience for theme designers.
I hope we will get something related to Theme version support in 2.x series.
http://community.mybb.com/thread-190172.html

[katos]

along with changes being applied via AJAX rather than requiring a full page reload.

Woohoo! What a great addition, looking forward to this one.

Additionally, we plan to include a preview system for stylesheet changes, allowing you to see what affect your changes have in real time.

This would be a very nice addition. Would this be done through a preview box I take it? 

We are currently planning to move to the use of SVG icons

Fully support this move, this would be a very good transition and actually (imho) would make Mybb seem more modern and "updated". Even if it is just a small change.

Current plans include using the Assetic asset management system to manage custom CSS and JavaScript in the Admin CP.

This I would need to see more, I would like to see how to plan to integrate this and exactly what your plans are.
Would you be looking at auto-minification, or minifcation on a button click?

Twig provides a number of features that allow us to reduce the number of templates included in the MyBB theme and make template management and customization of your forum's theme simpler.

Glad to see you guys making use of Twig, like you say this will make customization much easier to do, and will also reduce the number of templates. This should help to tidy things up. Am I right in saying that this would also reduce the overall footprint of Mybb (even just a little bit?)

Custom Stylesheets with built-in SASS support

SASS is something I am not particularly familiar with, so I shall be reading into that!
Overall, I think your plans are solid and provide a firm basis for the updating and modernisation of Mybb. I look forward to seeing what yourself and the rest of the team can bring to the bright future of Mybb! 
Keep up your hard work guys. I (for one) really appreciate everything that you guys are doing!

[Eric]

Custom Stylesheets with built-in SASS support

SASS is something I am not particularly familiar with, so I shall be reading into that!

One of the great things about SASS is that you can throw regular CSS in there and it'll work just fine. Though learning a CSS preprocessor (If you write CSS frequently) will save you boatloads of time and help anyone else who may have a hand in your code edit it extremely easily. You may see a line like this in MyBB2:

$primary-color: #007fd0;

Changing that would update the blue shade use throughout the whole software.

[katos]

Custom Stylesheets with built-in SASS support

SASS is something I am not particularly familiar with, so I shall be reading into that!

One of the great things about SASS is that you can throw regular CSS in there and it'll work just fine. Though learning a CSS preprocessor (If you write CSS frequently) will save you boatloads of time and help anyone else who may have a hand in your code edit it extremely easily. You may see a line like this in MyBB2:

$primary-color: #007fd0;

Changing that would update the blue shade use throughout the whole software.

Well shiver me bleedin' timbers! 
That's amazing. Something I definitely will be making use of

[Euan T]

We can also define mixins in SASS, that can be included. So, for instance:

.someClass {
  @include clearfix();
  @extend .someOtherClass;
}

This will make the element auto clearing via clear fix, and extend some other CSS class, inheriting all of its rules.

Quote:
Current plans include using the Assetic asset management system to manage custom CSS and JavaScript in the Admin CP.

This I would need to see more, I would like to see how to plan to integrate this and exactly what your plans are.
Would you be looking at auto-minification, or minifcation on a button click?

Yes, Assetic allows us to define "sections", which can include CSS files and JS files that will be bundled together into a single file and can optionally be minified automatically.

Quote:
Additionally, we plan to include a preview system for stylesheet changes, allowing you to see what affect your changes have in real time.

This would be a very nice addition. Would this be done through a preview box I take it?

Probably, or it may be done side-by-side in a split editor. I've not yet thought about how to handle this best

[brad-t]

This all sounds great. Are you planning to use any framework (like Bootstrap)?

[Euan T]

This all sounds great. Are you planning to use any framework (like Bootstrap)?

At the minute, I believe it's all custom. Justin's done almost all of the work on it so far, and is currently refactoring a lot of stuff into separate components (see here: https://github.com/justinsoltesz/mybb2/t...ssets/sass).

[jshort]

This all sounds great. Like others, I'm especially excited to be able to use SASS and Twig.

I'm interested to know if the team plans to continue the use of having theme colors available and expanding that so users can choose from them. Right now, I honestly think the different theme colors option that was added in 1.8 to be pretty useless because my members aren't able to choose from those options, so if I want them to be able to choose from different color palettes, I still have to create a bunch of themes that are ultimately identical except for a few colors.

[Euan T]

This all sounds great. Like others, I'm especially excited to be able to use SASS and Twig.

I'm interested to know if the team plans to continue the use of having theme colors available and expanding that so users can choose from them. Right now, I honestly think the different theme colors option that was added in 1.8 to be pretty useless because my members aren't able to choose from those options, so if I want them to be able to choose from different color palettes, I still have to create a bunch of themes that are ultimately identical except for a few colors.

I think we probably should keep that around, and extend it to member use. It would certainly make sense to do so. With us using SASS, it would be even easier too - all you should need to do is edit a few variables for colours (and we'll likely have a nice wrapper user interface around that too).