Post on 20-May-2015
description
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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Hello!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Eric Sembrat • Drupal Developer at Georgia
Institute of Technology • Graduate Student at Georgia
State University
Contact Me • Twitter: @esembrat!• Web: ericsembrat.com
Game Plan
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Our Agenda
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• Setting the Stage • The Need for Sass • Enter: Sass • The Product • The Concerns • The Future • Questions? Comments?
Follow Along
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• These slides are available at my website.
!• http://www.ericsembrat.com !• Follow along on your device of
choice!
Setting the Stage..
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Setting
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• http://www.gatech.edu
Theme (1)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Theme (2)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Theme (3)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Comparison
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Comparison (2)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Comparison (3)
Eric Scott Sembrat | Georgia Institute of Technology | 2013
The Need for Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
The Organization
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Primer to Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Snapshot
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Components
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• The release was composed of: • Documentation • Source Files • Implementation Examples • Opportunity to attend
workshop for additional help (November 5 2013)
Composition
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• Documentation • http://drupal.gatech.edu/
handbook/sassy-gt-theme !
• Template Suite • https://github.com/
EricScottSembrat/cos_newsite
Why Document?
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• (sorry, this part is a demo!)
The Concerns
Eric Scott Sembrat | Georgia Institute of Technology | 2013
1: Who’s Using This?
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Additional Mixins
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• Ensure documentation is: • Thorough • Exhaustive • Succinct • Usable
Work with Communications
Eric Scott Sembrat | Georgia Institute of Technology | 2013
• 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?
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Thanks!
Eric Scott Sembrat | Georgia Institute of Technology | 2013