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

Create Your Own Starter Files

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
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  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