Introduction

TeamSnap UI is a CSS framework, React component library, and design language for all things TeamSnap web. Currently in development, but this will be the go to place for any designer or developer to start up any web project.

Goals

Consistency

Across all of TeamSnap's web presence by providing clear guidelines and unified design patterns, along with reusable CSS and React toolkits.

Flexibility

Both in the designs it can support and the code bases that can use it. Granular design patterns are favored over large components and a CSS framework lives at the core.

Speed

In both design and development by providing pre-built components and patterns to pull from. No need to reinvent the wheel, just tack them on and cruise.

Using TeamSnap UI

CDN

For the fastest and simplest use, you can easily just drop in our CDN link to the <head> of your document. Themes are also accessible by referencing the themes directory and theme file at the end of the URL /css/themes/league.css. 

<link rel="stylesheet" type="text/css" href="https://teamsnap-ui.teamsnap.com/css/teamsnap-ui.css">
Find the the latest verison here

npm

If you're looking to customize the variable settings or pull specific parts of TeamSnap UI to compile your own CSS, we recomend installing the TeamSnap-UI npm module. 

npm i @teamsnap/teamsnap-ui

Download

Of course you can always download directly or clone from the TeamSnap-UI git repo.

Download

The SUIT Naming Convention

The TeamSnap-UI CSS framework is based on SUIT CSS. A baseline framwork that relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This helps to work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation), and to better communicate the relationships between classes.

Example: 

.u-utilityName
.ComponentName
.ComponentName--modifierName
.ComponentName-descendentName
.ComponentName.is-stateOfComponent

Further Reading

SASS Functions & Variables

TeamSnap-UI's base styling is configured with a system of SASS functions and variables that create a core set of values. First functions are used to create value scales for basic design elements like color. Then those functions are then combined with some base values to define a set of common styles that can be used in various design patterns.

Example: 

$cu-primary:                              $ts-blue !default;
$cu-primary--light:     scaleColor($cu-primary, 1) !default;
$cu-primary--dark:     scaleColor($cu-primary, -2) !default;
$cu-primary--bg:       scaleColor($cu-primary, 10) !default;
DO 

.new-class {
  padding: $su-medium; /* 16px, scaleGrid(2) */
  color: $cu-primary;
}
DON'T 

.new-class {
  padding: 20px;
  color: blue;
}

Basing styles on a set of SASS variables and functions allows for a lot of flexibility in updating design patterns across all TeamSnap's web presence or in specific places by redefining variables and compiling a new stylesheet. Rather than overriding styles, themes can be created with a few lines of code.

Example: 

/* 1. Load config with functions and default variables */

@import "../config/index";

/* 2. Define new color scheme */

$cu-primary:   #1a801a;
$cu-secondary: #4B954B;
$cu-highlight: #104D10;
$color-links:  #4B954B;
$color-links--hover: scaleColor($color-links, -2);

/* 3. Load app CSS with color settings overrriden */

@import "../fonts/index";
@import "../base/index";
@import "../components/index";
@import "../utils/index";
DO 

.new-class {
  padding: $su-medium; /* 16px, scaleGrid(2) */
  color: $cu-primary;  /* #1a801a */
  background-color: $cu-middleground; /* #fdfdfd, scaleColor($ts-grey, 10) */
  width: scaleGrid(15);
}
DON'T 

.new-class {
  padding: 16px;
  color: #1a801a;
  background-color: #fdfdfd;
  width: 120px;
}

Utility Classes

Similar to the variable utilities, TeamSnap UI also offers a wide range of utility classes to easily make tweaks on layouts and components along the way. Utilities cover things like setting the width of an element, adding margins or padding, border, background colors, font colors, font sizes, etc. These utilites all carry the !important flag to ensure specificity.

Example: 

.u-padTopMd {
  padding-top: $su-medium !important; /* 16px, scaleGrid(2) */
}

Utilities are all tied back to the core set of styles and fall in line with the spacing, color, and typography. As those values grow and change over time or based on theme, so two will the tweaks made along the way. Utility classes should be viewed as a direct replacement for inline styling and extra classes to accomplish minor tweaks.

DO 
<p class="u-padTopMd u-spaceMd u-borderTop">Lorem ipsulm dalor sit amet</p>
DON'T 
<p style="padding-top: 16px; margin-top: 16px; border-top: 1px solid #d6d6d6;">Lorem ipsulm dalor sit amet</p>
DON'T 

.Minor-Tweak { /* This is just a tweak to a single instance */
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #d6d6d6;
}

Components

As with any CSS Framework, TeamSnap UI comes with a slew of design patterns built out in HTML and CSS. TeamSnap UI's CSS components are built on a top level class like "Button", then modifier classes are added to create variations of that component like in the case below with "Button--primary". Button provides the base button styling, then Button--primary updates it to change it's color.

Example 
<button class="Button Button--primary">Primary Button</button>

When changes need to be made to a given component to fit a design, additional modifiers should be added. Additional modifiers may be added outside of TeamSnap UI in any repo you're working in, but component classes shouldn't be directly updated as it leads to conflicts and inconsistent styling. As modifiers are added in new repo's the goal is to bring them into TeamSnap UI over time so they can be managed in a single place. Ofcourse utilites are welcome to pair with components too.

DO 
<button class="Button Button--newModifier">New Button</button>

.Button--newModifier {
  /* Styles for newly modified Button */
}
DON'T 
<button class="Button">New Button</button>

.Button {
  /* Styles for newly modified Button */
}