Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

The Less Styles System

1:  Overview

The Less style system requires a survey compat level of 125+

What is responsive web design? It's a relatively new technique, first described in mid-2010 by Ethan Marcotte in his A List Apart article. Put simply, it involves providing a number of site layouts adapted to various screen widths, and then serving those layouts accordingly thanks to the use of CSS3 media queries. [1]

In 2014, for the first time ever, the number of mobile internet users will outnumber desktop users globally. [2]  To accommodate the diversity of today's internet users, Decipher's surveys need to:

  • look consistent on all supported devices, big and small
  • react predictably to user interaction
  • collect data without introducing unnecessary survey bias
  • be flexible, allowing changes to be made quickly and easily

A lot of effort goes into achieving these goals and there's no one-size-fits-all method or solution. We have, however, made extraordinary headway by introducing a new dynamic style language to the survey system: Less.

2:  What is Less?

Less (Leaner CSS) is an open-source dynamic stylesheet language that compiles into CSS. [3]  Less has built-in components that drastically improve our existing style system, including: style variables, nesting, mixins, operators and functions.

For example:

@color: #5dff00;                    /* declare variables */

#header {
    color: @color;

    .label {                        /* nest declarations */
        color: @color;
        font-style: italic;
    }
}

The Less style code above compiles into the following CSS style code:

#header {
    color: #5dff00;
}

#header .label {
    color: #5dff00;
    font-style: italic;
}

We can leverage this ability to declare variables and nest declarations to do some really neat things, like consistently modifying a large number of survey style attributes by simply overwriting a single variable.

Need to change the color for all of your project's dynamic question buttons? Simple. Just update the @dq-button-bg-color variable with your new color and the change will propagate across your entire survey.

Keep reading to learn how Less is used to create beautiful, flexible, responsive surveys.

Check out Getting Started with Less to learn more about Less syntax and usage.

3:  The Less Theme System

Available to surveys with a compat level of 125+ are Less themes. These themes are designed with responsiveness in mind and enable you to control how your survey looks and behaves on all supported devices.

The old "(legacy)" themes are still available with compat 128 and earlier. To apply a previous project version to a new project, click here.

From the Display Settings of survey builder, you can open the theme gallery to browse, customize and apply themes.

A survey using one of these Less themes will have a file named theme.less in the project's /static directory. This file is compiled with the system's base Less files (and any additional Less files or variables that you may have declared) into a file named less-compiled.css. This file acts as the survey's main style file and is served to all respondents.

Click here to view the theme.less template that contains documentation for its usage. 

One file to rule them all: Less themes use CSS3 media queries to alter the survey layout depending on the display size of the device being used. This means that there is no longer a need for separate style files for mobile phones, tablets, etc...

responsive-design2.png

Illustrated in the image above, the responsive design introduced by Less themes means that the same survey content will be presented differently (but similarly) on different devices of different sizes. This includes resizing content and folding large, horizontal tables into vertical, easy-to-scroll-through lists.

You have access to various Less attributes that enable you to change the way in which the system reacts to a devices dimensions. For example, you could update the @breakpoint variable which is used to decide whether the device being used is a desktop or mobile device from "768px" to any size that meets the needs of your project.

Continue reading to learn about the survey attributes available for customizing your project's display settings, including the @breakpoint attribute.

4:  Less XML Attributes

4.1:  <themevars> - Override Theme Variables

The <themevars> attribute is used to override any of the Less variables in the tables below with a new value. This attribute is referenced last in the Less system, which means that it has the highest precedence and will override all Less stylesheets.

The syntax for the <themevars> attribute is below:

<themevars>
    <themevar name="VARIABLE NAME">VALUE</themevar>
</themevars>

For example:

<themevars>
    <themevar name="background-color">#000</themevar>
    <themevar name="foreground-color">#000</themevar>
    <themevar name="text-color">#fff</themevar>
    <themevar name="primary-font-stack">"Comic Sans MS", cursive, sans-serif</themevar>
