DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

Sass at Georgia TechA Case Study of building a Drupal-centric Sass framework and sub-

theme starter kit.

Eric Scott Sembrat | Georgia Institute of Technology | 2013

Introduction


Hello!


Eric Sembrat • Drupal Developer at Georgia

Institute of Technology • Graduate Student at Georgia

State University

Contact Me • Twitter: @esembrat!• Web: ericsembrat.com

Game Plan


Our Agenda


• Setting the Stage • The Need for Sass • Enter: Sass • The Product • The Concerns • The Future • Questions? Comments?

Follow Along


• These slides are available at my website.

!• http://www.ericsembrat.com !• Follow along on your device of

choice!

Setting the Stage..


Setting


• Throughout 2012 and into the middle of 2013, Georgia Tech was in the midst of a full-fledged web redesign. • Consultancy firm for design. • Internal for development. !

• In mid-August, a final theme was released to the GT Drupal community.

!• Joy was had by all.

View the Theme


• http://www.gatech.edu

Theme (1)


Theme (2)


Theme (3)


Comparison


• As compared to the old theme, the redesign was a bit of a seismic shock to established web developers.

!• Beyond the conventions of top

primary navigation bars and mobile-friendly website development, general aesthetics and theming best-practices were flipped.

Comparison (1)


Comparison (2)


Comparison (3)


The Need for Sass


The Organization


• Georgia Tech runs a decentralized Drupal infrastructure. !

• Web developers across campus are encouraged to use centrally-developed themes and templates. !

• However, the provided templates are customized with a low-feature, high-application mindset.

Reinventing Wheels


• As initial development proceeded on post-rollout websites, a common theme struck with developers.

!• The general gist of most

requests were “how can I make my website look like {x}? {y}?”. !

!

Enter: Sass


Primer to Sass


• This section assumes that you have a rudimentary understanding of Sass.

• If you are unfamiliar with Sass, see my presentation from DrupalCamp Chattanooga 2013. • http://ericsembrat.com/

Sass


• As a Drupal developer on campus, I had been experimenting with Sass throughout the redesign process.

!• I realized as I continued to

build websites that Sass could easily modularize many of the stylistic cues and best-practices.

Sass Usage


• I had presented to the Georgia Tech Drupal community on Sass in late 2012. !

• However, most developers I talked to did not see a viable use-case for using Sass. !

• The release of a new campus theme and design cues provided that use-case.

Design Considerations


• When deciding to build out a Sass framework for GT, the development process focused on one simple set of criteria.

!• Keep it modular. • Keep it simple. • Keep it scalable.

The Build


• With the scale, scope, and need for the project in place, I could begin developing a Sass framework that would work for my work and the community. !

• Style modularization focused on: • Buttons • Mega menus • Sidebars • Text and hyperlinks • Headers

Development


• Development began in August 2013, taking many of the existing Sass structures I had used on previous web development projects.

!• In mid-October 2013, a public

release was available.

The Product


Snapshot


Components


• The release was composed of: • Documentation • Source Files • Implementation Examples • Opportunity to attend

workshop for additional help (November 5 2013)

Composition


• Documentation • http://drupal.gatech.edu/

handbook/sassy-gt-theme !

• Template Suite • https://github.com/

EricScottSembrat/cos_newsite

Why Document?


• Being a decentralized Drupal campus, information sharing is a necessity for cohesive development strategies. !

• The Georgia Tech Drupal wiki served as a perfect fit for the documentation. • Already used for

configuration and best-practices.

• Freely editable.

Document Components


• (sorry, this part is a demo!)

The Concerns


1: Who’s Using This?


• This product was originally built as a personal template for easing development practices.

!• However, there is no

expectation (or requirement) that the campus will be using Sass for website theming. !

• Stopgap? • Show why Sass is

indispensable for development.

2: Training, Development


• As I am the single Sass expert on campus, I am obligated to serve as a trainer for new users.

!• Training procedures are

currently in development as a long-term goal for departmental outreach to the campus.

3: Upkeep


• As I prepared the first public release, I was concerned with one single aspect.

!• “How easy is this going to be to

update (from a developers’ perspective)?” !

• Documentation and training should continue to broadcast best-practices for Sass development.

The Future


Additional Mixins


• As the Sass framework continues to be updated, a long term goal is to expand and extend the mixins (plugins) for usage in theming projects. !

• Goal: minimize the amount of time spent styling a block, header, or text area to match already-standardized appearances.

Library Updates


• Keep Sass, Font Awesome, Sass Globbing, Compass, and Animate.css up-to-date and compatible. !

• Font Awesome 4.0 (released last week) provided a headache for early adopters.

Continue Documenting


• Ensure documentation is: • Thorough • Exhaustive • Succinct • Usable

Work with Communications


• Work with other campus resources to (long term) incorporate Sass design principles and components into core design and campus-wide projects.

!• Tasks which fall outside of the

scope and scale of my job description.

Questions?


Thanks!


DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

Technology

Transcript of DrupalCamp Chattanooga (2013) - Sass at Georgia Tech