Upcoming plone.app.theming sessions:
We thought it would be fun to run a series of hands-on working meetings to churn out some "rules-based" themes created for a number of popular "grid-based CSS frameworks".
If you're not familiar with either "grid-based css frameworks" or "rules based theming" see the What's & Why's in the resources below. We meet once a month — 3-4 sessions would be good to cover all the parts and get some practice/troubleshooting time in.
SERIES GOAL: Build a library of re-usable grid-based based frameworks for Plone — so everyone can move from mockup to done faster.
So… the next Plone Los Angles User Meeting will be our 1st Session!
WHEN: Thursday December 1, 2011 @ 7pm
WHERE: UCLA Campus @ IT Services (Murphy Hall) Room TBA
WHAT: Bring an html/css mockup file, your laptop (with plone 4 running)
TOPIC: Intro to Grid-based CSS Frameworks & Rules-based Theming Workflow
HANDS-ON STUFF: Everyone will pick a favorite CSS Grid framework (see resources below.) We'll roll your html mockup into the css framework (or better yet, bring one pre-rolled to share.) Make sure you install plone.app.theming We'll practice writing our first "rules file" to map mockup to Plone
NEXT STEPS: We'll go off with our new workflows & rock out the grid-based mockup + rule file we started … next sessions we'll work on cleaning things up for re-use.
RESOURCES
Read-on … these items will get you ready to go from 0 …
A. Basic Background 411: The WHAT'S & WHY'S:
What are Grid-Based CSS Frameworks?
Grid-based CSS frameworks are a bundle of css files that have been debugged cross-browser to give you a fast leg up to making grid-based CSS websites. Grids are an old-school typography concept that help layouts look sharp — usually based on ratios.
Here's a quickie overview article: http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
An archive on all things Grid: http://www.thegridsystem.org/?s=grid+template
What is Rules based theming?
Rules-based theming use xml + html (xslt) to take a designer's static html/css mockups and map them to a complex dynamic website (like a CMS or Web Application) without messing with either's code.
Why?
Here's my typical workflow — I'm a designer and live on the front-end of things. I make html/css mockups and wire frames and then hand them off to a member on my team who has to translate this into the application or CMS we're using (and sometimes I'm also that person) .. Either way — there's usually some pain involved at this point — and cursing … broken code … hair tearing … Wouldn't it be awesome to keep part A … and change up part B?
B. Pick a Grid-Based CSS Framework (here' are just a few):
C. Get your Plone instance ready for using "Rules Based Theming":
Diazo + plone.app.theming
Introduction to the Diazo Project: http://diazo.org/introduction.html
To integrate a diazo workflow with Plone there is a Plone product called plone.app.theming:
plone.app.themeing (or using Diazo with Plone): http://pypi.python.org/pypi/plone.app.theming
