Dear developers,

firstly let me congratulate the team on the great advancement that have been made on improving the theming of LimeSurvey. For several customers, both existing, as well as new ones, this has proved to save time.

The possibility to inherit theme structures (like views, js and variables) proves to be very strong and helpful.

BUT.....

For developing a theme that can work on different versions of LS 3.x, a theme that can be used by (paying or non-paying) still some work must be done. The main reason for that is, to my opinion, the current vanilla theme still has too many classes and constructs in it to function as a good clean sheet to start from.

I ran into this when I started to develop a theme as a child of vanilla. In several cases I ran into classes that were defined for the ease of the original developers, but that obstruct the developers of new themes.

For example, classes like .space-col, that are inserted for easy adding some space to certain building blocks, hinder further development. Here I could have chosen several approaches.

1. neutralize the .space-col in custom.css. This will result in some work, because just stating: .space-col{all margins=0} will not work correctly. .space-col is often used together with some other classes, like h3 and LS-classes, which have their own margins and paddings. Neutralizing .space-col will raise the need for re-adjusting those other classes, which will result in a lot of extra css-lines.


2. copy the .twig files that hold the superfluous classes to my own custom theme and adjust these. This is the most clean approach, but when the vanilla theme, on which the custom theme is changed, this may result in unwanted effects in the custom theme and the need to adjust this for different versions of LimeSurvey.


3. delete the superfluous classes with javascript, using statements like: $("*").removeClass( "space-col" ); This works and helps a lot, but it slows down the page loading and it looks unprofessional to see a page build up and then change several things (because .space-col is in my case not the only unwanted class). Furthermore it clutters both the base theme as well as the custom theme with code and reverting code.


4. Other approaches? Please add...

When all this development into "twigging" the themes started, back in 2016, I hoped that these new development would result in a solid basis for other developers to build their solutions on. I also think that this solution is within reach, but still needs some work. I am willing to contribute to that, but before doing so, I would like to know if this work will have a chance to be accepted.

My approach would be the following. Either define a new template (something like "clean" or "base") or change the already existing "vanilla" into a real clean sheet:

• the new template is not intended to be used as a survey template. It will function, but it will look completely unstyled, no margins, no paddings, no fonts, no colors.
• the new template will not hold question subtemplates, it will hold exactly the same templates as are available in "vanilla"
• all classes that are designer decisions will be taken out. These are classes like: .space-col, but also: .text-center, .text-primary
• constructs for adding icons, will be solved in .css (using :before) and not in templates.
• I realise that there are blurred boundaries here: in fact all Bootstrap related classes could (should?) be taken out, whereas the developer could use @extend to add Bootstrap (or another framework) behaviour, based on semantic classes from LS. But I do not want to be as strict as that. I would propose that only Bootstrap classes that relate to pure (?) layout and responsive behaviour should be in and to leave the styling of custom templates completely to the theme developer.

The resulting theme.css in the clean base theme can then also be very small, with minimal need to override this from the custom.css in the custom theme.

Same for the templates and javascript files.

Would this work as an approach for now or for the upcoming LS4?

Thanks for that nice analysis, Tammo!

From my point of view we should first think about the common Limesurvey user adjusting templates. Usually these are neither CSS nor JS experts so too technical approaches should be prevented.
You are right that there "classes that were defined for the ease of the original developers, but that obstruct the developers of new themes" and from other users or cusotmers I know that this can cause problems because sometimes they are not that easy to adjust or overwrite. This also applies to other styling elements using "!important" notations.

From my point of view the best approach would be to start small and remove only some of these classes from the vanilla theme. We can still have another "raw" template without any styling details or maybe a third one with bootstrap only. But the existing vanilla theme should not be changed a lot I'd say.

Mazi wrote: first think about the common Limesurvey user adjusting templates. Usually these are neither CSS nor JS experts so too technical approaches should be prevented

If I got it right, Tammo wants a theme for theme developers. Which seems to be the opposite of the most common LimeSurvey user.

But the "common LimeSurvey user" is an interesting construct.

Mantis and the forum is full of feature requests (even bugreports contain suggestions to improve or change).

