Pre-made styles

Making a study look neat is helpful in several ways: A clear design helps participants navigate through the study, and it shows the professionalism of its creators. There are, of course, many ways to achieve this, and if you have built web-based experiments before, you might well have a preferred layout that is tested and proven.

With lab.js, we’ve included a basic set of styles with the starter kit. These are provided to get you started quickly, and to save you some hassle when you’re building your first experiment. The following section describes the styles that are available, and shows you how to apply them.

Important

You are in no way bound to the styles provided in the starterkit and described here – you’re very welcome to replace them, or extend and adapt them to your needs: These styles are designed to give users a head start, and are in no way mandatory.

If you notice something that’s missing or should be working differently, please let us know – we’re really happy to extend the built-in styles, and to make them more useful.


Including the styles

Note

If you’re working from the starter kit, the default styles have already been set up for you – you’re good to go, and ready to set up your page!

If you’ve been working on an existing study and would like to use the styles, please download the latest starter kit and include the file lib/lab.css in your project. You’ll also need to include a link tag in the head section of your document, with a reference to the file:

<link rel="stylesheet" href="lib/lab.css">

You might need to adjust the path in the href attribute depending on the placement of the downloaded style sheet file.


Setting up the page

Container

On the most coarse level, all content on the page is gathered inside a container. This element holds all of the content and determines its width. In the default style, it provides a thin outer border for the content. You can create a container by applying the container class to a div or another block element:

Page with just a container div
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Experiment</title>
  <!-- Load styles -->
  <link rel="stylesheet" href="lib/lab.css">
  <!-- Load additional styles and scripts -->
</head>
<body>
  <!-- Define the container -->
  <div class="container">
    <!-- Container content -->
  </div>
</body>
</html>

Page sections

You’ll often want to subdivide the page into different sections containing different parts of the visible information. For example, you might want to include a header with your university’s logo, a footer with contact info or navigation buttons, and of course the main experiment content.

You can achieve this directly by placing header, main and footer elements within the container:

Screen divided into sections
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Experiment</title>
  <link rel="stylesheet" href="lib/lab.css">
</head>
<body>
  <div class="container">

    <header>
      Header
    </header>

    <main>
      Main
    </main>

    <footer>
      Footer
    </footer>

  </div>
</body>
</html>

Fullscreen styles

Container with fullscreen class

By adding the fullscreen class to the container element, you can make it expand to fill the entire width and height of the browser window.

Sections with fullscreen class

Of course, any sections included in the container are positioned accordingly.


Text styles

The bulk of a study’s content will often be pure text. HTML provides many tags for text markup (such as headings, paragraphs, lists, etc.) out of the box, and the stylesheet provides matching settings for many, even some exotic tags like the keyboard button <kbd>key</kbd>.

However, sometimes tags alone are not sufficient, and therefore we have added some helper classes to provide frequently used layout adjustments.

Text styles

Alignment

The text-left, text-center and text-right classes align text to the left, center and right of its containing block.

Helper classes

The font-weight-bold and font-italic classes change the formatting of an element’s text content.

Contextual formatting

Like the alerts shown above, there is often the need to mark text as secondary. The text-muted class achieves, applied to an element, will color its content in gray.


Styling content

Example: Stroop task instruction

Beyond styles for regular text, we’ve tried to include CSS classes for purposes that we often use, and which we hope will come in handy in may studies. These are described in the following.

Alerts

Alerts help you highlight information that should not go unnoticed.

The basic alert class, applied to a <div> tag, will emphasize its content by placing it on a grey background. Adding the alert-warning or alert-danger class will change the color to yellow and red for drawing further attention.

Alert styles
<div class="alert">
  Let me draw your attention to this
</div>

<div class="alert alert-warning">
  You have been warned
</div>

<div class="alert alert-danger">
  Something is deeply wrong here
</div>

Tables

The default stylesheet adds horizontal dividers between the rows of tables (this deviates from the bootstrap defaults, which require the table class for styling). Adding the table-striped class to the table adds striped rows. Any additional styles can be removed by adding the table-plain class to the table.

Table styles
<table>
  <tr>
    <th>Table header 1</th>
    <th>Table header 2</th>
  </tr>
  <tr>
    <td>Table data 1a</td>
    <td>Table data 2a</td>
  </tr>
  <tr>
    <td>Table data 1b</td>
    <td>Table data 2b</td>
  </tr>
</table>


Positioning things

Alignment of block elements

The most common challenge encountered in building an experiment is the alignment of stimuli and other content. By default, content will be positioned in the top left of its containing element, but this need not always be the case.

The content-vertical-center, content-horizontal-center and content-horizontal-right classes place a single element in the vertical center of it surrounding element, and, independently, in the horizontal center and at the right border. Both sets of classes can be used in conjunction.

Text styles

Block alignment examples

Note how the classes are applied to the surrounding elements, and not directly to the elements which whose position is changed.

Also, only the directly nested elements are aligned; their content must be positioned independently.

<div class="container">
  <main class="content-horizontal-center
               content-vertical-center">
    <div>
      The center of attention
    </div>
  </main>

  <main class="content-horizontal-right
               content-vertical-center">
    <div style="width: 100px">
      To the right
    </div>
  </main>

  <main class="content-vertical-center">
    <div>
      Only one possibility left
    </div>
  </main>

  <main class="content-vertical-center">
    <div class="w-100">
      Full width
    </div>
  </main>
</div>

Width

To force elements to use all available width, add the w-100 class.

Element visibility

The invisible class hides an element from view, but still includes it in the layout. Thereby, an empty space remains where the element would otherwise have been rendered.

The hidden class excludes an element from rendering, meaning that it will not affect the page display in any way.

The hide-if-empty class removes an element from the page if it does not contain content.


Beyond the default styles

Custom layout

The default styles presented above are designed to be neutral and as widely applicable as possible. That very fact, however, makes them slightly boring.

If you like, you can do away with the default styles entirely. Nothing in the Javascript library dictates what your study should look like – it will happily exchange and display content regardless of structure of the page and the styles applied.

Alternatively, you can extend the default styles [1]. We often include a second stylesheet in the page header, which contains some a few rules that supplement and overwrite the defaults. In the screenshot on the right, the fonts have been changed slightly, and a dash of color added. Here’s what the additional style sheet looked like:

/* Add a dark page background,
   and highlight the content */
body {
  background-color: rgb(6, 21, 38);
}
div.container {
  background-color: white;
  border-width: 2px;
}
/* Use a serif font for the headers,
   and add a bottom border to h1 elements */
h1, h2, h3 {
  font-family: "Georgia", serif;
  font-weight: normal;
}
h1 {
  text-align: center;
  border-bottom: 1px dotted lightgray;
  padding-bottom: 0.8rem;
}

See also

Many of the selectors used here correspond (on purpose) to those used in the Bootstrap framework, which provides far more comprehensive styles for many more applications.

To a large degree, the supplied styles are a simplified subset and facsimile of bootstrap’s many and beautiful styles. Please check them out if you find the included stylesheet lacking – because the class names are, where possible, identical, switching should not be to big an effort.

There are several more such frameworks that cater to different tastes and programming styles, for example Semantic UI or Material Design.

[1]You could, of course, also modify the stylesheet directly if you like. We caution against this approach, because you’ll loose the ability to update the default library stylesheet independently of your modifications. By overwriting the defaults explicitly, it will be easier to see exactly which adjustments you’ve made.