DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

602 views

Published on

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.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
602
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

  1. 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. 2. Introduction Eric Scott Sembrat | Georgia Institute of Technology | 2013
  3. 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. 4. Game Plan Eric Scott Sembrat | Georgia Institute of Technology | 2013
  5. 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. 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. 7. Setting the Stage.. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  8. 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. 9. View the Theme • http://www.gatech.edu Eric Scott Sembrat | Georgia Institute of Technology | 2013
  10. 10. Theme (1) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  11. 11. Theme (2) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  12. 12. Theme (3) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  13. 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. 14. Comparison (1) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  15. 15. Comparison (2) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  16. 16. Comparison (3) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  17. 17. The Need for Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  18. 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. 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. 20. Enter: Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  21. 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. 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. 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. 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. 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. 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. 27. The Product Eric Scott Sembrat | Georgia Institute of Technology | 2013
  28. 28. Snapshot Eric Scott Sembrat | Georgia Institute of Technology | 2013
  29. 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. 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. 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. 32. Document Components • (sorry, this part is a demo!) Eric Scott Sembrat | Georgia Institute of Technology | 2013
  33. 33. The Concerns Eric Scott Sembrat | Georgia Institute of Technology | 2013
  34. 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. 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. 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. 37. The Future Eric Scott Sembrat | Georgia Institute of Technology | 2013
  38. 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. 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. 40. Continue Documenting • Ensure documentation is: • Thorough • Exhaustive • Succinct • Usable Eric Scott Sembrat | Georgia Institute of Technology | 2013
  41. 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. 42. Questions? Eric Scott Sembrat | Georgia Institute of Technology | 2013
  43. 43. Thanks! Eric Scott Sembrat | Georgia Institute of Technology | 2013

×