Thoughts on custom theming using vanilla theme.

More
1 month 3 days ago - 1 month 3 days ago #173933 by tammo
tammo created the topic: Thoughts on custom theming using vanilla theme.
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?


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
Last Edit: 1 month 3 days ago by tammo.
The following user(s) said Thank You: DenisChenu

Please Log in or Create an account to join the conversation.

More
1 month 3 days ago - 1 month 3 days ago #173941 by Mazi
Mazi replied the topic: Thoughts on custom theming using vanilla theme.
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.


Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"
Last Edit: 1 month 3 days ago by Mazi.
The following user(s) said Thank You: DenisChenu

Please Log in or Create an account to join the conversation.

More
1 month 3 days ago #173958 by jelo
jelo replied the topic: Thoughts on custom theming using vanilla theme.

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.

Are you a student conducting a survey? If yes, tell me why you use LimeSurvey?
www.limesurvey.org/forum/development/116...y-you-use-limesurvey

Please Log in or Create an account to join the conversation.

More
1 month 3 days ago #173964 by DenisChenu
DenisChenu replied the topic: Thoughts on custom theming using vanilla theme.

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 :)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 3 days ago #173970 by LouisGac
LouisGac replied the topic: Thoughts on custom theming using vanilla theme.
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.

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #174033 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
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


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #174034 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
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.


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago - 1 month 2 days ago #174037 by LouisGac
LouisGac replied the topic: Thoughts on custom theming using vanilla theme.
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.
Last Edit: 1 month 2 days ago by LouisGac.

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #174038 by LouisGac
LouisGac replied the topic: Thoughts on custom theming using vanilla theme.
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)
The following user(s) said Thank You: tammo

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #174041 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
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


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
1 month 2 days ago #174042 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
Louis, that would be great. I am sure that people here (I would) want to help maintaining such a "clean sheet" .


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
1 month 1 day ago #174074 by LouisGac
LouisGac replied the topic: Thoughts on custom theming using vanilla theme.
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
Attachments:

Please Log in or Create an account to join the conversation.

More
1 month 1 day ago #174076 by holch
holch replied the topic: Thoughts on custom theming using vanilla theme.
I am very interested in this as well. I was quite firm in CSS and HTML 10 years ago, but I have not done much since then. Thus I am rusty and bootstrap etc. are currently way over my head and I would have to put a lot of effort to get into this.

The current templates have a lot of code and are pretty complicated (for me). The templates are great in terms of features, but difficult to "understand" if you are not a pro in webdevelopment but would like to create a custom theme. But I have to admit, the first looks at the templates have scared me away. I need to get myself into this and find some time to get deeper into the new theme structure.

A theme with less code would be great to understand the structure better. Of course, I could just delete the CSS and start from scratch, but I am not sure if this is a good idea. ;-)

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
3 weeks 4 days ago - 3 weeks 4 days ago #174433 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
I am quite sure that it is not a good idea to delete all css and start over again.

Any theme will have more or less the same amount of lines of code. The biggest difference (and advantage as far as I am concerned) between the current "vanilla" and the "raw" or "clean" theme that I am proposing is that in the "raw" theme no superfluous classes have been scattered among all line of code; just semantic classes.

Then a developer (yes, you will need to learn somewhat more about Bootstrap or another framework) can use that "raw" theme as a solid basis for a very user friendly new theme. The "raw" theme will itself be probably very ugly, but it will never be used as a survey theme, only as a clean sheet for the developer. Like an empty piece of paper, but with some grid (Bootstrap grid is what I would prefer now).

Tammo


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
Last Edit: 3 weeks 4 days ago by tammo.

Please Log in or Create an account to join the conversation.

More
3 weeks 4 days ago - 3 weeks 4 days ago #174434 by tammo
tammo replied the topic: Thoughts on custom theming using vanilla theme.
And hopefully (wink, wink) the upcoming version LimeSurvey 4 will have the possibility to change CSS-frameworks, so Bootstrap4 or any other framework may be used.

Tammo


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
Last Edit: 3 weeks 4 days ago by tammo.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!