Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web...
Transcript of Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web...
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