Working with CSS styles

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:

Layout: sections, page width and full width

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)

 

Working with JavaScript and JavaScript events

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

 Event name What it does
woolman:resize

Fired (with debounce) when window is resized

mounted

(slider-components) Fired when slider is ready to be used

section:in-viewport

(sections) Fired when section first enters the viewport

cart:update

Fired when cart updates

ajaxProduct:added

Fired when item is added to cart. Opens the cart drawer.

Typography and related utility classes

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

Class name Desktop size (default) Mobile size (default)
 .h1

40px

32px
.h2

32px

26px
.h3

26px

22px
.h4

22px

20px
.h5

20px

18px
.h6

18px

16px
.caption

14px

12px
.small

16px

14px
.subdued

20px

18px
.enlarge

20px

18px
.bigger

32px

26px
.big

26px

22px
.normal

18px

16px
.subheading

20px

18px
Modals, drawers and accordions

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.

Need assistance?

Please double check your Email and Store URL before submitting the form. Incorrect information might block us from handling the request. The collaboration request code is found in Shopify Admin > Settings > Users and permissions.