Master Mobile UI with Sandal & Sheral: A Practical Frontend Guide

Sandal Overview

Sandal is a mobile‑focused CSS foundation built on Sass, offering reset styles, common mixins such as flex layout, equal division, vertical/horizontal centering, and icon utilities. It enables rapid creation of UI components.

_function.scss

contains all core functions without any visual styles, while

_core.scss

adds reset styles on top of those functions. Additional extensions reside in the

ext

folder and can be imported as needed. See the official Sandal documentation for details.

Sheral Overview

Sheral is a UI component library extending Sandal, providing over 25 ready‑to‑use components such as buttons, dialogs, headers, cards, forms, toasts, lines, media, and progress bars. Components can be used directly or customized to fit specific requirements.

All component source files are available in the Sheral components repository, and live demos are hosted on the Sheral UI site.

The relationship between Sandal and Sheral mirrors that of jQuery and its plugins; if Sheral’s UI does not meet your needs, you can build a custom UI library on top of Sandal’s core features.

Note: Sheral currently focuses on UI reconstruction, with minimal JavaScript provided for demonstration purposes, and welcomes contributors to extend or port it to other JS component libraries.

Balancing Flexibility and restraint

When designing a UI library, developers must balance code size against versatility. Over‑featured libraries become heavy and hard to maintain, while overly minimal ones fail to address real‑world scenarios. Sheral addresses this by offering switch‑style toggles for optional features, allowing developers to enable or disable specific styles as needed.

This approach keeps the library adaptable to many contexts while controlling redundancy and preserving room for future extensions.

Additional Notes

All CSS3 vendor prefixes are automatically added via the PostCSS

autoprefixer

plugin.

Unless otherwise noted, all mixins are defined in Sandal’s

_mixin.scss

file.

The tutorial primarily analyzes the implementation of Sheral UI.

Class naming follows the project’s internal conventions.