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:
- (product pages) template-product.css
- (collection pages) template-collection.css
In addition, these styles are lazy loaded directly on the HEAD tag:
- (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
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 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)
|Event name||What it does|
Fired (with debounce) when window is resized
(slider-components) Fired when slider is ready to be used
(sections) Fired when section first enters the viewport
Fired when cart updates
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)|
Modals, drawers and accordions
See drawer-cart.liquid or password-page-modal.liquid for reference. Accordions are done with details HTML5 element.
Theme's global.js includes Woolman.ModalsAndDrawers object which enriches basic functionality of modals and drawers. Methods:
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.
This function opens modal or drawer with provided id.
This function closes modal or drawer with provided id.