ericmasiello

.row {
  display: flex;
}

/* 4 column layout */
.column {
  min-width: 18.75rem; /* 300px */
  width: 25%;
}

ericmasiello

$base-font-size: 16;

// strips away any unit from a value: e.g. "16px" => 16
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

ericmasiello

import React from 'react';
import classNames from 'classnames';
import './Button.css';

function Button(props) {
  const {
    children,
    className, // <-- destructure the className passed in
    outline,
    primary

ericmasiello

.hero {
  /* whatever hero styles you need */
}

.hero__title {
  margin-bottom: 3rem;
}

.hero__cta {
  border-color: #ff02c9;

ericmasiello

import React from 'react';
import Button from './Button';
import './Hero.css';

function Hero() {
  return (
    <header className="hero">
      <h1 className="hero__title">Eric's Website</h1>
      <p>Learn all about BEM</p>
      <Button className="hero__cta">Learn more about BEM</Button>

ericmasiello

/* You probably don't want to do this... */

import React from 'react';
import './Hero.css';

function Hero() {
  return (
    <header className="hero">
      <h1 className="hero__title">Eric's Website</h1>
      <p className="hero__tagline">Learn all about BEM</p>

ericmasiello

html {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica , Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}

h1 {

ericmasiello

import React from 'react';
import Button from './Button';
import './Hero.css';

function Hero() {
  return (
    <header className="hero">
      <h1>Eric's Website</h1>
      <p>Learn all about BEM</p>
      <Button>Learn more about BEM</Button>

ericmasiello

function Demo() {
  return <Button outline primary>Click me</Button>;
}

ericmasiello

import React from 'react';
import classNames from 'classnames';
import './Button.css';

function Button(props) {
  const { children, outline, primary } = props;

  const classes = classNames('button', {
    'button--outline': outline && !primary,
    'button--outline-primary': outline && primary,