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

Transcript

1. Site Building with Stanford’s Themes
   Megan Miller, Web Designer, Stanford Web Services
   Stanford Drupal Camp — April 6, 2013
   

   View Slide

2. 2
   Stanford’s Drupal Themes
   

   View Slide

3. Stanford’s Drupal Themes
   §  Mobile responsive
   §  Centrally maintained
   §  Accessible
   §  Standards compliant
   §  Stanford branded
   http://drupalthemes.stanford.edu
   

   View Slide

4. For individuals:
   For groups/departments:
   Stanford Framework Stanford Jordan
   Stanford Wilbur Stanford Modern
   Open Framework
   Stanford Basic
   

   View Slide

5. Two base themes
   

   View Slide

6. Stanford’s Theme Stack
   Base theme
   Stanford branding,
   colors, and fonts
   Base styles &
   responsive
   behaviors
   Stanford-branded
   sub-themes
   

   View Slide

7. 7
   Get to know your base theme
   

   View Slide

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
   
   

   View Slide

9. Site Building with Open Framework
   Site architecture:
   §  Menus: Dropdowns, fat footer menus, etc.
   §  Admin shortcuts (secondary menu)
   http://openframework.stanford.edu
   
   

   View Slide

10. Site Building with Open Framework
    Styles and icons:
    §  Custom styles
    §  Styles from Twitter Bootstrap
    §  Font Awesome
    http://openframework.stanford.edu
    
    

    View Slide

11. Site Building with Open Framework
    Modules to consider:
    §  Context
    §  Context Respect
    §  Block Class
    §  Views
    §  CSS Injector
    §  BEAN
    http://openframework.stanford.edu
    
    

    View Slide

12. 12
    Layout and Responsive Flow
    

    View Slide

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
    

    View Slide

14. 14
    Stacked and Flow Region Behaviors
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. Responsive Breakpoints
    1200px 980px 768px 640px 480px
    @media  (max-­‐width:  768px)  {…  styles  go  here…}  
    
    

    View Slide

20. View Slide

21. 2
    1
    3
    4 5
    6 7 8
    9 10
    1
    2, 3
    4
    5
    6
    7
    8
    9
    10
    

    View Slide

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
    

    View Slide

23. Let’s build this!
    

    View Slide

24. News View using Postcard Styles
    §  Image on the le", stuff on the right
    §  Use specific structure and class
    §  Views re-write
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. 27
    Thank you!
    Questions?
    Megan Miller
    @meganerinmiller
    meganem@stanford.edu
    

    View Slide