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
shukob
ebiken
nkzn
110y
magicpod
pei0804
east_takumi
itohiro73
alchemy1115
ryokotmng
tomokusaba
yamaday
lynnandtonic
addyosmani
swwweet
michaelherold
bermonpainter
kneath
reverentgeek
irinanazarova
danielanewman
ufuk
sferik
eileencodes