What metric is used to choose how and when to investigate or implement these suggestions (in Mantis and in the forum)?
The ease to implement the suggestion (amount of time and impact on codebase) seems to be a big factor.
Beside from that? The customer base (customer vs user)? The customer of LimeSurvey GmbH? The customers of yours?

What is the (most) common LimeSurvey user?

Are students which are forced to use LimeSurvey the most common LimeSurvey users?
Are SME installing a LimeSurvey tool on their website the most common LimeSuvrey users?
Or are LimeSurvey hosting customers the most common LimeSurvey users?

What if the most common LimeSurvey user never visits the LimeSurvey.org website, never changes the settings of LimeSurvey and never uploads a theme.


BTW: Is there a SaaS survey tool in the market which has third party theme providers?
I have seen tools, that focus on simple enduser customizing (e.g. SurveyMonkey help.surveymonkey.com/articles/en_US/kb/...-survey-theme#Custom
and deeper access like SurveyGizmo ( help.surveygizmo.com/help/custom-theme#a...styling-html-and-css ). But no sellers for third party themes.

LimeSurvey GmbH is selling one LS 3 theme (Material - Design template Version 3.0) via Premium downloads and has announced selling questions themes.

Is there still room for discussion for LS4? End of 2018 is not that far away.

jelo wrote: …
If I got it right, Tammo wants a theme for theme developers. Which seems to be the opposite of the most common LimeSurvey user.
…

I think Tammo want to do a template easily updatable by common user's

for the "raw" theme, I did one when we launched ls3. But I didn't maintain it so I'm not sure it's still valid.
I'll try to redo one quickly, it should make things easier fort 3rd party dev.

About creating a theme easily updatable by common user's, remember that the option page can be completely customized by 3rd party dev. So creating a wysiwyg inside the option page is absolutely doable: just a matter of time and skills in js.

Well, I did think of a "raw" template, a really only functional and absolutely unstyled theme when I wrote the post yesterday. This would be functionally usable in the sense that all LimeSurvey functions will work and all information is displayed. But the raw theme will be unusable in the sense that it will make the respondent think that (s)he is looking at "raw" code, merely than at a survey.

But the answers by Mazi, Louis, Jelo and Denis made me think that this "raw" theme could be a starter's theme next to the "vanilla" theme that is now in place.

The main difference will be that the raw theme is intended for theme developers with more technical background, for example theme developers that use SASS/LESS and that can use @extend, whereas the "vanilla" theme is more intended for users that just want to tweak fonts, colors, margins and paddings. Also, since the "raw" theme is so "empty", it would need less updates and would therefore be more stable and usable as a basis for child-themes.

But still: convienience classes that were added for developers ease of use, are always nasty and should (IMHO) be avoided/deleted. Like .space-col. Bootstrap styling classes like .h3, .text-center, .text-primary may be used in the vanilla theme, but should not be in the raw theme.

As I see now, this dialogue helps me to get my mind clear on this, so extra input is greatly appreciated.

Tammo

And of course not all development effort should lie on the development team. I think that external developers, outside of LimeSurvey GmbH, people that need such a "raw" template, could maintain such a part of the software.

But perhaps it can be made part of the normal distribution, so more theme developers can rely on it.

vanilla uses SASS/LESS and @extend: it's Bootstrap.
getbootstrap.com/docs/3.3/customize/

just use one of the many bootstrap generators, and then use the generated bootstrap.css to replace the vanilla one.

I will upload today in this thread the raw theme I did few month ago, so if someone want to fix it (I think some layouts are missing, but it should be easy)

Hi Louis,

yes I understand this, but for users with somewhat less (not LESS) technical background, these SASS/LESS and @extend tools may be a bit above their heads. I think this is very good for advanced theme developers, but possibly not for people that just want adjust some colors and paddings... Fot these users the "vanilla" is great, with the possibility to add custom css lines, that sit on top of what was already created.

For more advanced development I hope that a very "clean and minimal" theme can be developed and maintained (with effort form the people that benefit from it...), that does only need adding of .css lines and not overriding.

Tammo

Louis, that would be great. I am sure that people here (I would) want to help maintaining such a "clean sheet" .

so, here we go (attached file)
this theme was working with the latest Realase Candidate.
you can download the RC3 here:
www.limesurvey.org/development-release?d...y300-rc3%20171114zip