Tweet
Tweet

Slide 1

Slide 1 text

"SDIJUFDUJOHDPEF PO MBSHF38%QSPKFDUT #FO'SBJO "VUIPS 3FTQPOTJWF8FC%FTJHOXJUI)5.-BOE$44 4FDPOE&EJUJPO  4BTTBOE$PNQBTTGPS%FTJHOFST )5.-$44DPEF

Slide 2

Slide 2 text

@benfrain #RWDSummit *WFXPSLFEPOUIF)5.-BOE$44PGUIFTBNF  MBSHFTDBMF 38%QSPKFDUGPSBDPVQMFPGZFBST *UTBOBQQMJDBUJPOEFOTFXJUI6*DPNQPOFOUT FHOPUUFYUDPOUFOUIFBWZ 

Slide 3

Slide 3 text

@benfrain #RWDSummit -BSHFOVNCFSPGIBOETPOUIF QSPKFDUPSUIFDPNQMFYJUZPGUIF QSPEVDU FHBXFCBQQ 

Slide 4

Slide 4 text

@benfrain #RWDSummit 5VSOTPVUCVJMEJOHB3FTQPOTJWF 8FC%FTJHOJTFBTZ $PNQBSFEUPJUFSBUJOHBOENBJOUBJOJOHPOF 8SJUJOH$44JTOPUEJGGJDVMU,FFQJOHTUZMF TIFFUTTBOFPWFSUJNFJT

Slide 5

Slide 5 text

@benfrain #RWDSummit *USJFEUPBQQMZBDDFQUFEGSPOUFOEXJTEPN %3:PVUDPEF BCTUSBDUWJTVBMQBUUFSOTUP431 4JOHMF3FTQPOTJCJMJUZ1SJODJQMF DMBTTFT  OPSNBMJTFEFTJHOT 00$44 4."$44FUD

Slide 6

Slide 6 text

@benfrain #RWDSummit #VU#VJMEJOHGSPNBCTUSBDU$44 QBUUFSOTNBEFJUFSBUJPOTMPX

Slide 7

Slide 7 text

@benfrain #RWDSummit /FDFTTBSZUPBNFOE$44)5.-FBDI UJNFUIJOHTXFSFDIBOHFE 4PNFUJNFT431DMBTTFTOFFEFESFNPWJOH5IFO BOFXDMBTTBEEJOHKVTUUPHFUUIFSFRVJSFETUZMFT
.actual { width: 66.666%; margin: 0 auto; @include MQ(Mplus) { width: 100%; } }

Slide 8

Slide 8 text

@benfrain #RWDSummit $44CFDBNFMPBEFEXJUITUZMFT BVUIPST JODMVEJOHNF XFSF GFBSGVMUPSFNPWF -PUTPGBCTUSBDUFEDMBTTFTUIBU XFSFMBSHFMZVOVTFE BOE DPVMEOUCFDIBOHFESFNPWFE 

Slide 9

Slide 9 text

@benfrain #RWDSummit 8JUIPVUUIFBCJMJUZUPTBGFMZSFNPWFVOOFFEFE DPEF UIFTUZMFTIFFUTHSFXCMPBUFE

Slide 10

Slide 10 text

@benfrain #RWDSummit .PWJOH DPNQPOFOUQBSUT XJUIJOUIFTJUF XBTCSJUUMF 4IBSJOHBDPNQPOFOUBDSPTT UFBNTXBTGSBVHIUTPNBOZ TUZMFEFQFOEFODJFT DPSSFDU SFTFUT TIBSFEBCTUSBDUJPOT FUD 

Slide 11

Slide 11 text

@benfrain #RWDSummit /POFPGUIFBDDFQUFE BQQSPBDIFTPSUFDIOJRVFT BDUVBMMZTPMWFENZQSPCMFNT
*Admittedly, it was not quite as dramatic as being betrayed by Robert The Bruce.

Slide 12

Slide 12 text

@benfrain #RWDSummit 5IFSFIBEUPCFBOPUIFSXBZ 4VCTFRVFOUMZ *WFCFFOPOBDPEF NBJOUFOBODFPEZTTFZ

Slide 13

Slide 13 text

@benfrain #RWDSummit *EMJLFUPTIBSF XJUIZPVTPNFPG UIFTPMVUJPOT* BSSJWFEBU "OENPSF JNQPSUBOUMZ 4PNFPGUIFCSJDL XBMMT*WFIJU