</themevars>

The example code above produces the dark survey shown below with Comic Sans as the primary font.

Do not include the "@" symbol when overriding any of the variables in these tables below.

4.1.1:  Basic Colors

Click here for the variables that update the survey's main colors.

2015-10-26_1036.png

Variable Description
@background-color The survey background color
@foreground-color The survey foreground color
@text-color The survey text color
@border-color The survey table border color
@question-background The survey question background color

4.1.2:  Palette Colors

Click here for the variables that update the survey's secondary colors and can be used anywhere in a theme.  Most themes only utilize one or two, ignoring the rest. The goal is to ensure color consistency, so only the limited number of theme colors picked here should be reused throughout the theme.

Variable Description
@color-1 First secondary coordinated color
@color-2 Second secondary coordinated color
@color-3 Third secondary coordinated color
@color-4 Fourth secondary coordinated color
@color-5 Fifth secondary coordinated color
@color-6 Sixth secondary coordinated color

4.1.3:  Button Colors

Click here for the variables that update the survey button colors.

Variable Description
@button-color The survey's button default color
@button-hover-color The survey's button hover color
@button-selected-color The survey's button selected color
@button-text-color The survey's button text default color
@button-text-hover-color The survey's button text hover color
@button-text-selected-color The survey's button text selected color

4.1.4:  Hyperlink Colors

Click here for the variables that update the survey's hyperlink colors.  Footer links may have their own variables although they typically inherit from these variables.

Variable Description
@link-color The hyperlink text color
@link-color-hover The hyperlink text hover color

4.1.5:  Message Colors

Click here for the variables that update the survey's message colors.

Variable Description
@error-color The error message color
@warning-color The warning message color
@info-color The info message color

4.1.6:  DQ Like/Dislike/Neutral Colors

Click here for the variables that update the "Like"/"Dislike"/"Neutral" colors used in some dynamic questions.

Variable Description
@dq-like The DQ "Like" color
@dq-neutral The DQ "Neutral" color
@dq-dislike The DQ "Dislike" color

4.1.7:  Font Families

Click here for the variables that update the survey's font family.

Variable Description
@webfont The survey's webfont URL (must be lank or start with "//")
@primary-font-family The survey's primary font-family (for questions/comments)
@secondary-font-family The survey's secondary font-family (for answers, footer, buttons, progress, etc.)

4.1.8:  Base Font Sizes

Click here for the variables that update the survey's base font sizes.  Use "em" or "rem" font sizes to help ensure the survey is accessibility-friendly.

Variable Description
@desktop-font-size The survey font-size for desktop devices
@mobile-font-size The survey font-size for mobile devices

4.1.9:  Reusable Font Sizes

Click here for the variables that are meant to be reused throughout the theme for consistent font sizing. Use “em” or “rem” font sizes to help ensure the survey is accessibility-friendly.

Variable Description
@large-text The “large” font-size that can be reused anywhere in the theme
@normal-text The “normal” font-size that can be reused anywhere in the theme
@small-text The “small” font-size that can be reused anywhere in the theme

4.1.10:  Background Image

Click here for the variable that updates the survey's background image (implemented in select themes only, other themes will ignore this variable).

Variable Description
@page-background-image The survey's background image URL

4.1.11:  Border Radius

Click here for the variables that update the survey's border radiuses.

Variable Description
@border-radius The default border radius for the foreground and all buttons
@foreground-border-radius The border radius for the foreground only

4.1.12:  Media Queries

Click here for the variables that update the survey's responsive threshold.

Variable Description
@breakpoint The width in which a device is considered a desktop (default is "768px")
@desktop A boolean value used to declare desktop-only styles. For example:
@media @desktop {
    .desktop-only-class { color: blue; }
}
@mobile

A boolean value used to declare mobile-only styles. For example:

@media @mobile {
    .mobile-only-class { color: blue; }
}

