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.
12 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.
12 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. 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.
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.
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.
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
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.
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.
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.
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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
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.
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.
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... :(
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.
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.
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
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.
chriseppstein
koichiotomo
nobutomurata
shonansurvivors
oracle4engineer
ysknsid25
stajima
miu_crescent
tohutohu
tubone24
tacck
yoshidashingo
shujisado
honnibal
sonatard
philhawksworth
lemiorhan
scottboms
shlominoach
swwweet
quramy
holman
bluesmoon
shpigford
chrislema