Slide 14

Slide 14 text

@benfrain #RWDSummit 5SJVNQIT

Slide 15

Slide 15 text

@benfrain #RWDSummit 1SPKFDUPSHBOJTBUJPO .PTUDPNNPO DPOWFOUJPOXIFO CVJMEJOHTJUFTJTUP HSPVQCZUFDIOPMPHZ *OUJNFJUCFDPNFT EJGGJDVMUUPMPDBUF DPOTUJUVFOUQBSUT

Slide 16

Slide 16 text

@benfrain #RWDSummit #ZDPNQPOFOU (SPVQGSPOUFOEDPEFCZ DPNQPOFOU SBUIFSUIBO UFDIOPMPHZ/FWFSOFTU BEEJUJPOBMGPMEFST %FQSFDBUFEBGFBUVSFPS DPNQPOFOU 5IFXIPMF GPMEFSDBOHP

Slide 17

Slide 17 text

@benfrain #RWDSummit .PSFXJOT

Slide 18

Slide 18 text

@benfrain #RWDSummit h 6TF BOEDPOGJHVSF BMJOUJOHUPPM +4)JOU $44MJOU TDTTMJOU h ,FFQBEJBSZBOEEPDT8*5)ZPVS QSPKFDU h &NCSBDFUPPMTMJLFCSPXTFSTZODJP GPSNVMUJCSPXTFSUFTUJOH h 6TF(JU.BLFZPVSDPXPSLFSTVTF JU3FHBSEMFTTPGXIBUZPVUIFZ VTFOPX

Slide 19

Slide 19 text

@benfrain #RWDSummit .JTUBLFT1JUGBMMT

Slide 20

Slide 20 text

@benfrain #RWDSummit h %POUVTFWFOEPSQSFGJYFT )PMB "VUPQSFGJYFS  h "WPJEMJCSBSZNJYJOTUIFZUSBEF DPOWFOJFODFGPSVOEFSTUBOEJOH-BDL QPSUBCJMJUZ h "WPJENBSLVQQBUUFSOTJO$44DPNNFOUT :PVSQBSUJBMOPXTJUTBMPOHTJEFUIF NBSLVQUFNQMBUF h "WPJEDMFWFSDPEF3FTPSUUPDPNQMFYJUZ BTBMBTUSFTPSU h $IFDLZPVSPVUQVU$44 JGQSF QSPDFTTJOH  +

Slide 21

Slide 21 text

@benfrain #RWDSummit ",".ZOBNFJT#FO BOE*NBEEJDUFEUPUSZJOHOFXUPPMT 5PPMJOH

Slide 22

Slide 22 text

@benfrain #RWDSummit 5PPMTDBOIFMQZPVEFBMXJUIZPVSQSPCMFN UIFZ DBOOPUTPMWFJU 5SVFTUPSZPWFSIFBSEEFWFMPQFSTUBMLJOH 8F OFFEUPEFDJEFPOBQSFQSPDFTTPSTPXFDBOGJY PVS$44 #FXBSF:PVDBOIBWFNBJOUBJOBCMF$44GPS38% QSPKFDUTXJUIBHPPEBQQSPBDIBOEOPQSF QSPDFTTPS5IFJOWFSTFJTOPUUSVF

Slide 23

Slide 23 text

