Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
“thinking IJESIENINE wnn SIYLE
inside the box “”'““
inside the box inside
the box” .9

WEMJEIJ. 

Space banoadvanoe.  Sfor...
‘J SENIOR DEVELOPER,  PHASE2

 OODINGIGNHI ON THE
A INTERNET:  TWITTER GTTHUB

THECOD| NGDES| GNER. COM

CO-ORGANIZER OFTE...
codingdesigner. github. io/  box
Bugs?  Letme know gm gith_ut_>. 

 
,  §; ;,g. ;,‘ ‘

:3‘: 

V3-
M. 

n

9 . .
.9 . 
e . 
d

9

. m

M

C

E
In! 

. 

1__

7/1
..  H

     
  

5 T‘
V - T
; .T: .!4""¥
_ /11
mun’ wnu nu:  MILES Ems IIITITTTETWT

JTTZZBOS ABE COOL
II I‘ ‘fig
, — "7' . . , 

;  I J‘ 
,1 III 
r:  V.  "13’ "

o"II; Z§I; §bITEb' I,  

vvulu H
3 III 1 I

6?‘ K" I

9 ILLI; 
...
III I ‘ ‘*  II" I‘
a ‘IT     I7‘ - I
     
bi,  mim,  paw: 
I— II I IT
I ~ nES| l_I_N
W IIIITIIHIIIII [ 
g; liiI| ~HI LARG...
THIS LEADS IIS Tfl STYLE GUIDES

Q3 vxxusmcmnonx A-nus :  Q3 vnusnrcwo-x

 

» alphams

A Pattern Apart

A us:  .-p: n‘s pa...
THIS LEADS US TD  3';  7 I3

EOLDE MENU E COPE
BOOKMARK ICONS "E‘°'"°s
we ‘ I”  5 =  A NEW KIND OF PUBLI'
:4// V».  — ‘ '
...
STYLE GUIDE AS  A 

ATOMIC DESIGN PATTERN LAB 

O
CO
I I(=4", r’-«I_. *i: l=. |_| IjII. t" -. .1I| :oII. I‘: __i' _,  4 , 
.—*: cImnIcIII: IIIr: a«. II: +rnxsm . !.I? -I~‘I"»'...
DLIINK PAGE VS STYLE GUIDE

Adobe Photoshov CC

5:».  Tumkxm (antral)

—— - .  ~ - um:  ed-l6|D0(RCl/ B)

-am-mm

Ma . ..4...
BLIINK PAGE VS STYLE GUIDE

Colors and
IIIIII

#110000 d00fT00 #000017 #fI'fI00 lO0fffI #11001’!  lfffffl #808080

#000000
...
BIAIIK PAGE VS STYLE GUIDE

Lorem ipsum dolor sit (37 characters)

Lmem Ipsum dolor sat amet,  consecletur adipisncing eli...
BLANK PAGE IIS STYLE GUIDE

Our Outdoor Blog
Latest Posls

Lorem ipsum dolor sit (37 characters)

Lorem ipsum may sit amet...
BLANK PAGE VS STYLE GUIDE

in

Canary Promotion CaMnIInIu1'IoIIsIIoIAlIs. CwrIuIl & Mtsslon-Duvet Ounrrs

HOME OUR WORK SE...
M ELO DY
TONALITY
CHORDS
FORM

       
   

HARD BDP
IIILYIIIIIQ

’| I|HIIIIIIti

min I , 
uni:  
IIIJIIIEV -I “

l. 
I
I
I


 

:3‘: 
V3-
I melody and lyrics

llusic Design Connection
melodyand lyrics content whatyou hum intheshower
CONTENT FIRST DESIGN
BEFORE WE DECORATE
CONTENT INVENTORY AND
MODELU NG

FOLLOW THE CONTENTS LEAD
harmony and rhythm

 

llusic Design Connection

melodyand content whatyou hum in the shower
lyrics

 

hannonyand design ...
COMPONENT SECOND DESIGN

Gombine Into bigger I I I
(Assemble Into
templates

components

-
instruments and players

 

 

 
  

 

llusic Design Connection

melody and content whatyou hum in the shower
lyrics

har...
COLORS
TYPE SCALE
TYPEFACES

Ev Tn:  :. r:I: ii"II: IiI: : isIIIIIéI= .Ii'iIIIr
TYPECAST

GIIIIIISI IIID GDIIBIIIE

Apercu Mono
Apercu Pro
(I,7_Ii/ /2>Iii'rI(/ rte {Ls/11-11
Arbutus Slab
Ariai

Arvo

/ ...
TYPECAST

IIIIUDSE AIID GDIIDIIIE STYLE

  

  
  

!  llllllklllg’ Inside I
' The T)() t0

may at. ..

the bo.  - ‘_'= .j...
GHDDSE AND GDIIIDINE GIIMPAIIE

thr'nkr'ng insirle
the bo.  ° insirle
the box insirle
the box

DNE MDRNING,  WHEN GREGDR S...
finding the n'ght cu| ors, .‘. , SINGLE SEED COLOR
~ my gamer HARMONIOUS COLOR FAMIUES
/  — EXPERIMENTANDTWEAK
' 1*
. . R  ...
THE PERFORMANCE   w  

1‘

“fps "', ,.e9” «mmn§v

99999999999999?999999999999?999999

99999999999000VVVQOOQOOOOVVVOQOVOO

...
Working with Teams and Clients

ITY
PATTERN LA

 

a. --:5 I . 
 _. .;. ,.' . 

suazvp sou-Is» sum-pg soang= - Suing: -< Sorlnxb Sofangp sum-m sue: -Ln some s...
n _

Lovem IDSAIVV dolor sumex,  consecmuv -mvvov Inc-dndunl MI bbaleex aotue quls flosllufl em: .m. on u| |Jn'| (.0TJB61I$ ...
PATTERN LAB*

    

Lorem ipsum dolor sit amet,  consectetur adip'iscing voluptate ex fugxat pa'riatur

 

Id sum 51! ad c...
PATTERN | .AB

 

Canary Promotion Canary Pmmonon
Zltfiboydz Av!  '. )lfl>a 2: Emenpde Ave.  Isl rm
CJavs. o¢. °A 7°<‘3a. SA...
X

: =w. ..u-. .=. ,.o.  any as. ..
-, _w. . Dvwx : . Inn

 

rmseclelut ad-9'5-(Inf,  a we do emsmnd
noun mm:  alum UK mu...
$grid-4: 8 1 3 5;

sgrid-I-gutter:  .25;

. co1umna (

Einclude 1ayuut($grid-4, Sgrid-4-gutter) (

. co1-1 { flinclude grid...
SASS MEDIA ITIIERIES 

0RGAN| ZE BYSETTTNG VARIABA

SIMPUFY WTTH SHORTHAND
SYNTAX

EASIER TO EXPERIMENT AND MOVE TO
PRODUC...
Sbaaic:  543px; 
spair:  456px 794px; 

ffoo {
Einclude brealcpoinusbasic) (
content:  'Ba. sic Media Query‘; 
)

Ginclude...
.- ;  gaxssu-'-‘M-, -.mahs: ~' 61-jxa-—~1’~: a;)’9.: L"‘: <--‘= !;§< . -mi;   -
47% ‘
 I I I I

<3 - -‘LhI, =osL*'-15,2.-2...
L arnn esim Ie
tr ck tn integ ate

y ur st Iegui eint
your EMS. 

I use a simple Gnmt configuration that
compiles my Sass i...
th tales! 

PRESENTATIONS

PATTERNLABZ

TYPECASTZ

SASSY MODULAR SCALE

COLOR SCH EM ER: 
H)TeTn: lIl: ,.. .r§1.'igt: i:lI...
Prochain SlideShare
Chargement dans…5
×

Thinking Inside the Box Inside the Box Inside the Box

575 vues

Publié le

  • Is Your Ex With a Man? Don't lose your Ex girlfriend! This weird trick will get her back! ◆◆◆ http://ow.ly/f23I301xGAo
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Thinking Inside the Box Inside the Box Inside the Box

  1. 1. “thinking IJESIENINE wnn SIYLE inside the box “”'““ inside the box inside the box” .9 WEMJEIJ. Space banoadvanoe. SfornoIesYou mignlikemsbetlelin Chrome Canary. un| essyou'refromthefLrtuIe.
  2. 2. ‘J SENIOR DEVELOPER, PHASE2 OODINGIGNHI ON THE A INTERNET: TWITTER GTTHUB THECOD| NGDES| GNER. COM CO-ORGANIZER OFTEAM SASS , ORGANIZER OF PHILLYSASS MEETUPAND PHILLY RWD MEEIUP
  3. 3. codingdesigner. github. io/ box Bugs? Letme know gm gith_ut_>. , §; ;,g. ;,‘ ‘ :3‘: V3-
  4. 4. M. n 9 . . .9 . e . d 9 . m M C E
  5. 5. In! . 1__ 7/1
  6. 6. .. H 5 T‘ V - T ; .T: .!4""¥
  7. 7. _ /11
  8. 8. mun’ wnu nu: MILES Ems IIITITTTETWT JTTZZBOS ABE COOL
  9. 9. II I‘ ‘fig , — "7' . . , ; I J‘ ,1 III r: V. "13’ " o"II; Z§I; §bITEb' I, vvulu H 3 III 1 I 6?‘ K" I 9 ILLI; 7 4+ -81 h, ,4
  10. 10. III I ‘ ‘* II" I‘ a ‘IT I7‘ - I bi, mim, paw: I— II I IT I ~ nES| l_I_N W IIIITIIHIIIII [ g; liiI| ~HI LARGE SCALE R 7-»? ! 1} I
  11. 11. THIS LEADS IIS Tfl STYLE GUIDES Q3 vxxusmcmnonx A-nus : Q3 vnusnrcwo-x » alphams A Pattern Apart A us: .-p: n‘s pattern Iibnry <ABCDEFGHIJKlI Swalvtes > amde-figure rm: Home Tvnogrannv Bodylcxl: Georgia Pm ’rv- . . u—. ~.n, ,. Body (ext: Georgia Pm Italic
  12. 12. THIS LEADS US TD 3'; 7 I3 EOLDE MENU E COPE BOOKMARK ICONS "E‘°'"°s we ‘ I” 5 = A NEW KIND OF PUBLI' :4// V». — ‘ ' I 4E= ,,s ' ‘$7’ L ‘ SERVICE A new kind of public service 4;» I I > *3 HIT A new kind of public service “val:
  13. 13. STYLE GUIDE AS A ATOMIC DESIGN PATTERN LAB O CO
  14. 14. I I(=4", r’-«I_. *i: l=. |_| IjII. t" -. .1I| :oII. I‘: __i' _, 4 , .—*: cImnIcIII: IIIr: a«. II: +rnxsm . !.I? -I~‘I"»'I. ‘T§II| .
  15. 15. DLIINK PAGE VS STYLE GUIDE Adobe Photoshov CC 5:». Tumkxm (antral) —— - . ~ - um: ed-l6|D0(RCl/ B) -am-mm Ma . ..4,. .m¢m {xx 1 nmoum
  16. 16. BLIINK PAGE VS STYLE GUIDE Colors and IIIIII #110000 d00fT00 #000017 #fI'fI00 lO0fffI #11001’! lfffffl #808080 #000000 -on: Pnmarykmt: ‘HeIveIIcaNeue‘, ‘HeIvetica'. ‘Anal’. sans-senf; Dnmary Ionhrallc. ‘ ‘Hell/ etIcaNeue'. 'HelveUca', ‘Anal’, sansvsenf;
  17. 17. BIAIIK PAGE VS STYLE GUIDE Lorem ipsum dolor sit (37 characters) Lmem Ipsum dolor sat amet, consecletur adipisncing elil. sed do elusmod tempo! Inciddam ul labors cl dolola magna allqla. UK snlm ad minim vefliam. cpis rloslmd exercivalion ullamco Iabotis nisi ut aliquip ex ea commodo consequat.
  18. 18. BLANK PAGE IIS STYLE GUIDE Our Outdoor Blog Latest Posls Lorem ipsum dolor sit (37 characters) Lorem ipsum may sit amet, consec1etur adpisicing elit, sea do eiusmod tempo: mcidiaum U1 Ifl&E BI GOIOIB magna alrara. UK emm ad minim veniam. quls nosvud exercivaxron ullamoo laboris nisu ul aliquip ex ea oommodo consequat.
  19. 19. BLANK PAGE VS STYLE GUIDE in Canary Promotion CaMnIInIu1'IoIIsIIoIAlIs. CwrIuIl & Mtsslon-Duvet Ounrrs HOME OUR WORK SERVICES CA5: STUDIES OURTEAM CONTACT Us Id sum sit ad consectetur Iabore excepteur ‘sum In voluptate ex fugiat p'anaIur Lorem
  20. 20. M ELO DY TONALITY CHORDS FORM HARD BDP
  21. 21. IIILYIIIIIQ ’| I|HIIIIIIti min I , uni: IIIJIIIEV -I “ l. I I I :3‘: V3-
  22. 22. I melody and lyrics llusic Design Connection melodyand lyrics content whatyou hum intheshower
  23. 23. CONTENT FIRST DESIGN BEFORE WE DECORATE CONTENT INVENTORY AND MODELU NG FOLLOW THE CONTENTS LEAD
  24. 24. harmony and rhythm llusic Design Connection melodyand content whatyou hum in the shower lyrics hannonyand design givestrudureand distinction rhythm components totheoontent
  25. 25. COMPONENT SECOND DESIGN Gombine Into bigger I I I (Assemble Into templates components -
  26. 26. instruments and players llusic Design Connection melody and content whatyou hum in the shower lyrics harmony and design give structure and distinction mythm components to the content instruments art direction aestheticframewcrkand players Iimitatons
  27. 27. COLORS TYPE SCALE TYPEFACES Ev Tn: :. r:I: ii"II: IiI: : isIIIIIéI= .Ii'iIIIr
  28. 28. TYPECAST GIIIIIISI IIID GDIIBIIIE Apercu Mono Apercu Pro (I,7_Ii/ /2>Iii'rI(/ rte {Ls/11-11 Arbutus Slab Ariai Arvo / I/I115»:
  29. 29. TYPECAST IIIIUDSE AIID GDIIDIIIE STYLE ! llllllklllg’ Inside I ' The T)() t0 may at. .. the bo. - ‘_'= .ji’; '"“: ;m re A the bo. *** =3 * DNE MDIIIIING, YI YIDKE FRDM TRDI ‘ TDUIID HIMSELFI DED INTD A HDRII HIS AIIMDUIIIJIIE
  30. 30. GHDDSE AND GDIIIDINE GIIMPAIIE thr'nkr'ng insirle the bo. ° insirle the box insirle the box DNE MDRNING, WHEN GREGDR SAMSA WDKE TIIDM TIIDUDLED DREAMS. HE FIIUND HIMSELF TIIANSTDIIMED IN HIS BED INTD A HDRIIIBLE YEIIMIN. HE LAY DN HIS AIIMDURIIKE BACK, AND IT HE LIFTED HIS HEAD A LITTLE HE GUULD SEE HIS DRAWN RFI IY RI IDIITIV DIIMFD lllll / ,- GWIAPY » ‘$6: make toxic s for the evil ‘ii and Jack. One morning. when Gregor Samsa woke rrom troubled dreams, he touho himselftranslormed in his bed into a horrible vermin. He lay on his armour-like bad. and it he lifted his head a Iime he could see his brown belly. slightly domed and divided by arches into stiff sections. ‘The bedding was hardly uble weaver it and seemed ready Ioslide on Iny momerrL His rruiny leg, , = »r. ;v'. ;- Itunotxrrparedwimmesiaedllrereslotmm waved
  31. 31. finding the n'ght cu| ors, .‘. , SINGLE SEED COLOR ~ my gamer HARMONIOUS COLOR FAMIUES / — EXPERIMENTANDTWEAK ' 1* . . R I I I I
  32. 32. THE PERFORMANCE w 1‘ “fps "', ,.e9” «mmn§v 99999999999999?999999999999?999999 99999999999000VVVQOOQOOOOVVVOQOVOO 99999999999999999999999999?99?9999 99999999999999?999999999?9999?9?99 99999999999999?99999999999?9999?99 999999999999999999999999999?99?999
  33. 33. Working with Teams and Clients ITY
  34. 34. PATTERN LA a. --:5 I . _. .;. ,.' . suazvp sou-Is» sum-pg soang= - Suing: -< Sorlnxb Sofangp sum-m sue: -Ln some sum-an Sbtoe-sh Sbbe-sh Sgrem s-«me sew: -wn Stool-wh sway-Id Sr-1-nx Spay-HI Sc! -v-I11 iv-v Sxuy-nu spay-4. Shlxk Pmrury Ion: Wmxncy ssm A. wmwy ssm B. sans-seal. Pnmnry (ml VIAIJK Whrlney ssm A, wmm ssm a, mmav/ _ rm. .yo—: uI¢-man-yss-In-, -vane-qs-r. --unit. um. .. suau-cuss keen‘ um. " Sm sun». can A, w. m, ssu stun 04:: u. saxs-sum Fhvmuy $uA4r<m mm mm mmy su sun: out A‘ mm, su sum (M: r, w: ~suar. rum-yuuuourun-an: -an--ys-umnua-Axvn-n-nu-s-uncut. »-ua—: Secondary font ‘. xI~. - ssm A‘, ’. .-= '~« SS. -n B’. se"L Semndav ! on ‘elm: 'Ard<-vSSmA', ‘Arrhev ss». 5, sent
  35. 35. n _ Lovem IDSAIVV dolor sumex, consecmuv -mvvov Inc-dndunl MI bbaleex aotue quls flosllufl em: .m. on u| |Jn'| (.0TJB61I$ zonseuuu b6ID'IaI(mge| I1, sea do msmea manna mm u: rm: -Ia .4 rmnvm mum‘ ms: LIX drama ex ea can-Imodo S :1 CL. )'(V"”L : ~
  36. 36. PATTERN LAB* Lorem ipsum dolor sit amet, consectetur adip'iscing voluptate ex fugxat pa'riatur Id sum 51! ad consecletu! labore excepzeur sum in voluplate ac fugial p anatu: Loxem
  37. 37. PATTERN | .AB Canary Promotion Canary Pmmonon Zltfiboydz Av! '. )lfl>a 2: Emenpde Ave. Isl rm CJavs. o¢. °A 7°<‘3a. SA cIenme, vA, :9o3z-nus- 117335” “*5 121;) swwes ‘ 2'" ‘D’ ’°" " "71" : zou Canary I>mmI. on AII ngm re-saved
  38. 38. X : =w. ..u-. .=. ,.o. any as. .. -, _w. . Dvwx : . Inn rmseclelut ad-9'5-(Inf, a we do emsmnd noun mm: alum UK mum .1 mm I-on ulhmau hbonsmsn IJE al-amp u u «ma :4». v. .-m. .:»-. ..». .—. ... an zrwvv r-mind rtwtwt-er 409“: I». .. rrv ‘. .w¢a= ... .m. «.p¢o<a«u= ..x , -. ».- mm. C3~u. .~cAvnoisx¢tAu (mun! V1s-our! )-V1-. c_I(~n sedelur Llbore exeepteur ‘sum In . . p'anal'ur Loam lo! 3:: amei. mg: -nx em, -zemoov one :1 dolor: x mm ad 0-: nosxmd rn(o bbons ms: IA alum: ex ex commode mum mm, can round 4-‘ av. 5:4 643 unnulun Javtnlabun H7)‘ .4! ~<n-qr. ll: Iaeor: new a u (oev‘mo¢o (um-aux an m (mm .4 . ss imam q . ... .,. ,.. ... ... M. ..“ nut‘-'-m-r-‘mt-: s4rvavcav~1e(Ie1.4 Id mm m mi I. :ue-sun ; -I VB-| l>lMe m'I. q.. x p' Lnvtm II-sum dole: at a adv’-um: em. sen do IIKIIIGIHI m hum: :1 ( mun ad m-mm mun untznahon ulhmco m cvmmodo «ulsequai
  39. 39. $grid-4: 8 1 3 5; sgrid-I-gutter: .25; . co1umna ( Einclude 1ayuut($grid-4, Sgrid-4-gutter) ( . co1-1 { flinclude grid-span(1, 1); } . co1-2 { Einclude grid-span(1, 2): ) ) ) ) 1 SASS GRID SYSTEM E DEFINE ANY GRID YOU smgu| a|-ity LIKE EQUAL OR ASSYMETRICAL
  40. 40. SASS MEDIA ITIIERIES 0RGAN| ZE BYSETTTNG VARIABA SIMPUFY WTTH SHORTHAND SYNTAX EASIER TO EXPERIMENT AND MOVE TO PRODUCTTON
  41. 41. Sbaaic: 543px; spair: 456px 794px; ffoo { Einclude brealcpoinusbasic) ( content: 'Ba. sic Media Query‘; ) Ginclude breaJcpoint($pair) ( content: ‘Paired Hedia Query‘; I . fr Cindi: (min-width: 5439:) ( #£oo ( content: ‘Basic Media query‘; I I Emedia (min-width: 456px) and (max-vi dth: 794px) ( ffoo ( content: I ‘Paired Media Query‘; I I “:3
  42. 42. .- ; gaxssu-'-‘M-, -.mahs: ~' 61-jxa-—~1’~: a;)’9.: L"‘: <--‘= !;§< . -mi; - 47% ‘ I I I I <3 - -‘LhI, =osL*'-15,2.-2;-: gv. :’a.1i*' if-. i§a»=3:rJ: i'9sL"’. ::. -&= .!! _I< zllllr 3-1-1 I3:-_cL=9< . )IlII" 31: LR . ; ‘ . - NOT NATIVE TO css element queries ADD STATES AS A DATA-ATIRIBUTE ° STYLE BASED ON DATA ATFRIBUTES S
  43. 43. L arnn esim Ie tr ck tn integ ate y ur st Iegui eint your EMS. I use a simple Gnmt configuration that compiles my Sass in my CMS, and then moves a copy of the CSS and assets to my Pattem Lab instance. download
  44. 44. th tales! PRESENTATIONS PATTERNLABZ TYPECASTZ SASSY MODULAR SCALE COLOR SCH EM ER: H)TeTn: lIl: ,.. .r§1.'igt: i:lI: e1i: e31:; i: BREAKPOINTZ @. °Vli1son‘(s'emIeII, codingdesigner on the intemet Phasez

×