Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Help! My Stylesheets are a Mess!

Help! My Stylesheets are a Mess!

This talk covers the architecture and process we use @ caring.com to manage our stylesheets and front-end design.

Chris Eppstein

May 02, 2012
Tweet

More Decks by Chris Eppstein

Other Decks in Technology

Transcript

  1. Help!
    My Stylesheets are a Mess!
    Wednesday, May 2, 12

    View full-size slide

  2. Chris
    Eppstein
    Architect: Caring.com
    Creator: Compass Stylesheet
    Authoring Framework
    Core Developer: Sass Stylesheet
    Language
    @chriseppstein
    Wednesday, May 2, 12

    View full-size slide

  3. #cleanstyles
    Wednesday, May 2, 12
    If you tweet about this talk, please use the hashtag

    View full-size slide

  4. Assumptions
    ‣Good at CSS
    ‣Basic knowledge of Sass
    ‣Large Website/Application
    ‣Team-based Development
    Wednesday, May 2, 12

    View full-size slide

  5. Do your
    stylesheets
    feel like this?
    Incomprehensible
    wall of
    tangled styles
    is
    incomprehensible
    Wednesday, May 2, 12

    View full-size slide

  6. You Have
    One Giant CSS File
    Wednesday, May 2, 12
    organized by comments

    View full-size slide

  7. You Have
    Thousands of Selectors
    Wednesday, May 2, 12
    with no coherent strategy

    View full-size slide

  8. You Have
    Styles in the Way
    Wednesday, May 2, 12
    styles from the cascade and document inheritance that are hurting instead of helping

    View full-size slide

  9. You Have
    Unpredictable Bugs
    Wednesday, May 2, 12

    View full-size slide

  10. You Have
    Property Soup
    Wednesday, May 2, 12

    View full-size slide

  11. You Have
    Accidentally the Stylesheets
    Wednesday, May 2, 12
    Ended up here because you didn’t have a plan. Because what you need

    View full-size slide

  12. You Need
    STRUCTURE
    Wednesday, May 2, 12

    View full-size slide

  13. You Need
    PATTERNS
    Wednesday, May 2, 12

    View full-size slide

  14. You Need
    RULES
    Wednesday, May 2, 12

    View full-size slide

  15. You Need
    CLARITY OF
    INTENT
    Wednesday, May 2, 12

    View full-size slide

  16. CSS
    FRAMEWORKS
    will not solve your problem
    Wednesday, May 2, 12

    View full-size slide

  17. PRE
    PROCESSORS
    will not solve your problem
    Wednesday, May 2, 12

    View full-size slide

  18. The Problem is
    Wednesday, May 2, 12

    View full-size slide

  19. The Problem is
    YOU
    Wednesday, May 2, 12

    View full-size slide

  20. LOOKING GOOD
    is not
    done
    Wednesday, May 2, 12

    View full-size slide

  21. LOOKING GOOD
    is not even
    half done
    Wednesday, May 2, 12

    View full-size slide

  22. NAME
    You have to
    Wednesday, May 2, 12

    View full-size slide

  23. ORGANIZE
    You have to
    Wednesday, May 2, 12

    View full-size slide

  24. DISSECT
    You have to
    Wednesday, May 2, 12

    View full-size slide

  25. DOCUMENT
    You have to
    Wednesday, May 2, 12

    View full-size slide

  26. WORK HARD
    You have to
    Wednesday, May 2, 12

    View full-size slide

  27. REFACTOR
    CONSTANTLY
    You have to
    Wednesday, May 2, 12

    View full-size slide

  28. Or Else
    Your stylesheets
    will sap your soul
    of the will to live
    Wednesday, May 2, 12

    View full-size slide

  29. You need better tools.
    Wednesday, May 2, 12
    Better tools that provide insulation between what you write and what you serve. So that you
    are free to organize without constraints.

    View full-size slide

  30. Property Soup Le average sass stylesheet.
    Wednesday, May 2, 12
    This is decent sass, could be a lot worse, would be a lot worse in css. but it can be so much
    better.

    View full-size slide

  31. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  32. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  33. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  34. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  35. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  36. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  37. Constructing an Object
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  38. Constructing an Object
    Unstyled
    Background
    Container
    Typography
    Foreground
    Margin/Padding
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  39. Constructing an Object
    .calming
    .shadow-box
    .reading-text
    .green-bg-type
    .vertically-padded
    Wednesday, May 2, 12
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  40. Property Soup Le average sass stylesheet.
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  41. Property Soup Le average sass stylesheet.
    Alphabetized
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  42. Property Soup Le average sass stylesheet.
    Alphabetized
    Wednesday, May 2, 12
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  43. Typography The non-color aspects of text.
    Wednesday, May 2, 12
    Note how the typography and foreground are mixed up?

    View full-size slide

  44. Typography Typographic properties: font-xxx, line-
    height, bullets, text-xxx, margin
    Wednesday, May 2, 12
    Explain the placeholder selector

    View full-size slide

  45. Container Not all paddings are from the same
    concern.
    Wednesday, May 2, 12

    View full-size slide

  46. Container border, box shadow, padding
    Wednesday, May 2, 12

    View full-size slide

  47. Background Background - this one is easy :)
    Wednesday, May 2, 12

    View full-size slide

  48. Foreground border-color, color, shadow-color
    Wednesday, May 2, 12
    you can’t declare text shadow color explicitly, so we have to put all text shadows in the
    foreground, otherwise the shadow details would be in the typography.

    View full-size slide

  49. Spacers margin & padding on non-typographic
    elements
    Wednesday, May 2, 12

    View full-size slide

  50. An Object Description
    In Sass, we describe objects using words
    and high-level concepts,
    not style primitives.
    Wednesday, May 2, 12
    Isn’t this simpler to understand if you’re reading the code?
    We read code more often than we write it. Be nice to your future self.

    View full-size slide

  51. An Object Description
    In Sass, we describe objects using words
    and high-level concepts,
    not style primitives.
    Wednesday, May 2, 12
    Isn’t this simpler to understand if you’re reading the code?
    We read code more often than we write it. Be nice to your future self.

    View full-size slide

  52. An Object Description Our object description is longer now.
    Wednesday, May 2, 12

    View full-size slide

  53. An Object Description Our object description is longer now.
    Not Re-Usable
    Re-Usable
    Wednesday, May 2, 12

    View full-size slide

  54. A Sad Reality If you use @extend like this, your
    stylesheets will be huge.
    Wednesday, May 2, 12
    So unless you need the flexibility that semantic markup brings for shared content, etc

    View full-size slide

  55. A Sad Reality Classitis provides a better user
    experience.
    Wednesday, May 2, 12

    View full-size slide

  56. A Sad Reality Classitis provides a better user
    experience.
    Wednesday, May 2, 12

    View full-size slide

  57. We Need Browser
    Support for @extend
    Wednesday, May 2, 12
    Do this right now. I’ll wait. Now back to the show.

    View full-size slide

  58. More
    Concepts
    More Organization
    But everything has
    a place.
    Wednesday, May 2, 12

    View full-size slide

  59. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Wednesday, May 2, 12

    View full-size slide

  60. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Wednesday, May 2, 12

    View full-size slide

  61. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Wednesday, May 2, 12

    View full-size slide

  62. Progression of a Design
    Wednesday, May 2, 12
    This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
    in the foundation.

    View full-size slide

  63. Progression of a Design
    Prototype
    Variations
    Multiple Uses
    Domain Concepts
    Presentational Concepts
    Concept
    App
    Styles
    Foundation
    Classes
    Mixin
    Library
    Wednesday, May 2, 12
    This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
    in the foundation.

    View full-size slide

  64. Style Concern: Structure
    • Floated Grid - Provides the
    structure of a page. CSS3 will bring
    alternate layout methods.
    • Page layouts - Defines how primary
    elements adhere to the grid and
    respond. Blog Post
    Wednesday, May 2, 12

    View full-size slide

  65. Wednesday, May 2, 12

    View full-size slide

  66. Wednesday, May 2, 12

    View full-size slide

  67. Wednesday, May 2, 12

    View full-size slide

  68. Wednesday, May 2, 12

    View full-size slide

  69. Wednesday, May 2, 12

    View full-size slide

  70. Wednesday, May 2, 12

    View full-size slide

  71. Wednesday, May 2, 12

    View full-size slide

  72. Wednesday, May 2, 12

    View full-size slide

  73. Wednesday, May 2, 12

    View full-size slide

  74. Style Concern: Structure
    • Layout - Non-grid based structural
    patterns.
    Wednesday, May 2, 12

    View full-size slide

  75. Style Concern: Structure
    • Layout - Non-grid based structural
    patterns.
    Wednesday, May 2, 12

    View full-size slide

  76. Style Concern: Structure
    • Layout - Non-grid based structural
    patterns.
    Wednesday, May 2, 12

    View full-size slide

  77. Style Concern: Structure
    • Layout - Non-grid based structural
    patterns.
    Wednesday, May 2, 12

    View full-size slide

  78. Style Concern: Structure
    • Layout - Non-grid based structural
    patterns.
    Wednesday, May 2, 12

    View full-size slide

  79. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Wednesday, May 2, 12
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance can be annoying.

    View full-size slide

  80. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Opt-in To Typography
    Wednesday, May 2, 12
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance can be annoying.

    View full-size slide

  81. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Wednesday, May 2, 12
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance can be annoying.

    View full-size slide

  82. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Wednesday, May 2, 12
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance can be annoying.

    View full-size slide

  83. Style Concern: Container
    • Define a space using boxes and
    separators.
    • Accommodate whatever content you
    put in them.
    Wednesday, May 2, 12

    View full-size slide

  84. Style Concern: Container
    • Define a space using boxes and
    separators.
    • Accommodate whatever content you
    put in them.
    Wednesday, May 2, 12

    View full-size slide

  85. Style Concern: Container
    • Define a space using boxes and
    separators.
    • Accommodate whatever content you
    put in them.
    Wednesday, May 2, 12

    View full-size slide

  86. Style Concern: Container
    • Define a space using boxes and
    separators.
    • Accommodate whatever content you
    put in them.
    Wednesday, May 2, 12

    View full-size slide

  87. Style Concern: Spacers
    • Add space using dimensions from
    the vertical-rhythm and grid
    • Margins
    • Paddings
    • Un-paddings
    Wednesday, May 2, 12

    View full-size slide

  88. Style Concern: Spacers
    • Add space using dimensions from
    the vertical-rhythm and grid
    • Margins
    • Paddings
    • Un-paddings
    Wednesday, May 2, 12

    View full-size slide

  89. Style Concern: Spacers
    • Add space using dimensions from
    the vertical-rhythm and grid
    • Margins
    • Paddings
    • Un-paddings
    Wednesday, May 2, 12

    View full-size slide

  90. Style Concern: Background
    • Gives an area background color,
    pattern, or imagery.
    • Combine with any container.
    Wednesday, May 2, 12

    View full-size slide

  91. Style Concern: Background
    • Gives an area background color,
    pattern, or imagery.
    • Combine with any container.
    Wednesday, May 2, 12

    View full-size slide

  92. Style Concern: Background
    • Gives an area background color,
    pattern, or imagery.
    • Combine with any container.
    Wednesday, May 2, 12

    View full-size slide

  93. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  94. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  95. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  96. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  97. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  98. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  99. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  100. Style Concern: Foreground
    • Gives color to type and borders
    • Often linked to a background
    Wednesday, May 2, 12
    It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
    foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
    it forces consistency. It’s a trade-off you can decide to make or not.

    View full-size slide

  101. Style Concern: Lists/Tables/Forms
    • These are unique beasts
    • Might be part of a typography
    • Use them semantically
    • Class on the main element
    Wednesday, May 2, 12

    View full-size slide

  102. Style Concern: Widgets
    • Styles for your interactive elements
    • SMACSS - Jonathan Snook
    Wednesday, May 2, 12

    View full-size slide

  103. Style Concern: Widgets
    • Styles for your interactive elements
    • SMACSS - Jonathan Snook
    Wednesday, May 2, 12

    View full-size slide

  104. Style Concern: Widgets
    • Styles for your interactive elements
    • SMACSS - Jonathan Snook
    Wednesday, May 2, 12

    View full-size slide

  105. Style Concern: Widgets
    • Styles for your interactive elements
    • SMACSS - Jonathan Snook
    Wednesday, May 2, 12

    View full-size slide

  106. Style Concern: Theming
    • Color Palette
    • Semantic Color Relationships
    • Default Variables
    • Compile Stylesheet with a different
    configuration
    Wednesday, May 2, 12

    View full-size slide

  107. Style Concern: Theming
    • Color Palette
    • Semantic Color Relationships
    • Default Variables
    • Compile Stylesheet with a different
    configuration
    Wednesday, May 2, 12

    View full-size slide

  108. Style Concern: Theming
    • Color Palette
    • Semantic Color Relationships
    • Default Variables
    • Compile Stylesheet with a different
    configuration
    Wednesday, May 2, 12

    View full-size slide

  109. Style Concern: Theming
    • Color Palette
    • Semantic Color Relationships
    • Default Variables
    • Compile Stylesheet with a different
    configuration
    Wednesday, May 2, 12

    View full-size slide

  110. Style Concern: Theming
    • Color Palette
    • Semantic Color Relationships
    • Default Variables
    • Compile Stylesheet with a different
    configuration
    Wednesday, May 2, 12

    View full-size slide

  111. Naming is Hard
    Wednesday, May 2, 12

    View full-size slide

  112. Naming is a
    Collaboration
    Designers must pick or approve the name.
    Unfortunately, designers are not often good at naming things.
    Wednesday, May 2, 12
    Coders have to name everything they make, but designers don’t. Naming is a skill that must
    be developed. You have to learn to explain your intuition and instinct.

    View full-size slide

  113. Naming Docent
    Developers, your job is to help them
    develop a shared design vocabulary.
    Wednesday, May 2, 12
    If you are a developer and a designer, you now have an excuse for talking to yourself.

    View full-size slide

  114. The Name Game
    Find a name that
    describes the intent of a design
    element, not the appearance.
    Wednesday, May 2, 12

    View full-size slide

  115. The Name Game
    A too-specific name is
    better than a too-generic name.
    Wednesday, May 2, 12

    View full-size slide

  116. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  117. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  118. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  119. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  120. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  121. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  122. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  123. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  124. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  125. The Name Game
    Wednesday, May 2, 12
    THESAURUS!!!

    View full-size slide

  126. Losing the Name Game
    Wednesday, May 2, 12
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  127. Losing the Name Game
    Give up: Pick two names
    Wednesday, May 2, 12
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  128. Losing the Name Game
    Give up: Pick two names
    Consistency: Change the design
    Wednesday, May 2, 12
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  129. Losing the Name Game
    Give up: Pick two names
    Consistency: Change the design
    Wait: Don’t name it
    Wednesday, May 2, 12
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  130. The Designer Wins
    Wednesday, May 2, 12
    Don’t force a design change just because a name doesn’t match. Intuition is a tricky thing, if
    you trust your designer, trust their gut feeling. If you don’t trust your designer... :(

    View full-size slide

  131. Classes or IDs?
    Use IDs for unique page elements.
    Specificity is good when
    styling something specific.
    Wednesday, May 2, 12
    not always possible to find a document order.
    specificity is BETTER than !important.
    !important is a nuclear option.

    View full-size slide

  132. Specificity Wars
    Time to Refactor!
    Wednesday, May 2, 12
    Fight the specificity wars, by refactoring; not by rejecting specificity. Document order is not
    enough. Keep the same order of specificity at the same level of abstraction.

    View full-size slide

  133. Mixin Library
    The presentational concepts upon
    which the foundation classes are built.
    Wednesday, May 2, 12

    View full-size slide

  134. Structure of a Library Module
    1.Dependency Imports
    2.Variables, almost always defaulted.
    3.Functions
    4.Mixins
    5.Placeholder selectors
    6.Style Selectors
    Wednesday, May 2, 12
    Placeholders: only import once or use the mixin hack if your module has these
    Selectors: Usually don't mix with Functions/mixins/placeholders

    View full-size slide

  135. Read Compass
    Compass is a Mixin Library
    Wednesday, May 2, 12

    View full-size slide

  136. Breaking the Rules
    ‣Experiment with new designs
    ‣Accommodate non-conforming design.
    ‣Build what you need today
    ‣Meet your deadlines
    ‣Diligently factor out what is common
    Wednesday, May 2, 12

    View full-size slide

  137. Documentation
    ‣It's better to show than to tell.
    ‣Make a living styleguide for
    documentation and prototyping.
    ‣This is your design catalog.
    ‣Teach the design, don't just
    exemplify it.
    Wednesday, May 2, 12

    View full-size slide

  138. Downsides
    ‣Learning curve
    ‣Harder to debug
    ‣Classitis
    ‣A lot of work
    Wednesday, May 2, 12
    1-2 days of training to become capable. 3-4 weeks to be competent.
    It will take > 1 month for an experienced team to build a comprehensive styleguide.

    View full-size slide

  139. Benefits
    Everything has a place
    Wednesday, May 2, 12

    View full-size slide

  140. Benefits
    Filesize
    Wednesday, May 2, 12
    Better factorization => less duplication

    View full-size slide

  141. Benefits
    Efficient communication
    Wednesday, May 2, 12
    More efficient team thru better communication thanks to new vocabulary. completely
    Describing a page design can be done in ~5 minutes.

    View full-size slide

  142. Benefits
    Low Coupling
    Wednesday, May 2, 12
    a clean separation in responsibilities, means changes breaks things less often in unexpected
    ways

    View full-size slide

  143. Benefits
    Built to last
    Wednesday, May 2, 12
    These styles will be used for > 2 years.
    These styles will be used by a team. For the love of god, don't do
    this for your blog or a marketing/promotional site.

    View full-size slide

  144. Thank you!
    Compass is Charityware.
    Please donate on our behalf to the
    United Mitochondrial Disease Foundation
    http://umdf.org/compass
    Wednesday, May 2, 12

    View full-size slide