Canadian Hockey League Site Redesigns

60+ customizable sites all on a single wordpress install

Some highlights from my part in all this

• CSS 3D transformations and animations.
• Brand config that makes logo and colour updates simple.
• Organized SASS file structure to support theming.

CSS 3D transforms

This is where I had a lot of fun. I started with a flat representation of an ice rink and 3D transformed it using CSS.

CSS Animated Transitions

I then added some animated transitions to the modals. If you look closely, I even animated the toggles to behave like an iOS app. Using the :active state I also made some buttons bounce to provide touch feedback on mobile devices.

Team Config File

I created a brand config that makes logo and colour updates simple. Logo updates used to involve updating multiple files and code snippets. Now a config is changed in one place and the update is made network wide.

//Sault Ste Marie Greyhounds 
.team-logo--ssm
.team-bg--ssm
.team-border--ssm

//Windsor Spitfires
.team-logo--wsr
.team-bg--wsr
.team-border--wsr

Team codes are contained in stats feeds. The codes are used constantly on the sites as a short form. It made sense to use the team codes as BEM modifiers, which are referenced in the global team config. The class names can now be used globally throughout the sites to apply team specific styles.

An SCSS file contains an array of variables for background images, border colours and background colours. In order to keep the array visually organized, I ignored the significant whitespace of SASS, and used SCSS instead.

team-config.scss

//code, image url, hexcode
$team-list:
  ssm 'sault-ste-marie-greyhounds.png' #e51937,
  wsr 'windsor-spitfires.png' #00264c; 

It would have been time consuming to write 60+ styles by hand. I decided instead to create a loop that outputs all of the CSS using the array for reference.

@each $team in $team-list {

  $code: nth($team, 1);
  $logo: nth($team, 3);
  $colour: nth($team, 4);

  .team-border--#{$code}{
    border-color: $colour;
  }
  .team-bg--#{$name} {
    background-color: $colour;
  }
  .team-logo--#{$name} {
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('assets/images/#{$logo}');
    background-size: 100%;
  }
}

The outputted CSS file will look something like this:

.team-logo--ssm {
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('assets/images/logos/'sault-ste-marie-greyhounds.png');
  background-size: 100%; 
}

.team-logo--wsr {
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('assets/images/logos/windsor-spitfires.png');
  background-size: 100%; 
}

.team-border--ssm {
  border-color: #00529b;
}

.team-border--wsr {
  border-color: #8a821a;
}

.team-bg--ssm {
  background-color: #00529b;
}

.team-bg--wsr {
  background-color: #8a821a;
}

The result is a collection of recyclable class names. The only thing left to do is set the border thickness and size of the elements.

Organized SASS File Structure To Support Theming

With over 60 sites, it is important to try and keep everything low maintenance. In less than 20 lines of SASS, sites can be recoloured and include updated fonts that are unique to their brand. With just a few extra lines of SASS, styles can be overwritten to meet individual needs.

Here’s an example of the default light scoreboard followed by a customized dark version. The dark version has customized colours and fonts.

The structure boiled down to global files for layout, styles, shared mixins and configs. The layout contains no variables whereas the styles contain only variable colour and font related styles.

/layout/layout.sass
/layout/components/*.sass
/shared/mixins.sass
/shared/config.sass
/styles/styles.sass
/styles/components/styles.sass

So when a team theme is created, the theme-config.sass file is updated with all of the variables that need to be overwritten.

When the SASS is compiled, the files are called in a specific order. This allows the SASS compiler to overwrite the default variables, reducing the amount of SASS needed in the individual themes.

The default config.sass has a base set of global variables.

$brand-500: #F0F0F0 

These variables can be overwritten by the theme-config.sass.

$brand-500: #FF00FF

The main.sass file looks something like this:

@import /shared/mixins.sass
@import /layout/layout.sass
@import /layout/components/*.sass
@import /shared/config.sass

//Colour variables in the brand specific theme-config.sass overwrite the defaults.
@import /theme/brand-config.sass

//SASS now uses the updated variables when it compiles the CSS, making each theme.css file unique. 

@import /styles/styles.sass
@import /styles/components/styles.sass

To sum it all up:

It’s a massive project. Collaborating as a team with other designers and developers to produce wireframes, mockups, designs, SASS, PHP, and React. It was a great opportunity to experiment and learn new things. I’m very proud of how the project turned out.