A case study of how Sass (a CSS framework for extending and modularizing styling components) was used to extend and simplify a new theming framework and redesign on a major university campus.

1. Sass at Georgia Tech
A Case Study of building a Drupal-centric Sass framework and subtheme starter kit.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

2. Introduction
Eric Scott Sembrat | Georgia Institute of Technology | 2013

3. Hello!
Eric Sembrat
• Drupal Developer at Georgia
Institute of Technology
• Graduate Student at Georgia
State University
Contact Me
• Twitter: @esembrat!
• Web: ericsembrat.com
Eric Scott Sembrat | Georgia Institute of Technology | 2013

4. Game Plan
Eric Scott Sembrat | Georgia Institute of Technology | 2013

5. Our Agenda
•
•
•
•
•
•
•
Setting the Stage
The Need for Sass
Enter: Sass
The Product
The Concerns
The Future
Questions? Comments?
Eric Scott Sembrat | Georgia Institute of Technology | 2013

6. Follow Along
•
These slides are available at
my website.
!
•
http://www.ericsembrat.com
!
•
Follow along on your device of
choice!
Eric Scott Sembrat | Georgia Institute of Technology | 2013

7. Setting the Stage..
Eric Scott Sembrat | Georgia Institute of Technology | 2013

8. Setting
•
Throughout 2012 and into the
middle of 2013, Georgia Tech
was in the midst of a fullfledged 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

9. View the Theme
•
http://www.gatech.edu
Eric Scott Sembrat | Georgia Institute of Technology | 2013

10. Theme (1)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

11. Theme (2)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

12. Theme (3)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

13. 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 bestpractices were flipped.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

14. Comparison (1)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

15. Comparison (2)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

16. Comparison (3)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

17. The Need for Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013

18. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

19. 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}?”.
!
!
Eric Scott Sembrat | Georgia Institute of Technology | 2013

20. Enter: Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013

21. 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/
Eric Scott Sembrat | Georgia Institute of Technology | 2013

22. 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 bestpractices.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

23. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

24. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

25. 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
Eric Scott Sembrat | Georgia Institute of Technology | 2013

26. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

27. The Product
Eric Scott Sembrat | Georgia Institute of Technology | 2013

28. Snapshot
Eric Scott Sembrat | Georgia Institute of Technology | 2013

29. Components
•
The release was composed of:
• Documentation
• Source Files
• Implementation Examples
• Opportunity to attend
workshop for additional help
(November 5 2013)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

30. Composition
•
Documentation
• http://drupal.gatech.edu/
handbook/sassy-gt-theme
!
•
Template Suite
• https://github.com/
EricScottSembrat/
cos_newsite
Eric Scott Sembrat | Georgia Institute of Technology | 2013

31. 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 bestpractices.
• Freely editable.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

32. Document Components
•
(sorry, this part is a demo!)
Eric Scott Sembrat | Georgia Institute of Technology | 2013

33. The Concerns
Eric Scott Sembrat | Georgia Institute of Technology | 2013

34. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

35. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

36. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

37. The Future
Eric Scott Sembrat | Georgia Institute of Technology | 2013

38. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

39. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

40. Continue Documenting
•
Ensure documentation is:
• Thorough
• Exhaustive
• Succinct
• Usable
Eric Scott Sembrat | Georgia Institute of Technology | 2013

41. 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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

42. Questions?
Eric Scott Sembrat | Georgia Institute of Technology | 2013

43. Thanks!
Eric Scott Sembrat | Georgia Institute of Technology | 2013