SkelVanilla : a11y and usuability > Documentation
Review of some SkelVanilla improvement and options.
Some functionality can be checked on Test du theme SkelVanilla et de ses fonctionnalité and Test du theme SkelVanilla sans validation directe.
You can test yourself theme options on Sample survey with Fruity theme on SkelVanilla.
A complete theme with improvement on aria labelledby and describedby, using clean HTML to be more updatable.
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.
Theme and variations
SkelVanilla include themes based on bootswatch like core bootswatch LimeSurvey template, SkelVanilla include too colored theme inspirated by LimeSurvey Fruity theme.
Each theme come in 4 variations :
Aria : label, describe, live and hidden
LimeSurvey 3 already added some a11y improvement with usage
aria-labelledby, SkelVanilla add more :
- The question help added to
- The dynamic help tips added to
- Usage of
aria-livefor dynamic text
- Usage of
aria-hiddenfor question hidden by condition
- Usage of
invalidwith custom validity for input (can be deactivated)
SkelVanilla allow to set validity according to question settings.
You can test it on Test dynamic validate.
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:
You can disable the head and the section on specific question: add
skel-tagnoheader class on question Class name.
Default header size is h3 if group title are shown and h2 if not. You can force to be h2 with
skel-tagH2 and h3 with
If you don’t enable global header and section : you can enable it for each question manually adding
skel-tagheader to the question css classes. Bu default it’s a h2 header, you can set it to h3 with
skel-tagH3. This can be used with Sub-group inside group.
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).
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.
skel-wrap-wellUse well wrapper for this question
skel-wrap-panelUse panel wrapper for this question
skel-wrap-nonedeactivate wrapper for this question
skel-color-noneUse default body color for this question
skel-color-primaryUse primary color for this question
skel-color-infoUse info color for this question
skel-color-successUse success color for this question
skel-color-warningUse warning color for this question
skel-size-bodyUse default body size for this question
skel-size-h2Use h2 size for this question
skel-size-h3Use h3 size for this question
skel-size-h4Use h4 size for this question
skel-size-h5Use h5 size for this question
skel-size-leadUse lead size for this question
- Other tool
skel-noquestiondo not display question
skel-insideput panel-body margin to have a sub-question without usage of skel-group
skel-help-nothelphow help without the help icon
no-footer-spacerdisable margin after the question
show-in-previousa fixed right or left margin of 3em
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-groupis 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.
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-responsive class to disable this update. You can see the difference on this demo survey.
Table with fixed header
By default table have a fixed header, this system was tested with Chrome, Firefox and IE edge. You can test it at demo.sondages.pro.
You can globally disable the option, and set by question adding
table-fixed-header CSS class to a question.
Some other minor functionality
– Show clear all : you can hide all clear all action with an On/Off button
– Top link action : you can choose to show or hide all possible action in the header. You can hide the core action, but you can show the next and the previous button if needed.
– Survey description : allow you to show description of survey i all page, not only on welcome page.
– Survey title : you can choose to hide surey title.
– Logo as banner : with logo as banner : you use it like a banner on whole header.
– and a lot of other functionality, best is to try !
Variation and adaptation
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.
Create your own theme
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.
You can restrict the theme list to your theme only in global theme options. You have to update manually the available variation list. The available variation list is a json encode string, the most easy way is to update it directly inside config.xml file. If you don’t have access to this file : you can update it on Advanced options , Options.
For example to allow only Contrast theme :