Layout

Theme utilizes full-bleed layout using CSS grid. This means that each section / content should be wrapped in either page-width or full-width classes so that the content is placed on the middle column (constrained-width column).

Sections

Sections headers can use the “section__header” class to automatically place section header in a nice way for both page-width and full-width section / content layouts.

The maximum width of page-width container can be set in theme settings (id: content_ideal_width)

We have split JavaScript logic into small pieces of code for increased performance. This allows the theme to only load scripts that are necessary for functionality of displayed template, sections and components.

JavaScript events

We have split CSS styles for small pieces of code. In HEAD tag of the HTML layout we have inlined some critical typography styles as well as the following styles, which are also preloaded for increased performance:

• accessibility.css
• reset.css
• critical.css
• (product pages) template-product.css
• (collection pages) template-collection.css
  
  

In addition, these styles are lazy loaded directly on the HEAD tag:

• component-grid.css
• component-card.css
• component-sliders.css
• (if animations enabled) animations.css
• (if quick buy enabled) component-modal.css
• (if quick buy or product page) component-product-form.css
  
  

The rest of the styles are lazy loaded on the BODY tag for enabled sections or components.

We use BEM methodology in our CSS files. BEM stands for "Block Element Modifier", and this is how it would look in SCSS:

And this is what it would look like in CSS:

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.

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