Some rights reserved

Create Your Own

Starter Files Emily Lewis for CSS Dev Conf

OCT 13, 2014

#starterfiles

Some rights reserved

Create Your Own

Starter Files Emily Lewis for CSS Dev Conf

OCT 13, 2014

#starterfiles

Owner, Lead Developer abrightumbrella.com

Author, Microformats Made Simplemicroformatsmadesimple.com

Co-author, HTML5 Cookbookshop.oreilly.com/product/0636920016038.do

Managing Editor, Web Standards Sherpawebstandardssherpa.com

Co-host, CTRL+CLICK CASTctrlclickcast.com

I’m a code freak

Frameworks♡

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

♡

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

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★

My Old Process

1. Choose the most recent completed project that shares common elements

2. Copy

3. Paste

4. Tweak

5. Repeat

My Old Deliverables

• Static wireframes

• Visual comps

• Front-end templates

• CMS integration

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

18 Months Ago ...

• More responsive work, more responsive deliverables

• New deliverable: Live Wires

www.ngenworks.com/blog/live-wires-better-prototyping/★

18 Months Ago ...

• Clients needed different resources than they had in the past

• New deliverable: Style Guide

Today’s Deliverables

• Element Collages

• Live Wires

• Front-end templates

• CMS integration

• Web-based Style Guide

Me, the Business wner

Productivity&

Profit

Me, the Devel per

Code FreakConniptions

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

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

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

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★

Starter Files Mindset

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

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

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?

Our Starter System

Organization & Structure Naming

• Organized by project deliverables

• Needed to identify what assets were:

• Global

• Shared

• Deliverable-specific

Organization

Sass Partials - Global & Shared

Organization

Sass Partials - Element Collage

Organization

Sass Partials - Live Wires

Organization

Sass Partials - Templates

Organization

Sass Partials - Style Guide

Organization

HTML Assets - Global

Organization

HTML Assets - Deliverables

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

Modularity

Sass Placeholders

Modularity

Global HTML Modules

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★

Our Starter System

Naming Conventions

• Base rules, element selectors

• Layout rules, prefixed classes

• Module rules, block-element classes

smacss.com/★

Naming Conventions

Module Rules

Our Starter System

Building Deliverables

• Basic PHP includes

• Global includes

• Global modules

• Deliverable-specific includes and modules

Building Deliverables

Creating a Document “Shell”

Building Deliverables

Creating Element Collages

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

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

Our Starter System

Maintenance

• “Living” documentation on Google Docs

• System is version controlled with Git

www.git-tower.com/★beanstalkapp.com/★

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

Integrated SystemLive Wires+Element Collage

Integrated System = Front-end templates

Integrated System= Style Guide

Serious Investment

• It isn’t easy

• It takes time (= money)

• It takes focus

• It takes a commitment to maintaining/evolving

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

• 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

• 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

★ 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 Collagesdanielmall.com/articles/rif-element-collages/

• Style Tilesstyletil.es/

• Live Wireswww.ngenworks.com/blog/live-wires-better-prototyping/

• CMS Markup & Templating with Allison Wagnerctrlclickcast.com/episodes/cms-markup-templating

★ Resources• Think Modularly

webstandardssherpa.com/reviews/think-modularly/

• About HTML semantics and front-end architecturenicolasgallagher.com/about-html-semantics-front-end-architecture/

• BEMbem.info

• SMACSSsmacss.com/

• Creating HTML Templates with Mustache.jswww.sitepoint.com/creating-html-templates-with-mustachejs/

★ 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 Morethemetaq.com/articles/emmet-write-even-less-do-even-more

• Knyle Style Sheetswarpspire.com/posts/kss/

• StyleDoccogithub.com/jacobrask/styledocco/

• Towerwww.git-tower.com/

★ Resources• Beanstalk

beanstalkapp.com/

• Git Submodules Workflow Tipsblogs.atlassian.com/2013/03/git-submodules-workflows-tips/

• Alternatives to Git Submodulesblogs.atlassian.com/2013/05/alternatives-to-git-submodule-git-subtree/

Questions?emily@abrightumbrella.com @emilylewis

#starterfiles