The document presents an overview of creating starter files for web development, emphasizing efficient project setups and consistent deliverables like element collages, live wires, and style guides. It discusses the importance of modularity in coding practices, proper naming conventions, and maintaining an evolving documentation system. The focus is on streamlining workflows to enhance productivity while ensuring that the final code is manageable and understandable.

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

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

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
architecture/ ★
★ bem.info
nicolasgallagher.com/about-html-semantics-front-end-

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
www.sitepoint.com/creating-html-templates-with-mustachejs/
★
in-mustache-js-using-partials/ ★
letscodetheweb.com/creating-recursive-html-templates-
more ★
themetaq.com/articles/emmet-write-even-less-do-even-

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
tips/ ★
blogs.atlassian.com/2013/03/git-submodules-workflows-
git-subtree/ ★
blogs.atlassian.com/2013/05/alternatives-to-git-submodule-

46. Integrated System
Element Collage + Live Wires

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. Me, the Devel  per
• 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

52. Create Your Own
• 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

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