Site Building with Stanford's Themes

Site Building with Stanford's Themes

Tips and tricks for using Stanford's Open Framework family of themes to build your next Drupal 7 website. Presented at Stanford Drupal Camp 2013 at Stanford University.

Watch this presentation at http://www.youtube.com/watch?v=4IlqcR30wuY&feature=youtu.be

A605a94f062c006921a31b945cbc44d6?s=128

Megan Erin Miller

April 06, 2013
Tweet

Transcript

  1. Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford

    Web Services Stanford Drupal Camp — April 6, 2013
  2. 2 Stanford’s Drupal Themes

  3. Stanford’s Drupal Themes §  Mobile responsive §  Centrally maintained § 

    Accessible §  Standards compliant §  Stanford branded http://drupalthemes.stanford.edu
  4. For individuals: For groups/departments: Stanford Framework Stanford Jordan Stanford Wilbur

    Stanford Modern Open Framework Stanford Basic
  5. Two base themes

  6. Stanford’s Theme Stack Base theme Stanford branding, colors, and fonts

    Base styles & responsive behaviors Stanford-branded sub-themes
  7. 7 Get to know your base theme

  8. Site Building with Open Framework Layout and responsive flow: § 

    Block regions §  Blocks and spans §  Responsive behaviors and breakpoints §  The search box http://openframework.stanford.edu
  9. Site Building with Open Framework Site architecture: §  Menus: Dropdowns,

    fat footer menus, etc. §  Admin shortcuts (secondary menu) http://openframework.stanford.edu
  10. Site Building with Open Framework Styles and icons: §  Custom

    styles §  Styles from Twitter Bootstrap §  Font Awesome http://openframework.stanford.edu
  11. Site Building with Open Framework Modules to consider: §  Context

    §  Context Respect §  Block Class §  Views §  CSS Injector §  BEAN http://openframework.stanford.edu
  12. 12 Layout and Responsive Flow

  13. 13 Open Framework Block Regions Basic regions §  Blocks 100%

    width, stack vertically Flow regions §  Blocks “bump” eachother to the next row §  Options for 2, 3, and 4 columns §  Allows for horizontal row alignment Stacked regions §  Blocks stack vertically in column §  Allows for “editorial” style columns
  14. 14 Stacked and Flow Region Behaviors

  15. None
  16. None
  17. None
  18. None
  19. Responsive Breakpoints 1200px 980px 768px 640px 480px @media  (max-­‐width:  768px)

     {…  styles  go  here…}  
  20. None
  21. 2 1 3 4 5 6 7 8 9 10

    1 2, 3 4 5 6 7 8 9 10
  22. Other things to consider §  Drop-down in menu §  Search

    box placement §  Color boxes around 3 blocks §  Proportions of block widths in footer We’re going to use §  Context to place blocks §  Block Class to add styles and spans for block widths
  23. Let’s build this!

  24. News View using Postcard Styles §  Image on the le",

    stuff on the right §  Use specific <div> structure and class §  Views re-write
  25. Going Further Twitter Bootstrap http://twitter.github.com/bootstrap §  Robust documentation §  Style

    guide §  Carousel (an easier views slideshow!) §  and many other components Font Awesome http://fortawesome.github.com/Font-Awesome §  Icon font! §  Built in to Open Framework §  Made to work with Twitter Bootstrap
  26. Resources §  Open Framework documentation – http://openframework.stanford.edu §  Twitter Bootstrap

    documentation – http://twitter.github.com/bootstrap §  Font Awesome – http://fortawesome.github.com/Font-Awesome §  Drupal Themes at Stanford – http://drupalthemes.stanford.edu §  Video of Tech Briefing talk: Introduction to Stanford’s Drupal Themes §  Stanford Web Services Blog – http://swsblog.stanford.edu §  Stanford Web Design Resources – http://webdesign.stanford.edu §  Stanford Sites – http://sites.stanford.edu
  27. 27 Thank you! Questions? Megan Miller @meganerinmiller meganem@stanford.edu