site building with stanford’s themes...site building with stanford’s themes megan miller, web...
TRANSCRIPT
![Page 1: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/1.jpg)
Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services
Stanford Drupal Camp — April 6, 2013
![Page 2: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/2.jpg)
2
Stanford’s Drupal Themes
![Page 3: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/3.jpg)
Stanford’s Drupal Themes § Mobile responsive § Centrally maintained § Accessible § Standards compliant § Stanford branded
http://drupalthemes.stanford.edu
![Page 4: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/4.jpg)
For individuals:
For groups/departments:
Stanford Framework Stanford Jordan
Stanford Wilbur Stanford Modern
Open Framework
Stanford Basic
![Page 5: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/5.jpg)
Two base themes
![Page 6: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/6.jpg)
Stanford’s Theme Stack
Base theme
Stanford branding, colors, and fonts
Base styles & responsive behaviors
Stanford-branded sub-themes
![Page 7: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/7.jpg)
7
Get to know your base theme
![Page 8: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/8.jpg)
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
![Page 9: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/9.jpg)
Site Building with Open Framework Site architecture: § Menus: Dropdowns, fat footer menus, etc. § Admin shortcuts (secondary menu)
http://openframework.stanford.edu
![Page 10: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/10.jpg)
Site Building with Open Framework Styles and icons: § Custom styles § Styles from Twitter Bootstrap § Font Awesome
http://openframework.stanford.edu
![Page 11: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/11.jpg)
Site Building with Open Framework Modules to consider: § Context § Context Respect § Block Class § Views § CSS Injector § BEAN
http://openframework.stanford.edu
![Page 12: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/12.jpg)
12
Layout and Responsive Flow
![Page 13: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/13.jpg)
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
![Page 14: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/14.jpg)
14
Stacked and Flow Region Behaviors
![Page 15: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/15.jpg)
![Page 16: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/16.jpg)
![Page 17: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/17.jpg)
![Page 18: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/18.jpg)
![Page 19: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/19.jpg)
Responsive Breakpoints
1200px 980px 768px 640px 480px
@media (max-‐width: 768px) {… styles go here…}
![Page 20: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/20.jpg)
![Page 21: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/21.jpg)
2 1
3
4 5
6 7 8
9 10
1 2, 3
4 5 6 7 8 9
10
![Page 22: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/22.jpg)
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
![Page 23: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/23.jpg)
Let’s build this!
![Page 24: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/24.jpg)
News View using Postcard Styles § Image on the le", stuff on the right § Use specific <div> structure and class § Views re-write
![Page 25: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/25.jpg)
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
![Page 26: Site Building with Stanford’s Themes...Site Building with Stanford’s Themes Megan Miller, Web Designer, Stanford Web Services Stanford Drupal Camp — April 6, 2013](https://reader033.vdocuments.us/reader033/viewer/2022050512/5f9d10dd1228f513f56eb604/html5/thumbnails/26.jpg)
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