Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bourbon: A dose certa para seu front-end

627 views

Published on

Esqueça Bootstrap e Foundation! Aprenda a deixar seu código leve, facilmente customizável e dinâmico com Bourbon, Neat, Bitters e Refills.

Published in: Design
  • Be the first to comment

Bourbon: A dose certa para seu front-end

  1. 1. t4 , VI . r ~'~ r ñ ~ à "v » "z à” n" I . _w A . A _ÀN « . À a | | l I t Í . , _ ¡ _ A _ _ ¡ '. l N a ' 1 -' r - -' ' - s. @morheusogcosro
  2. 2. * I r* f' à r 7 * ~ "x " “s” á -f . 4 ¡ à » _» « V & ~ u I u . ¡ , | l . À À l | a @morheusogcosro
  3. 3. t_ | _h _N _I Í_ f, , , _ _y __ , fg V_ __ n | A I “ w í -' , a I 4 , M_ é n , 1 | . a . a t I @motheusogcosto “à añ- *r mr: rx fo' “m , rr l¡ W r _Ã p [1 r I! 'gn ; bl 1|' Jr C &JJ- t0 b k k I
  4. 4. a @motheusogcosto . ~ “ , t' , ' I t” 'I t* c” ' ' ' "x . ” f" t -. I _A t e = _se = a t _t x | t . ¡ ¡ W _ _ › ~ t_ _ ¡ I , . '~ t s ' 1 r' H f r r" -' ' 1 ! n
  5. 5. WWF i/ /h It íí ttít h íthtlttt
  6. 6. É uma biblioteca de mixins para o feito pela thoughtbot
  7. 7. Ótima documentação HTTPz/ /BOURBONIU/ DUCS/ u Bourbon MIXINS MIXINS Ann-miar Mamma' o. .., Animation MMN' “f” Tha anumuon mixin suooons ocmma soparatad “S15 od vamos, which allows Ann-miar anna» GIÍÍBEH! uansitions vo( inoviiduat propemes to be descnbed m a single styâe rule, Each value in the Inst corresponda Io the value m ! Mt same position in lho 01h01 proceda: Ann-miar ru voc. ÀIMVFIÍDDT Nlflllwt Cmt? ! Alwrdliov' »uma uniu. . '”Y' i V'1. li : Ja--i ÀIwvJlKr n. , si». : amam- Yin-nv rumor Àocnvnnto Bando: : nom B-Kiqlbund Demo
  8. 8. 'DH l FÉ* Í', ,_ . É ~ lr y-Qy! *WI ír¡ _dg-ria sit! r¡ rygí 'alii _al ° lrÉ Jal: "a/ ir Jiq/ 'Vü | rõ w ' : Qui Install for Rails 3.1+ ln your Gemfile: gem 'DOUFDOH' Then run: $ bundle install Restart your server. Then rename applicatiomcss to application. css. scss: mv app/ assets/ stylesheets/ application. css app/ assets/ stylesheets/ applicat1on. css. scss Delete the sprocket directive in appIication. css. scss: *= require_tree . Import Bourbon at the beginning of application. css. scss. All additional stylesheets must be imported below Bourbon: @import "bourbon"; @import "home“; @import “useryw
  9. 9. ?É lr , _ r à rf star¡ r¡7¡4§¡ r 45 u sgh_ rf y *Ary ¡i l; l lf. ..^l Fl com. . Â-¡Pl i. .~: l ll Í 7 Install for a Non-Rails App Installation Install the gem $ gem install bourbon Install Bourbon into your project's stylesheets directory by generatlng the bourbon folder: $ bourbon install The generated folder will contain all the mixins and other necessary Bourbon ñles. lt is recommended not to add or modify the Bourbon files so that you can update Bourbon easily. Sass Watch Run a standard sass - -watch from the command line: $ sass --watch stylesheets/ Sass: stylesheets Lastly, import the mixins at the beginning of your stylesheetls): @import "bourbon/ bourbon”;
  10. 10. ¡¡nn¡¡¡¡›n¡n nnnnn nun¡ nnnnnnnn ¡¡¡¡¡¡¡¡¡¡¡¡ nnnnnnnnnníullu¡ uunnnununnnuunun.
  11. 11. o a _ 1 . Í É ¡Aí. › ú «Il-dr rg' In : :M2 air, 1-; i ~"| i* l* ml o-; i »-' 31% . ..e F w“ ç' : nv ' ' x3' J nf ; ei F-'CIIÍH-¡ñlela or l _ “l, °¡'¡IÍI)ÍÊ? ~*I"'ÊIsHIIÉÍÊLY. -"í r-niitilhilii: * a: :uma: !till ! ÉBÊTILSI-&Hlhlu I : Ifríri , !lr"l. l _UnlIÊÍINiPoIIlIIÍW . ¡_| ;“'l. l gnrijiríitoirmi invicta-W' l : ÍÕIPIÍÍ urLl ! HlÍÍÍrL'lllIllIl. ~ í? " JI mim": ;i . i l inwtairugi; Í-y: l 'LÊOÍF'IIFÍÊÍ" : lnliiuoílollal-ílwlplalrtíxlgl: l_
  12. 12. É: : a ii"¡ l l *l 7:' qua. ~ e--l l .4~ a . .a c-; Jnwzllttíta- E¡miiieáizixaltiíõlíí! Marilia» "i'íónniãr-vs? ioiaiileiíolliilaurrfíólíi? '"la _i _nim-ia íolllti: :Im ? l!l! l'= ,I-'L1=l¡Í~“v'¡oIoiÍÍ-“ : vw . -' 10H¡Í-¡ÉÊÍUIÉIF¡Úñiñlãllllãl "'? imã-WWkilãlrtitilolii? ". iloluiiülln ? Íliktíãi-'Bilüãlàllàiá iítñílàll**
  13. 13. -WYIêIÍSIÍQÍÊÍ-"Ê i-*= .¡ii; ;.: _'i. -i;1.«: n¡i: : ailfl. ;às siaàlsfiêeí. ijie›airsr-t: at ~ijii-s=2*-'“í: i": I1i: t1ftj. ~:nsiia: ziilfl. ;ts-ri snsr; lsei~j_isi~-: nIrit: -,; A ensina-flui: r'= .InI: íií*t;1.cisii: : ¡filjl 2;; an: ¡.~àI-f-i~-j. íii»cIIrt: -: ' ace-ti-': IiI: L1t; í.ciii: : : i'll gt: : êIEbTIêl-'irIl-"§| '.FÊÍ-§ “t l"'-'_| lsl-_'l. ÍÍE-Í. l2Illrll ; lljl ; to l; r.= _|s. _-I; lv-=1.¡l-›; ¡rr-"i; -:
  14. 14. GI7'l. lI"Í| _.lI°ã, li' i": nl. _~i_. iift; j.clnllÍallÍl. ;LJ/ kl êGb1êl-'Í. .Il-'l3|| ,l”l Íl-_l
  15. 15. a» 'a 3" í 4-! 'É 9 l j" 4' e. _ç n¡ l lA-t a J I _as a e '¡ «e «i n l Q * l #Q ¡ Wan t I É» _war cr ¡ 9 rá¡ nr Fl AÍ í 9 'i' 'í ll “ln "ía
  16. 16. * Bourbon WT : l/lrmíEiffíFí T Ill TW I/
  17. 17. a<section> <aside>5idebar</ aside> <article>Content</ article> </ section> »section I @include outer-container; aside í @include span-columns(3); I article í @include span-columns(9);
  18. 18. Ku to a¡ . o¡ _ . . . - _ . . . - . a 1 e: o_o . o ¡ tllarzié Í ÍJÍÍÊIÍII cgoiir-“liqi'o; lç içiqiinar-_naoisn: militar-i = _i; -:ji-: la~ çlrjlntí Llloílf-J : Isram-nízol'LllulnãalÍiíl -l 'L ; E20 g: [r : |ir'“t: íiu”lit: : l cgtijiuc: 'units êlflêllst-"ÍÍN"ÍJIJIIIIFJÃÍÍÊÍ'l 'l icgzijurfhlloíla . lllêlítímíllíÃÊÍIIlQIÕÍÍil-êzl : lj 'L. jI_io; la“ ífsr-: ilil-víií! VLÍIllli/ 'IÉÍA lÍ ; REC 1* fr
  19. 19. Íáiirxeiblàlíla mia: 3-›2l2). i›_'! r¡ll3.r_l9.-.7+ ? iulelàrrííjxêa , QKQÚÍ-ÚÂLÍÊÉÍIÍQSÍÉ1ÍH. JIÉZÍÊ-*Tljiiajf EIOIÓIQJ: -' 'aIFJliiçLA-_tátç- ; mais i-i-¡g-, iiisioç-: :Ia- ilíàiteljatoilt» ; uma-qleuuiisvrslc= l'n« ílíjitelkuilt- ííàoolj-, t-ít: iitzlvíüsutà-itolêríljá' uláíünlkílil-Yoíiulv › Simonal-it: çxgr-, tos-iuoijuiitorslÇififiâ me matas-iii: - $195!"J>I0Í| !¡llI0F| Ç3r'Í/ n>
  20. 20. «§&Í; L'lg: _tãt(it. §' 9116195421211¡ ÍItaeIJELQWJ -Ã~"1iiie1L-›1.í_liy›-: _itçxtir-Jgrgtçnjtagie: Em: ç.iitare: s--v¡«: ki¡àt5i. Jump. : . il : a íLi. _o_l:1-. L!_l›i7_lt- ? Igfãlü-"ÇJCALKIÀIILIIÊ ›'› i - üiutl-f-l-! lãk-Y JIIT-JÊÍÍÍFIAI átrllclf: r'l. i.ç l ÍlJJ'Ç-L1.! I'§l? Êigülu»'ílilgQllluãl l . ii-
  21. 21. Ó Bítters
  22. 22. r 'rx *à* n» ii l I "mí '64 “cl- ' _E l r @Ar ¡aa ¡ i_ n h! @v3 , )lÍ lll lil/ : //íTTTE&P Hñll
  23. 23. Com ele você define: P¡ ll ESTRUTURA DO SASS NO PROJETO thoughtbot / bitters p branch: master v bitters / app / assets / stylesheets / Change selector to Bourbon all button inputs 'I kylefledler aulhored t0 days ago à _basescss Remove extends à _buttons. scss Change selector to Bourbon all button inputs à _Iorrns. scss Add picture element, general cleanup à _grid-settingsscss Add picture element, general cleanup à _Iists. scss Add picture element, general cleanup â _tab| es. scss Revise lont-feature-settlngs to more modern syntax à _typographyscss Revise font-feature-settings to more modern syntax à _variables. scss Revise font-feature-settlngs to more modern syntax
  24. 24. IO §N 31 'l »areia-ii É . Sá J . p . ,, -9 D . O , ._ l »p ~› »9 r¡ Q *l 'l raLsIa-*Prtniies-; Tii -2 -Íãl nL-I. -:-›= -“r*›inliê'›s~°. i.g; n fui-y. "rt-Julir? . -ÍãÍ-ns-I'a~víl. itiia~»¡i; r1gl¡¡íi e: fl. r.. :'-e: ;Silent-lisina-? l_. iltnt; l-airçriitgliiie 7_l. _.. l›le'la-: "lííilâli : datas-i ? Elf-rasaaeíoiuw-“larw: :rítmica §lp›: -;-: êâtfotasia-«rtp _ a llllglri áêlfonrçia»«liaiíaeiiaràgliii -ÍÊlÍ-nsfta-zkflmloílàrtv: @Irã . c , ui '. - -Jzllarerr i'I'"'"l'IL: =“ti-L ~* AS. t1; I: _' n_- l' I" a E Y . y . a i_ . í _. _ ›¡IV 4'- I. .. f: 3, j, A a. ,L : É
  25. 25. .r v¡ . s ? Z à'. »matar-tri "II= I'= ÇÍÍ-"¡Iã!9|§If'§t"-l Nami twat-'Flilalct ¡ÀT-lolhlulu-z : mg again-tal": :l'¡| _o›: -;› -'~1!Il"': IÍl~'tIIÍÍ! lIlllI: l- 'Vi' -taiinnwiliiraiitir arurízlslârzâi › Nãhi¡ §| i"= r=, IZ1_oI›II]| i'r: -*~ iltulaíllÍltlur-: :nrwalalcll : lulíiültll-I . -.| f'glê+-71*Il"= I=IIÊ¡ ¡llllíadnll-_l iíõloñillíÉÍlII-'hiwvlíliiíñi 3íjiilêlíüIJiieL71-twg-. íu : Cl-z _OIIIIIIEIÍIIIJIt-"PÀIÂÍÍÍII -Íãllhlelglá-&Iplríãlâlil »al -: êàulaloílliltlul-siarrasar-Jima 'ÍIFWFÊIIHÊÉ' Síkelrlgta-s-I-¡Hztaiwajpvz iIàt't-'! .!F'êlÍ-JÍ1_ Jill"" Lwílattjn-isa: êâktiimílavzíx-tau-n ¡IalvF-êlílêtálãilárjaiízIiimzsa-itílüilii lztzlííií' ÊÍÍ-JÕÍÂQÍÊI-*ÉIQYÊÍÂKELf itatvugnuenjtggiorgriçxtnene-aja.
  26. 26. sw ÍIIIIÊFVi” al -'IIlIY_Á-"LÍK-“QIllÍ-SÍÍIIIOIUFÊÃÍEÍJQIÍrÍ g_| l"'íl", .¡. -Tl'ÍÍíl4l›. Ív]Z'É -"i'Í3_IÊ| lÍ'ÇÍ5Ê“~*Poll? ?*CIIIIOIOÍÊÍÍEÍJLÇFÍ 'alnliiílil'l_. l=. l›fiêlílé-i inicial¡rwnuiiilecoi'Lo-ra -iàtiilsârti- “ljutirti -, : r: ni'l_. oIi": : -fãlinkia--Polnrííerzoi'Lot-rw A : ñmrã---sãlsiiri 'Lire -ÍÊÍÍRLftQ-*POIIFÊí-'l-&íllsllí 'Lire ; ÍLIIIFÊ-!3C7 «tàlfcrars-Iae-“Fwirrtes-cixaaz-J : s: 4331251?- <l. Í.l, lêl= 'r'llêi: L!I'lNÊljàÍ n' n' D' n' t# TE 'v1 ii; i": f I v" l ri i -i iroirràviãlsiiri 'Listar -iãliiçjraloílssrri--ittnràt --iwiirj 'L Çlxllmlauit-tixoliitj-i . àíiilantilarr. lllnlauilariolitâij-l n' n' u¡ an¡ . l j'
  27. 27. .a lr. . til_ . ..l _t l, lt'3_lil"gílll. rl ? E11 , ílílililíÇlLgp-i at. ; ilistra? ??tvflseiifrlgiaie: naturais; êfézioilsrñztttlñtãettl -l “ljsriàtwriiridiauàttlplsa (tiara: lili¡Vglíâlt-&IUÍÍÊIQIIILH -ÍÊlÍEli-ͧl-9¡$Í¡I'"ÍÍ. lul enIíl-íl: il-tgi-*| .:. rr^ia: -íêtfcrasta-s-igiai-rz: iiiuç§z &JHil-. rrãttl "JE-III 'l -l . I_. Ê.s-“7:ÊT~S'TÂÊÍYii*"ñl. §t+¡ÊÍ! .4gl: :á (lêlfjlslhldld sit: :Ngtiiiii-íi-rrtzciiin -ÍÊÍÍRI-'Iêl-Cipnltíililul trãílílílíillilghllsrfti: : -í§'l. '!t= .I_~1.a-L-àl3r= ai-r: :ilritg: y:
  28. 28. Il vn . i c¡ La . IO z** ' l ; r-*LJLL-Iaii” ; ll Í-r-. lcllggluftlllnloílrl Ícu¡r'o1l= ar": : -fÊlÍcnLia-eiiolnilaru: «mi-urina 'A 'nl tati-Inswai-»e-lyrai-'zjiiigi I'll “tra ghroilitiitgr: ;àlfotan-: It-i-vclpmirjinur; . AL . l íhlpllliiw ilalfolvl. , ; ra~'lria«rtií «l olljiagl-iltítlfs: : Íorkolistt-c-L íF-'çlniíf-"ilf-_lnri ÍlWrI ? ÊiiàllI“'IIF*RUIIÍÍÍJIBÊIIIVJ 'fit-J "ñliíiíf-stítãtelê! 'fãP! II"ÍIP-'¡Í"QÍI, ÍÊ“-'ÇIÉ. ÉÍEÊ , gx 'Aafolàl *Pouitt-ivitazjtgliiíiíc: Ívlolluít-J tlmrzrillrie-foiciifinline -fâlfotzuàiaieclstarrrjlntgl : Lg: é. , i"-'-I0_]! EZ. r'; I(Í›r: ?I”Í'Ê1=Ir' Il «rtallliizalnliiitrt “-: :-? "-: 'getting, -nlsêlõraprraabisnrwlaruizolá hair .
  29. 29. f'
  30. 30. __. _._: n§_›v
  31. 31. Refills são componentes e pacotes pré-definidos, criados com base no Bourbon e N eat. HTTP: //REFILLS. BUURBONJU/
  32. 32. S ÃÊLS BENEPÍETÉ REFELIÂnÉÍST : Vl-fl ÁlÀ-'Íãil-H : Iàlíitl 'l . .Lil - “Qil-? IFÍIJ - III' o: : lsv-lillulflliil-. Íl V me _ , ll - ". ¡¡l! 'l9¡f'êrluI¡IP-*À¡| '._ p? ? - mu' uI-. rt-'luui - qIII-(nlñitlunlct . 314g - qIqIqlniFiÉu-'Iar-*i lgiifÍh-, inl - gI-. Ir'-_ll"l; .-. D:-' - Íiir-lsuqtiielrühilêíf- . gIr'O¡gIr"gO_: Q;§---°ÊII_IP-lllínxqqíífil-ÇIÍI - Íolr'i, l'. 'ln_*lf-_ir' . - Íolqiâikulqr--glp-ggog: : _ - davi); - - ulanihslr'aêt-<unltwlgglelífkvlnt . - ! I-lnlirlsluií. ~ - . ê¡= |'»"'l. ›!la - - -lir-çlel* ~ 'avligl-, III ele' ~ i ¡Lat§r~'ril'. i.aIñI¡rI-. Il ~ = i'*I. .l-I¡, =.r~ . *nt-. líllsçta - = i"'l--. ¡;4I“unao: . - r^-u: c'-¡! Ii~a› 'Mulungu-il - = i"'l. =›: »Í-Inziaç. - : :cama-was A : Bandit-IPAQ - “uni-I _ipi e i'm-faut' - “url, - , with*üalur-gladlulaükrtl. .-2 r g| r"'›--: |›-~~'i1=-= Iiis<›~ 'l luana: - - : ÂÍIfIÇP-SÍYÀWÊIÚIIL~P"IRIGIÃÍHÊI . ;-¡r-›íl. ¡_l~. -~_ia'-iiai¡¡: . - iarma-s-am-uaaiir-swenuu. _ luana¡ . - 'ni-visirr-*FTTJ 'lsr--eiulliil-. íítíu-Iíl - . Íl, _q| IiP--ÍII| _Íl ÇLalb--gn-¡Ílniísí - - Íllnlqgr-_r--zgurr-_IÂÍLêluliir-tíjíluqlull. .91 - , i - "ls¡¡'-tr'-›-~"-|
  33. 33. Êlltliàilítliãíll “ñll l Í “X . li hwevuôlslv ; i lllñêull-ÕJ í' ¡alíllh hsralnlllcxnk* 5g Alrcnmtaiiuii-nl* *ant-Mirant- : I : nua » (ulílllw l , quiri-transmi- m: _Jul-m : ãt-llr-ltn-l-llilnnnir LAnt-têkllhçv L4$KI'. 'NK': *ÍQY l gíllüllL" livra-termo* ""¡l'4'. '›' y r-Iíllh L garmlll-. .yzviaiêi «ati-Alt í-i9íl= "”_*l. a›-; or; Ii'*. -7i l 'Lazwt-ríliisílsvit" -: I 'lsasrnçne*“pranrt= .i "l. 'Lareira: titan-ira« <éítir'. r.-' -:1 'l. §l§| §'*= *"$l'êli"§l 'l 'Larzes-rtzitz_ i. lzf-illi! lll"tíêllií'"r slferírFtàlirsl "l. 'Lana 'IQlͧÍ! l'a'F*À«"'Ê? " : <*. ,«'2't: r.! t~ <16ít: '.! .-' iiitl= °'“_izaep'nlrsi'l 'Latreafsràiizzte glrglmiogl" i: '|_. as-s-= :'“pr; ii¡~; i'l'l. ;›: ç~§r; i_ç: ts_« slrwlgtnçt*-= ;,«'§tí'. lhi
  34. 34. matheuscostacàemailcom about. me/ matheusagcosta OBRIGADO!

×