Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

Meeting 2012 07 09

Jump to bottom
ebollens edited this page Jul 9, 2012 · 9 revisions

Table of Contents

Meeting Information

  • Location: Math Science Building 5907
  • Date/Time: Monday July 7 from 1:00 to 2:00 PM
  • Conference Line: 888-921-8686 #3102061670

Attendees

  • Eric Bollens
  • Eric Chiang
  • Mel Cassio
  • Joseph Madella
  • Alex Podobas
  • Joel Bellon
  • Albert Wu
  • Alice Tseng
  • Logan Franken

Updates

  • Member Updates
  • MWF Conference Site Update [Eric]

Demonstration

  • MWF Conference 2012 site composed of:
    • Powered by jQuery, Twitter Bootstrap and Modernizr
    • Uses Modernizr, Selectivizr and Respond.js for polyfill
  • Build with responsive in mind
    • In many cases, entities extend Bootstrap classes
    • Demo: Schedule grid collapses
    • Demo: Registration form condenses to vertical arrangement
  • HTML 5 entities used throughout the site
    • Still adjusting to the semantic somewhat
    • Accessibility tools useful for testing -- have showed some problems with what seems semantic at times
  • For defining CSS/JS, a build script is used:
    • All external libraries are unmodified (checked out as git submodules)
    • Script assembles static CSS and JS files based on these packages and custom code
    • Except Bootstrap, all the others are simply brought together and minified
    • For Bootstrap, custom SASS files include the Bootstrap SASS plus prepended and appended custom SAS
  • Bootstrap stack ("assets/css/site.scss"):
    • Prepended variables ("bootstrap_before")
    • Bootstrap code ("bootstrap")
    • Fixes to Bootstrap definitions ("boostrap_fix")
    • Appended additional entities ("bootstrap_after")
  • Bootstrap challenges:
    • All fonts must be changed to ems (should they be for our toolkit?)
    • Line height and bottom margin are challenging to get right (fixed margin amounts versus ems)
    • Laying the right classes into HTML entities

Discussion

Static Build Routine

  • Methodology for a build script translates to our use case
  • Benefits of a static build routine:
    • Allows us to keep our code completely separate from underlying frameworks
    • Does not require manual work to compose our scripts
  • MWF conference site uses a bash script because it was a first pass
    • Ideally, should look at creating a universal build script
    • Options include configure/make, ant and rake
    • Eric proposes using rake since SASS Bootstrap requires ruby and rake itself

Grid Systems

  • Do we go with Twitter Bootstrap's grid system? [group]
  • If not, what other grid system should we include?
  • Alice points out that whatever grid we have, it should be "droppable" - our branding shouldn't require one grid system.
  • Eric B agrees that we can extend things like row-fluid into our own entities

Media Handling Frameworks

  • Action item from last time -- Where do we stand on this?
  • No progress here

Markup Prototypes and User Interface Designs

  • Action item from last time -- Where do we stand on this?
    • Alice: I have taken the ucla templates v 1.0 released from UCLA Communications and started identifying / breaking out pieces of the templates we might be able to introduce. Also noted some areas we might need to think about how it will reconcile with the WebBlocks stack. Let me touch basis with M. Takahashi before I upload it into the github account but I'll email it to folks so we can ref and talk about the main issues I'm seeing.
      • Main issues that came up for me:
        • naming convention & markup approaches very different: how do we integrate this? Do we?
        • heavy use of IDs and html selectors
        • brand treatments are baked in (type/colors/grid very "specific to UCLA"): how do we deal with this? I started moving things to a "ucla skins layer".
        • how does bootstrap grid mesh with this? UCLA Admin sites will need to follow this theme very closely.
        • do we care or does our audience not have this same issue?
    • Eric: A target we probably want to have:
      • Define semantics as we want them
      • CSS will have to be developed to cover the designed use cases like Gateway
      • This would mean something like the Gateway would have retrofitted markup

Media Queries versus JS-based Adaptation

  • Brendan:
    • http://www.howinteractivedesign.com/technology/rendering-responsive-web-designs-using-adapt-js
    • Here's a responsive css approach (i think i mentioned in last meeting) that yahoo is using. The article explains the prob with the standard media-queries approach (for sites with lots of css) and a solution (using js to determine screen-size and select css file to serve) - there are advantages and disadvantages to both techniques.
    • I think yahoo uses the latter because they have so much css and page load-time is so important – not sure of the best approach for web blocks but it's an interesting alternative technique to be aware of.
  • Albert:
    • Let's hold on this since it's an optimization
  • Group agreement
Clone this wiki locally