Front End Coding at Teespring

What I'll cover:

Front End History + Structure: Where are my files?

Naming : How to name your CSS classes and what is B.E.M.?

Style Guide : I am a style guide

UI building : From design to development.

How elements and components stack with eachother.

What I won't cover:

CSS transitions and animations

Let's save that for pairing.

I'm not always right.

I'm just a trying to figure it out myself.

Front End History + Structure

V2, V5, current (universal)

V2

Homepage, Campaign Page

Uses Twitter Bootstrap (less for css preprocessing)

Rails Teespring > App > Assets > Stylesheets > v2

V5

About Page

Uses a newer version of Twitter Bootstrap (sass for css preprocessing)

Rails Teespring > App > Assets > Stylesheets > v5

Current/New/Shared

Dashboard, Stores, Jobs Page

Roll our own, using sass

Structure

Documented on our front end Github wiki.

Naming

What is B.E.M.?

BLOCK

ELEMENT

MODIFIER

Indepth Explaination linked in our front end Github wiki.

By using B.E.M., we can avoid a lot of nesting... which bloats up our css and slows our site down.

Speaking of nesting, a good rule of thumb is to never go 4 levels deep.

Example

Block

A list of colors

.color_picker

.color_picker {
	list-style: none;
}

Element

Each color, a list item

2 underscores

.color_picker__list_item

.color_picker__list_item {
	display: inline-block;
}

Modifier

An action applied

2 dashes

.color_picker__list_item--active

.color_picker__list_item--active {
	border: 1px solid blue;
}

Style Guide

Created by Josh, but iterated by the design team

Currently incomplete, and always evolving

teespring.com/style-guide

UI Building

From Design to Development

Get Photoshop/Sketch

Having the PSDs/design tools and files really help.

You can see the grid, font sizes and weights, and implement the intended work that our design team has carefully crafted.

Front End Coding at Teespring – I'm not always right. – Front End History + Structure

johannesma