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 consistenly style your experiments.

Tailwind CSS

Smile uses the Tailwind CSS framework for 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 pallets, 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.)

UIKit 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.

UIKit 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 provides 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 provieds some built in tools to help you build forms and quizes. 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.