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

Stanford Drupal Camp — April 6, 2013

2

Stanford’s Drupal Themes

Stanford’s Drupal Themes §  Mobile responsive §  Centrally maintained §  Accessible §  Standards compliant §  Stanford branded

http://drupalthemes.stanford.edu

For individuals:

For groups/departments:

Stanford Framework Stanford Jordan

Stanford Wilbur Stanford Modern

Open Framework

Stanford Basic

Two base themes

Stanford’s Theme Stack

Base theme

Stanford branding, colors, and fonts

Base styles & responsive behaviors

Stanford-branded sub-themes

7

Get to know your base theme

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

Site Building with Open Framework Site architecture: §  Menus: Dropdowns, fat footer menus, etc. §  Admin shortcuts (secondary menu)

http://openframework.stanford.edu

Site Building with Open Framework Styles and icons: §  Custom styles §  Styles from Twitter Bootstrap §  Font Awesome

http://openframework.stanford.edu

Site Building with Open Framework Modules to consider: §  Context §  Context Respect §  Block Class §  Views §  CSS Injector §  BEAN

http://openframework.stanford.edu

12

Layout and Responsive Flow

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

Stacked and Flow Region Behaviors

Responsive Breakpoints

1200px 980px 768px 640px 480px

@media  (max-­‐width:  768px)  {…  styles  go  here…}  

2 1

3

4 5

6 7 8

9 10

1 2, 3

4 5 6 7 8 9

10

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

Let’s build this!

News View using Postcard Styles §  Image on the le", stuff on the right §  Use specific <div> structure and class §  Views re-write

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

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

Thank you!

Questions?

Megan Miller @meganerinmiller meganem@stanford.edu