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.

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