Documentation

, by Denis Chenu

review of some SkelVanilla improvement and options

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 and using h2 or h3 for question

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

Currently : only question text are used for aria usage in LimeSurvey core, SkelVanilla add question help and question dynamic help. With dynamic help SkelVanilla use alert role when an error happen.

With all dynamic content or condition : usage of aria-live (and aria-hidden) unsure user see the update.

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)

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.