Theme allows merchants to adjust the base font size for both mobile and desktop. Default values being 16 pixels mobile and 18 pixels desktop.

Typography sizing is heavily based on utility classes which help developers keep consistent visual hierarchy.

About font scaling

We have adjusted how "rem" sizing works in Taiga theme. Typically 1rem equals 16 pixels, but we have made it so that 1rem equals 10 pixels. This makes rem sizing more easy to understand. 

Typography utility classes

Below is a list of utility classes found in the theme and their size (if default font sizes are applied).

Theme utilizes heavily modified version of CSSUI for modals, drawers and accordions. These components were chosen due to their capability of functioning without JavaScript. We only use JavaScript to enhance the basic functionalities; for example trapping focus on the container or by disabling body scrolls. 

See drawer-cart.liquid or password-page-modal.liquid for reference. Accordions are done with details HTML5 element.

Modals and Drawers JavaScript

Theme's global.js includes Woolman.ModalsAndDrawers object which enriches basic functionality of modals and drawers. Methods:

Woolman.ModalsAndDrawers.init()

If a link contains word modal or drawer, this function tries to locate element with matching id to initialize as modal or drawer. E.g. link with href="#drawer-menu" tries to initialize element with id="drawer-menu" as a drawer.

Woolman.ModalsAndDrawers.showModalOrDrawer(targetId) 

This function opens modal or drawer with provided id.

Woolman.ModalsAndDrawers.closeModalOrDrawer(targetId) 

This function closes modal or drawer with provided id.