Documentation

, by Denis Chenu

Review of some SkelVanilla improvement and options.

Some javascript functionality can be checked on Test du theme SkelVanilla et de ses fonctionnalité.

Theme and variations

The default theme use a contrasted boostrap theme with em usage.

Using more contrast allow better compatibility with WCAG 2.0.

Using em and not fixed font size respect user choice about font-size set in his browser. Grid-view respect base font-size and zoom too.

But SkelVanilla allow usage of bootswatch theme too.

Each theme come in 4 variations :

Base variation
Button variation
Awesome variation
Button and awesome variation

Aria : label, describe, live and hidden

LimeSurvey 3 already added some a11y improvement with usage aria-labelled-by, SkelVanilla add more :

  • The question help added to aria-described-by
  • The dynamic help tips added to aria-described-by
  • Usage of aria-live for dynamic text
  • Usage of aria-hidden for question hidden by condition
  • Usage of invalid with custom validity for input (can be deactivated)

Custom validity

SkelVanilla allow to set validity according to question settings.

This system is currently deactivated by default. If you use a lot of conditions and some workaround : it can disable submit survey without any visible information to participant. Before using it in production : test the functionality in your survey.

You can test it on Test dynamic validate.

required on radio list
customValidity on checkbox
required on text
customValidity on text

Relevant and mandatory question are set to required and validity is set with the text used by LimeSurvey for tips.

User still allowed to move previous or use index, but validation or move next is disable since validity of input is not fixed.

Using h2 or h3 for question

HTML5 allow usage of section and header : SkelVanilla use it by default for group, and allow you to use for question using an h2 or h3 title.

This option must be activated in Survey option (or globally) : when activated html is shown with header and section:

Heading structure

Some decoration options

You can choose how question was wrapped : default one is none (something like Fruity core template). You have well wrapped (like vanilla core template) or inside a panel (more like boostswatch core template).

well wrapped
panel wrapper

But you can choose too : the color of the question text and the question (using color helper of boostrap)

Decoration options different for each question

You can use Question CSS classe in advanced settings to set different value for each question.

Wrapper
  • skel-wrap-well Use well wrapper for this question
  • skel-wrap-panel Use panel wrapper for this question
  • skel-wrap-none deactivate wrapper for this question
Color
  • skel-color-none Use default body color for this question
  • skel-color-primary Use primary color for this question
  • skel-color-info Use info color for this question
  • skel-color-success Use success color for this question
  • skel-color-warning Use warning color for this question
Size
  • skel-size-body Use default body size for this question
  • skel-size-h2 Use h2 size for this question
  • skel-size-h3 Use h3 size for this question
  • skel-size-h4 Use h4 size for this question
  • skel-size-h5 Use h5 size for this question
  • skel-size-lead Use lead size for this question

Sub-group inside group

SkelVanilla add some helper to create sub group of question. Usage of this system is powerfull but can be difficult.

To create sub group you have this css class:

  • skel-start-group : start a group by adding a start tag before the question. The skelvanilla question class are set to this group, original question didn’t have class set by skelvanilla. The skel-group is added to the class.
  • skel-end-group : close the group by adding a close tag.
  • skel-start-group-question : remove the close tag of this question. Then hidding this question hide the whole group
  • skel-no-question : remove whole question text part.

Remind to use previous part to set different wrapper for the question inside group. Usage with well and panel are tested. For panel, with skel-start-group class: panel header is the question. For question inside the group : 2 solution : you leave panel system and have multiple panel heading or you use panel-body skel-wrap-none class to be seen without the heading.

SkelVanilla : usage of advanced class with panel
SkelVanilla : usage of advanced class with well
SkelVanilla : usage of advanced class with panel , alternative solution
SkelVanilla : usage of advanced class with no wrapper

Table fixed or no-more-table

For table question type : default behaviour for little screen is to show it with “no more table” system this shown table like a list of element. Like the default LimeSurvey template.

With SkelVanilla : you can add table-fixed and table-responsive class to disable this update. You can see the difference on this demo survey.

Default table on little screen
Table with table-fixed class on little screen

Need your own theme and adaption ?

If you want only too fix some part : theme.css and custom.css are empty in SkelVanilla and stay empty. Then you can extend SkelVanilla and update one of this 2 files. You can choose to extend theme.css for your base theme, and use custom.css for specific survey.

If you already know boostrap and less : the less generator of the default css file and of all variations can be found on less-skelvanilla git repo.

P.S.

If you need your own variation : we can offer quote at Contact.