Coding Phase has live stream 8/28/21

Check out to see the stack he is using. Using builder.io or other stack. Using the liquid templating engine?

Uses bootstrap

image-single-comp__item

I like the slight zoom in and rotate -6degrees or so on image hover

A lot of the Shopify designs are very image intension.

Dude is on AliExpress sourcing images

Checking out themes on envato

Uses SASS functions and mixins for breakpoints. Builds from desktop first.

@mixin respond($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: 0px) and (max-width: 575px) {
      @content
    }
  }
}

Brings the mixins into the “main.scss” file using “@use” syntax

@use "./base/reset"
@use "./base/variables"
@use "./abstracts/mixins"
// and references in components like:
@include respond(md) {
  grid-template-columns: repeat(4, 150px)
}

And he gets an “undefined mixin” error from Next.js! Tries to use import instead and then gets the “must have use before import” error. Fixes by converting all “@use” to “@import.” This works but cannot be the best way no?

Mentions Shopify static, (on the GitHub repo?).

SASS

Using SASS with components in folder with corresponding .scss files.

Sass allows the modifier classes like image-single-comp–100vh with corresponding css inside of a nested class using &– ampersand with height of 100vh. Allows you to have modifiers for –75vh and –50vh

68m – seeing a section get two classNames in quotes with one being a –open modifier that gets nested in the css rules. How is he doing this without adding {styles.?}, Must be the SASS.

Colby Fayock article here on implementation.

The CSS is not scoped to the component which is why he is importing into the “main.scss” file with the “@use” syntax. So they are global. The ordering will then matter. You could add a scoped whatEvs.module.scss file if you wanted to.

Random

Liquify CheatSheet link here

Another node Next tutorial here