frontend-guide

PCO frontend overview

added to Interfaces & Interfaces_icons

planningcenter / frontend-guide

PRACTICAL BEM

A 500-word BEM Primer

chantastic / practical-bem

reactcheatsheet.com

updates + Stuff

reactcheatsheet.com

react-minions

<div
  data-sm="p-0"
  data-md="p-1"
  data-lg="p-2"
/>

specificity
  0,0,0,1

<div class="
  p-0@sm
  p-1@md
  p-2@lg
" />

specificity
  0,0,1,0

<div class="f-1 fw-b td-n c-blue fw-400 p-0@mn p-1@md m-0@mn m-1@md" />

react-minions

<div minions={{
  sm: "p-0",
  md: "p-1",
  lg: "p-2",
}} />

<div minions={{
  sm: "p-0",
  md: "p-1 m-1 fd-r",
  lg: "p-2",
}} />

<div
  className="whatevs"
  style={{ display: flex }}
  minions={{
    sm: "p-0",
    md: "p-1 m-1 fd-r",
    lg: "p-2",
  }}
/>

WHAT's the best way to use this?

<Base
  minions={{
    sm: "p-0",
    md: "p-1",
    lg: "p-2",
  }}
/>

<Base
  tagName="h1"
  minions={{
    sm: "p-0",
    md: "p-1",
    lg: "p-2",
  }}
/>

const Block = ({
  className,
  ...props
}) => (
  <Base
    className={cx(
      "Block",
      "d-b",
      className
    )}
    {...props}
  />
)

import "react-minions/Minionize"
import "./MyComponent"

const MinionizezdMyComponent =
  Minionize(MyComponent)

<MinionizedMyComponent
  myCompProp="whatevs"
  minions={{ sm: "p-1" }}
/>

import mx from "react-minions/minionClassNames"

const MyComponent = ({
  className,
  minions,
  ...props,
}) => (
  <section
    className={mx(
      minions,
      "MySection",
      className
    )}
    {...props}
  >
)

import cx from "classnames"
import mts from "react-minions/toString"

const MyComponent = ({
  className,
  minions,
  ...props,
}) => (
  <section
    className={cx(
      mts(minions),
      "MySection",
      className
    )}
    {...props}
  >
)

Works with great existing generic libs

chantastic.github.io/react-minions