4.1.13:  Foreground Width & Padding

Click here for the variables that update the survey's foreground width and padding.

Variable Description
@foreground-width The maximum width for the survey (default is "960px")
@foreground-padding-top-bottom The foreground top/bottom padding
@foreground-padding-left-right-desktop The foreground left/right padding on desktop devices
@foreground-padding-left-right-mobile The foreground left/right padding on mobile devices
@foreground-inner-width The foreground maximum content width

4.1.14:  Question Width & Padding

Click here for the variables that update the width and padding of questions.

Variable Description
@question-padding-top-bottom The question top/bottom padding
@question-padding-left-right-desktop The question left/right padding on desktop devices
@question-padding-left-right-mobile The question left/right padding on mobile devices
@question-inner-width The question maximum content width

4.1.15:  Progress Bar

Click here for the variables that update the survey's progress bar formatting.

Variable Description
@progress-position The progress bar position (usually "left" or "right")
@progress-border-color The progress bar border color
@progress-empty-color The progress bar "empty" color
@progress-fill-color The progress bar "filled" color
@progress-text-color The progress bar text color
@progress-font-size The progress bar font size
@progress-font-family The progress bar font family

4.1.16:  Comment Text

Click here for the variables that update the text formatting of comments. In survey builder, you add comment text with the "Descriptive Content" element. In XML, the <html> tag is used to add comment text.

Variable Description
@comment-text-color The comment text color
@comment-font-size The comment font size
@comment-font-family The comment font family

4.1.17:  Question Text

Click here for the variables that update the text formatting of questions.

Variable Description
@question-text-color The question text color
@question-font-size The question font size
@question-font-family The question font family

4.1.18:  Instruction Text

Click here for the variables that update the text formatting of instructions.

Variable Description
@instruction-text-color The instruction text color
@instruction-font-size The instruction font size
@instruction-font-family The instruction font family

4.1.19:  Answer Text

Click here for the variables that update the text formatting of answers.

Variable Description
@answer-text-color The answer text color
@answer-font-size The answer font size
@answer-font-family The answer font family

4.1.20: Table Colors

Click here for the variables that update the colors of tables.

Variable Description
@table-border-color The border color of tables
@table-legend-bg-color The default background color of legend cells
@table-row-legend-bg-color The background color of row legend cells
@table-col-legend-bg-color The background color of col legend cells
@table-row-group-bg-color The background color of row group legend cells
@table-col-group-bg-color The background color of col group legend cells
@table-cell-hover-color The hover background color of form element cells

4.1.21:  Row Override Colors

Click here for the variables that override the background colors of rows with form elements. The variable @table-row-legend-bg-color is ignored when these variables are set so alternating row colors can be easily applied.

Variable Description
@row-bg-color The default background color for odd and even-numbered rows
@row-bg-color-alt The background color for odd-numbered rows only

4.1.22: Text Inputs

Click here for the variables that update the formatting of text inputs.

Variable Description
@input-text-color The input text color
@input-font-size The input font size
@input-bg-color The input background color
@input-bg-color-active The input "active" background color
@input-border-color The input border color
@input-border-color-active The input "active" border color

4.1.23: Primary Button Colors

Click here for the variables that update the survey's primary button colors (Continue, Finish, etc.).

Variable Description
@primary-button-text-color The primary button text color
@primary-button-text-color-hover The primary button text hover color
@primary-button-font-size The primary button font size
@primary-button-font-family The primary button font family
@primary-button-bg-color The primary button color background color
@primary-button-bg-color-hover The primary button color background hover color
@primary-button-border-color The primary button border color
@primary-button-border-color-hover The primary button border hover color
@primary-button-border-radius The primary button border radius

4.1.24:  Secondary Button Colors

Click here for the variables that update the survey's secondary button colors (Go Back, Randomize, etc).

