Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Architecting Code on Large RWD Projects

Ben Frain
March 12, 2015

Architecting Code on Large RWD Projects

Slides from a talk given at the 2015 RWD Summit

When architecting CSS for a large scale project it's a common aim to abstract visual patterns for re-use, DRY out code and normalise our designs as much as possible. However, for rapidly changing projects, I'm no longer convinced those principles should necessarily be followed to the nth degree, nor that they offer the biggest wins.

This session covers what I consider the most advantageous practices and approaches when authoring CSS for a rapidly changing, large scale web project.

Ben Frain

March 12, 2015
Tweet

More Decks by Ben Frain

Other Decks in Programming

Transcript

  1. @benfrain #RWDSummit h 6TF BOEDPOGJHVSF BMJOUJOHUPPM +4)JOU $44MJOU TDTTMJOU h

    ,FFQBEJBSZBOEEPDT8*5)ZPVS QSPKFDU h &NCSBDFUPPMTMJLFCSPXTFSTZODJP GPSNVMUJCSPXTFSUFTUJOH h 6TF(JU.BLFZPVSDPXPSLFSTVTF JU3FHBSEMFTTPGXIBUZPVUIFZ VTFOPX
  2. @benfrain #RWDSummit h %POUVTFWFOEPSQSFGJYFT )PMB "VUPQSFGJYFS  h "WPJEMJCSBSZNJYJOTUIFZUSBEF DPOWFOJFODFGPSVOEFSTUBOEJOH-BDL

    QPSUBCJMJUZ h "WPJENBSLVQQBUUFSOTJO$44DPNNFOUT :PVSQBSUJBMOPXTJUTBMPOHTJEFUIF NBSLVQUFNQMBUF h "WPJEDMFWFSDPEF3FTPSUUPDPNQMFYJUZ BTBMBTUSFTPSU h $IFDLZPVSPVUQVU$44 JGQSF QSPDFTTJOH  +
  3. @benfrain #RWDSummit %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT 
 5IFOQJDLBTVJUBCMFUFDIOPMPHZ
 &YQFDUUPDIBOHFUPPMT (SVOU(VMQ8IBUFWFS .BLFTUZMFTIFFUTQPSUBCMF

    $444OJQQFUT4BTT $PNQBTT-JC4BTT "VUPQSFGJYFS 1PTU$44 "VUPQSFGJYFS $BQBCJMJUZJTJNQPSUBOU UFDIOPMPHZJTOPU
  4. @benfrain #RWDSummit .BSLVQMPPLFEMJLFUIJT <div class=“p1 s3 t4"></div> "EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF

    431 %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ BQQMZ38%FWFOUVBMJUJFT DON’T DO THIS
  5. @benfrain #RWDSummit *NPGUIF TMJHIUMZDPOUSPWFSTJBM PQJOJPOUIBU431 00$44BCTUSBDUJPOTBSF38%BOENBJOUFOBODFBOUJ QBUUFSOT 8JUI38% DPNQPOFOUTPGUFOIBWFEJGGFSFOUWJTVBM USFBUNFOUTBUEJGGFSFOUTJ[FT

    6TJOHDMBTTFTUIBUTQFDJGJDBMMZEFGJOFTUSVDUVSF  QPTJUJPOPSUIFNFBSFJOIFSFOUMZQSPCMFNBUJDXIFO UIBUTUSVDUVSF QPTJUJPOPSUIFNFNBZOFFEUPDIBOHF
  6. @benfrain #RWDSummit &YBNQMFDPNQPOFOU <div class="hp-Callout_Wrapper"> <h1 class="hp-Callout_Title">The Title</h1> <img class="hp-Callout_Img"

    src="hp- Callout_1.jpg/" srcset="[email protected] 2x" alt="Callout Hero"/> <p class="hp-Callout_Info">Product Info etc.</p> </div> $POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ WBHVFTQFDJGJD
  7. @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
  8. @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 
  9. @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); } }
  10. @benfrain #RWDSummit 1MFOUZPGTNBSUQFPQMFJOUFSFTUFE $44BSDIJUFDUVSF5IFJSTPMVUJPOT BQQSPBDIFTNBZCFNPSFBQUGPS ZPVSTDFOBSJP JOOPQBSUJDVMBSPSEFS  !OFDPMBT /JDPMBT(BMMBHIFS

     !TUVCCFSOFMMB /JDPMF4VMMJWBO  !TOPPLDB +POBUIBO4OPPL  !UIJFSSZLPCMFOU[ 5IJFSSZ,PCMFOU[ 
 !DTTXJ[BSESZ )BSSZ3PCFSUT  !LBFMJH ,BFMJH%FMPVNFBV