emulsify_component_breakpoints.md

bjlewis2 [Oct 8th at 6:22 PM] My first thought was “We could easily add something like that to Emulsify”, but actually we use a lot of component-specific breakpoints as opposed to “global” breakpoints. So a featured event card might adjust at points that don’t line up with the “global” breaks so that it looks good at all sizes, and isn’t restricted to “it looks too stretched out here, but the next breakpoint isn’t for another 235px…” So, I’m not sure it’d actually get much use

9 replies jsheffers [1 day ago] Hey Brian, just curious. How are you handling component specific breakpoints?

bjlewis2 [1 day ago] Something like this:

$break-text-with-image: 640px;

.text-with-image {
  @include space-stack-page;

  &__image {
    @include breakpoint($break-text-with-image) {
      max-width: 48.78%;

      &--right {
        float: right;
        margin-left: $space-inline-s;
      }

      &--left {
        float: left;
        margin-right: $space-inline-s;
      }
    }
  }

  &-clear {
    content: '';
    display: block;
    clear: both;
  }
}

bjlewis2 [1 day ago] Sometimes it does matchup to the “global” breakpoints though:

$card-break: $medium;

.card--basic {
  @include space-stack-s;

  @include breakpoint($card-break) {
    max-width: 58rem;
    display: flex;
    flex-flow: row wrap;
  }
...

jsheffers [1 day ago] Ok, so it’s not an “Element query”, it’s still in relation to the browser width?

bjlewis2 [1 day ago] Although… I probably shouldn’t do that, because if we need to change a global breakpoint, I don’t want the component one to change too…

jsheffers [1 day ago] You’re just creating a breakpoint var in the component itself?

bjlewis2 [1 day ago] Correct

bjlewis2 [1 day ago] element queries will be great when they’re (eventually?) added to css

jsheffers [1 day ago] Cool, thanks.