Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

653 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
  • Be the first to comment

  • Be the first to like this

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

×