Ridinghood Media BEM CSS Guidelines

bem-css.md

BEM Links

https://en.bem.info/methodology/css/ https://en.bem.info/methodology/quick-start/

Block

Blocks — logically and functionally independent, reusable page components. The same blocks can be used in different projects. To prevent these projects from looking identical, blocks can be modified using Modifiers, Mixes, and Context.

Mixes

Positioning blocks within a parent

<header class="header">
    <div class="logo header__logo"> ...</div>
    <div class="search header__search"> ...</div>
    <div class="user header__user"> ...</div>
</header>

Styling groups of blocks

Structure

Sections

Sections are top-level wrappers that contain content and, usually, a container.

.section {
  padding-top: 40px;
  padding-bottom: 40px;

  &_pad-top_xl {
    padding-top: 200px;
  }

  &_pad-overlap_bottom {
    @include lg-screen {
      padding-bottom: 150px;
    }
  }
}

.bg {
  &_image-full {
    background-position: center center;
    background-repeat: no-repeat;
    @include bg-size-cover;
    position: relative;

    @include md-screen {
      height: auto;
      min-height: calc(80vh - 100px);
      max-height: 768px;
    }
  }

  &_color-primary {
    background-color: $color-primary;
  }
}

.overlay {
  &:after {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    background: $color-primary-dark;
    filter: alpha(opacity=55);
    -moz-opacity: 0.55;
    opacity: 0.55;
  }
}

.overlay_gradient {
  &:after {
    background: -moz-linear-gradient(
                    top,
                    $color-primary-dark 0%,
                    $color-dark
    );
    background: -webkit-linear-gradient(
                    top,
                    $color-primary-dark 0%,
                    $color-dark
    );
    background: linear-gradient(
                    to bottom,
                    $color-primary-dark 0%,
                    $color-dark
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-primary-dark', endColorstr='$color-dark', GradientType=0);
  }
}

.text-helper {
  &_word-break_auto {
    @include word-break-auto;
  }
}

.text {
  @include word-break-auto;
}

.title {
  font-family: "Nexa-bold", sans-serif;
  @include word-break-auto;
  text-align: left;

  &_divider {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid $color-light;
    border-bottom: 1px solid $color-light;
  }
}

.title_center {
  text-align: center;
}

// Option 1
.title_left-sm {

}
// Option 1.5
.text_left-sm {

}

.container {
  padding-left: 40px;
  padding-right: 40px;
}

.container_stretch {
  padding-left: 0;
  padding-right: 0;
}

.container_pad_sm {
  @media (min-width: 992px) {}
}

.container_pad_lg {

}

.pad_sides_sm {

}

.pad_vertical_sm {
  text-align: center;

  @media (max-width: 797px) {
    text-align: left;
  }



}

.container_pad_0 {
  padding-left: 0;
  padding-right: 0;
}

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

.callouts {

}

.callouts__title {

}

.callouts__title_size_md {

}

// <div class="section media-callout media-callout_theme_bold">

.media-callout {

}

.media-callout_reverse {
  flex-direction: row-reverse;
}

.media-callout_theme_content-float-left {
  flex-direction: row-reverse;
}

// layout
// layout/sections/lead-in
// layout/sections/media-callout
// layout/sections/focus-text

.focus-text_theme_shade {
  background-color: gray;
}

// Text context set by block (very specific, not reusable)
.focus-text_theme_shade__title {
  font-style: italic;
  font-weight: bold;
}

// Text context set by itself (reusable)
.title_theme_shade {

}

// Generic (reusable, specific but leads to many classes being used)
.title_color_secondary{}
.title_style_italic {}

.lead-in_theme_x {

}

// Layout goes at the same level as the container

// Sections
// generic
.section {}

// Optional
.container {}
.container_stretch {}

// Layout
.lead-in {}
// <section class="lead-in">

.cta {

}

.section_theme_hero {
  padding-top: 200px;
  padding-bottom: 100px;

  @media (max-width: 797px) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.section_theme_hero-big {
  padding-top: 200px;
  padding-bottom: 100px;

  @media (max-width: 797px) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.section_theme_hero-ribbon {
  padding-top: 200px;
  padding-bottom: 0;

  @media (max-width: 797px) {
    padding-top: 100px;
  }
}

// Option 2
.title_theme_fluid {
  text-align: center;

  @media (max-width: 797px) {
    text-align: left;
  }
}

// Option 3
.blurb_theme_2__title {
  text-align: center;

  @media (max-width: 797px) {
    text-align: left;
  }
}


/**
 * Title Font
 */

.title_font {
  &_secondary {

  }
}

/**
 * Title Font
 */

.title_font {
  &_secondary {

  }
}

/**
 * Title Sizes
 */

.title_size {
  &_xl {
    font-weight: 900;
    font-size: 45px;
    letter-spacing: 1.5px;
    line-height: 45px;

    @include sm-screen {
      font-size: 50px;
      line-height: 50px;
    }

    @include md-screen {
      font-size: 90px;
      letter-spacing: -2.54px;
      line-height: 80px;
    }
  }

  &_xl-thin {

  }

  &_size-lg {
    font-family: "Nexa-bold", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 35px;

    @include md-screen {
      font-size: 40px;
      line-height: 54px;
    }
  }

  &_size-md {
    font-weight: 400;
    font-size: 25px;
  }

  &_size-sm {
    font-weight: 400;
    font-size: 20px;
  }
}