create your own starter files
DESCRIPTION
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
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/