Tweet
Tweet

Slide 1

Slide 1 text

The Four Noble Truths (of Stylesheets) Thursday, February 28, 13

Slide 2

Slide 2 text

You are suffering. (we were too) http://inguen.blogspot.com/2009_02_01_archive.html Thursday, February 28, 13

Slide 3

Slide 3 text

STYLESHEETS are the source of your suffering http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg Thursday, February 28, 13 It is the nature of CSS to devolve into madness. Duplicated styles, code spaghetti, inconsistent UI, lots of decision-making and no clear path.

Slide 4

Slide 4 text

You can be free from suffering. http://www.indiegamemag.com/media/lightbulb.jpg Thursday, February 28, 13

Slide 5

Slide 5 text

Living style guides & self-discipline will free you from your suffering http://www.tsf.net.au/gallery/var/albums/Tidy-Cabling/46-cluster_back2.„g?m=1294131614 Thursday, February 28, 13

Slide 6

Slide 6 text

Development Speed Re-use Flexibility Repetition Requires Reduces Requires Reduces Thursday, February 28, 13 These tradeoffs are fundamental to software.

Slide 7

Slide 7 text

“Why is it so slow to make new pages that look similar?” Hand coded CSS Thursday, February 28, 13

Slide 8

Slide 8 text

I need to reuse my classnames. Thursday, February 28, 13

Slide 9

Slide 9 text

and save time Thursday, February 28, 13

Slide 10

Slide 10 text

There we go Thursday, February 28, 13

Slide 11

Slide 11 text

I’m so fast now. CSS FRAMEWORKS Thursday, February 28, 13

Slide 12

Slide 12 text

“Change this bit here, will ya?” Thursday, February 28, 13

Slide 13

Slide 13 text

But if I change that, it will affect these other things. Thursday, February 28, 13

Slide 14

Slide 14 text

“Why? They’re not related.” Thursday, February 28, 13

Slide 15

Slide 15 text

I need to NOT reuse my classnames. Sometimes. Thursday, February 28, 13

Slide 16

Slide 16 text

I’m so flexible now. Scoped Sass Styles & Content Semantics Thursday, February 28, 13

Slide 17

Slide 17 text

“Why is it so hard to roll out this change across the site?” Thursday, February 28, 13 It’s faster than it was,

Slide 18

Slide 18 text

I didn’t know those things were related. Thursday, February 28, 13

Slide 19

Slide 19 text

“Of course they are!” Thursday, February 28, 13

Slide 20

Slide 20 text

Make design-oriented concepts that can vary in appearance. Thursday, February 28, 13

Slide 21

Slide 21 text

Design Concept Framework Let’s work on this together. Thursday, February 28, 13

Slide 22

Slide 22 text

“Change how this concept looks?” “Use this concept instead.” Thursday, February 28, 13

Slide 23

Slide 23 text

No problem. Thursday, February 28, 13

Slide 24

Slide 24 text

“Perfect!” Thursday, February 28, 13

Slide 25

Slide 25 text

Good naming of appropriate concepts is the key to maintainable software. Thursday, February 28, 13 Chris: This is not just a stylesheet concept. This is a fundamental truth of software development.

Slide 26

Slide 26 text

How do I know if a concept is appropriate? Thursday, February 28, 13 a concept is appropriate if is independent of other concepts or when its relationship to other concepts is unambiguous. a concept is appropriate if it lives in the application domain. a concept is appropriate if it supports the creation of appropriate concepts.

Slide 27

Slide 27 text

What makes a good name? Thursday, February 28, 13 A good name is short. A good name conveys understanding about a concept. A good name omits little knowledge about its concept.

Slide 28

Slide 28 text

Naming a concept changes it. Thursday, February 28, 13 Once you name a concept you change the concept into whatever concept that name invokes in another person. Any concept worth creating is a concept worth naming well. Take the time to name it right, or it will be misunderstood and misused. This is the source of most software defects.

Slide 29

Slide 29 text

Accept your Constraints http://candidkerry.files.wordpress.com/2011/09/bound-with-chains-of-the-spirit-and-of-men11.jpg Thursday, February 28, 13 We work with browsers and we are beholden to how they work. You cannot fight this. You cannot escape it. Accept it.

Slide 30

Slide 30 text

Fundamentals • Reset • Additive-only • Page Layout • Containers • Typography • Background • Foreground • Spacers • Interaction States • Medias • Height • Differences OK Thursday, February 28, 13 We must embrace these fundamentals. Our concepts cannot fight them or they are not appropriate to our application.

Slide 31

Slide 31 text

Thursday, February 28, 13 We used Eric Meyer’s Reset. it turns off all the styles, but many prefer a normalization over a reset.

Slide 32

Slide 32 text

Additive by Nature Styles Inherit and Cascade. “Turning off” styles is a code smell. Thursday, February 28, 13

Slide 33

Slide 33 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 34

Slide 34 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 35

Slide 35 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 36

Slide 36 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 37

