The document outlines a workshop covering layouts using the Bootstrap framework, techniques for adding content to templates, and differentiating between static, dynamic, and CMS content. It revisits previous topics such as a comp readiness checklist and basic layout principles. It also emphasizes a mobile-first approach to web development and provides tips on class naming conventions.

1. Comps into Pages 102
www.refresh-hilo.org

2. What will be covered?
● Layouts using bootstrap framework
● Adding content to a template
○ Static VS Dynamic VS CMS (Client Update)
● Tips, tricks, questions

3. What was covered before?
● Comp readiness checklist
● Interpreting the comp
● basic layout - block & inline, position & float
http://www.refresh-hilo.org/event/12-09-2014-
meetup/

4. Bootstrap V3
http://getbootstrap.com/
Mobile first approach to web dev, write shared
styles (fonts, colors, etc) and use media query
to define difference in layout for each
experience (desktop, tablet, mobile).

5. Adding content to a template
To insert static content or not, that is the
question.
Few changes or non at all = static
changes often or client wants to change = CMS

6. Tips
Class names - be specific yet generic... ?
● .block vs .green-block
● .side-rail vs .left-side-rail
Use generic prefix
● .mod-block > .mod-block-hd + .mod-block-bd
+ .mod-block-ft