Create Your Own Starter Files

Slide 1

Slide 1 text

Some rights reserved Create Your Own Starter Files Emily Lewis for CSS Dev Conf OCT 13, 2014 #starterﬁles

Slide 2

Slide 2 text

Some rights reserved Create Your Own Starter Files Emily Lewis for CSS Dev Conf OCT 13, 2014 #starterﬁles

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

I’m a code freak 

Slide 5

Slide 5 text

Frameworks ὑ

Slide 6

Slide 6 text

the Idea of • Getting a site up and and running quickly and easily • Building sites consistently with responsive techniques • Rapid prototyping to deﬁne scope and inform project deliverables ὑ

Slide 7

Slide 7 text

in Practice • More than what I need for the types of projects I build • Difﬁcult for me to “adapt” to someone else’s approach • What works for prototyping rarely works for my production code

Slide 8

Slide 8 text

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 ˒

Slide 9

Slide 9 text

My Old Process 1. Choose the most recent completed project that shares common elements 2. Copy 3. Paste 4. Tweak 5. Repeat

Slide 10

Slide 10 text

My Old Deliverables • Static wireframes • Visual comps • Front-end templates • CMS integration

Slide 11

Slide 11 text

18 Months Ago ... • Hired Lea Alcantara as a designer • Lea’s workﬂow includes earlier decisions about visual presentation than comps • New deliverable: Element Collage danielmall.com/articles/rif-element-collages/ ˒ styletil.es/ ˒

Slide 12

Slide 12 text

18 Months Ago ... • More responsive work, more responsive deliverables • New deliverable: Live Wires www.ngenworks.com/blog/live-wires-better- prototyping/ ˒

Slide 13

Slide 13 text

18 Months Ago ... • Clients needed different resources than they had in the past • New deliverable: Style Guide

Slide 14

Slide 14 text

Today’s Deliverables • Element Collages • Live Wires • Front-end templates • CMS integration • Web-based Style Guide

Slide 15

Slide 15 text

Me, the Business wner  Productivity & Proﬁt

Slide 16

Slide 16 text

Me, the Devel per Code Freak Conniptions 

Slide 17

Slide 17 text

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 • Deﬁnes and documents internal standards

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 ˒

Slide 21

Slide 21 text

Starter Files Mindset

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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 speciﬁcally 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

Slide 24

Slide 24 text

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?

Slide 25

Slide 25 text

Our Starter System Organization & Structure Naming • Organized by project deliverables • Needed to identify what assets were: • Global • Shared • Deliverable-speciﬁc

Slide 26

Slide 26 text

Organization Sass Partials - Global & Shared

Slide 27

Slide 27 text

Organization Sass Partials - Element Collage

Slide 28

Slide 28 text

Organization Sass Partials - Live Wires

Slide 29

Slide 29 text

Organization Sass Partials - Templates

Slide 30

Slide 30 text

Organization Sass Partials - Style Guide

Slide 31

Slide 31 text

Organization HTML Assets - Global

Slide 32

Slide 32 text

Organization HTML Assets - Deliverables

Slide 33

Slide 33 text

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/ ˒

Slide 34

Slide 34 text

Modularity Sass Placeholders

Slide 35

Slide 35 text

Modularity Global HTML Modules

Slide 36

Slide 36 text

Our Starter System Naming Conventions • Single class pattern vs. multiple class pattern • Moving away from strictly content-based semantics • Class name = HTML module ﬁle name nicolasgallagher.com/about-html-semantics-front- end-architecture/ ˒ bem.info ˒

Slide 37

Slide 37 text

Our Starter System Naming Conventions • Base rules, element selectors • Layout rules, preﬁxed classes • Module rules, block-element classes smacss.com/ ˒

Slide 38

Slide 38 text

Naming Conventions Module Rules

Slide 39

Slide 39 text

Our Starter System Building Deliverables • Basic PHP includes • Global includes • Global modules • Deliverable-speciﬁc includes and modules

Slide 40

Slide 40 text

Building Deliverables Creating a Document “Shell”

Slide 41

Slide 41 text

Building Deliverables Creating Element Collages

Slide 42

Slide 42 text

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/ ˒

Slide 43

Slide 43 text

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/ ˒

Slide 44

Slide 44 text

Our Starter System Maintenance • “Living” documentation on Google Docs • System is version controlled with Git www.git-tower.com/ ˒ beanstalkapp.com/ ˒

Slide 45

Slide 45 text

Maintenance Evolving the Process • Git submodules • Git subtrees blogs.atlassian.com/2013/03/git-submodules- workﬂows-tips/ ˒ blogs.atlassian.com/2013/05/alternatives-to-git- submodule-git-subtree/ ˒

Slide 46

Slide 46 text

Integrated System Live Wires + Element Collage

Slide 47

Slide 47 text

Integrated System = Front-end templates

Slide 48

Slide 48 text

Integrated System = Style Guide

Slide 49

Slide 49 text

Serious Investment • It isn’t easy • It takes time (= money) • It takes focus • It takes a commitment to maintaining/evolving

Slide 50

Slide 50 text

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 

Slide 51

Slide 51 text

• 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 

Slide 52

Slide 52 text

• Invest in your business/company to ﬁnd efﬁciencies 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

Slide 53

Slide 53 text

˒ 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

Slide 54

Slide 54 text

˒ 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/

Slide 55

Slide 55 text

˒ 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/

Slide 56

Slide 56 text

˒ Resources • Beanstalk beanstalkapp.com/ • Git Submodules Workﬂow Tips blogs.atlassian.com/2013/03/git-submodules-workﬂows-tips/ • Alternatives to Git Submodules blogs.atlassian.com/2013/05/alternatives-to-git-submodule-git-subtree/

Slide 57

Slide 57 text

Questions? [email protected] @emilylewis #starterﬁles