h2: This page shows a composite of available styles

h3: Gzipped minified styles - 2.2kb

h4: Base minimal theme with easy overrides

lead: Use semantic HTML, and layer in a handful of classes as needed. Uses BEM class naming format, but reasonable element styles are also included.

Jump to Documentation

Colophon

Hi! I'm Stephanie Eckles - @5t3ph on Twitter, Github, CodePen, and DEV. You may know me as the author of ModernCSS.dev and creator of StyleStage.dev. I can also be found on egghead as an instructor. I've been a frontend developer for 13+ years, and this jumpstart is a mashup of things learned and tested. I hope you find it useful, and I'm happy to hear any feedback!

Pssst - there's an 11ty jumpstart, too! Check it out >

Initial Setup

Generate a repo from this template which will copy this project into your own new repo.
Clone, and then optionally do a find/replace for tdbc to update to your preferred prefix (or adjust stylelint settings).
Review the README for development and linting scripts.

Theme System

The theme system includes base color values, typography sizes, and handful of other reusable utility variables.

Overriding Theme Variables

The theme variables listed in each section, such as $tdbc-color-background, can easily be overridden. Simply redefine the variable with your new value prior the import of the theme file, which is the first import in the main style.scss file since the variables are used in the other imports.

You can of course modify the theme file directly, but overrides are handy for testing the theme out or if you plan to reuse this template for multiple projects, or across multiple page templates.

Colors

Color Function

You can access theme colors within your custom styles using the tdbc-color() function which takes the name of any colors and returns the defined value. This makes the colors extensible without copying color codes directly.

Color Options and Values

#171392 $tdbc-color-primary .tdbc-[ink|background]--primary
#df2b7c $tdbc-color-secondary .tdbc-[ink|background]--secondary
#f9f9f9 $tdbc-color-background .tdbc-background
* #252450 $tdbc-color-body .tdbc-ink--text
* #5e5d6b $tdbc-color-gray .tdbc-[ink|background]--gray
#fff $tdbc-color-light .tdbc-[ink|background]--light
rgba(black, 0.87) $tdbc-color-dark .tdbc-ink--dark
Link default: $tdbc-link-color: tdbc-color("primary")

* These values are computed from the $tdbc-color-primary value unless overridden

Color Maps

Maps are provided to selectively generate `ink` and `background` colors to allow you to reduce total generated classes if you aren't using some of them.

Add/remove to selectively generate `ink` (text color) classes:
$tdbc-ink-colors: "primary", "secondary", "text", "gray", "light", "dark";

Add/remove to selectively generate `background` classes:
$tdbc-background-colors: "primary", "secondary", "background", "gray", "light";

Typography

Update the font family by removing or changing the Google font stylesheet link in the index, and then update the font stack on the $tdbc-font-family variable. The included font is Baloo 2.

Headline h1 $tdbc-h1-font-size h1 | .tdbc-h1
Headline h2 $tdbc-h2-font-size h2 | .tdbc-h2
Headline h3 $tdbc-h3-font-size h3 | .tdbc-h3
Headline h4 $tdbc-h4-font-size h4 | .tdbc-h4
lead - utility $tdbc-lead-font-size .tdbc-lead
text $tdbc-text-font-size p | li
Text alignment: .tdbc-text-align--[left|center|right]

Components

Buttons

All buttons require the base .tdbc-button class, which by default is a filled-in button using the primary color as background.

Add/remove to selectively generate button colors variants:
$tdbc-button-variants: "primary", "secondary", "light", "gray";

Apply a color with a class structured as .tdbc-button--[color] where `color` is one of the available variants from the map.

default secondary light gray

A second variant of .tdbc-button-outlined is available.

default secondary light gray

Reduce button size with .tdbc-button--small. Add icons (svg preferred) inside span.tdbc-button__icon, with added .tdbc-button__icon--end if it follows the button text.

small small icon start icon end

Cards

It is recommended to use a ul to contain card items.

Use of the class .tdbc-column-container on the containing element will enable a responsive grid layout.

Basic Card

            
<ul class="tdbc-column-container">
  <li class="tdbc-card">
    <div class="tdbc-card__content">
      <span class="tdbc-card__title">
        Card Title
      </span>
      <p>Any content here.</p>
    </div>
  </li>
</ul>

Card Title
Any content here.

Image Header

Insert an image as the first element prior to the content and it will be auto-styled.

            
<ul class="tdbc-column-container">
  <li class="tdbc-card">
    <img src="https://source.unsplash.com/400x400/?corgi" alt="pupper" />
    <div class="tdbc-card__content">
      <span class="tdbc-card__title">
        Card Title
      </span>
      <p>Any content here.</p>
    </div>
  </li>
