Site Building with Stanfords Themes Megan Miller, Web Designer, - - PowerPoint PPT Presentation

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 lef, 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