Slide 37 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 38

Slide 38 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 39

Slide 39 text

Constructing an Object Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 40

Slide 40 text

Constructing an Object Unstyled Background Container Typography Foreground Margin/Padding Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 41

Slide 41 text

Constructing an Object .calming .shadow-box .reading-text .green-bg-type .vertically-padded Thursday, February 28, 13 From each category you can usually only pick 1 class to apply to the same element.

Slide 42

Slide 42 text

Style Concern: Layout • 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 Thursday, February 28, 13

Slide 43

Slide 43 text

Thursday, February 28, 13

Slide 44

Slide 44 text

Thursday, February 28, 13

Slide 45

Slide 45 text

Thursday, February 28, 13

Slide 46

Slide 46 text

Thursday, February 28, 13

Slide 47

Slide 47 text

Thursday, February 28, 13

Slide 48

Slide 48 text

Thursday, February 28, 13

Slide 49

Slide 49 text

Thursday, February 28, 13

Slide 50

Slide 50 text

Thursday, February 28, 13

Slide 51

Slide 51 text

Thursday, February 28, 13

Slide 52

Slide 52 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Thursday, February 28, 13 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.

Slide 53

Slide 53 text

Style Concern: Typography • Defines how a collection of typographic elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Thursday, February 28, 13 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.

Slide 54

Slide 54 text

Style Concern: Widgets • Styles for your interactive elements • SMACSS - Jonathan Snook Thursday, February 28, 13 Widgets are interactive elements (elements with state)

Slide 55

Slide 55 text

Medias Thursday, February 28, 13 In order to have consistent breakpoint behavior, Sass 3.2 has new abilities to define abstractions around styles using @content.

Slide 56

Slide 56 text

Height Is a Scary Word http://edge.ebaumsworld.com/mediaFiles/picture/1918624/81886902.jpg Thursday, February 28, 13 except for positioned content, You almost never want to set the hight of anything that has a variable width or variable content (hint: that’s almost everything)

Slide 57

Slide 57 text

Differences are OK http://www.snvdiversityrt.zoomshare.com/files/Diversity_Matters_photo_without_wording_.jpg Thursday, February 28, 13 Pixel perfection is a pipe dream. Embrace progressive enhancement. Krys: tell designers this is ok. do you have some tips for how to design with enhancement/ degradation in mind? Chris: Doesn’t that cramp your style?

Slide 58

Slide 58 text

Designer Thursday, February 28, 13 Naming for Intent Design is not art. Design is science with an artistic flair. Suddenly your designs change, as intent becomes more of a focus than art.

Slide 59

Slide 59 text

Naming is a Collaboration Designers must pick or approve the name. Unfortunately, designers are not often good at naming things. Thursday, February 28, 13 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.

Slide 60

Slide 60 text

Naming is Hard http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g Thursday, February 28, 13 Because designers think visually, sometimes a description is actually a paragraph, not just one or two words.

Slide 61

Slide 61 text

Naming Docent Developers, your job is to help designers develop a shared vocabulary. Thursday, February 28, 13 If you are a developer and a designer, you now have an excuse for talking to yourself.

Slide 62

Slide 62 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 63

Slide 63 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 64

Slide 64 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 65

Slide 65 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 66

Slide 66 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 67

Slide 67 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 68

Slide 68 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 69

Slide 69 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 70

Slide 70 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 71

Slide 71 text

The Name Game Thursday, February 28, 13 THESAURUS!!!

Slide 72

Slide 72 text

Losing the Name Game Thursday, February 28, 13 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 73

Slide 73 text

Losing the Name Game Wait: Don’t name it Thursday, February 28, 13 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 74

Slide 74 text

Losing the Name Game Consistency: Change the design Wait: Don’t name it Thursday, February 28, 13 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 75

Slide 75 text

Losing the Name Game Give up: Pick two names Consistency: Change the design Wait: Don’t name it Thursday, February 28, 13 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.

Slide 76

Slide 76 text

The Designer Wins http://blog.hubspot.com/Portals/53/images/charlie-sheen-winning.png Thursday, February 28, 13 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... :(

Slide 77

Slide 77 text

Now you understand. • My site is so big • But I grok the fundamentals • But OMG where do I start? Thursday, February 28, 13

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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 Thursday, February 28, 13

Slide 81

Slide 81 text

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 Thursday, February 28, 13

Slide 82

Slide 82 text

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 Thursday, February 28, 13

Slide 83

Slide 83 text

Property Soup Le average sass stylesheet. Thursday, February 28, 13 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 84

Slide 84 text

Property Soup Le average sass stylesheet. Alphabetized Thursday, February 28, 13 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 85

Slide 85 text

Property Soup Le average sass stylesheet. Alphabetized Thursday, February 28, 13 How should we organize our style properties? Alphabetize them! We can do better than this. We will organize our properties by style concern.

Slide 86

Slide 86 text

Typography The non-color aspects of text. Thursday, February 28, 13 Note how the typography and foreground are mixed up?