</ul>

Card Title
Any content here.

Outlined Variant

Include the .tdbc-card--outlined class to remove the `box-shadow` and `background-color`.

            
<ul class="tdbc-column-container">
  <li class="tdbc-card tdbc-card--outlined">
    <div class="tdbc-card__content">
      <span class="tdbc-card__title">
        Outlined Card
      </span>
      <p>Any content here.</p>
    </div>
  </li>
</ul>

Outlined Card
Any content here.

Clickable Card

Use of a link element for the title will expand the clickable area of the card while still allowing interaction on any paragraph content.

            
<ul class="tdbc-column-container">
  <li class="tdbc-card">
    <div class="tdbc-card__content">
      <a class="tdbc-card__title">
        Clickable Card
      </a>
      <p>Any content here.</p>
    </div>
  </li>
</ul>

Clickable Card
Any content here.

Layout

Inherited Element Styles

Minimal element styles are placed on the following:

body: notably - display: flex; flex-direction: column;
main: vertical padding
footer: auto top margin to prevent floating up
article: max-width: 80ch;
typography elements: h1-h4, p, ul, li, code, pre, strong, blockquote
hr

Layout Containers

A full-featured grid system is not provided, but a few container classes are given to help with common content layout scenarios.

`.tdbc-container`

A flexbox container with column direction to wrap sections you wish to center within the viewport and limit the width (default 120ch).

`.tdbc-column-container`

A grid container that responsively allows for 1+ responsive auto-fit columns with grid-gap: 1rem and min-width: 25ch.

If placed within .tdbc-container there will be up to four columns on large viewports. If not contained, there will be as many as the viewport allows.

`.tdbc-section`

Given the body is flex layout, enforces a full-width section for when you want to apply a different background color, for instance. Also clears bottom margin from the last child.

Use the .tdbc-section--padded modifier to add vertical space (default 10vh).

`.tdbc-row`

Sets up grid layout for viewports of min-width: 80ch to grid-auto-flow: column; grid-auto-columns: max-content;. Essentially allows a row of side-by-side elements without width constraints, including a gap of `1rem`.

Modifiers available:

.tdbc-row--center-content - horizontally centers content
.tdbc-row--center-alignitems - vertically centers content

`.tdbc-hero`

A zippy utility that uses grid to vertically and horizontally center child elements, and adds min-height: 40vh. Suggested use is to wrap .tdbc-container.tdbc-content-maxlength

Layout Utilities

Available utilties primarily various spacing modifications.

`.tdbc-content-maxlength`

While the article element is inherently limited, selectively apply this limitation to other elements (default 80ch).

Margin Spacing Classes

A select set of margin classes are available using "t-shirt sizing" on the following default scale which can be overridden:

          
$tdbc-spacing: (
  "sm": 1rem,
  "md": 3rem,
  "lg": 6rem,
  "xl": 10rem,
  "auto": "auto",
);

Available margin class structures:

.tdbc-mx-auto - auto horizontal margin
.tdbc-mt-[size] - top margin using value of size key
.tdbc-mb-none - remove margin bottom

Margin classes have been selectively created to be general use case without cluttering and bloating the final stylesheet. If you wish to alter them, they are generated in the utilities file.

Recommended Base Page Layout

Update colors as desired and layer in other elements as needed.


<header class="tdbc-hero tdbc-background--gray tdbc-ink--light">
  <h1>Page Hero</h1>
</header>
<main class="tdbc-container">
  <article class="tdbc-mx-auto tdbc-section--padded">
    <h2>Article title</h2>
    <p>Cookie jelly-o sweet apple pie croissant tart croissant. Dragée biscuit sweet roll cake halvah chupa chups muffin gummies croissant. Chocolate bar candy pastry brownie powder. Macaroon icing fruitcake tootsie roll cotton candy chocolate sesame snaps pastry.</p>
  </article>
</main>
<footer class="tdbc-section tdbc-background--gray">
  <div class="tdbc-container tdbc-text-align--center">
    <p class="tdbc-ink--light">
      &copy; YYYY Name
    </p>
</footer>

Page Hero

Article title

Cookie jelly-o sweet apple pie croissant tart croissant. Dragée biscuit sweet roll cake halvah chupa chups muffin gummies croissant. Chocolate bar candy pastry brownie powder. Macaroon icing fruitcake tootsie roll cotton candy chocolate sesame snaps pastry.