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

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