Slide 87

Slide 87 text

Typography Typographic properties: font-xxx, line- height, bullets, text-xxx, margin Thursday, February 28, 13 Explain the placeholder selector

Slide 88

Slide 88 text

Container Not all paddings are from the same concern. Thursday, February 28, 13

Slide 89

Slide 89 text

Container border, box shadow, padding Thursday, February 28, 13

Slide 90

Slide 90 text

Background Background - this one is easy :) Thursday, February 28, 13

Slide 91

Slide 91 text

Foreground border-color, color, shadow-color Thursday, February 28, 13 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.

Slide 92

Slide 92 text

Spacers margin & padding on non-typographic elements Thursday, February 28, 13

Slide 93

Slide 93 text

An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Thursday, February 28, 13 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.

Slide 94

Slide 94 text

An Object Description In Sass, we describe objects using words and high-level concepts, not style primitives. Thursday, February 28, 13 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.

Slide 95

Slide 95 text

An Object Description Our object description is longer now. Thursday, February 28, 13

Slide 96

Slide 96 text

An Object Description Our object description is longer now. Not Re-Usable Re-Usable Thursday, February 28, 13

Slide 97

Slide 97 text

A Sad Reality If you use @extend like this, your stylesheets will be huge. Thursday, February 28, 13 So unless you need the flexibility that semantic markup brings for shared content, etc

Slide 98

Slide 98 text

A Sad Reality Classitis provides a better user experience. Thursday, February 28, 13

Slide 99

Slide 99 text

A Sad Reality Classitis provides a better user experience. Thursday, February 28, 13

Slide 100

Slide 100 text

This is a GOOD Start Thursday, February 28, 13

Slide 101

Slide 101 text

CHANGE how you think Thursday, February 28, 13 Think of each page, each project, each feature as part of a whole When you do this, living styleguide is almost inevitable

Slide 102

Slide 102 text

Re-approach the Fundamentals Thursday, February 28, 13

Slide 103

Slide 103 text

Styleguides Must Live in Code Thursday, February 28, 13 styleguides traditionally are a document but no one refers to them so what’s the point consistency is the point - so apply the principals of usability and make a styleguide people can use make it in code. This is an actual screenshot of a page of our styleguide.

Slide 104

Slide 104 text

Elements Thursday, February 28, 13 It’s common to think of pages in terms of areas, elements, and relationships. Have to break that down fundamentally and think of the building blocks of your elements. Add to traditional design mindset: Interchangeable elements Start with your content inventory. Then look carefully at the elements that live around and within your content.

Slide 105

Slide 105 text

Elements Thursday, February 28, 13 It’s common to think of pages in terms of areas, elements, and relationships. Have to break that down fundamentally and think of the building blocks of your elements. Add to traditional design mindset: Interchangeable elements Start with your content inventory. Then look carefully at the elements that live around and within your content.

Slide 106

Slide 106 text

Design Design Thursday, February 28, 13 Start with your content inventory. Then look carefully at the elements that live around and within your content.

Slide 107

Slide 107 text

Thursday, February 28, 13 This is my UI Library.

Slide 108

Slide 108 text

Thursday, February 28, 13

Slide 109

Slide 109 text

Interactions are essential design elements Thursday, February 28, 13

Slide 110

Slide 110 text

Design Process || Dev Process Thursday, February 28, 13 Do this and suddenly your design process and development process start to look alike. Hell, if you think that way, suddenly you start being able to design IN CODE. (I don’t think that way)

Slide 111

Slide 111 text

Don’t worry, we’re almost done. Thursday, February 28, 13

Slide 112

Slide 112 text

Benefits Everything has a place http://www.ultracraft.com/system/accessories/0000/0425/Drawer-Organizer-Metal_full.„g Thursday, February 28, 13

Slide 113

Slide 113 text

Benefits File Size 3.5 MB 1.2 MB Thursday, February 28, 13 Better factorization => less duplication. 2/3 reduction of total site-wide styles.

Slide 114

Slide 114 text

Benefits Efficient communication Thursday, February 28, 13 More efficient team thru better communication thanks to new vocabulary. completely Describing a page design can be done in ~15 minutes.

Slide 115

Slide 115 text

Benefits Low Coupling Thursday, February 28, 13 a clean separation in responsibilities, means changes breaks things less often in unexpected ways

Slide 116

Slide 116 text

Benefits Built to last http://www.flickr.com/photos/wilhelmja/4233621517/ Thursday, February 28, 13 Ok. Pyramids are probably a bit of an exaggeration. These styles will be used and evolved for several years -- an eternity on the internet.

Slide 117

Slide 117 text

Downsides ‣Learning curve ‣Harder to debug ‣Classitis ‣A lot of work Thursday, February 28, 13 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. 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.

Slide 118

Slide 118 text

Questions? Thursday, February 28, 13

Slide 119

Slide 119 text

We like you. @shodoshan @chriseppstein Thursday, February 28, 13