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. |
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:
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.
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 |
Need assistance?