Your SlideShare is downloading. ×
DrupalCamp Chattanooga (2013) - Sass at Georgia Tech
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DrupalCamp Chattanooga (2013) - Sass at Georgia Tech

308
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.

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
308
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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