Style and Design Overview

Styling the look and feel of your experiment elements is often a time-consuming process. However, it is worthwhile because participants are likely to view your task as more professional, user-friendly, and engaging if there is an appealing design. Smile provides a number of tools to help you cleanly and consistently style your experiments.

Tailwind CSS

Smile uses the Tailwind CSS framework to help with styling interface elements and layouts. Tailwind is a particular approach to CSS that favors atomic classes. Tailwind also provides easy ways to support theming, color modes, color palettes, etc... We describe how to use Tailwind to determine the look and feel of your experiment. Of course, you can style your components with custom CSS as well or overwrite Smile defaults for your entire project.

Dark Mode

Smile supports dark mode. This is a great way to make your experiments more appealing to participants. We describe how to enable dark mode in your experiments here. (Dark mode is of course optional and only makes sense for some research questions.)

Layouts

Smile provides a number of layouts to help you structure your Views. We describe how to use layouts in your experiments here. This can help you save time and ensure that your Views are consistent and easy to understand.

Components

Smile provides a number of built-in components to help you style your experiments. We describe how to use these components in your experiments here. These components build upon Radix UI and Shadcn-Vue, which provide high levels of accessibility and design consistency.

Icons

Icons are a helpful way to add polish and help users understand the interface. We describe how to use these icons in your experiments here.

Forms and Quizes

Smile provides some built-in tools to help you build forms and quizzes. We describe how to use these tools here.

Image and Videos

Many experiments present videos or images to participants. We describe how to distribute images and videos with your Smile project, how to preload them so that they appear immediately when needed, and how to display them in your experiment.