Variable Description
@secondary-button-text-color The secondary button text color
@secondary-button-text-color-hover The secondary button text hover color
@secondary-button-font-size The secondary button font size
@secondary-button-font-family The secondary button font family
@secondary-button-bg-color The secondary button color background color
@secondary-button-bg-color-hover The secondary button color background hover color
@secondary-button-border-color The secondary button border color
@secondary-button-border-color-hover The secondary button border hover color
@secondary-button-border-radius The secondary button border radius

4.1.25:  DQ Buttons

Click here for the variables that update the survey's DQ button colors (Button Select, etc).

Variable Description
@dq-button-font-size The DQ button font size
@dq-button-font-family The DQ button font family
@dq-button-text-color The DQ button text color
@dq-button-text-color-hover The DQ button text hover color
@dq-button-text-color-selected The DQ button selected text color
@dq-button-bg-color The DG button background color
@dq-button-bg-color-hover The DQ button background hover color
@dq-button-bg-selected The DQ button background selected color
@dq-button-border-color The DQ button border color
@dq-button-border-color-hover The DQ button border hover color
@dq-button-border-color-selected The DQ button border selected color
@dq-button-border-radius The DQ button border radius

4.1.26:  FIR (Form Image Replacement)

Click here for the variables that update the survey's FIR colors (the colored radio buttons and checkboxes).

Variable Description
@fir-border The FIR border color
@fir-border-hover The FIR border hover color
@fir-border-selected The FIR border selected color
@fir-base The FIR background color
@fir-base-hover The FIR background hover color
@fir-base-selected The FIR background selected color
@fir-inner The FIR foreground color
@fir-inner-hover The FIR foreground hover color
@fir-inner-selected The FIR foreground selected color
@fir-size The FIR size

4.1.27:  Footer Text

Click here for the variables that update the survey's footer text formatting.

Variable Description
@footer-text-color The footer text color
@footer-font-size The footer font size
@footer-font-family The footer font family
@footer-link-color The footer link text color
@footer-link-color-hover The footer link text hover color

4.1.28:  Exit Page Text

Click here for the variables that update the survey's exit page text formatting.

Variable Description
@exit-header-text-color The exit page header's text color
@exit-header-font-size The exit page header's font size
@exit-header-font-family The exit page header's font family
@exit-body-text-color The exit page body's text color
@exit-body-font-size The exit page body's font size
@exit-body-font-family The exit page body's font family

4.1.29:  Survey Error Colors

Click here for the variables that update the survey's page-level error message colors.

Variable Description
@survey-error-text-color The page-level error text color
@survey-error-font-size The page-level error font size
@survey-error-font-family The page-level error font family
@survey-error-bg-color The page-level error background color

4.1.30: Question Error Colors

Click here for the variables that update the survey's question-level error message colors.

Variable Description
@question-error-text-color The question-level error text color
@question-error-font-size The question-level error font size
@question-error-font-family The question-level error font family
@question-error-bg-color The question-level error background color

4.1.31:  Answer Error Highlight Color

Click here for the variable that updates the survey's answer-level error color.  This variable is used to "highlight" individual form elements or their parent cells (if any) that are in error.

Variable Description
@answer-error-highlight-color The answer-level error background color

4.1.32:  Info Colors

Click here for the variables that update the survey's info message colors.

Variable Description
@survey-info-text-color The info message text color
@survey-info-font-size The info message font size
@survey-info-font-family The info message font family
@survey-info-bg-color The info message background color

4.1.33:  Warning Colors

Click here for the variables that update the survey's warning message colors.

Variable Description
@survey-warning-text-color The warning message text color
@survey-warning-font-size The warning message font size
@survey-warning-font-family The warning message font family
@survey-warning-bg-color The warning message background color

4.1.34:  Button Select

Click here for the variables that update various settings in the Button Select dynamic question.

Variable Description
@btn-select-default-max-width The Button Select maximum button width
@btn-select-spacing The Button Select spacing around buttons (left/right values are stripped in list mode)
@btn-select-border-radius The Button Select button border radius

