Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create Your Own Starter Files

39c8ef13c693c8d143679be9e3d8cf02?s=47 Emily Lewis
October 13, 2014

Create Your Own Starter Files

Presentation for CSS Dev Conf 2014

Have a love/hate relationship with pre-built frameworks? Consider building your own system for front-end development.


Emily Lewis

October 13, 2014


  1. Some rights reserved Create Your Own Starter Files Emily Lewis

    for CSS Dev Conf OCT 13, 2014 #starterfiles
  2. Some rights reserved Create Your Own Starter Files Emily Lewis

    for CSS Dev Conf OCT 13, 2014 #starterfiles
  3. Owner, Lead Developer abrightumbrella.com Author, Microformats Made Simple microformatsmadesimple.com Co-author,

    HTML5 Cookbook shop.oreilly.com/product/0636920016038.do Managing Editor, Web Standards Sherpa webstandardssherpa.com Co-host, CTRL+CLICK CAST ctrlclickcast.com
  4. I’m a code freak 

  5. Frameworks ὑ

  6. the Idea of • Getting a site up and and

    running quickly and easily • Building sites consistently with responsive techniques • Rapid prototyping to define scope and inform project deliverables ὑ
  7. in Practice • More than what I need for the

    types of projects I build • Difficult for me to “adapt” to someone else’s approach • What works for prototyping rarely works for my production code
  8. in Practice • I’m removed from the fundamental understanding of

    why a given technique is used • Can be harder to troubleshoot • Can lead to bloated code themetaq.com/articles/the-pros-and-cons-of-using- a-front-end-framework ˒
  9. My Old Process 1. Choose the most recent completed project

    that shares common elements 2. Copy 3. Paste 4. Tweak 5. Repeat
  10. My Old Deliverables • Static wireframes • Visual comps •

    Front-end templates • CMS integration
  11. 18 Months Ago ... • Hired Lea Alcantara as a

    designer • Lea’s workflow includes earlier decisions about visual presentation than comps • New deliverable: Element Collage danielmall.com/articles/rif-element-collages/ ˒ styletil.es/ ˒
  12. 18 Months Ago ... • More responsive work, more responsive

    deliverables • New deliverable: Live Wires www.ngenworks.com/blog/live-wires-better- prototyping/ ˒
  13. 18 Months Ago ... • Clients needed different resources than

    they had in the past • New deliverable: Style Guide
  14. Today’s Deliverables • Element Collages • Live Wires • Front-end

    templates • CMS integration • Web-based Style Guide
  15. Me, the Business wner  Productivity & Profit

  16. Me, the Devel per Code Freak Conniptions 

  17. Managed Solution • Relies on our preferred coding and naming

    conventions • Includes what we need, but not what we don’t • Relies on techniques that I understand, can explain and can troubleshoot • Defines and documents internal standards
  18. Managed Solution • Scales for bespoke projects that have all

    our deliverables • Scales for new projects that need a new type of deliverable • Scales for projects that only need one deliverable
  19. Managed Solution • Limits repetition (DRY) • Ties all web-based

    deliverables together, so that prototyping code easily evolves to production code • Faster project setups • Faster client deliverables • Lets us focus our energy on custom work
  20. Enter: “Starter Files” • Began as just the core Sass

    assets and organization that I created for basic template styling • Evolved into a system of shared front-end assets that can be used by all of our web-based deliverables ctrlclickcast.com/episodes/cms-markup- templating ˒
  21. Starter Files Mindset

  22. The Mindset • Stop thinking of assets and instead think

    of a system • Doesn’t need to be a fully realized approach before you can use it • Constantly evolving
  23. The Rules • Don’t go back and update completed projects

    when Starter Files are updated unless there is budget and time • Try new techniques when a project specifically calls for it, so that the client is paying for the “new” development • After every project is complete, revisit Starter Files and incorporate anything new that was learned during the project • If new ideas occur during a project, but aren’t relevant to that project, make note and set aside to address in the future
  24. The Prep • How do you work now and how

    do you want to work in the future? • What parts of your business/deliverables do you want to support? • What are your naming conventions? • How do you want to organize directories and subdirectories? • What do your team members need and what are they open to? • What are your patterns in HTML and CSS, even JS? • What can be shared and what is unique to each type of deliverable?
  25. Our Starter System Organization & Structure Naming • Organized by

    project deliverables • Needed to identify what assets were: • Global • Shared • Deliverable-specific
  26. Organization Sass Partials - Global & Shared

  27. Organization Sass Partials - Element Collage

  28. Organization Sass Partials - Live Wires

  29. Organization Sass Partials - Templates

  30. Organization Sass Partials - Style Guide

  31. Organization HTML Assets - Global

  32. Organization HTML Assets - Deliverables

  33. Our Starter System Modularity • Look for repeated patterns across

    deliverables and abstract the parts that are common among them • Minimize repetition in both HTML and CSS webstandardssherpa.com/reviews/think- modularly/ ˒
  34. Modularity Sass Placeholders

  35. Modularity Global HTML Modules

  36. Our Starter System Naming Conventions • Single class pattern vs.

    multiple class pattern • Moving away from strictly content-based semantics • Class name = HTML module file name nicolasgallagher.com/about-html-semantics-front- end-architecture/ ˒ bem.info ˒
  37. Our Starter System Naming Conventions • Base rules, element selectors

    • Layout rules, prefixed classes • Module rules, block-element classes smacss.com/ ˒
  38. Naming Conventions Module Rules

  39. Our Starter System Building Deliverables • Basic PHP includes •

    Global includes • Global modules • Deliverable-specific includes and modules
  40. Building Deliverables Creating a Document “Shell”

  41. Building Deliverables Creating Element Collages

  42. Building Deliverables Evolving the Process • HTML partials with Mustache

    • Emmet text expanders for Sublime letscodetheweb.com/creating-recursive-html- templates-in-mustache-js-using-partials/ ˒ themetaq.com/articles/emmet-write-even-less-do- even-more ˒ www.sitepoint.com/creating-html-templates-with- mustachejs/ ˒
  43. Building Deliverables Evolving the Process • Style Guide from Sass

    comments • Some combination of (or inspiration from) all warpspire.com/posts/kss/ ˒ github.com/jacobrask/styledocco/ ˒
  44. Our Starter System Maintenance • “Living” documentation on Google Docs

    • System is version controlled with Git www.git-tower.com/ ˒ beanstalkapp.com/ ˒
  45. Maintenance Evolving the Process • Git submodules • Git subtrees

    blogs.atlassian.com/2013/03/git-submodules- workflows-tips/ ˒ blogs.atlassian.com/2013/05/alternatives-to-git- submodule-git-subtree/ ˒
  46. Integrated System Live Wires + Element Collage

  47. Integrated System = Front-end templates

  48. Integrated System = Style Guide

  49. Serious Investment • It isn’t easy • It takes time

    (= money) • It takes focus • It takes a commitment to maintaining/evolving
  50. Me, the Business wner • Faster setup of new projects,

    regardless of scale • Deliverables build on each other, prototyping to production • Internal standards for team, consistency • More DRY 
  51. • I get to fly my code freak flag •

    The onus is on me to stay up-to-date; constant state of learning • I’m confident in the techniques I’m using; can troubleshoot and explain Me, the Devel per 
  52. • Invest in your business/company to find efficiencies and deliver

    better products • Use what you want, need and are comfortable with - this can include frameworks! • Invest in yourself to stay educated Create Your Own
  53. ˒ Resources • The pros & cons of using a

    front-end framework themetaq.com/articles/the-pros-and-cons-of-using-a-front-end-framework • Reading Is Fundamental Element Collages danielmall.com/articles/rif-element-collages/ • Style Tiles styletil.es/ • Live Wires www.ngenworks.com/blog/live-wires-better-prototyping/ • CMS Markup & Templating with Allison Wagner ctrlclickcast.com/episodes/cms-markup-templating
  54. ˒ Resources • Think Modularly webstandardssherpa.com/reviews/think-modularly/ • About HTML semantics

    and front-end architecture nicolasgallagher.com/about-html-semantics-front-end-architecture/ • BEM bem.info • SMACSS smacss.com/ • Creating HTML Templates with Mustache.js www.sitepoint.com/creating-html-templates-with-mustachejs/
  55. ˒ Resources • Creating Recursive HTML Templates in Mustache.js Using

    Partials letscodetheweb.com/creating-recursive-html-templates-in-mustache-js-using-partials/ • Emmet: Write Even Less, Do Even More themetaq.com/articles/emmet-write-even-less-do-even-more • Knyle Style Sheets warpspire.com/posts/kss/ • StyleDocco github.com/jacobrask/styledocco/ • Tower www.git-tower.com/
  56. ˒ Resources • Beanstalk beanstalkapp.com/ • Git Submodules Workflow Tips

    blogs.atlassian.com/2013/03/git-submodules-workflows-tips/ • Alternatives to Git Submodules blogs.atlassian.com/2013/05/alternatives-to-git-submodule-git-subtree/
  57. Questions? emily@abrightumbrella.com @emilylewis #starterfiles