Skip to content

base.md

Latest commit

 

History

History
89 lines (68 loc) · 2.23 KB

base.md

File metadata and controls

89 lines (68 loc) · 2.23 KB
title Base
type page
parent Foundation
nested true

Foundation - Base

Base contains all of the tag-level settings for default HTML elements. These are things like anchors, headings, paragraphs, lists, and everything else that doesn't have a class name attached. Because there are so many possible HTML elements to cover, we typically only style the ones relevant to a project as we need them.

We define html and body styles at the top, and then divide the remaining content into Block and Inline sections.

// *************************************
//
//   Base
//   -> Tag-level settings
//
// *************************************

html
  background: $c-background
  color: $c-base
  font-family: $b-fontFamily
  font-size: $b-fontSize
  line-height: $b-lineHeight

body
  font-size: 100%

Block Content

Block content is made up of all the block-level elements needed in an MVCSS project. Typically, this section includes the aforementioned headings, paragraphs, lists, as well as figures, blockquotes, and more.

Collapsing margins, while an intentional feature of CSS, only add complexity when authoring style sheets, so we limit vertical margins on block-level elements to a single-direction.

// -------------------------------------
//   Block Content
// -------------------------------------

ul, p
  margin-bottom: $b-space
  margin-top: 0

li
  margin-bottom: $b-space-s
  margin-top: 0

// ----- Headers ----- //

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4
  font-family: $b-fontFamily-heading
  font-weight: bold
  line-height: 1.2
  margin-bottom: $b-space-xs
  margin-top: 0

Inline Content

Inline content is made up of—you guessed it—inline elements. These include tags like a, strong, em, code, and any others that don't force a line break before and after themselves by default.

// -------------------------------------
//   Inline Content
// -------------------------------------

a
  border-bottom: $b-border
  color: $c-highlight
  text-decoration: none

  &:hover,
  &:focus
    border-bottom-color: $c-highlight
    color: $c-subdue