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.
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.
• 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.
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
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.
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.
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)
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?
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.
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.
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... :(
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.
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.
How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
13 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
13 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
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.
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.
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.
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.
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.
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)
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.
chriseppstein
tohutohu
lmi
tsumita
estie
sonatard
hogelog
oracle4engineer
negi111111
nobutomurata
salaboy
coincheck_recruit
bbqallstars
chriscoyier
eitanlees
ufuk
irinanazarova
palkan
danielanewman
matthewcrist
lauravandoore
csswizardry
smashingmag
speakerdeck
morganepeng
