Front -End Web Development

["Bronze\tChallenge:\tColor\tChange Change\tthe\tbackground\tcolor\tstyles\tfor\tbody.\tUse\tthe\tcolor\tpicker\tin\tthe\tDevTools (Figure\t3.21)\tto\thelp\tyou\tchoose\tone. For\ta\tmore\tsophisticated\tcolor\tpalette,\tgo\tto\tcolor.adobe.com\tand\tcreate\tyour\town scheme\tfor\tthe\tbody\tand\t.thumbnail-title\tbackground\tcolors.","For\tthe\tMore\tCurious:\tSpecificity!\tWhen\tSelectors Collide\u2026 You\thave\talready\tseen\thow\tyou\tcan\toverride\tstyles.\tYou\tincluded\tthe\tlink\tfor normalize.css\tbefore\tthe\tone\tfor\tstyles.css,\tfor\texample.\tThis\tmade\tthe browser\tuse\tnormalize.css\u2019s\tstyles\tas\ta\tbaseline,\twith\tyour\tstyles\ttaking\tprecedence over\tthe\tbaseline\tstyles. This\tis\tthe\tfirst\tbasic\tconcept\tof\thow\tthe\tbrowser\tchooses\twhich\tstyles\tto\tapply\tto\tthe elements\ton\tthe\tpage,\tknown\tto\tfront-end\tdevelopers\tas\trecency:\tAs\tthe\tbrowser\tprocesses CSS\trules,\tthey\tcan\toverride\trules\tthat\twere\tprocessed\tearlier.\tYou\tcan\tcontrol\tthe\torder\tin which\tthe\tbrowser\tprocesses\tCSS\tby\tchanging\tthe\torder\tof\tthe\t<link>\ttags. This\tis\tsimple\tenough\twhen\tthe\trules\thave\tthe\tsame\tselector\t(for\texample,\tif\tyour\tCSS and\tnormalize.css\twere\tto\tdeclare\ta\tdifferent\tmargin\tfor\tthe\tbody\telement).\tIn\tthis case,\tthe\tbrowser\tchooses\tthe\tmore\trecent\tdeclaration.\tBut\twhat\tabout\telements\tthat\tare matched\tby\tmore\tthan\tone\tselector? Say\tyou\thad\tthese\ttwo\trules\tin\tyour\tOttergram\tCSS: .thumbnail-item\t{ \t\tbackground:\tblue; \t\t} li\t{ \t\tbackground:\tred; } Both\tof\tthese\tmatch\tyour\t<li>\telements.\tWhat\tbackground\tcolor\twill\tyour\t<li>\telements have?\tEven\tthough\tthe\tli\t{\tbackground:\tred;\t}\trule\tis\tmore\trecent,\t.thumbnail-item {\tbackground:\tblue;\t}\twill\tbe\tused.\tWhy?\tBecause\tit\tuses\ta\tclass\tselector,\twhich\tis more\tspecific\t(i.e.,\tassigned\ta\thigher\tspecificity\tvalue)\tthan\tthe\telement\tselector. Class\tselectors\tand\tattribute\tselectors\thave\tthe\tsame\tdegree\tof\tspecificity,\tand\tboth\thave\ta higher\tspecificity\tthan\telement\tselectors.\tThe\thighest\tdegree\tof\tspecificity\tgoes\tto\tID selectors,\twhich\tyou\thave\tnot\tseen\tyet.\tIf\tyou\tgive\tan\telement\tan\tid\tattribute,\tyou\tcan write\tan\tID\tselector\tthat\tis\tmore\tspecific\tthan\tany\tother\tselector. ID\tattributes\tlook\tlike\tother\tattributes.\tFor\texample: <li\tclass=\\\"thumbnail-item\\\"\tid=\\\"barry-otter\\\"> To\tuse\tthe\tID\tin\ta\tselector,\tyou\tprefix\tit\twith\t#: .thumbnail-item\t{ \t\tbackground:\tblue; } #barry-otter\t{ \t\tbackground:\tgreen; } li\t{ \t\tbackground:\tred; } In\tthis\texample,\tthe\t<li>\tis\tmatched\tby\tall\tthree\tselectors,\tbut\tit\twill\thave\ta\tgreen background\tbecause\tthe\tID\tselector\thas\tthe\thighest\tspecificity.\tThe\torder\tof\tyour\trulesets makes\tno\tdifference\there,\tbecause\teach\thas\ta\tdifferent\tspecificity.","One\tnote\tabout\tusing\tID\tselectors:\tIt\tis\tbest\tto\tavoid\tthem.\tID\tvalues\tmust\tbe\tunique\tin the\tdocument,\tso\tyou\tcannot\tuse\tthe\tid=\\\"barry-otter\\\"\tattribute\tfor\tany\tother\telement\tin your\tdocument.\tEven\tthough\tID\tselectors\thave\tthe\thighest\tspecificity,\ttheir\tassociated styles\tcannot\tbe\treused,\tmaking\tthem\ta\tmaintenance\t\u201cworst\tpractice.\u201d To\tlearn\tmore\tabout\tspecificity,\tgo\tto\tthe\tMDN\tpage\tdeveloper.mozilla.org\/\u200b en-US\/d\u200b ocs\/\u200bWeb\/\u200bCSS\/\u200bSpecificity. The\tSpecificity\tCalculator\tat\tspecificity.keegan.st\tis\ta\tgreat\ttool\tfor\tcomparing the\tspecificty\tof\tdifferent\tselectors.\tCheck\tit\tout\tto\tget\ta\tmore\tprecise\tunderstanding\tof how\tspecificity\tis\tcomputed.","4\t Responsive\tLayouts\twith\tFlexbox One\tof\tthe\tduties\tof\tfront-end\tdevelopers\tis\tto\tprovide\tthe\tbest\texperience\tto\tusers regardless\tof\twhat\tdevice\tor\tbrowser\tthey\tare\tusing. This\twas\tnot\talways\tthe\tprevailing\tattitude,\tand\tthe\tcompanies\tthat\tmade\tbrowsers\twere partly\tto\tblame.\tIn\tthe\tearly\tdays\tof\tthe\tweb,\tbrowser\tmakers\twere\tfighting\ta\twar.\tEach would\tinvent\tnew\tnonstandard\tfeatures\tin\tan\tattempt\tto\tout-do\tthe\tothers.\tIn\tresponse, web\tdevelopers\tcame\tup\twith\tschemes\tfor\tdetecting\twhich\tbrowser\twas\trequesting\ta document\tand\twhat\tscreen\tsize\twas\tbeing\tused.\tBased\ton\tthis\tinformation,\ta\tdifferent version\tof\tthe\tdocument\twas\tserved\tout. Sadly,\tthis\tmeant\tthat\tfront-end\tdevelopment\tbecame\tweighed\tdown\twith\tcreating multiple\tcopies\tof\tevery\tpage\ton\ta\tsite,\teach\tcopy\tbuilt\twith\tthe\tmarkup\tand\tstyles\tthat would\twork\tfor\ta\tspecific\tversion\tof\ta\tbrowser\trunning\tat\ta\tparticular\tscreen\tsize. Maintaining\tall\tof\tthese\tcopies\twas\tboth\ttime\tconsuming\tand\tfrustrating. Thankfully,\tthe\tBrowser\tWars\tare\tover,\tand\tbrowser\tmakers\tnow\tstrive\tto\tconform\tto\tthe same\tset\tof\tstandard\tfeatures\t\u2013\tand\tmodern\tfront-end\tdevelopers\tare\tfree\tto\tfocus\ton\ta single\tcodebase\tfor\ta\twebsite.\tGone\tare\tthe\tdays\tof\tneeding\tto\tcreate\tbrowser-specific versions\tof\ta\tpage.\tBut\tthat\tdoes\tnot\tmean\tthat\tdevelopers\tcan\tno\tlonger\tprovide\ttailored pages\tbased\ton\tdifferent\tscreen\tsizes\tor\torientations.\tNew\ttechnologies\t\u2013\tlike\tflexbox, which\tyou\twill\tlearn\tabout\tin\tthis\tchapter\t\u2013\tallow\tlayouts\tto\tadjust\tto\tthe\tuser\u2019s\tscreen size\twithout\trequiring\tduplicate\tdocuments. In\tthis\tchapter,\tyou\tare\tgoing\tto\texpand\tOttergram\tfrom\ta\tsimple\tlist\tof\timages\tto\ta\tproper user\tinterface\tready\tfor\tinteractive\tcontent.\tUsing\tflexbox\tand\tCSS\tpositioning,\tyou\twill build\ta\tset\tof\tinterface\tcomponents\tthat\tadjust\tas\tneeded\tto\tvariations\tin\tthe\tsize\tof\tthe browser\twindow\twhile\tmaintaining\tthe\toverall\tlayout.\tAt\tthe\tend\tof\tthe\tchapter, Ottergram\twill\tfeature\ta\tscrolling\tlist\tof\tthumbnail\timages\tand\tan\tarea\tthat\tdisplays\ta large,\tdetailed\tversion\tof\ta\tsingle\timage\t(Figure\t4.1).","Figure\t4.1\t\tOttergram\twith\tflexible\tlayout You\twill\tdo\tthis\tin\ttwo\tparts.\tFirst,\tyou\twill\tadd\tthe\tminimal\tmarkup\tand\tstyles\tnecessary to\tshow\tthe\tlarge\timage\ton\tthe\tpage\tand\tto\tmake\tthe\tthumbnails\tsmaller\tand\tscrollable. Then,\tyou\twill\tadd\tstyles\tthat\tlet\tparts\tof\tthe\tpage\tstretch\tand\tshrink\tas\tthe\twindow changes\tsize\tor\tto\taccommodate\tscreens\tof\tdifferent\tsizes. Expanding\tthe\tInterface Since\tthe\tintroduction\tof\tthe\tiPhone,\tthe\ttrend\ttoward\taccessing\tthe\tinternet\tvia\ta smartphone,\trather\tthan\ta\tdesktop\tor\tlaptop,\thas\tgrown\tsteadily. For\tfront-end\tdevelopers,\tthis\ttrend\thas\tmeant\tthat\tmobile-first\tdevelopment\thas\tproven\tto be\tthe\tbest\tdesign\tapproach:\tdesigning\tfor\tsmall\tscreens\tfirst,\tthen\tbuilding\ton\tthat\tdesign for\ttablet-size\tscreens,\tand\tfinally\tbuilding\tup\tto\ta\tdesktop-sized\tdesign. Ottergram\u2019s\tsimple\tlayout\tis\talready\tmobile-friendly.\tIt\tdisplays\tthe\ttext\tand\timages\tat\ta scale\tthat\tis\tappropriate\tfor\tsmaller\tscreen\tsizes.\tBecause\tof\tthis,\tyou\tcan\tmove\tright\tinto adding\tthe\tnext\tlevel\tof\tcomplexity\tto\tyour\tlayout. A\tvertically\tscrolling\tlist\tof\totters\tis\tfine,\tbut\tit\twould\tbe\teven\tbetter\tif\tthe\tuser\tcould\talso see\ta\tlarger\tversion\tof\tthe\timages.\tThe\tplan\tfor\tOttergram\tis\tto\tmake\tthe\tthumbnail\tlist scroll\thorizontally\twhile\ta\tlarger\tdetail\timage\tis\tfeatured.\tFor\tnow,\tthe\tdetail\timage\twill\tbe below\tthe\tlist.\tThis\tplan\tis\tdiagrammed\tin\tFigure\t4.2.","Figure\t4.2\t\tNew\tlayout\tfor\tOttergram You\twill\tbegin\tby\tadding\tthe\tdetail\timage. Adding\tthe\tdetail\timage For\tnow,\tyour\tdetail\timage\twill\tbe\tfixed\tto\ta\tsingle\timage.\tIn\tChapter\t6\tyou\twill\tadd functionality\tso\tthat\tthe\tuser\tcan\tclick\ton\ta\tthumbnail\tto\tmake\tany\timage\tthe\tdetail\timage. Add\ta\tnew\tsection\tof\tcode\tto\tcreate\tthe\tdetail\timage\tin\tindex.html: ... \t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter5.jpg\\\"\talt=\\\"Barbara\tthe\tOtter\\\"> \t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Barbara<\/span> \t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t<\/li> \t\t\t\t<\/ul> \t\t\t\t<div\tclass=\\\"detail-image-container\\\"> \t\t\t\t\t\t<img\tclass=\\\"detail-image\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t<span\tclass=\\\"detail-image-title\\\">Stayin'\tAlive<\/span> \t\t\t\t<\/div> \t\t<\/body> <\/html> You\tadded\ta\t<div>\twith\ta\tdetail-image-container\tclass.\tA\t<div>\tis\ta\tgeneric\tcontainer for\tcontent\t\u2013\tusually\tfor\tthe\tpurpose\tof\tapplying\tstyling\tto\tthe\tenclosed\tcontent,\twhich\tis exactly\thow\tyou\twill\tuse\tit. Inside\tthe\t<div>\tyou\tadded\tan\t<img>\ttag\tto\tdisplay\tthe\tlarge\tversion\tof\tthe\totter\timage. You\talso\tadded\ta\t<span>,\twhich\twraps\taround\tthe\ttitle\ttext\tfor\tthe\tdetail\timage.\tYou\tgave the\t<img>\tand\t<span>\ttags\tthe\tclass\tnames\tdetail-image\tand\tdetail-image-title, respectively. Save\tindex.html,\tswitch\tto\tstyles.css,\tand,\tat\tthe\tend,\tconstrain\tthe\twidth\tof\tyour","new\t.detail-image\tclass. ... .thumbnail-title\t{ \t\t... } .detail-image\t{ \t\twidth:\t90%; } Save\tstyles.css\tand\tstart\tbrowser-sync\tto\topen\tyour\tproject\tin\tChrome\t(Figure\t4.3). (The\tcommand\tis\tbrowser-sync\tstart\t--server\t--browser\t\\\"Google\tChrome\\\"\t-- files\t\\\"stylesheets\/*.css,\t*.html\\\".) Figure\t4.3\t\tInitial\tstyling\tfor\tthe\tdetail\timage Your\t.detail-image\twill\tappear\tat\tthe\tbottom\tof\tthe\tpage,\ta\tbit\tnarrower\tthan\tyour thumbnails.\tBy\tmaking\tthe\tdetail\timage\t90%\tof\tits\tcontainer\u2019s\twidth,\tyou\thave\tleft\ta\tlittle space\tnext\tto\tit.\tThe\tbrowser\tputs\tthe\ttext\tof\tthe\t.detail-image-title\tin\tthat\tspace.\t(You will\tstyle\tthat\ttext\tlater\tin\tthis\tchapter.) If\tyou\tresize\tthe\tpage,\tyou\twill\tdiscover\ta\tbug:\tThe\tdetail\timage\tmay\tbe\tpushed\tout\tof view\tby\tthe\tthumbnails\tas\tthey\tadjust\tto\tthe\tnew\twidth.\tYou\twill\taddress\tthis\tproblem later\tin\tthis\tchapter. Horizontal\tlayout\tfor\tthumbnails Next,\tyou\twill\tupdate\tthe\t.thumbnail-list\tand\t.thumbnail-item\tclasses\tso\tthat\tthe images\tscroll\thorizontally. To\thelp\tyou\ttest\tyour\tscrolling,\tduplicate\tall\tfive\t<li>\telements\tin\tindex.html.\tThis will\tgive\tyou\tlots\tof\tcontent\tto\tscroll\tthrough.\tTo\tdo\tthis,\tsimply\tselect\tall\tof\tthe\tlines between\t<ul\tclass=\\\"thumbnail-list\\\">\tand\t<\/ul>,\tcopy\tthem,\tand\tpaste\tthe\tresult\tjust","above\tthe\t<\/ul>.\tYou\tshould\tend\tup\twith\t10\tlist\titems,\tcontaining\timages\totter1.jpg through\totter5.jpg\ttwice. Be\tsure\tto\tsave\tindex.html\twhen\tyou\tare\tdone.\tDuplicating\tcontent\twhile\tyou\tare developing\tis\ta\tgood\ttechnique\tfor\tsimulating\ta\tmore\trobust\tproject.\tIt\tallows\tyou\tto\tsee how\tyour\tcode\thandles\treal-world\tsituations. For\ta\thorizontally\tscrolling\tlist\tof\tthumbnails,\teach\tthumbnail\tmust\tbe\tconstrained\tto\ta specific\twidth\tand\tthe\tthumbnails\tshould\tbe\tlaid\tout\thorizontally\ton\ta\tsingle\tline. The\tdisplay:\tblock\tproperty,\twhich\tyou\thave\tused\tseveral\ttimes,\twill\tnot\tcreate\tthe desired\teffect.\tIt\tcauses\tthe\tbrowser\tto\trender\ta\tline\tbreak\tbefore\tand\tafter\tthe\telement. However,\ta\trelated\tstyle,\tdisplay:\tinline-block,\tis\tperfect\tfor\tthis\tsituation.\tWith inline-block,\tthe\telement\u2019s\tbox\tis\tdrawn\tas\tif\tyou\tdeclared\tdisplay:\tblock,\tbut\twithout the\tline\tbreaks\t\u2013\tallowing\tyour\tthumbnails\tto\tstay\tlined\tup\tin\ta\trow. Add\ta\twidth\tdeclaration\tand\tchange\tthe\tdisplay\tdeclaration\tfor\tthe\t.thumbnail-item class\tin\tstyles.css. ... .thumbnail-item\t{ \t\tdisplay:\tblock; \t\tdisplay:\tinline-block; \t\twidth:\t120px; \t\tborder:\t1px\tsolid\trgb(100%,\t100%,\t100%,\t0.8); \t\tborder:\t1px\tsolid\trgba(100%,\t100%,\t100%,\t0.8); } ... (Note\tthat\tAtom\u2019s\tlinter\tmay\twarn\tyou\tthat\t\u201cUsing\twidth\twith\tborder\tcan\tsometimes\tmake elements\tlarger\tthan\tyou\texpect.\u201d\tThis\tis\tbecause\tthe\twidth\tproperty\tonly\tapplies\tto\tthe content\tportion\t\u2013\tnot\tthe\tpadding\tor\tborder\t\u2013\tof\tthe\telement\u2019s\tbox.\tYou\tdo\tnot\tneed\tto\tdo anything\tabout\tthis\twarning.) With\tthe\t.thumbnail-item\telement\u2019s\twidth\tset\tto\tan\tabsolute\tvalue\tof\t120px,\tthe .thumbnail-image\tis\teffectively\tfixed\tas\twell,\tsince\tthe\t.thumbnail-image\tadjusts\tto\tits container\u2019s\twidth. Why\tnot\tjust\tset\tthe\t.thumbnail-image\tto\twidth:\t120px?\tYou\twant\tthe\t.thumbnail- image\tand\tthe\t.thumbnail-title\tto\tbe\tthe\tsame\twidth.\tInstead\tof\tsetting\tthe\twidth property\tfor\teach\tof\tthese,\tyou\tset\tit\ton\ttheir\tcommon\tparent\telement.\tThat\tway,\tif\tyou need\tto\tchange\tthe\twidth,\tyou\tonly\tneed\tto\tchange\tit\tin\tone\tplace.\tGenerally,\tit\tis\ta\tgood practice\tto\thave\tinner\telements\tadapt\tto\ttheir\tcontainers. Save\tstyles.css\tand\tcheck\tyour\tpage\tin\tChrome.\tYou\tcan\tsee\tthat\tthe\t.thumbnail- item\telements\tline\tup\tside\tby\tside\t\u2013\tbut\twhen\tthey\tfill\tthe\twidth\tof\ttheir\tcontainer,\tthey wrap\taround\t(Figure\t4.4).","Figure\t4.4\t\tinline-block\tcreates\trows\tthat\twrap To\tget\tthe\tscrolling\tbehavior\tyou\twant,\tset\t.thumbnail-list\tto\tprevent\twrapping\tand allow\tscrolling\tin\tstyles.css. ... .thumbnail-list\t{ \t\tlist-style:\tnone; \t\tpadding:\t0; \t\twhite-space:\tnowrap; \t\toverflow-x:\tauto; } ... The\twhite-space:\tnowrap\tdeclaration\tprevents\tthe\t.thumbnail-item\telements\tfrom wrapping.\tThe\toverflow-x:\tauto\ttells\tthe\tbrowser\tthat\tit\tshould\tadd\ta\tscrollbar\talong\tthe horizontal\tspace\t(the\tx\taxis)\tof\tthe\t.thumbnail-list\telement\tto\taccommodate\tcontent that\toverflows\t\u2013\ti.e.,\tdoes\tnot\tfit\twithin\tthe\t.thumbnail-list.\tWithout\tthis\tdeclaration, you\twould\thave\tto\tscroll\tthe\tentire\tweb\tpage\tto\tsee\tthe\tadditional\tthumbnails. Save\tyour\tfile\tagain\tand\ttake\ta\tlook\tat\tthe\tresults\tin\tyour\tbrowser.\tThe\tthumbnails\tare now\tin\ta\tsingle\trow,\tand\tyou\tshould\tbe\table\tto\tscroll\tthrough\tthem\thorizontally (Figure\t4.5).","Figure\t4.5\t\tHorizontally\tscrolling\tthumbnails This\tis\ta\tgood\tstart\tto\tthe\tenhanced\tOttergram\tinterface.\tIt\tworks\tjust\tfine\tfor\tsome\tscreen sizes.\tHowever,\tit\tis\tnot\tperfect,\tbecause\tit\tdoes\tnot\tadapt\twell\tto\ta\twide\trange\tof\tsizes\t\u2013 especially\tthose\tthat\tare\tmuch\tlarger\tor\tsmaller\tthan\tthe\tcomputer\tyou\tare\tcurrently\tusing. In\tthe\tnext\ttwo\tsections,\tyou\twill\tadd\tcode\tthat\tgives\tOttergram\ta\tmore\tfluid\tlayout\tand allows\tits\tUI\t-\tits\tuser\tinterface\t-\tto\tshift\tbetween\tdifferent\tlayouts\tto\tadapt\tto\tranges\tof screen\tsizes.","Flexbox You\thave\tseen\tdisplay\tstyles\tspecifying\tthe\tproperties\tblock\tand\tinline.\tInline elements,\tlike\tthe\tthumbnail\titems\tin\tyour\tnewly\tscrolling\tlist,\tare\tlaid\tout\tnext\tto\tone another,\twhile\tblock\telements\toccupy\ttheir\town\thorizontal\tline. Another\tway\tto\tthink\tof\tthis\tis\tthat\tblock\telements\tflow\tfrom\ttop\tto\tbottom\tand\tinline elements\tflow\tfrom\tleft\tto\tright\t(Figure\t4.6). Figure\t4.6\t\tBlock\tvs\tinline\telements The\tdisplay\tproperty\ttells\tthe\tbrowser\thow\tan\telement\tshould\tflow\tin\tthe\tlayout.\tFor blogs\tor\tonline\tencyclopedias,\tthe\tinline\tand\tblock\tvalues\twork\twell.\tBut\tfor application-style\tlayouts\tlike\tweb-based\temail\tand\tsocial\tmedia\tsites,\tthere\tis\ta\tnew\tCSS specification\tthat\tallows\telements\tto\tflow\tmore\tdynamically.\tThis\tis\tthe\tflexible\tbox model,\tor\tflexbox. Flexbox\tCSS\tproperties\tcan\tensure\tthat\tthumbnail\tand\tdetail\tareas\tfill\tthe\tscreen\tand maintain\ttheir\tproportions\trelative\tto\tone\tanother.\tThis\tis\texactly\twhat\tyou\tneed\tfor Ottergram.\tYou\tcan\talso\tuse\tflexbox\tproperties\tto\tcenter\tthe\tcontents\tof\tthe\tdetail\tarea both\thorizontally\tand\tvertically,\ta\ttask\twhich\tis\tnotoriously\tdifficult\tusing\tstandard\tbox model\tproperties. Creating\ta\tflex\tcontainer Before\tyou\tadd\tyour\tfirst\tflexbox\tproperty,\tset\tyour\t<html>\tand\t<body>\telements\tto height:\t100%\tin\tstyles.css.\tThe\t<html>\telement\tis\tthe\troot\telement\tof\tyour\tDOM tree,\twith\tthe\t<body>\tas\ta\tchild\telement\tdrawn\tinside\tof\tit.\tSetting\tthe\theight\tto\t100%\tfor both\tof\tthem\tallows\tthe\tcontent\tto\tfill\tthe\tbrowser\tor\tdevice\twindow. @font-face\t{ \t\t... } html,\tbody\t{ \t\theight:\t100%; } body\t{ \t\tfont-size:\t10px; \t\tbackground:\trgb(149,\t194,\t215); } ... Notice\tthat\tyou\thave\tgrouped\ttwo\tselectors,\tseparated\tby\ta\tcomma,\tin\tthis\tstyling\trule. Selectors\tof\tany\ttype\tcan\tbe\tcombined\tin\tthis\tway\tto\tset\tcommon\tstyles.","Notice\talso\tthat\tyou\tnow\thave\ttwo\tstyling\trules\twith\tthe\tbody\telement\tselector.\tWhen\tthe browser\tsees\tadditional\tstyling\tdeclarations\tfor\ta\tselector,\tit\tsimply\tadds\tto\tits\texisting styling\tinformation\tfor\tthat\tselector.\tIn\tthis\tcase,\tit\tfirst\tsees\tthat\tthe\t<body>\tshould\thave\ta height\tof\t100%\tand\tstores\tthat\tinformation.\tWhen\tit\treads\tthe\tnext\tstyling\trule\tfor\tthe <body>,\tit\tstores\tthe\tbackground\tand\tfont-size\tinformation\talong\twith\tthe\theight\tstyle. Now\tyou\tare\tready\tto\tcreate\tyour\tfirst\tflex\tcontainer.\tWhen\tan\telement\tis\ta\tflex\tcontainer, it\tcan\tcontrol\thow\tits\tchild\telements\t(its\tflex\titems)\tare\tlaid\tout.\tInside\ta\tflex\tcontainer,\tthe size\tand\tplacement\tof\tflex\titems\toccurs\talong\tthe\tmain\taxis\tand\tthe\tcross\taxis (Figure\t4.7). Figure\t4.7\t\tThe\tmain\tand\tcross\taxes\tof\ta\tflex\tcontainer Make\tyour\t<body>\telement\ta\tflex\tcontainer\tby\tadding\ta\tdisplay:\tflex\tdeclaration\tto\tits styling\trule\tin\tstyles.css. ... body\t{ \t\tdisplay:\tflex; \t\tfont-size:\t10px; \t\tbackground:\trgb(149,\t194,\t215); } ... If\tyou\tsaved\tnow,\tyour\tbrowser\twould\tdisplay\ta\trather\tsad-looking\tOttergram,\tas\tin Figure\t4.8.\tThis\tis\tbecause\tthe\tmain\taxis\tgoes\tfrom\tleft\tto\tright,\tlaying\tthe\tflex\titems\t(all the\tchildren\tof\tthe\t<body>)\tout\tin\ta\trow.","Figure\t4.8\t\tFlex\titems\tlaid\tout\talong\tthe\tmain\taxis However,\tyou\tcan\tsee\tthat\tthe\tindividual\titems\tshrink\tto\taccommodate\tthe\tspace,\tinstead of\twrapping.\tThat\tis\tthe\tfirst\tpiece\tof\tgood\tnews.\tThe\tsecond\tpiece\tof\tgood\tnews\tis\tthat you\tcan\tfix\tthe\tlayout\twith\tjust\tone\tstyle.\t(Well,\talmost.) Changing\tthe\tflex-direction To\tfix\tthe\tlayout,\tset\tthe\t<body>\telement\u2019s\tflex-direction\tto\tcolumn\tin\tstyles.css: ... body\t{ \t\tdisplay:\tflex; \t\tflex-direction:\tcolumn; \t\tfont-size:\t10px; \t\tbackground:\trgb(149,\t194,\t215); } ... This\tswaps\tthe\tmain\tand\tcross\taxes\tfor\tthe\tflex\tcontainer,\tas\tillustrated\tin\tFigure\t4.9.","Figure\t4.9\t\tMain\tand\tcross\taxes\twith\tflex-direction:\tcolumn After\tchanging\tthe\tflex-direction\tto\tcolumn,\tOttergram\tis\tback\tto\tnormal\t\u2013\talmost. There\tis\ta\tvisual\tbug\tin\tthe\tlayout\twhen\tthe\tbrowser\twindow\tis\ta\tlot\twider\tthan\tit\tis\ttall, shown\tin\tFigure\t4.10. Figure\t4.10\t\tMissing\tthumbnails\twhen\tthe\tpage\tis\tstretched\twide You\twill\tremedy\tthis\tby\tadding\ta\twrapper\telement\tand\tapplying\tnew\tflexbox\tproperties.","Grouping\telements\twithin\ta\tflex\titem The\t<body>\thas\tthree\tflex\titems:\tthe\t<header>,\tthe\t.thumbnail-list,\tand\tthe\t.detail- image-container.\tNo\tmatter\twhat\thappens\tduring\tthe\tdevelopment\t(and\tuse)\tof Ottergram,\tthe\t<header>\tis\tnot\tlikely\tto\tchange\tmuch\tin\tits\tlayout\tor\tcomplexity.\tIt\tis going\tto\tbe\tat\tthe\ttop\tof\tthe\tpage,\tdisplaying\ttext.\tThat\tis\tabout\tit. On\tthe\tother\thand,\tas\tyou\tdevelop\tOttergram\tthe\t.thumbnail-list\tand\t.detail-image- container\tand\ttheir\tcontents\tmay\tvery\twell\tchange\tin\tlayout\tand\tcomplexity.\tAlso, changes\tto\tone\tof\tthese\titems\tare\tlikely\tto\taffect\tthe\tother. For\tthese\treasons,\tyou\tare\tgoing\tto\tgroup\tthe\t.thumbnail-list\tand\tthe\t.detail-image- container\tin\ttheir\town\tflex\tcontainer.\tTo\tdo\tthis,\tyou\twill\twrap\tthem\tin\ta\t<main>\ttag\twith a\tclass\tname\tof\t.main-content\t(Figure\t4.11). Figure\t4.11\t\tWrapping\tthe\t.thumbnail-list\tand\t.detail-image-container Make\tit\tso\tin\tindex.html:\tGive\tthe\t<header>\telement\tthe\tclass\tmain-header,\tthen wrap\tthe\t.thumbnail-list\t(<ul>)\tand\tthe\t.detail-image-container\t(<div>)\tin\ta <main>\telement\twith\tthe\tclass\tmain-content. ... \t\t<body> \t\t\t\t<header> \t\t\t\t<header\tclass=\\\"main-header\\\"> \t\t\t\t\t\t<h1\tclass=\\\"logo-text\\\">ottergram<\/h1> \t\t\t\t<\/header> \t\t\t\t<main\tclass=\\\"main-content\\\"> \t\t\t\t\t\t<ul\tclass=\\\"thumbnail-list\\\"> \t\t\t\t\t\t... \t\t\t\t\t\t<\/ul> \t\t\t\t\t\t<div\tclass=\\\"detail-image-container\\\"> \t\t\t\t\t\t\t\t<img\tclass=\\\"detail-image\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t<span\tclass=\\\"detail-image-title\\\">Stayin'\tAlive<\/span> \t\t\t\t\t\t<\/div> \t\t\t\t<\/main> ... .main-header\tand\t.main-content\tare\tnow\tthe\ttwo\tflex\titems\tinside\tthe\t<body>. By\twrapping\tthe\t.thumbnail-list\tand\t.detail-image-container\tin\tthe\t.main-content element,\tyou\tare\tnow\tfree\tto\tdeclare\ta\theight\tfor\tthe\t<header>,\tleaving\tthe\trest\tof\tthe <body>\u2019s\tvertical\tspace\tfor\tthe\t.main-content\tto\toccupy.\tThat\tway,\tthe\tspace\tinside\tof",".main-content\tcan\tbe\tdistributed\tto\t.thumbnail-list\tand\t.detail-image-container without\taffecting\tthe\theader. Save\tindex.html.\tNow\tthat\tyou\thave\tthe\tmarkup\tfor\tthe\ttwo\tflex\titems\tinside\tthe body,\tyou\tcan\tset\ttheir\tsizes\trelative\tto\tone\tanother\tusing\tthe\tflex\tproperty. The\tflex\tshorthand\tproperty A\tflex\tcontainer\tdistributes\tits\tspace\tto\tthe\tflex\titems\tinside\tof\tit.\tIf\tthe\tflex\titems\tdo\tnot specify\ttheir\tsize\talong\tthe\tmain\taxis,\tthen\tthe\tcontainer\tdistributes\tthe\tspace\tevenly\tbased on\tthe\tnumber\tof\tflex\titems,\twith\teach\tflex\titem\tgetting\tthe\tsame\tshare\tof\tspace\talong\tthe main\taxis.\tThis\tis\tthe\tdefault,\tillustrated\tin\tFigure\t4.12. Figure\t4.12\t\tEqual\tdistribution\tof\tspace\tbetween\tthree\tflex\titems But\timagine\tthat\tone\tof\tthe\tthree\tflex\titems\tin\tFigure\t4.12\tis\ta\tbit\tgreedier\tthan\tthe\tothers and\tclaims\ttwo\tshares\tof\tthe\ttotal\tspace.\tIn\tthat\tcase,\tthe\tflex\tcontainer\tdivides\tthe\tspace along\tthe\tmain\taxis\tinto\tfour\tshares.\tThe\tgreedy\titem\toccupies\ttwo\tof\tthem\t(half\tthe space)\tand\tthe\tother\titems\tget\tone\tshare\teach\t(Figure\t4.13). Figure\t4.13\t\tUnequal\tdistribution\tof\tspace\tbetween\tthree\tflex\titems In\tOttergram,\tyou\twant\tthe\t.main-content\telement\tto\tbe\tthe\tgreedy\telement,\ttaking\tup\tas much\tspace\talong\tthe\tmain\taxis\tas\tpossible.\tThe\t.main-header,\ton\tthe\tother\thand,\tshould take\tup\tas\tlittle\tspace\tas\tpossible. The\tflex\tproperty\tlets\tyour\tflex\titems\tspecify\thow\tmuch\tof\tthe\tavailable\tspace\tthey\twill","take\tup.\tIt\tis\ta\tshorthand\tproperty,\tas\tshown\tin\tFigure\t4.14. Figure\t4.14\t\tThe\tflex\tshorthand\tproperty\tand\tits\tvalues We\tstrongly\trecommend\tthat\tyou\tuse\tflex\tinstead\tof\tthe\tindividual\tproperties\tit represents.\tIt\tprotects\tyou\tfrom\tinadvertently\tleaving\ta\tproperty\tout\tand\tgetting unexpected\tresults. The\tfirst\tvalue\tis\tthe\tone\tto\tfocus\ton\tright\tnow,\tas\tit\tdetermines\thow\tmuch\tthe\tflex\titem can\tgrow.\tBy\tdefault\tflex\titems\tdo\tnot\tgrow\tat\tall.\tYou\twant\tthat\tdefault\tbehavior\tfor\tyour .main-header,\tbut\tnot\tyour\t.main-content. In\tstyles.css,\tadd\ta\tdeclaration\tblock\tfor\tthe\t.main-header\tclass\tselector,\tspecifying a\tflex\tshorthand\tproperty\twith\tdefault\tvalues:\t0\t1\tauto. ... a\t{ \t\ttext-decoration:\tnone; } .main-header\t{ \t\tflex:\t0\t1\tauto; } .logo-text\t{ \t\tbackground:\twhite; \t\t... The\tvalue\t0\t1\tauto\tcan\tbe\tread\tas,\t\u201cI\tdo\tnot\twant\tto\tgrow\tany\tlarger;\tI\twill\tshrink\tas needed;\tplease\tcalculate\tmy\tsize\tfor\tme.\u201d\tThe\tend\tresult\twill\tbe\tthat\tthe\t.main-header will\ttake\tup\tonly\tas\tmuch\tspace\tas\tit\tneeds,\tand\tno\tmore. Next,\tadd\ta\tdeclaration\tblock\tfor\t.main-content,\tsetting\tits\tflex\tto\t1\t1\tauto. ... .logo-text\t{ \t\t... } .main-content\t{ \t\tflex:\t1\t1\tauto; } .thumbnail-item\t+\t.thumbnail-item\t{ \t\t... The\tfirst\tvalue\tin\t.main-content\u2019s\tflex\tdeclaration\tcorresponds\tto\tthe\tflex-grow property.\tA\tvalue\tof\t1\ttells\tthe\tcontainer,\t\u201cI\twould\tlike\tto\tgrow\tas\tmuch\tas\tpossible.\u201d Because\tits\tonly\tsibling\thas\tdeclared\tthat\tit\twill\tnot\tgrow,\tthe\t.main-content\telement\twill grow\tto\ttake\tup\tall\tthe\tspace\tnot\tneeded\tfor\tthe\t.main-header.","The\t<body>\u2019s\ttwo\tflex\titems,\tthe\t.main-header\tand\tthe\t.main-content\telements,\toccupy the\tflexible\tspace\taccording\tto\ttheir\tneeds.\tNow\tit\tis\ttime\tto\tadjust\tthe\tlayout\tof\tthe .main-content\telement. Ordering,\tjustifying,\tand\taligning\tflex\titems Flexbox\talso\tallows\tyou\tto\tsubdivide\tflex\titems\tinto\tflex\tcontainers.\tThis\ttechnique\tlets you\tfocus\ton\tthe\tlayers.\tIn\ta\tmoment,\tyou\tare\tgoing\tto\tmake\tyour\t.main-content\ta\tflex container. Working\twith\tnested\tflex\tcontainers\tis\tan\texception\tto\tthe\tatomic\tstyling\tapproach\tto creating\tthe\tlook\tand\tfeel\tof\tvisual\tcomponents.\tInstead\tof\tstyling\tthe\tsmallest,\tinnermost elements\tfirst\tand\tthen\tworking\tyour\tway\tout\tto\tthe\tlargest\telements,\twhen\tworking\ton\ta layout\twith\tflexbox\tit\tis\tmore\tuseful\tto\tstart\twith\tthe\toutermost\telements\tand\twork\tyour way\tin. Here\tis\twhat\tyou\twill\ttackle\tnext.\tYou\twill\tchange\tthe\t.main-content\tto\ta\tflex\tcontainer with\ta\tvertical\tmain\taxis.\tAlso,\tyou\twill\tspecify\tthe\tflex\tproperties\tfor\t.main-content\u2019s flex\titems\tso\tthat\tthe\t.thumbnail-list\ttakes\tthe\tdefault\tamount\tof\tspace\tand\t.detail- image-container\tgrows\tto\tfill\tthe\tspace\tleft\tover.\tFinally,\tyou\twill\tmove\tthe .thumbnail-list\tbelow\tthe\t.detail-image-container\t(Figure\t4.15). Figure\t4.15\t\tMaking\t.main-content\ta\tflex\tcontainer Make\tthese\tchanges\tin\tstyles.css\tby\tadding\tdisplay:\tflex\tand\tflex-direction: column\tto\t.main-content\u2019s\tdeclaration\tblock,\tadding\tflex\tproperties\tto\t.thumbnail- list\u2019s\tdeclaration\tblock,\tand\twriting\ta\tnew\tdeclaration\tblock\tfor\tthe\t.detail-image- container\tclass. ... .main-content\t{ \t\tflex:\t1\t1\tauto; \t\tdisplay:\tflex; \t\tflex-direction:\tcolumn; } ... .thumbnail-list\t{ \t\tflex:\t0\t1\tauto; \t\tlist-style:\tnone; \t\tpadding:\t0; \t\twhite-space:\tnowrap;","overflow-x:\tauto; } ... .thumbnail-title\t{ \t\t... } .detail-image-container\t{ \t\tflex:\t1\t1\tauto; } .detail-image\t{ \t\t... You\tmight\tbe\twondering\twhy\tyou\tare\tnot\tdefining\tthe\theights\tof\tthe\t.thumbnail-list and\t.detail-image-container\tboxes\twith\tpercentages,\tthe\tway\tyou\tdefined\tthe\twidth\tof the\t.detail-image.\tSetting\tthe\theight\tof\tthe\t.thumbnail-list\tat,\tfor\texample,\t25%\tand the\t.detail-image-wrapper\tat\t75%\tseems\tlogical\t\u2013\tbut\tit\twould\tnot\twork\tthe\tway\tyou intend.\tThe\tinteraction\twith\tthe\twidth\tproperty\tof\tthe\t.detail-image\twould\tresult\tin\tthe .detail-image-container\tbeing\tmuch\ttoo\tlarge,\tand\tthe\t.thumbnail-list\twould\tend\tup either\ttoo\tsmall\tor\ttoo\tlarge,\tdepending\ton\tthe\twindow\tsize. In\tshort,\tusing\tthe\tflex\tproperty\tto\tset\tthe\tflex\titems\u2019\tsizes\tin\tconjunction\twith\tthe\tone fixed\tsize\tyou\tcare\tabout\t\u2013\tthe\twidth\tof\tthe\t.detail-image\t\u2013\tis\tthe\tway\tto\tgo. Now\tto\tmove\tthe\tthumbnail\tlist\tbelow\tthe\tdetail\timage.\tBy\tdefault,\tflex\titems\tare\tdrawn in\tthe\torder\tthat\tthey\tappear\tin\tthe\tHTML.\tThis\tis\tknown\tas\tsource\torder\tand\tis\tthe\tmain way\tthat\tdevelopers\tcontrol\tthe\torder\tin\twhich\telements\tare\tdrawn. One\toption\tfor\tmoving\tthe\tdetail\timage\tup\twould\tbe\tto\tcut\tand\tpaste\tthe\tmarkup\tfor\tthe detail\timage\tso\tthat\tit\tcame\tbefore\tthe\tmarkup\tfor\tthe\t.thumbnail-list\t\u2013\tto\tchange\tthe source\torder.\tHowever,\tit\tcan\talso\tbe\tdone\tusing\ta\tnew\tflexbox\tproperty. To\tchange\tthe\torder\tusing\tflexbox,\tadd\tan\torder\tdeclaration\tto\tthe\t.thumbnail-list selector\tin\tstyles.css. ... .thumbnail-list\t{ \t\tflex:\t0\t1\tauto; \t\torder:\t2; \t\tlist-style:\tnone; \t\tpadding:\t0; \t\twhite-space:\tnowrap; \t\toverflow-x:\tauto; } ... The\torder\tproperty\tcan\tbe\tassigned\tany\tinteger\tvalue.\tThe\tdefault\tvalue\tis\t0,\twhich\ttells the\tbrowser\tto\tuse\tthe\tsource\torder.\tAny\tother\tvalues,\tincluding\tnegative\tnumbers,\ttell\tthe browser\tto\tdraw\ta\tflex\titem\tbefore\tor\tafter\tother\tflex\titems.\tGiving\t.thumbnail-list\tthe declaration\torder:\t2\ttells\tthe\tbrowser\tto\tdraw\tit\tafter\tany\tof\tits\tsiblings\tthat\thave\ta\tlower value\tfor\torder\t\u2013\tsuch\tas\t.detail-image-container,\twhich\tis\tusing\tthe\tdefault. Save\tstyles.css\tand\tswitch\tto\tChrome.\tYou\twill\tsee\tthat\tthe\tthumbnails\tare\trendered along\tthe\tbottom\tof\tthe\tpage\t(Figure\t4.16).","Figure\t4.16\t\tChanging\tthe\torder\telements\tare\tdrawn Next,\tyou\twill\tcontinue\tto\tapply\tdisplay:\tflex\tas\tyou\twork\ton\tthe\tlayout\tof\tthe Ottergram\tUI.\tSo\tfar,\tyou\thave\tworked\twith\tflex\tcontainers\tthat\thold\tonly\ta\tcouple\tof\tflex items.\tMake\tthe\t.thumbnail-list\ta\tflex\tcontainer\tso\tthat\tyou\tcan\tfurther\texplore\twhat flexbox\tcan\toffer\tyou. ... .thumbnail-list\t{ \t\tflex:\t0\t1\tauto; \t\torder:\t2; \t\tdisplay:\tflex; \t\tlist-style:\tnone; \t\tpadding:\t0; \t\twhite-space:\tnowrap; \t\toverflow-x:\tauto; } ... Do\tnot\tpanic\tif\tyou\tsave\tyour\tchanges\tand\tsee\tthat\tthe\tthumbnails\tare\trendered\toddly,\tas in\tFigure\t4.17. Figure\t4.17\t\tOtters,\taskew To\tfix\tthis,\treplace\tthe\t.thumbnail-item\u2019s\twidth\tdeclaration\twith\ta\tpair\tof\tdeclarations,","one\tfor\tmin-width\tand\tanother\tfor\tmax-width.\tThis\twill\tremove\tthe\tvariations\tin\tsize\tthat are\tcausing\tthe\tstrange\tlayout. You\tcan\talso\tremove\tthe\tdeclaration\tblock\tthat\tsets\tthe\tmargin-top\tfor\t.thumbnail-item +\t.thumbnail-item\telements.\tIt\tis\tno\tlonger\tneeded\tfor\tthis\tlayout. ... .thumbnail-item\t+\t.thumbnail-item\t{ \t\tmargin-top:\t10px; } .thumbnail-item\t{ \t\tdisplay:\tinline-block; \t\twidth:\t120px; \t\tmin-width:\t120px; \t\tmax-width:\t120px; \t\tborder:\t1px\tsolid\trgb(100%,\t100%,\t100%); \t\tborder:\t1px\tsolid\trgba(100%,\t100%,\t100%,\t0.8); } ... Next,\tyou\twill\twork\twith\tthe\tspacing\tof\tthe\tflex\titems\tinside\tof\t.thumbnail-list.\tIn styles.css,\tadd\ta\tdeclaration\tfor\tjustify-content\tto\tthe\t.thumbnail-list\tselector. ... .thumbnail-list\t{ \t\tflex:\t0\t1\tauto; \t\torder:\t2; \t\tdisplay:\tflex; \t\tjustify-content:\tspace-between; \t\tlist-style:\tnone; \t\tpadding:\t0; \t\twhite-space:\tnowrap; \t\toverflow-x:\tauto; } ... The\tjustify-content\tproperty\tlets\ta\tflex\tcontainer\tcontrol\thow\tflex\titems\tare\tdrawn\ton the\tmain\taxis.\tYou\tused\tspace-between\tas\tthe\tvalue\tto\tmake\tsure\tthere\tis\tan\teven\tamount of\tspacing\taround\teach\tindividual\tflex\titem. There\tare\tfive\tdifferent\tvalues\tyou\tcan\tspecify\tfor\tjustify-content.\tFigure\t4.18 illustrates\thow\teach\tof\tthese\tvalues\tworks.","Figure\t4.18\t\tValues\tfor\tthe\tjustify-content\tproperty You\thave\ttackled\tthe\tlayout\tof\tthe\t.thumbnail-list.\tNext,\tyou\twill\twork\twith\tthe .detail-image-container\tand\tits\tcontents. Centering\tthe\tdetail\timage The\tdetail\timage\tshould\tbe\tOttergram\u2019s\tmain\tfocus.\tIt\tshould\tbe\tfront\tand\tcenter\tto\tmake sure\tthat\tthe\tuser\tis\tadmiring\tthe\tmajesty\tof\tthe\totter.\tIt\tshould\talso\tbe\tadorned\twith\ta snazzy\ttitle. To\tcenter\tthe\tdetail\timage,\tyou\twill\tfirst\twrap\tthe\timage\tand\tits\ttitle\tin\ta\tcontainer,\tthen center\tthe\twrapper\tinside\tthe\t.detail-image-container.\tThis\tidea\tis\tillustrated\tin Figure\t4.19.","Figure\t4.19\t\tFraming\tthe\t.detail-image\tand\t.detail-image-title While\tyou\tcould\tcenter\tthe\t.detail-image\titself\tinside\tthe\t.detail-image-container,\tit would\tbe\tdifficult\tto\tcorrectly\toffset\tthe\t.detail-image-title,\tbecause\tboth\tthe .detail-image\tand\tthe\t.detail-image-container\tare\tdynamically\tresizing. An\tintermediary\twrapper\telement\tis\ta\tuseful\ttechnique\tfor\tthis\tsituation.\tIt\twill\tconstrain the\tsize\tof\tthe\t.detail-image\tand\tserve\tas\ta\treference\tfor\tpositioning\tthe\t.detail- image-title. In\tindex.html,\tbegin\tby\tadding\ta\t<div>\twith\tthe\tclass\tname\tdetail-image-frame: ... \t\t\t\t\t\t<\/ul> \t\t\t\t\t\t<div\tclass=\\\"detail-image-container\\\"> \t\t\t\t\t\t\t\t<div\tclass=\\\"detail-image-frame\\\"> \t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"detail-image\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"detail-image-title\\\">Stayin'\tAlive<\/span> \t\t\t\t\t\t\t\t<\/div> \t\t\t\t\t\t<\/div> \t\t\t\t<\/main> \t\t<\/body> <\/html> Save\tindex.html.\tNow,\tin\tstyles.css,\tadd\ta\tdeclaration\tblock\tfor\t.detail-image- frame\twith\ta\tsingle\tstyle\tdeclaration:\ttext-align:\tcenter.\tThis\tis\tone\tway\tto\tcenter content\twithout\tflexbox,\tbut\tnote\tthat\tit\tonly\tworks\thorizontally. ... .detail-image-container\t{ \t\tflex:\t1\t1\tauto; } .detail-image-frame\t{ \t\ttext-align:\tcenter; } .detail-image\t{","width:\t90%; } Next,\tto\tcenter\tthe\t.detail-image-frame\tinside\tthe\t.detail-image-container,\tupdate styles.css\tto\tmake\t.detail-image-container\ta\tflex\tcontainer.\tDraw\tits\tflex\titems\tin the\tcenter\tof\tthe\tmain\taxis\t(in\tthis\tcase,\thorizontally\t\u2013\tthe\tdefault)\twith\tjustify- content:\tcenter,\tand\tadd\ta\tnew\tflexbox\tproperty,\talign-items:\tcenter,\tto\tdraw\tits flex\titems\tin\tthe\tcenter\tof\tthe\tcross\taxis\t(vertically). ... .detail-image-container\t{ \t\tflex:\t1\t1\tauto; \t\tdisplay:\tflex; \t\tjustify-content:\tcenter; \t\talign-items:\tcenter; } ... Save\tyour\tchanges\tand\tenjoy\tthe\tproud\totter,\tnobly\tcentered\tin\tthe\t.detail-image- container\t(Figure\t4.20). Figure\t4.20\t\tAfter\tcentering\t.detail-image-frame\tinside\t.detail-image- container","Absolute\tand\tRelative\tPositioning Sometimes\tyou\tneed\tto\tplace\tan\telement\tin\tan\texact\tspot\tinside\tof\tanother\telement.\tCSS gives\tyou\ta\tway\tto\tdo\tthis\tusing\tabsolute\tpositioning. You\twill\tuse\tabsolute\tpositioning\tto\tplace\tthe\tdetail-image-title\tin\tthe\tlower\tleft corner\tof\tthe\t.detail-image-frame,\tas\tshown\tin\tFigure\t4.21. Figure\t4.21\t\tAbsolutely\tpositioned\t.detail-image-title There\tare\tthree\trequirements\tfor\tabsolute\tpositioning.\tThe\tabsolutely\tpositioned\telement must\thave: \tthe\tproperty\tposition:\tabsolute,\tto\ttell\tthe\tbrowser\tto\ttake\tit\tout\tof\tthe normal\tflow\trather\tthan\tlaying\tit\tout\talong\twith\tits\tsiblings coordinates,\tprovided\tusing\tone\tor\tmore\tof\tthe\ttop,\tright,\tbottom,\tand\tleft properties;\tabsolute\tlengths\t(such\tas\tpixels)\tor\trelative\tlengths\t(such\tas percentages)\tmay\tbe\tused\tas\tvalues an\tancestor\telement\twith\tan\texplicitly\tdeclared\tposition\tproperty\twith\ta\tvalue of\trelative\tor\tabsolute;\tthis\tis\timportant\t\u2013\tif\tno\tancestor\thas\ta\tdeclared position\tproperty,\tthe\tabsolutely\tpositioned\telement\twill\tbe\tplaced\trelative\tto the\t<html>\telement\t(the\tbrowser\twindow) A\tword\tof\twarning:\tIt\tmight\tbe\ttempting\tto\tuse\tposition:\tabsolute\tfor\teverything,\tbut\tit","should\tbe\tused\tsparingly.\tA\twhole\tlayout\twith\tabsolute\tpositioning\tis\tnearly\timpossible\tto maintain\tand\twill\tlook\tterrible\ton\tany\tscreen\tsize\tother\tthan\tthe\tone\tit\twas\tdeveloped\tfor. When\tspecifying\ta\tcoordinate,\tyou\tare\treally\tspecifying\tthe\tdistance\tfrom\tthe\tedge\tof\tthe element\tto\tthe\tedge\tof\tits\tcontainer,\tas\tshown\tin\tFigure\t4.22. Figure\t4.22\t\tElements\tare\tabsolutely\tpositioned\tbased\ton\ttheir\tedges Figure\t4.22\thas\ttwo\texamples\tof\tabsolute\tpositioning.\tIn\tthe\tfirst\tone,\tthe\telement\tis positioned\tso\tthat\tits\ttop\tedge\tis\t50px\tfrom\tits\tcontainer\u2019s\ttop\tedge\tand\tits\tleft\tedge\tis 200px\tfrom\tits\tcontainer\u2019s\tleft\tedge.\tThe\tsecond\texample\tshows\ta\tvariation,\twhere\tthe element\tis\tpositioned\tby\tits\tbottom\tand\tleft\tedges. To\tposition\tthe\t.detail-image-title,\tstart\tby\tdeclaring\tthe\t.detail-image-frame\tto","have\tposition:\trelative\tin\tstyles.css.\tYou\twill\tposition\tthe\t.detail-image-title relative\tto\tit. ... .detail-image-frame\t{ \t\tposition:\trelative; \t\ttext-align:\tcenter; } ... You\tused\tposition:\trelative\tfor\t.detail-image-frame\tbecause\tyou\twant\tit\tto\tremain in\tnormal\tflow.\tYou\talso\twant\tit\tto\tserve\tas\tthe\tcontainer\tfor\tan\tabsolutely\tpositioned descendant,\tso\tits\tposition\tproperty\tmust\tbe\texplicitly\tdefined. At\tthe\tend\tof\tstyles.css,\tadd\ta\tdeclaration\tblock\tfor\tthe\t.detail-image-title selector.\tFor\tnow,\tmake\tthe\ttitle\twhite\tand\tset\tthe\tfont\tsize\tto\tbe\tfour\ttimes\tthe\tdefault. ... .detail-image\t{ \t\twidth:\t90%; } .detail-image-title\t{ \t\tcolor:\twhite; \t\tfont-size:\t40px; } So\tfar,\tso\tgood\t(Figure\t4.23).\tBut\tso\tbasic. Figure\t4.23\t\tBasic\ttext\tstyling\tfor\t.detail-image-title For\ta\ttouch\tof\tstyle,\tlet\u2019s\tadd\tsome\ttext\teffects\tto\tthe\t.detail-image-title.\tWhen positioning\tstyled\ttext\telements,\tbear\tin\tmind\tthat\tthe\telement\u2019s\tbox\tmay\tchange\tdue\tto the\tvisual\tcharacteristics\tof\ta\tcustom\ttypeface\tor\tother\teffects.\tFor\tthis\texample,\tyou\twill do\tall\tof\tthe\ttext\tstyling\tfor\t.detail-image-title\tbefore\tyou\tset\tits\tposition.\tAdd\ta text-shadow\tproperty\tto\t.detail-image-title\tin\tstyles.css.","... .detail-image-title\t{ \t\tcolor:\twhite; \t\ttext-shadow:\trgba(0,\t0,\t0,\t0.9)\t1px\t2px\t9px; \t\tfont-size:\t40px; } As\tthe\tname\tsuggests,\tthe\ttext-shadow\tproperty\tadds\ta\tshadow\tto\ttext.\tIt\taccepts\ta\tcolor for\tthe\tshadow,\ta\tpair\tof\tlengths\tfor\tthe\toffset\t(i.e.,\twhether\tthe\tshadow\tfalls\tabove\tor below\tand\tto\tthe\tleft\tor\tright\tof\tthe\ttext),\tand\ta\tlength\tfor\tthe\tblur\tradius\t\u2013\tan\toptional\tpart of\ta\ttext-shadow\tdeclaration\tthat\tmakes\tthe\tshadow\tlarger\tand\tlighter\tin\tcolor\tas\tyou make\tthe\tvalue\thigher. You\tgave\tyour\tshadow\tthe\tcolor\tattribute\trgba(0,\t0,\t0,\t0.9)\tto\tmake\tit\ta\tslightly transparent\tblack.\tIt\tis\toffset,\tor\tshifted,\t1px\tto\tthe\tright\tand\t2px\tbelow\tthe\ttext\t(negative values\twould\tplace\tit\tto\tthe\tleft\tor\tabove\tthe\ttext).\tThe\tlast\tvalue\tof\t9px\tis\tthe\tblur\tradius. Figure\t4.24\tshows\tyour\tnew\tshadow. Figure\t4.24\t\tA\ttext-shadow\tfor\tthe\t.detail-image-title Try\tadjusting\tthe\ttext-shadow\tvalues\tin\tthe\tstyles\tpane\tof\tthe\tDevTool\u2019s\telements\tpanel to\tget\ta\tfeel\tfor\thow\tthey\twork\t(Figure\t4.25).","Figure\t4.25\t\tExaggerating\tthe\ttext\tshadow\tusing\tthe\tDevTools When\tyou\tare\tready,\tadd\tone\tlast\tflourish\twith\ta\tcustom\tfont.\tAs\tyou\tdid\tin\tChapter\t3, add\tan\t@font-face\tdeclaration\tin\tstyles.css\tto\tadd\tthe\tAirstream\tfont\tto\tyour\tproject. Add\ta\tfont-family:\tairstreamregular\tdeclaration\tto\t.detail-image-title\tto\tput\tit\tto use. @font-face\t{ \t\t\t\tfont-family:\t'airstreamregular'; \t\t\t\tsrc:\turl('fonts\/Airstream-webfont.eot'); \t\t\t\tsrc:\turl('fonts\/Airstream-webfont.eot?#iefix')\tformat('embedded-opentype'), \t\t\t\t\t\t\t\t\turl('fonts\/Airstream-webfont.woff')\tformat('woff'), \t\t\t\t\t\t\t\t\turl('fonts\/Airstream-webfont.ttf')\tformat('truetype'), \t\t\t\t\t\t\t\t\turl('fonts\/Airstream-webfont.svg#airstreamregular')\tformat('svg'); \t\t\t\tfont-weight:\tnormal; \t\t\t\tfont-style:\tnormal; } @font-face\t{ \t\t\t\tfont-family:\t'lakeshore'; \t\t\t\t... } ... .detail-image-title\t{ \t\tfont-family:\tairstreamregular; \t\tcolor:\twhite; \t\ttext-shadow:\trgba(0,\t0,\t0,\t0.9)\t1px\t2px\t9px; \t\tfont-size:\t40px; } So\tfar,\tso\tstylish\t(Figure\t4.26)!","Figure\t4.26\t\tI\tgotta\thave\tmore\tfancy Now\tthat\tyou\thave\tfinished\tthe\tstyling\tof\t.detail-image-title,\tgive\tit\ta\tposition: absolute\tdeclaration\tso\tthat\tthe\tbrowser\twill\tplace\tit\tat\ta\tprecise\tlocation\twithin .detail-image-frame.\tSpecify\tthat\tlocation\twith\tbottom:\t-16px\tand\tleft:\t4px,\tto\tput\tit just\tbelow\tthe\tbottom\tedge\tof\t.detail-image-frame\tand\ta\tlittle\tbit\tinside\tthe\tleft\tedge\tof .detail-image-frame.\t(Negative\tvalues\tare\tfine\tfor\tthe\tcoordinates.) ... .detail-image-title\t{ \t\tposition:\tabsolute; \t\tbottom:\t-16px; \t\tleft:\t4px; \t\tfont-family:\tairstreamregular; \t\tcolor:\twhite; \t\ttext-shadow:\trgba(0,\t0,\t0,\t0.9)\t1px\t2px\t9px; \t\tfont-size:\t40px; } Save\tstyles.css,\tand\tyou\twill\tsee\tin\tthe\tbrowser\tthat\tthe\t.detail-image-title\tnow sits\tbelow\tand\tnear\tthe\tleft\tof\tthe\totter\tphoto.\tYou\tnow\thave\ta\tpositively\tchic\tOttergram\tin your\tbrowser\t(Figure\t4.27).","Figure\t4.27\t\tHello,\tgorgeous! Take\ta\tstep\tback\tto\tenjoy\tthe\tfruits\tof\tyour\tlabor.\tOttergram\thas\ta\tdynamic,\tfluid\tlayout thanks\tto\tthe\taddition\tof\tflexbox\tto\tyour\tstyles.\tIn\tthe\tnext\tchapter\tyou\twill\tmake\tthe layout\tadapt\tto\tdifferent\tbrowser\twindow\tsizes.","5\t Adaptive\tLayouts\twith\tMedia\tQueries In\tthis\tchapter,\tyou\twill\texplore\ta\ttechnique\tfor\tturning\tstyles\ton\tand\toff\tbased\ton\tthe\tsize of\tthe\tbrowser\twindow\tand\tother\tcharacteristics.\tYou\twill\tprovide\tan\talternate\tlayout\tfor larger\tscreens\tusing\ta\tminimal\tamount\tof\tcode.\tThe\tbrowser\twill\tbe\table\tto\tswitch between\tthe\tdifferent\tlayouts\tin\treal\ttime,\tas\tthe\tbrowser\twindow\tchanges\tsize\t\u2013\twithout reloading\tthe\tpage.\tFigure\t5.1\tshows\tthe\toriginal\tlayout\tand\tthe\talternate\tlayout. Figure\t5.1\t\tTwo\tOttergram\tlayouts The\tindustry\tterm\tfor\tthis\tbehavior\tis\tresponsive\twebsite.\tUnfortunately,\tthis\tterm\tis\toften a\tpoint\tof\tconfusion.\tSome\tthink\tthat\tit\tmeans\t\u201cfast\twebsite\u201d\tor\t\u201cwebsite\twith\tvisual animations.\u201d\tWe\tprefer\tto\tcall\tit\tan\tadaptive\tlayout. There\tare\tseveral\tways\tof\tincluding\talternate\tstyles\tto\tbe\tused\tbased\ton\tthe\tcurrent browser\tconditions.\tThe\trecommended\tapproach\tis\tto\twrite\tyour\tstyles\tfor\tthe\tsmallest screen\tand\tthen\tprovide\toverride\tstyles\tin\tmedia\tqueries\tthat\tare\ttriggered\twhen\tthe viewport\t\u2013\tthe\tbrowser\u2019s\tviewable\tarea\t\u2013\tis\tlarger\tthan\ta\tset\tthreshold. On\ta\ttraditional\tbrowser\t(like\tthe\tone\tyou\tare\tusing\twhile\tdeveloping\tOttergram),\tthe viewport\tis\tthe\tarea\tshown\tby\tthe\tbrowser\twindow.\tThis\tis\tpretty\tintuitive.\tOn\ta\tmobile browser,\tit\tgets\tmore\tcomplicated.\tMobile\tbrowsers\thave\tmultiple\tviewports,\tand\teach one\tplays\ta\trole\tin\thow\ta\tpage\tis\trendered. Front-end\tdevelopers\tneed\tto\tfocus\ton\tthe\tlayout\tviewport\t(sometimes\tcalled\tthe\tactual viewport).\tThe\tlayout\tviewport\ttells\tthe\tbrowser,\t\u201cPretend\tthat\tI\u2019m\tactually\t980\tpixels wide\tand\tthen\tdraw\tthe\tpage.\u201d Users\tare\tmore\tconcerned\twith\ta\tmobile\tbrowser\u2019s\tvisual\tviewport.\tThis\tis\tthe\tthing\tthat","they\tcan\tpinch\tto\tzoom\tin\tand\tout\ton\ta\tpage\t(Figure\t5.2). Figure\t5.2\t\tVisual\tviewport\tvs\tlayout\tviewport If\tyou\tviewed\tOttergram\ton\tyour\tsmartphone\tright\tnow,\tyou\twould\tsee\tsomething\tlike Figure\t5.2,\twith\tthe\tbrowser\tzoomed\tin\ton\tthe\tupper-left\tcorner\tof\tthe\tpage.\tNeedless\tto say,\teven\tthough\ta\tmobile\tuser\tcan\tzoom\tout\tmanually,\tyou\tdo\tnot\twant\tOttergram\tto behave\tlike\tthis\tby\tdefault. Earlier\twe\tmentioned\tthat\tyou\tare\ttaking\ta\tmobile-first\tapproach\tto\tdeveloping\tOttergram. That\twas\tmostly\ttrue.\tYour\tmarkup\tand\tstyles\twere\twritten\tin\ta\tmobile-friendly\tway\t\u2013 using\ta\tminimal\tamount\tof\tmarkup\tand\tstyling\tthe\tsmallest\telements\tfirst.\tNow,\tyou\tjust need\tto\tgive\tthe\tbrowser\tinformation\tabout\tthe\tlayout\tviewport\tit\tshould\tuse. Resetting\tthe\tViewport In\tChapter\t3\tyou\tadded\tnormalize.css\tto\tOttergram.\tThis\tensured\tthat\tany\tbrowser viewing\tOttergram\twould\thave\tthe\tsame\tset\tof\tdefault\tstyles.\tOn\ttop\tof\tthese\tdefaults,\tyou","could\tconfidently\tadd\tyour\town\tCSS,\tknowing\tit\twould\twork\tconsistently\tfrom\tbrowser to\tbrowser. You\twill\tdo\tsomething\tsimilar\tfor\tthe\tlayout\tviewport.\tJust\tas\tevery\tbrowser\tmay\thave\ta different\tuser\tagent\tstylesheet,\tevery\tbrowser\tmay\thave\ta\tdifferent\tdefault\tlayout viewport.\tHowever,\tunlike\tusing\tnormalize.css,\tyou\tare\tnot\tgoing\tto\treset\tthe viewport\tfor\tall\tbrowsers\tto\tthe\tsame\tvalue.\tInstead,\tyou\twill\tuse\ta\t<meta>\ttag\tto\ttell\tall browsers\tto\tdisplay\tOttergram\tat\tthe\tbest\tsize\tfor\tthe\tdevice\u2019s\tphysical\tscreen. In\tindex.html,\tadd\ta\t<meta>\ttag\tthat\ttells\tthe\tbrowser\tthat\tthe\twidth\tof\tthe\tlayout viewport\tis\tthe\tsame\tas\tthe\tdevice\u2019s\tscreen\twidth.\tMake\tsure\tto\tset\tthe\tzoom\tto\t100%\tby setting\tthe\tinitial-scale\tto\t1. <!doctype\thtml> <html> \t\t<head> \t\t\t\t<meta\tcharset=\\\"utf-8\\\"> \t\t\t\t<meta\tname=\\\"viewport\\\"\tcontent=\\\"width=device-width,\tinitial-scale=1\\\"> \t\t\t\t<link\trel=\\\"stylesheet\\\" \t\t\t\t\t\thref=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/3.0.3\/normalize.min.css\\\"> \t\t\t\t<link\trel=\\\"stylesheet\\\"\thref=\\\"stylesheets\/styles.css\\\"> \t\t\t\t<title>Ottergram<\/title> \t\t<\/head> ... Save\tyour\tchanges.\tThis\ttechnique\tsets\tthe\tlayout\tviewport\tto\tthe\tideal\tviewport.\tThe ideal\tviewport\tis\tbest\tviewport\tsize\tfor\ta\tspecific\tdevice,\tas\trecommended\tby\tthe\tbrowser maker.\tThis\tvaries\tsignificantly,\tsince\tthere\tare\tmany,\tmany\tdifferent\tdevices\tand\tquite\ta number\tof\tdifferent\tbrowsers. Table\t5.1\tsummarizes\tthe\tdifferent\ttypes\tof\tviewports. Table\t5.1\t\tSummary\tof\tthe\tdifferent\tviewports Viewport Description Device viewport The\tarea\tequal\tto\tthe\tbrowser\u2019s\twindow.\tIt\tserves\tas\tthe\t<html> desktop, element\u2019s\tcontainer. laptop layout A\tvirtual\tscreen,\tlarger\tthan\tthe\tactual\tdevice\tscreen,\tused\tfor mobile viewport calculating\tthe\tpage\tlayout. visual The\tzoomable\tarea\tthat\ta\tuser\tcan\tsee\ton\ta\tdevice\u2019s\tscreen. mobile viewport Zooming\thas\tno\teffect\ton\tthe\tpage\tlayout. ideal The\toptimal\tdimensions\tfor\ta\tspecific\tbrowser\ton\ta\tspecific mobile viewport device. Start\tbrowser-sync\tand\tmake\tsure\tthe\tDevTools\tare\topen\tin\tChrome.\tLook\tto\tthe\tleft\tof the\tElements\tmenu\titem\tand\tfind\tthe\tToggle\tDevice\tMode\tbutton,\twhich\tlooks\tlike\tthis:\t .\tIt is\tshown\tin\tcontext\tin\tFigure\t5.3. Figure\t5.3\t\tToggle\tDevice\tMode\tbutton","Click\tthis\tbutton\tto\tactivate\tdevice\tmode.\tYou\twill\tsee\tthat\tthe\tweb\tpage\tview\tnow\tshows Ottergram\ton\ta\tsimulated\tsmartphone\tscreen.\tThere\tis\ta\tmenu\tfor\tchoosing\tbetween different\tscreen\tsizes\tbased\ton\tpopular\tdevices.\tYou\tcan\talso\tclick\tthe\tgray\tbar\tbelow\tthe presets\tto\ttoggle\tbetween\tsmall,\tmedium,\tand\tlarge\tscreen\tsizes.\tAnd\tthere\tis\ta\tmenu\tfor quickly\tchoosing\ta\tscreen\torientation\tof\tlandscape\tor\tportrait.\tFigure\t5.4\tshows\ta screenshot\tof\tthe\tdevice\tmode\tat\tthe\ttime\tof\tthis\twriting.\tYours\tmay\tlook\tquite\tdifferent, as\tthe\tDevTools\tundergo\tregular\tupdates. Figure\t5.4\t\tUsing\tdevice\tmode\tfor\tresponsive\ttesting You\tcan\tsee\tthat,\tthanks\tto\tyour\tnew\t<meta>\telement,\tOttergram\tdisplays\twell\ton\ta\tsmall screen,\tsuch\tas\ta\tsmartphone.\tFor\tdevices\twith\tlarger\tscreens,\tsuch\tas\ttablets\tor\tlaptops,\ta slightly\tdifferent\tlayout\tmay\tbe\tmore\tappropriate.\tNext,\tyou\twill\tapply\tdifferent\tlayout styles\tusing\ta\tcombination\tof\tflexbox\tand\tmedia\tqueries. Click\tthe\t \tbutton\tagain\tto\tdeactivate\tdevice\tmode\tbefore\tyou\tcontinue.","Adding\ta\tMedia\tQuery Media\tqueries\tlet\tyou\tgroup\tCSS\tdeclaration\tblocks\tand\tspecify\tthe\tconditions\tunder which\tthey\tshould\tbe\tapplied.\tThose\tconditions\tmay\tbe\tsomething\tlike\t\u201cif\tthe\tscreen\tis\tat least\t640\tpixels\twide\u201d\tor\t\u201cif\tthe\tscreen\tis\twider\tthan\tit\tis\ttall\tand\thas\ta\thigh\tpixel\tdensity.\u201d The\tsyntax\tbegins\twith\t@media,\tfollowed\tby\tthe\tconditions\tto\tbe\tmatched.\tNext\tis\ta\tset\tof curly\tbraces\tthat\twraps\taround\tentire\tdeclaration\tblocks.\tLet\u2019s\tsee\twhat\tthis\tlooks\tlike. Begin\tyour\tfirst\tmedia\tquery\tat\tthe\tend\tof\tstyles.css.\tYou\twill\tcreate\ta\tmedia\tquery that\twill\tactivate\tstyles\twhen\tbeing\tviewed\ton\tany\tkind\tof\tdevice\twhen\tthe\tviewport\tis\tat least\t768\tpixels\twide,\twhich\tis\ta\tcommon\tdevice\twidth\tfor\ttablets. ... .detail-image-title\t{ \t\t... } @media\tall\tand\t(min-width:\t768px)\t{ \t\t\/*\tStyles\twill\tgo\there\t*\/ } @media\tis\tfollowed\tby\tthe\tmedia\ttype\tall.\tMedia\ttypes\twere\toriginally\tintended\tto differentiate\tbetween\tdevices,\tsuch\tas\tsmart\ttelevisions\tand\thandheld\tdevices. Unfortunately,\tbrowsers\tdo\tnot\timplement\tthis\taccurately,\tso\tyou\tshould\talways\tspecify all.\tThe\tonly\ttime\tyou\tmight\tnot\tuse\tall\tis\twhen\tyou\twant\tto\tspecify\tstyles\tfor\tprinting, when\tyou\tcan\tsafely\tuse\tthe\tmedia\ttype\tprint. After\tthe\tmedia\ttype,\tyou\twrite\tthe\tconditions\tfor\tapplying\tthe\tstyles.\tHere,\tyou\tare\tusing the\tuseful\tcondition\tmin-width.\tYou\tcan\tsee\tthat\tconditions\tlook\tsimilar\tto\tstyle declarations. To\tachieve\tthe\teffect\tshown\tin\tFigure\t5.1,\tyou\twill\tneed\tto\tchange\tthe\tflex-direction\tof the\t.main-content\telement.\tThis\twill\tlet\tthe\tthumbnails\tand\tthe\tdetail\timage\tsit\tnext\tto one\tanother.\tYou\tdo\tnot\twant\tthe\tthumbnails\tto\tcause\tthe\tbrowser\tto\tscroll.\tInstead,\tthey should\tcontinue\tto\tscroll\tindependently\tof\tthe\tbrowser\twindow.\tFor\tthat,\tyou\twill\tadd overflow:\thidden. Add\tthose\tstyles\tto\tyour\tmedia\tquery\tat\tthe\tend\tof\tstyles.css. ... @media\tall\tand\t(min-width:\t768px)\t{ \t\t\/*\tStyles\twill\tgo\there\t*\/ \t\t.main-content\t{ \t\t\t\tflex-direction:\trow; \t\t\t\toverflow:\thidden; \t\t} } You\twould\tbe\tin\tfor\ta\tshock\tif\tyou\tsaved\tand\tthen\tstretched\tyour\tbrowser\twide\tenough\tto trigger\tyour\tmedia\tquery.\tAt\tthe\tmoment,\tyour\tpage\tlooks\tlike\tFigure\t5.5.\tNot\tto\tworry. You\twill\tfix\tthis\twith\tonly\ta\tfew\tmore\tlines\tof\tcode.","Figure\t5.5\t\tOtters\tin\tdisarray The\tthumbnails\tneed\tto\tbe\tdisplayed\tin\ta\tcolumn\tinstead\tof\ta\trow.\tThis\tis\teasy\tto\tdo, because\tyou\tused\tflexbox\tfor\tlaying\tthem\tout.\tAdd\ta\tdeclaration\tblock\tinside\tthe\tbody\tof the\tmedia\tquery\tin\tstyles.css\tsetting\t.thumbnail-list\u2019s\tflex-direction\tto\tcolumn. ... @media\tall\tand\t(min-width:\t768px)\t{ \t\t.main-content\t{ \t\t\t\tflex-direction:\trow; \t\t\t\toverflow:\thidden; \t\t} \t\t.thumbnail-list\t{ \t\t\t\tflex-direction:\tcolumn; \t\t} } Save\tstyles.css.\tThat\thas\timproved\tthings\tsignificantly\t(Figure\t5.6)! Figure\t5.6\t\tAfter\tsetting\tflex-direction\tto\tcolumn According\tto\tyour\tdesign,\tthe\tthumbnails\tshould\tgo\ton\tthe\tleft.\tYou\tcan\tsolve\tthis\tby","changing\t.thumbnail-list\u2019s\torder.\tEarlier,\tyou\tset\tit\tto\t2\tso\tthat\tit\twould\tbe\tdrawn\tafter the\t.detail-image-container.\tNow,\tset\tit\tto\t0\twithin\tthe\tmedia\tquery\tin\tstyles.css so\tthat\tit\tfollows\tthe\tsource\torder\tand\tis\tdrawn\tbefore\tthe\t.detail-image-container. ... @media\tall\tand\t(min-width:\t768px)\t{ \t\t.main-content\t{ \t\t\t\tflex-direction:\trow; \t\t\t\toverflow:\thidden; \t\t} \t\t.thumbnail-list\t{ \t\t\t\tflex-direction:\tcolumn; \t\t\t\torder:\t0; \t\t} } Save\tyour\tchanges\tand\tconfirm\tthat\tthe\tthumbnails\tare\tdrawn\ton\tthe\tleft\tside\tof\tthe\tpage. You\tare\talmost\tthere!\tAdd\ta\tfew\tmore\tstyles\tin\tstyles.css\tfor\tthe\t.thumbnail-list and\t.thumbnail-items\tto\tmake\tthe\tsizing\tand\tspacing\ta\tlittle\tnicer. ... @media\tall\tand\t(min-width:\t768px)\t{ \t\t.main-content\t{ \t\t\t\tflex-direction:\trow; \t\t\t\toverflow:\thidden; \t\t} \t\t.thumbnail-list\t{ \t\t\t\tflex-direction:\tcolumn; \t\t\t\torder:\t0; \t\t\t\tmargin-left:\t20px; \t\t} \t\t.thumbnail-item\t{ \t\t\t\tmax-width:\t260px; \t\t} \t\t.thumbnail-item\t+\t.thumbnail-item\t{ \t\t\t\tmargin-top:\t20px; \t\t} } Once\tagain,\tsave\tstyles.css\tand\tswitch\tto\tyour\tbrowser.\tYour\tlayout\tnow\tlooks\tsharp whether\tthe\tviewport\tis\tnarrower\tor\twider\t(Figure\t5.7). Figure\t5.7\t\tResponsive\totters Ottergram\tis\tmaking\tsteady\tprogress!\tYou\thave\tcreated\ta\tgood-looking\twebsite\twith\ta layout\tthat\tcan\tadapt\tto\tmany\tscreen\tsizes.\tIn\tthe\tnext\tchapter,\tyou\twill\tbegin\tusing JavaScript\tto\tadd\ta\tlayer\tof\tinteractivity\tto\tOttergram.","Bronze\tChallenge:\tPortrait Your\tcurrent\tmedia\tquery\tchanges\tthe\tlayout\tbased\ton\tthe\twidth\tof\tthe\tviewport.\tYou could\tlook\tat\tthis\tin\ta\tdifferent\tway.\tOne\tis\tfor\tviewports\tthat\tare\ttaller\tthan\tthey\tare\twide, and\tthe\tother\tis\tfor\tviewports\tthat\tare\twider\tthan\tthey\tare\ttall.\tThese\tare\ttwo\torientation modes\tthat\tyour\tviewport\tcan\tbe\tin. Check\tMDN\u2019s\tdocumentation\tfor\tmedia\tqueries\tand\tupdate\tyour\tmedia\tquery\tso\tthat\tthe layout\tchanges\taccording\tto\torientation\tand\tnot\tbased\ton\twidth.","For\tthe\tMore\tCurious:\tCommon\tSolutions\t(and\tBugs) with\tFlexbox\tLayouts Philip\tWalton\tis\ta\tdeveloper\twho\tmaintains\ttwo\tvery\timportant\tflexbox\tresources.\tThe first\tis\tthe\tSolved\tby\tFlexbox\tsite\t(philipwalton.github.io\/s\u200b olved-by- flexbox),\twhich\toffers\tdemos\tof\tcommon\tlayouts\timplemented\tusing\tflexbox\tand\tall the\tinformation\tyou\tneed\tto\tcreate\tthem\tyourself.\tSome\tof\tthe\tlayouts\tare\tvery\tdifficult\tto achieve\twithout\tflexbox. The\tsecond\tresource\tis\tthe\tFlexbugs\tpage\tat\tgithub.com\/\u200bphilipwalton\/\u200b flexbugs.\tFlexbox\tis\twonderful,\tbut\tit\tis\tnot\tperfect.\tFlexbugs\tprovides\tsolutions\tand workarounds\tfor\tcommon\tproblems\tthat\tdevelopers\trun\tinto\twhen\tusing\tflexbox.\tThe information\tis\tprovided\tby\tmembers\tof\tthe\tdevelopment\tcommunity\twho\thave encountered\tthese\tbugs,\tand\tthe\tlist\tis\twell\tmaintained.","Gold\tChallenge:\tHoly\tGrail\tLayout Be\tsure\tto\tmake\ta\tcopy\tof\tyour\tcode\tbefore\tattempting\tthis\tchallenge!\tIt\twill\trequire significant\tchanges\tto\tthe\tmarkup\tand\tstyles.\tUse\tyour\tcopy\tfor\tworking\ton\tthe\tchallenge and\tleave\tthe\toriginal\tintact\tfor\tstarting\tthe\tnext\tchapter. Using\tSolved\tby\tFlexbox\tas\ta\treference,\timplement\tthe\tHoly\tGrail\tlayout\tin\tOttergram. Create\ta\tsecond\tnavigation\tbar\twith\tthumbnails,\tbut\tplace\tit\ton\tthe\tother\tside\tof\tthe viewport. Make\tsure\tto\tadd\ta\tfooter\telement\tto\tthe\tbottom\tof\tyour\tpage.\tUse\tthe\t<footer>\ttag\tand put\tan\t<h1>\tinside\tof\tit.","6\t Handling\tEvents\twith\tJavaScript You\tknow\twhat\tis\tcool\tabout\totters?\tAmong\tother\tthings,\tthey\thold\thands\twhen\tthey\tsleep so\tthat\tthey\tdo\tnot\tfloat\taway.\tKeep\tthis\timage\tin\tmind\tas\tyou\tlearn\tto\twork\twith\tevent callbacks\tin\tJavaScript. JavaScript\tis\ta\tprogramming\tlanguage\tthat\tadds\tinteractivity\tto\twebsites\tby\tmanipulating DOM\telements\tand\tCSS\tstyles\ton\ta\tpage.\tIt\twas\toriginally\tcreated\tfor\tuse\tby\tpeople\twho were\tnot\tprofessional\tprogrammers.\tIt\thas\tgrown\tin\tpower\tand\tpopularity\tand\tis\tnow\tused for\tmany\tkinds\tof\tapplication\tdevelopment.\tWhen\tyou\tuse\tsites\tlike\tGmail\tor\tNetflix,\tyou are\tinteracting\twith\tprograms\twritten\tin\tJavaScript.\tIn\tfact,\tthe\tAtom\ttext\teditor\tis\tactually a\tdesktop\tapplication\twritten\tin\tJavaScript. Despite\tits\tpower\tand\twidespread\tuse,\tit\thas\tits\tquirks,\tlike\tany\tprogramming\tlanguage. As\tyou\tcontinue\tworking\ton\tOttergram\tand\tthe\tother\tprojects\tin\tthis\tbook,\tyou\twill\tlearn to\tnavigate\tthe\trough\tpatches\tof\tthe\tlanguage\tand\tto\ttake\tadvantage\tof\tits\tbest\tparts. There\tare\tseveral\tversions\tof\tJavaScript,\tand\tyou\twill\tuse\tthree\tof\tthem\tfor\tthe\tprojects\tin this\tbook.\tThey\tare\tall\trevisions\tof\ta\tstandard\tspecification\tknown\tas\tECMAScript\t(or \u201cES\u201d).\tTable\t6.1\tsummarizes\tthem. Table\t6.1\t\tJavaScript\tversions\tused\tin\tthis\tbook ECMAScript Release Notes Edition Date 3 December Most\twidely\tsupported\tversion;\tencompasses\tmost\tof\tthe 1999 language\tfeatures\tyou\twill\tuse,\tsuch\tas\tvariables,\ttypes,\tand functions. 5 December Backward\tcompatible,\twith\topt-in\tenhancements\tsuch\tas\ta 2009 strict\tmode\tthat\tprevents\tthe\tusage\tof\tthe\tmore\terror-prone parts\tof\tthe\tlanguage. Includes\tnew\tsyntax\tand\tlanguage\tfeatures;\tat\tthe\ttime\tof 6 June this\twriting,\tmost\tbrowsers\tdo\tnot\tyet\tsupport\tES6,\tbut\tES6 2015 code\tcan\tbe\ttranslated\tinto\tES5,\tmaking\tit\tusable\tby\tmost browsers. In\tthis\tchapter,\tyou\twill\tuse\tJavaScript\tto\tmake\tOttergram\tinteractive:\tThe\tdetail\timage and\tdetail\ttitle\twill\tchange\twhen\tthe\tuser\tclicks\tor\ttaps\tone\tof\tthe\tthumbnails. To\tdo\tthis,\tyou\tare\tgoing\tto\twrite\ta\tJavaScript\tfunction\t\u2013\ta\tset\tof\tsteps\tfor\tthe\tbrowser\tto follow\t\u2013\tthat\treads\tthe\tURL\tfor\tan\timage\tand\tshows\tit\tin\tthe\tdetail\tarea.\tThen\tyou\twill ensure\tthat\tthis\tfunction\tis\trun\twhen\ta\tthumbnail\tis\tclicked.\tYou\twill\talso\twrite\ta\tseparate function\tthat\thides\tthe\tdetail\tarea\tand\trun\tthat\tfunction\twhen\tthe\tEscape\tkey\tis\tpressed.","At\tthe\tend\tof\tthe\tchapter,\tOttergram\twill\tbe\table\tto\tfeature\tany\totter\tin\tthe\tdetail\timage (Figure\t6.1). Figure\t6.1\t\tClicking\tthumbnails\tchanges\tdetail\timage\tand\ttitle As\tyou\twrite\tthese\tfunctions,\tyou\twill\tinteract\twith\tthe\tpage\tusing\ta\tset\tof\tpredefined interfaces\tbuilt\tinto\tthe\tbrowser.\tThere\tare\ta\tlarge\tnumber\tof\tthem,\tand\tthe\tcode\twill\tonly walk\tyou\tthrough\tthe\tones\tnecessary\tfor\tthe\ttask\tat\thand.\tIf\tyou\tare\tcurious,\tyou\tcan\tfind more\tin-depth\tinformation\tabout\tthem\ton\tthe\tMDN\tat\tdeveloper.mozilla.org\/\u200b en-US\/\u200bdocs\/W\u200b eb\/A\u200b PI\/E\u200b lement. Preparing\tthe\tAnchor\tTags\tfor\tDuty Before\tyou\tstart\tadding\tinteractive\tfeatures\twith\tJavaScript,\tyou\tneed\tto\tmake\ta\tfew updates\tto\tthe\tmarkup.\tYour\tthumbnail\timages\tare\twrapped\tin\tanchor\ttags,\tbut\tthose\ttags do\tnot\tactually\tlink\tto\tany\tresource.\tInstead,\tthey\tuse\tthe\t#\tvalue\tfor\tthe\thref\tattribute, which\ttells\tthe\tbrowser\tto\tstay\ton\tthe\tsame\tpage.\tIn\torder\tto\tmake\ta\tclick\ton\ta\tthumbnail do\tanything\tinteresting,\tyou\tneed\tto\tfix\tthat. First,\tin\tindex.html,\tremove\tall\tbut\tfive\tof\tthe\t.thumbnail-item\telements.\tYou\tno longer\tneed\tthe\tduplicates,\tbecause\tyour\tlayout\tis\tin\tgood\tshape. Then,\tchange\tthe\tanchor\ttags\u2019\thref\tproperties\tto\tno\tlonger\tuse\tthe\tdummy\tvalue\t#. Instead,\tset\tthe\tvalues\tto\tbe\tthe\tsame\tas\teach\t<img>\ttag\u2019s\tsrc\tvalue. Atom\tcan\thelp\tyou\tmake\tthese\tchanges,\ttaking\tthe\ttedium\tout\tof\tworking\twith\tHTML. Like\tany\ttext\teditor,\tit\thas\ta\tway\tto\tfind\tand\treplace\ttext.\tSelect\tFind\t\u2192\tFind\tin\tBuffer\tor\tuse the\tkeyboard\tshortcut\tCommand-F\t(Ctrl-F).\tThis\twill\topen\tthe\tFind\tin\tBuffer\tpanel\tat\tthe bottom\tof\tthe\teditor\twindow\t(Figure\t6.2).","Figure\t6.2\t\tUsing\tAtom\u2019s\tfind-and-replace\tfeature Enter\t\u201c#\u201d\tin\tthe\tFind\tin\tcurrent\tbuffer\ttext\tbox\tand\t\u201cimg\/otter.jpg\u201d\tin\tthe\tReplace\tin\tcurrent\tbuffer text\tbox.\tThen\tclick\tReplace\tAll\tin\tthe\tlower\tright. This\twill\tchange\tall\tof\tthe\t<a\thref=\\\"#\\\">\ttags\tto\t<a\thref=\\\"img\/otter.jpg\\\">.\tNow\tit\tis just\ta\tmatter\tof\tmanually\tadding\tthe\tappropriate\tnumber\tto\teach\tone\t(img\/otter1.jpg, img\/otter2.jpg,\tetc.). Press\tthe\tEscape\tkey\tto\tclose\tthe\tFind\tin\tBuffer\tpanel.\tindex.html\tshould\tlook\tlike\tthis: ... \t\t\t\t\t\t<ul\tclass=\\\"thumbnail-list\\\"> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter1.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Barry<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter2.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter2.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Robin<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter3.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter3.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Maurice<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter4.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter4.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Lesley<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"#\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter5.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter5.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Barbara<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t<\/ul> ... Next,\tyou\tneed\tto\tadd\tadditional\tproperties\tto\tyour\tanchor\telements\tso\tyou\tcan\taccess them\tusing\tJavaScript.\tWhen\tstyling\twith\tCSS,\tyou\tuse\tclass\tname\tselectors\tto\trefer\tto elements\ton\tthe\tpage.\tFor\tJavaScript,\tyou\tuse\tdata\tattributes. Data\tattributes\tare\tjust\tlike\tthe\tother\tHTML\tattributes\tyou\thave\tbeen\tusing\texcept\tthat, unlike\tattributes\tsuch\tas\tsrc\tor\thref,\tdata\tattributes\tdo\tnot\thave\tspecial\tmeaning\tto\tthe browser.\tThe\tonly\trequirement\tis\tthat\tthe\tattribute\tname\tstarts\twith\tdata-.\tUsing\tcustom data\tattributes\tlets\tyou\tdesignate\twhat\tHTML\telements\ton\tthe\tpage\tyour\tJavaScript interacts\twith. Technically,\tin\tJavaScript,\tyou\tcould\taccess\telements\ton\tthe\tpage\tusing\tclass\tnames. Likewise,\tyou\tcould\tuse\tdata\tattributes\tin\tyour\tselectors\tfor\tstyling.\tBut\tyou\treally\tshould not.\tYour\tcode\twill\tbe\tmuch\tmore\tmaintainable\tif\tyour\tJavaScript\tand\tyour\tCSS\tdo\tnot rely\ton\tthe\tsame\tattributes.","Update\tyour\tanchor\ttags\tin\tindex.html\twith\tdata\tattributes.\tNote\tthat\tthe\tline\tbreaks\tin the\tcode\tbelow\thave\tbeen\tadded\tto\tmake\tsure\tthat\teverything\tfits\tnicely\ton\tthe\tpage.\tYou are\tfree\tto\tadd\tthem\tor\tnot,\tas\tyou\tprefer.\tThey\twill\tnot\tmake\ta\tdifference\tto\tthe\tbrowser. ... \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter1.jpg\\\"\tdata-image-role=\\\"trigger\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-title=\\\"Stayin'\tAlive\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-url=\\\"img\/otter1.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Barry<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter2.jpg\\\"\tdata-image-role=\\\"trigger\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-title=\\\"How\tDeep\tIs\tYour\tLove\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-url=\\\"img\/otter2.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter2.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Robin<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter3.jpg\\\"\tdata-image-role=\\\"trigger\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-title=\\\"You\tShould\tBe\tDancing\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-url=\\\"img\/otter3.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter3.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Maurice<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter4.jpg\\\"\tdata-image-role=\\\"trigger\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-title=\\\"Night\tFever\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-url=\\\"img\/otter4.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter4.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Lesley<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> \t\t\t\t\t\t\t\t<li\tclass=\\\"thumbnail-item\\\"> \t\t\t\t\t\t\t\t\t\t<a\thref=\\\"img\/otter5.jpg\\\"\tdata-image-role=\\\"trigger\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-title=\\\"To\tLove\tSomebody\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-image-url=\\\"img\/otter5.jpg\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<img\tclass=\\\"thumbnail-image\\\"\tsrc=\\\"img\/otter5.jpg\\\"\talt=\\\"\\\"> \t\t\t\t\t\t\t\t\t\t\t\t<span\tclass=\\\"thumbnail-title\\\">Barbara<\/span> \t\t\t\t\t\t\t\t\t\t<\/a> \t\t\t\t\t\t\t\t<\/li> ... Add\tdata\tattributes\tfor\tthe\tdetail\timage,\tas\twell: ... \t\t\t\t\t\t<div\tclass=\\\"detail-image-container\\\"> \t\t\t\t\t\t\t\t<div\tclass=\\\"detail-image-wrapper\\\"> \t\t\t\t<img\tclass=\\\"detail-image\\\"\tdata-image-role=\\\"target\\\"\tsrc=\\\"img\/otter1.jpg\\\"\talt=\\\"\\\"> \t\t\t\t<span\tclass=\\\"detail-image-title\\\"\tdata-image-role=\\\"title\\\">Stayin'\tAlive<\/span> \t\t\t\t\t\t\t\t<\/div> \t\t\t\t\t\t<\/div> ... Your\tJavaScript\tcode\tcan\trefer\tto\tthese\tdata\tattributes\tto\taccess\tspecific\telements\ton\tthe page\tbecause\tthe\tbrowser\tlets\tyou\tuse\tJavaScript\tto\tmake\tqueries\tabout\tthe\tcontents\tof\ta web\tpage.\tFor\texample,\tyou\tcan\tquery\tfor\tany\telements\tthat\tmatch\ta\tselector,\tsuch\tas data-image-role=\\\"trigger\\\".\tIf\tthe\tquery\tfinds\tmatches,\tit\twill\treturn\treferences\tto\tthe matching\telements. When\tyou\thave\ta\treference\tto\tan\telement,\tyou\tcan\tdo\tall\tsorts\tof\tthings\twith\tthe\telement. You\tcan\tread\tor\tchange\tthe\tvalues\tof\tits\tattributes,\tchange\tthe\ttext\tinside\tof\tit,\tand\teven get\taccess\tto\tthe\telements\taround\tit.\tWhen\tyou\tmake\tchanges\tto\tan\telement\tusing\ta reference,\tthe\tbrowser\tupdates\tthe\tpage\timmediately. In\tthis\tchapter,\tyou\twill\twrite\tJavaScript\tcode\tthat\twill\tget\treferences\tto\tthe\tanchor\tand detail\timage\telements,\tread\tthe\tvalues\tfrom\tthe\tanchor\u2019s\tdata\tattributes,\tand\tthen\tchange the\tvalue\tof\tthe\tdetail\timage\u2019s\tsrc\tattribute.\tThis\tis\thow\tyou\twill\tmake\tOttergram interactive. You\tmay\thave\tnoticed\tthat\tthe\tanchor\ttags\tand\tthe\tdetail\timage\u2019s\t<img>\ttag\tall\thave\ta data-image-role\tattribute,\tbut\ttheir\tvalues\tare\tdifferent.","Using\tthe\tsame\tdata\tattribute\tnames\tfor\tthe\tanchor\tand\t<img>\ttags\tis\tnot\trequired,\tbut\tit\tis a\tgood\tpractice.\tIt\treminds\tyou,\tthe\tdeveloper,\tthat\tthese\telements\twill\tbe\tpart\tof\tthe\tsame JavaScript\tbehavior. One\tlast\tchange\tis\tneeded\tin\tyour\tHTML\tbefore\tyou\tbegin\twork\ton\tyour\tJavaScript:\tYou need\tto\ttell\tthe\tHTML\tto\trun\tthe\tJavaScript.\tDo\tthis\tby\tadding\ta\t<script>\ttag\tin index.html.\tThis\t<script>\ttag\twill\trefer\tto\tthe\tfile\tscripts\/main.js,\twhich\tyou will\tcreate\tin\tjust\ta\tmoment. ... \t\t\t\t\t\t\t\t<\/div> \t\t\t\t\t\t<\/div> \t\t\t\t<\/main> \t\t\t\t<script\tsrc=\\\"scripts\/main.js\\\"\tcharset=\\\"utf-8\\\"><\/script> \t\t<\/body> <\/html> When\tthe\tbrowser\tsees\ta\t<script>\ttag,\tit\tbegins\trunning\tthe\tcode\tin\tthe\treferenced\tfile immediately.\tJavaScript\tcannot\taccess\tan\telement\twithin\tyour\tHTML\tbefore\tit\thas\tbeen rendered\tby\tthe\tbrowser,\tso\tputting\tthe\t<script>\ttag\tat\tthe\tbottom\tof\tthe\tbody\tensures that\tyour\tJavaScript\tdoes\tnot\trun\tuntil\tafter\tall\tthe\tmarkup\thas\tbeen\tparsed. Your\tHTML\tis\tnow\tready\tto\tconnect\twith\tthe\tJavaScript\tyou\tare\tabout\tto\twrite.\tBe\tsure\tto save\tindex.html\tbefore\tyou\tmove\ton.","Your\tFirst\tScript Time\tto\tcreate\ta\tscripts\tfolder\tand\tthe\tmain.js\tfile.\tRecall\tthat\tyou\tcan\tcreate folders\tfrom\twithin\tthe\tAtom\teditor.\tControl-click\t(right-click)\tottergram\tin\tthe\tlefthand panel\tand\tclick\tNew\tFolder\tin\tthe\tpop-up.\tEnter\tthe\tname\tscripts\tin\tthe\tprompt\tthat appears. Then,\tControl-click\t(right-click)\tscripts\tin\tthe\tlefthand\tpanel\tand\tchoose\tNew\tFile.\tThe prompt\twill\tpre-fill\tthe\ttext\tscripts\/.\tAfter\tthis,\tenter\tmain.js\tand\tpress\tReturn. Make\tsure\tyour\tfolder\tstructure\tlooks\tlike\tFigure\t6.3. Figure\t6.3\t\tOttergram\tfolder\tstructure The\tname\tmain.js\tdoes\tnot\thave\tany\tspecial\tsignificance\tfor\tthe\tbrowser,\tbut\tit\tis\ta common\tconvention\tused\tby\tmany\tfront-end\tdevelopers. One\tlast\tthing\tbefore\tyou\tdive\tinto\tJavaScript.\tYou\tneed\tto\tstart\tbrowser-sync,\tand\tto\tdo so\tyou\tneed\tto\tchange\tthe\tcommand\tyou\thave\tbeen\tusing\tslightly: browser-sync\tstart\t--server\t--browser\t\\\"Google\tChrome\\\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t--files\t\\\"*.html,\tstylesheets\/*.css,\tscripts\/*.js\\\" You\tadded\tthe\tpath\tscripts\/*.js\tto\tthe\tlist\tof\tfiles\tso\tthat\tbrowser-sync\twill\twatch\tfor changes\tto\tthe\tJavaScript\tas\twell\tas\tthe\tHTML\tand\tCSS.","Overview\tof\tthe\tJavaScript\tfor\tOttergram Before\tyou\tstart\tcoding,\tit\tis\talways\tgood\tto\thave\ta\tplan.\tHere\tis\tthe\tplain\tEnglish\tversion of\twhat\tyou\tneed\tto\tdo\twith\tOttergram. 1.\t Get\tall\tthe\tthumbnails. 2.\t Listen\tfor\ta\tclick\ton\teach\tone. 3.\t If\ta\tclick\toccurs,\tupdate\tthe\tdetail\timage\twith\tinfo\tfrom\tthat\tthumbnail. You\tcan\tbreak\tdown\t#3\tinto\tthree\tsubparts: 1.\t Get\tthe\timage\tURL\tfrom\tthe\tthumbnail\u2019s\tdata\tattribute. 2.\t Get\tthe\ttitle\ttext\tfrom\tthe\tthumbnail\u2019s\tdata\tattribute. 3.\t Set\tthe\timage\tand\ttitle\ton\tthe\tdetail\timage. Here\tis\tthat\tsame\tplan\texpressed\tas\ta\tdiagram\t(Figure\t6.4) Figure\t6.4\t\tPlan\tof\tattack\tfor\tOttergram This\tchapter\twill\twalk\tyou\tthrough\tcreating\tthe\tcode\tstarting\twith\tthe\tlast\tstep.\tThis\tis\tthe","\u201cbottom-up\u201d\tapproach,\tand\tit\tworks\twell\twhen\twriting\tJavaScript.","Declaring\tString\tVariables Your\tfirst\tJavaScript\ttask\tis\tto\tcreate\tstring\tvariables\tfor\teach\tof\tthe\tdata\tattributes\tyou added\tto\tthe\tmarkup.\t(If\tthose\tare\tunfamiliar\tterms,\tdo\tnot\tworry\t\u2013\twe\twill\texplain\tin\tjust a\tmoment.) At\tthe\ttop\tof\tmain.js,\tstart\tby\tadding\ta\tvariable\tnamed\tDETAIL_IMAGE_SELECTOR\tand assigning\tit\tthe\tstring\t'[data-image-role=\\\"target\\\"]'. var\tDETAIL_IMAGE_SELECTOR\t=\t'[data-image-role=\\\"target\\\"]'; This\tmight\tnot\tbe\tmuch\tcode,\tbut\tit\tis\tworth\ta\tcloser\tlook.\tLet\u2019s\tstart\tin\tthe\tmiddle,\twith the\t=\tsymbol.\tThis\tis\tthe\tassignment\toperator.\tUnlike\tin\tmathematics,\tthe\t=\tsymbol\tin JavaScript\tdoes\tnot\tmean\tthat\ttwo\tthings\tare\tequal.\tInstead,\tit\tmeans\t\u201cTake\tthe\tvalue\ton the\trighthand\tside\tand\tgive\tit\tthe\tname\ton\tthe\tlefthand\tside.\u201d On\tthe\trighthand\tside\tof\tthis\tparticular\tassignment\tis\ta\tstring\tof\ttext:\t'[data-image- role=\\\"target\\\"]'.\tA\tstring\tis\tjust\ta\tsequence\tof\tcharacters\trepresenting\ttext,\tand\tit\tis delimited\tby\tsingle\tquotation\tmarks.\tThe\ttext\tinside\tthe\tsingle\tquotes\thappens\tto\tbe\tthe attribute\tselector\tfor\tyour\tdetail\timage.\tThis\tis\ta\tclue\tthat\tyou\twill\tuse\tthis\tstring\tto\taccess that\telement. On\tthe\tlefthand\tside\tof\tthe\tassignment\tis\ta\tvariable\tdeclaration.\tIt\tmay\tbe\tuseful\tto\tthink of\ta\tvariable\tas\ta\tlabel\tthat\tyou\tcan\tuse\tto\trefer\tto\tsome\tvalue,\twhich\tcould\tbe\ta\tnumeric value,\ta\tstring\t(as\tin\tthis\tcase),\tor\tsome\tother\ttype\tof\tvalue.\tUsing\tthe\tvar\tkeyword,\tyou are\tcreating\ta\tvariable\tnamed\tDETAIL_IMAGE_SELECTOR. Next,\tdeclare\tvariables\tin\tmain.js\tfor\tthe\tdetail\ttitle\tselector\tand\tthe\tthumbnail\tanchor selector.\tAssign\tthe\tstrings\tfor\tthese\tselectors\tas\twell. var\tDETAIL_IMAGE_SELECTOR\t=\t'[data-image-role=\\\"target\\\"]'; var\tDETAIL_TITLE_SELECTOR\t=\t'[data-image-role=\\\"title\\\"]'; var\tTHUMBNAIL_LINK_SELECTOR\t=\t'[data-image-role=\\\"trigger\\\"]'; As\tthe\tname\tvariable\tsuggests,\ttheir\tvalues\tcan\tbe\treassigned\t\u2013\tthey\tcan\tvary.\tWriting variable\tnames\tin\tall\tcapital\tletters\tis\ta\tconvention\tthat\tdevelopers\tsometimes\tuse\twhen the\tvalues\tshould\tnot\tchange.\tOther\tlanguages\thave\tconstants\tthat\tserve\tthis\tpurpose. JavaScript\tis\tin\ttransition:\tES5\tdoes\tnot\thave\tconstants;\tES6\tdoes\t\u2013\tbut,\tas\twe\tsaid\tearlier, it\tis\tnot\tyet\tfully\tsupported.\tUntil\tconstants\tbecome\twell\tsupported,\tyou\tcan\tfollow\tthis convention\tto\tlabel\ta\tvalue\tthat\tshould\tnot\tchange. As\tan\taside,\tstrings\tcan\tbe\tdelimited\tby\tsingle\tor\tdouble\tquotes.\tYou\tare\tfree\tto\tuse\teither, but\tthis\tbook\twill\tuse\tsingle\tquotes\tas\ta\tconvention\tand\twe\tsuggest\tthat\tyou\tfollow\talong at\tleast\tfor\tthe\tprojects\tin\tthis\tbook. If\tyou\twant\tto\tuse\tdouble\tquotes,\tyou\thave\tto\tescape\tany\tdouble\tquotes\tthat\tare\tpart\tof\tthe string\tso\tthat\tthe\tbrowser\tdoes\tnot\tincorrectly\tparse\tthem\tas\tpart\tof\tthe\tcode.\tTo\tescape\ta character,\tyou\tprecede\tit\twith\ta\tbackslash,\tlike\tthis: var\tDETAIL_IMAGE_SELECTOR\t=\t\\\"[data-image-role=\\\\\\\"target\\\\\\\"]\\\"; Using\tsingle\tquotes\tis\tnot\ta\tguarantee\tthat\tyou\twill\tnot\tneed\tto\tescape\tcharacters.\tIf\ta string\tdelimited\tby\tsingle\tquotes\tcontains\tsingle\tquotes\t\u2013\tor\tapostrophes\t\u2013\tyou\thave\tto escape\tthem."]