CSS AS A SERVICE MAINTAINING STYLE

CSS AS A SERVICE MAINTAINING STYLE

March 13, 2015 | SXSW Interactive | JW Marriott Austin

Modern websites has separate code bases but very similar / duplicate styles behind them. Most of the time, an old website can be identified easily with it’s looks and feel. In that same view, modern websites can be identified easily as they share somewhat similar appearance. Our codebase basically looks like this-

We build all our applications in this Service Oriented Architecture (SOA)

Service Oriented Architecture (SOA)is a design pattern where software provides distinct functionality as services to other applications

The databases in the image above contains all the content. The clients contains interfaces or front end applications that actually display the content. between these two, sits the services. Services will go out, reach the databases and then populate the actual front end applications. This is very modular because if any of these front end applications makes update to the content- the database, that update is then implemented across all the other applications. Smart way to serve up different types of content.

But to fit “Design” in the picture above, we could use Bootstrap or Foundation. But Shay Howe always finds himself working against them rather than working with them. He introduced his own little “Baby Bootstrap”.

The goal here is to create modular, predictable and maintainable code. The idea is that we are not building pages, we are building systems

This this view, to have a service to focus on style explicitly would be beneficial. That’s why we call it “Style” as a service. He introduced rolodex as his own little “Baby Bootstrap”

Shay Howe is Director of Product at BellyCard. Designer, Front-end Architect, Co-Organizer of refreshchiChicagoCamps, & uxhappyhour. He is also an avid Cyclist, Cupcake Enthusiast!

Resources / Links

  1. Rolodex– Shay Howe’s own “Baby Bootstrap”
  2. shayhowe.com – Learn to Code HTML & CSS
  • PARALLEL DEVELOPMENT

    • Work in the context of real content
    • Application -> Toolkit -> Style guide
  • RINSE & REPEAT

    • Watch for duplicate code then refactor
    • Adjust as needed
    • Create new variables, maps & utilities as best fit
  • SINGLE RESPONSIBILITY PRINCIPLE

    • Every class should have a single responsibility
    • Responsibility should be encapsulated by the class
  • DECOUPLE HTLM & CSS

    • Remove parent container dependency
    • Allow element to adapt
  • NAME WITH CARE

    • Name for understanding
    • Favor functional name
    • Use a sensible pattern
  • PARALLEL DEVELOPMENT

    • Work in the context of real content
    • Application -> Toolkit -> Style guide
  • RINSE & REPEAT

    • Watch for duplicate code then refactor
    • Adjust as needed
    • Create new variables, maps & utilities as best fit
  • SINGLE RESPONSIBILITY PRINCIPLE

    • Every class should have a single responsibility
    • Responsibility should be encapsulated by the class
  • DECOUPLE HTLM & CSS

    • Remove parent container dependency
    • Allow element to adapt
  • NAME WITH CARE

    • Name for understanding
    • Favor functional name
    • Use a sensible pattern