@benfrain #RWDSummit %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT 
 5IFOQJDLBTVJUBCMFUFDIOPMPHZ
 &YQFDUUPDIBOHFUPPMT (SVOU(VMQ8IBUFWFS .BLFTUZMFTIFFUTQPSUBCMF $444OJQQFUT4BTT $PNQBTT-JC4BTT "VUPQSFGJYFS 1PTU$44 "VUPQSFGJYFS $BQBCJMJUZJTJNQPSUBOU UFDIOPMPHZJTOPU

Slide 24

Slide 24 text

@benfrain #RWDSummit &OEVSJOH$44

Slide 25

Slide 25 text

@benfrain #RWDSummit *UIJOL*WFUSJFEWJSUVBMMZFWFSZBQQSPBDIUPXSJUJOH NBJOUBJOBCMF$44 ¨$44BSDIJUFDUVSBMBQQSPBDIFT BSFUIFEJFUQJMMPGGSPOUFOE EFWFMPQFST© "OEDSFBUFETPNFBQQSPBDIFTCFTUMFGUVOEPDVNFOUFE "MUIPVHI*XJMMTIBSFPOF

Slide 26

Slide 26 text

@benfrain #RWDSummit *UXBTDBMMFE145 1PTJUJPO4USVDUVSF5IFNF

Slide 27

Slide 27 text

@benfrain #RWDSummit .BSLVQMPPLFEMJLFUIJT
"EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF 431 %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ BQQMZ38%FWFOUVBMJUJFT DON’T DO THIS

Slide 28

Slide 28 text

@benfrain #RWDSummit *NPGUIF TMJHIUMZDPOUSPWFSTJBM PQJOJPOUIBU431 00$44BCTUSBDUJPOTBSF38%BOENBJOUFOBODFBOUJ QBUUFSOT 8JUI38% DPNQPOFOUTPGUFOIBWFEJGGFSFOUWJTVBM USFBUNFOUTBUEJGGFSFOUTJ[FT 6TJOHDMBTTFTUIBUTQFDJGJDBMMZEFGJOFTUSVDUVSF  QPTJUJPOPSUIFNFBSFJOIFSFOUMZQSPCMFNBUJDXIFO UIBUTUSVDUVSF QPTJUJPOPSUIFNFNBZOFFEUPDIBOHF

Slide 29

Slide 29 text

@benfrain #RWDSummit 0, IPUTIPU XIBUEP ZPVSFDPNNFOE *DBMMJU&OEVSJOH$44

Slide 30

Slide 30 text

@benfrain #RWDSummit ¨5XPZFBSTBHP*XSPUFBCPPLXIFSF*XBT QSFBDIJOH%3:DPEF CVUBGUFSXPSLJOHPOFOEVSJOH QSPKFDUT ##$/FXTBOEUIFHVBSEJBODPN JUT EFDPVQMJOHUIBUCFDBNFNPSFJNQPSUBOUUPNF© ,BFMJH%FMPVNFBV 'SPOUFOEEFWFMPQFS '5-BCT

Slide 31

Slide 31 text

@benfrain #RWDSummit 'MBUIJFSBSDIZPGTFMFDUPST 5PNJUJHBUFTFMFDUPSTQFDJGJDJUZyOPOFTUJOHGPSDPOUFYU /BNFTQBDFEDPNQPOFOUT 1SPWJEFTTFMGRVBSBOUJOJOHVOJUQSFWFOUTDPMMJTJPO NBLFT DPNQPOFOUTQPSUBCMFTJNQMFUPEFQSFDBUFSFNPWF /PSFTFUOPSNBMJ[FSVMFT &WFSZUIJOHJTTFMGDPOUBJOFE &OEVSJOH$44IBMMNBSLT

Slide 32

Slide 32 text

@benfrain #RWDSummit /PBCTUSBDUJPO 'BWPVSFODBQTVMBUJPOPGTUZMFTPWFSBCTUSBDUJPOBOESF VTF &NCSBDFSFQFUJUJPO ([JQ'58 %POUOPSNBMJTF (PPEEFTJHOFSTEPOUDIBOHFUIJOHTBSCJUSBSJMZ$SFBUFB OFXDPNQPOFOUXIFOWJTVBMTEJWFSHF "OUJ[FJUHFJTUQSJODJQMFT

Slide 33

Slide 33 text

@benfrain #RWDSummit &YBNQMFDPNQPOFOU

The Title

Callout Hero

Product Info etc.

$POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ WBHVFTQFDJGJD

Slide 34

Slide 34 text

@benfrain #RWDSummit .ip-SubHeader_Wrapper { @include Headline; @include FlexCenter; font-size: $text12; background-color: $color-grey-54; border-bottom: 1px solid hsbbrighten($color-grey-54, -3); min-height: $size-fine-quadruple; @include MQ(Mplus) { background-color: $color-grey-a7; color: $color-grey-54; font-size: $text13; min-height: 22px; border-bottom: 1px solid $color-grey-54; border-top: 1px solid transparentize($color-white, .85); } } 0OFSVMFUPEFGJOFUIFNBMM

Slide 35

Slide 35 text

@benfrain #RWDSummit &SS#MPBU 1SPEVDUJPO$44GJMFVTJOH&OEVSJOH$44NFUIPET XFJHIFEJOBU,# ([JQQFE  .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } 3FQFBUFEUJNFT 3FQFBUFEUJNFT "CTUSBDUJOHUPB00$44DMBTTTBWFEKVTU,# GJMFTJ[F,# ([JQQFE 

Slide 36

Slide 36 text

@benfrain #RWDSummit %FDJEFPOBOBNJOHDPOWFOUJPO
 PSQJDLBCBUUMFUFTUFEGPSNBUMJLF#&.  .namespace-Component_ComponentSection-variant { /* Styles */ } "OEFOGPSDFJU var testPattern = new RegExp("/\.(\w*)+\-+(([A-Z][a-z]+)+$)/g");

Slide 37

Slide 37 text

@benfrain #RWDSummit #PSSPXTUFBMVTFGVMDPOWFOUJPOTBOE BQQSPBDIFT .oc-Menu_Wrapper { /* All the Styles */ transition: transform .35s; // Modernizr until @supports is ubiquitous .csstransforms3d & { transform: translate3d(0, -200px, 0); transition: transform .35s; } // When Off Canvas invoked: .has-OffCanvasActive.csstransforms3d & { transform: translate3d(0, 0, 0); } }

Slide 38

Slide 38 text

@benfrain #RWDSummit &OEVSJOH$44 IUUQCFOGSBJOR /BNJOHSBUJPOBMF IUUQCFOGSBJOJ "SHVJOHBHBJOTU00$44"UPNJD$44GPS38% IUUQCFOGSBJOK .PSFPO&OEVSJOH$44

Slide 39

Slide 39 text

@benfrain #RWDSummit 8IFSFJO*IPQFUPOPUTPVOEQBUSPOJTJOH 'BUIFSMZBEWJDF

Slide 40

Slide 40 text

@benfrain #RWDSummit 4PMWFZPVSPXOQSPCMFNT*GZPVTPMWFZPVS PXOQSPCMFNTZPVDBOOPUCFEPJOHJUXSPOH 1BSTFJOGPSNBUJPOJOSFMBUJPOUPZPVSDPOUFYU .ZTPMVUJPOTTPMWFQSPCMFNT*IBE5IPTF QSPCMFNTNBZOPUBMJHOXJUIZPVST "UUIFPVUTFU EFGJOFUIFDIBSBDUFSJTUJDTZPV XJTIUPCFJOIFSFOUJOZPVSDPEFCBTF

Slide 41

Slide 41 text

@benfrain #RWDSummit 1MFOUZPGTNBSUQFPQMFJOUFSFTUFE $44BSDIJUFDUVSF5IFJSTPMVUJPOT BQQSPBDIFTNBZCFNPSFBQUGPS ZPVSTDFOBSJP JOOPQBSUJDVMBSPSEFS  !OFDPMBT /JDPMBT(BMMBHIFS  !TUVCCFSOFMMB /JDPMF4VMMJWBO  !TOPPLDB +POBUIBO4OPPL  !UIJFSSZLPCMFOU[ 5IJFSSZ,PCMFOU[ 
 !DTTXJ[BSESZ )BSSZ3PCFSUT  !LBFMJH ,BFMJH%FMPVNFBV

Slide 42

Slide 42 text

@benfrain #RWDSummit 4VNNBSZ

Slide 43

Slide 43 text

@benfrain #RWDSummit 4PPOXFXJMMIBWFXFCDPNQPOFOUT TUZMF FODBQTVMBUJPOBTTUBOEBSE  *OUIFNFBOUJNFXFOFFEUPEFWJTFXBZTUP LFFQDPEFNBJOUBJOBCMFGPSPVSTFMWFTBOE TVCTFRVFOUMZUSJNGPSPVSVTFST 5IFSFBSFNBOZXBZTUPEPUIJT'JOEZPVST

Slide 44

Slide 44 text

@benfrain #RWDSummit %PDVNFOUUIFQSPCMFNTZPV IBWFBOETIBSFUIFTPMVUJPOT ZPVBSSJWFBU

Slide 45

Slide 45 text

5IF&OE 5IBOLZPVGPSZPVSBUUFOUJPO !CFOGSBJO CFOGSBJODPN .Z#PPLT 4PDJBM8FC