Hit the “s” key to see this presentation with my notes

HVTech Meetup: Kingston, NY

Wed, Feb 25, at The Kirkland

Thank you

  • Kale Kaposhilin
  • Dan Stone
  • Daniel Schutzsmith
  • Sabrina Schutzsmith

Ray Schwartz

Avatar inspired by James’ Laid

Gamut

What is it?

30,000 ft view

Integrated system that communicates clearly and touches every part of a website’s life-cycle.

Goals

In theory

  • A unified methodology for site building
  • To design for change
  • An extensible/configurable system

In practice

  • Produce more/higher-caliber sites in less time
  • Streamline maintenance, debugging, and enhancements
  • Let designers focus on design, not technology decisions

Achieve by

  • Centralizing the code
  • Employing a modular approach
  • Applying Best Practices
  • Following Coding Principles

Leading to

  • Adaptability
  • Flexibility
  • Maintainability
  • Scalability
  • Simplicity
  • the same but different

What’s the same about Vassar?

We build websites—not “academic websites.”

What’s different about Vassar?

We’re responsible for a collection of 150+ of them.

Design your code

Most of my time was spent researching—not coding.

Working code is an accomplishment, but alone sets the bar too low.

Code should have purpose, and the purpose of all code is to solve problems—not be an impediment.

How did it happen?

We asked Questions

Q: How do we address “mobile?”

A: RWD

Q: How do we upgrade our websites to current standards?

A: New “Sample Site”

What is a Sample Site?

A flat, single-page HTML template, containing our best practices (proprietary).

My Mission:

build the new Sample Site

A template to build a template

I wanted to move from one page to a set of pages.

A PHP template seemed appropriate.

Realization #1
Easy for me, easy for everyone

If a PHP template made my work easier, wouldn’t it make everyone’s?

Instead of sharing static pages, I’d share a dynamic site-builder.

Realization #2
The site-builder could be the site

If it ran on my server, why not on Production?

The Basic Model

Published Sites

One-way connection from CMS to published sites

Dev Sites

One-way connection to CMS, then published sites

Core

Two-way connections between components

What does it do?

A lot

  • Writes file content (JS, CSS, HTML)
  • Minifies/Concatenates
  • Asynchronously loads
  • Caches/timestamps
  • Conditionally loads
  • Manages modules
  • Allows for shared SASS variables
  • Loads Plug-ins
  • Builds IE8 CSS
  • Manages Navigation/breadcrumbs/site map
  • Auto-generates slide show images and thumbnails
  • Device detects via WURFL
  • IP based debugging (w/Kint)

Aids visual design (future)

Using style patterns, their combination make unique designs.

  • Typographic treatment A
  • layout X
  • color scheme Y

Harness the power of Gamut Core for experimentation and visual design construction.

I love it when a plan comes together

JS, HTML, CSS are REAL CODE (not fake or sub-standard or easier).

There are great benefits applying the principles and best practices of “real” programming to them.

—John “Hannibal” Smith: The A-team

Demo

Demo site

SASS/CSS: Shared combined with local

Variables set at the site level inform central, shared SASS so each site can have its own values for breakpoints/values but share CSS.

Shared CSS for modules (search, footer), normalize.css, responsive images, etc. All sites get updates, when they occur, on-the-fly.

Tools

Codekit

MAMP

  • Mac
  • Apache
  • MySQL
  • PHP

SASS

  • Syntactically
  • Awesome
  • Style
  • Sheets

Git

PHP Storm

Typekit