4.2:  ss:includeLESS - Include Custom Less Stylesheets

The ss:includeLESS attribute enables you to load additional Less files into your survey. These files will take precedence over the project's theme and must be located in the same directory as the survey or in parent directory in a static/ directory.

For example, we can load two different Less files from our current project located at selfserve/9d3/p1234:

<survey
  name="Survey"
  compat="125"
  ss:includeLESS="p1234/style1.less,/survey/selfserve/9d3/p1234/style2.less"
  ...>

In the example above, we are using two different path schemes to load two different Less files from our project. The following values for ss:includeLESS are also valid:

ss:includeLESS="p1234/style1.less"
ss:includeLESS="/survey/selfserve/9d3/p1234/style1.less"

ss:includeLESS="p1234/style1.less,p1234/style2.less"
ss:includeLESS="/survey/selfserve/9d3/p1234/style1.less,/survey/selfserve/9d3/p1234/style2.less"

Learn more: Uploading System Files

4.3:  respview.client.less.files - Include Custom Less Stylesheets

If you need to load additional Less files to many projects, then you can use the nstyles file to specify these additional files to the respview.client.less.files attribute.

For example, we could load the same two Less files as above by specifying the following in our project's nstyles file:

*respview.client.less.files:
selfserve/9d3/p1234/static/style1.less
selfserve/53a/p5678/static/style2.less

The nstyles file must be located in the project (e.g. selfserve/53a/p1234/) or company (e.g. selfserve/53a/) directory.

If you really know what you're doing, you may also override respview.less.files.

5:  XML Attributes for Display Settings

5.1:  surveyDisplay - Optimize Question Presentation

The surveyDisplay attribute can be set to "auto", "mobile", "desktop" or "none" to control the way in which questions are displayed. This attribute can be applied globally to the main <survey> element to affect all questions and/or locally at the question level.

The default value for surveyDisplay is "auto" at the global level and "none" at the local level.

If surveyDisplay="mobile" is specified, then the survey will display questions in a mobile-optimized format.

If surveyDisplay="desktop" is specified, then the survey will not optimize the way in which questions are displayed for mobile devices.

If surveyDisplay="none" is specified at the local level, then that particular question will display in the same way as specified by the surveyDisplay attribute in the main <survey> element.

If surveyDisplay="auto" is specified, then questions will display in a responsive manner. When the display is relatively small, the questions will display in the mobile-optimized format. When the display has enough room, the questions will be displayed without any mobile optimizations.

For compat="126" surveys, all column headers are optimized to display with the same width (e.g. no column should be wider than another). If your survey contains very wide column headers due to very long words or you wish to turn off this column width optimization, then add the attribute ss:questionClassNames="skipAutosize" to the question (e.g. <radio label="Q10" ss:questionClassNames="skipAutosize">).

The surveyDisplay attribute can also be controlled from the Device Settings or Question Display Options in the survey builder.

5.2:  ss:listDisplay - Display 1-Column Questions Differently

The ss:listDisplay attribute is a boolean value that controls how 1-column questions are displayed. This attribute can be applied globally to the main <survey> element to affect all questions and/or locally at the question level. If ss:listDisplay="1" is specified, then 1-column questions will appear as a list instead of a table.

For example:

<survey
  name="Survey"
  compat="125"
  ss:listDisplay="1"
  ...>

<radio label="Q1" title="Please select one.">
  <row label="r1">R1</row>
  <row label="r2">R2</row>
  <row label="r3">R3</row>
</radio>

<radio label="Q2" title="Please select one." ss:listDisplay="0">
  <row label="r1">R1</row>
  <row label="r2">R2</row>
  <row label="r3">R3</row>
</radio>

The code above produces the following result:

The ss:listDisplay attribute can also be controlled from the Display Settings or Question Display Options in the survey builder.

6:  More Information

Sources:

[1]: SitePoint
[2]: Research Live
[3]: WikiPedia