afslutter en glædelig jul web - app grænseflade,,,, i denne forelæsning vil vi afslutte vores web - app hjælpe, så det ser perfekt ud og fungerer godt på alle skærmstørrelse.sidste gang, vi blev afrundet med stil det budskab, kasser, hvilket kun efterlader indhold at gøre.skal vi komme til sagen?okay!,,,, historien indtil nu, kan det være nødvendigt at indhente forudgående dele af denne forelæsning, i hvilket tilfælde:,, at designe en glædelig jul web - app grænseflade, bygning af glædelig jul web - app interface, budskabets indhold, budskabets indhold (bredde: 100%; farve: darken ($grå 30%); @ medier skærm og min bredde: $bryde to) (bredde: 75%; flyde: ret;} @ medier skærm og min bredde: $bryde tre) (bredde: 85%} @ medier skærm og min bredde: $bryde 4) (bredde: 75%;), erklæringer, budskabets indhold, sørg for, at bredden opfører sig selv, når de browser resizes.vi har brug for det til at være 100% - for små skærmstørrelser så det sidder pænt på billedet.når vi når vores $bryde to, bredde, vi så bruge indholdet og - bredde i lidt for at kompensere for det. den anden bryde punkter her bare bredde skalaer pænt i forhold til browseren bredde, så på en tablet - agtig beslutning vores budskab boks, er stadig pakket vertikalt men vores, budskabet er flydt ind i det, dvs. 75% bredde er nok ikke lang nok.vi trækker det tilbage til 75% bredde, når vi kommer til desktop - baseret størrelser til redegørelse for hukommelsen, flød og snævrere. en (farve: $green; &: svævning (farve: rød dollars;}} h3, p, div (margen: 0} h3 (font familie: $afsnit skrifttype; skriftstørrelsen: 200%; skrifttype vægt: 400; brev afstand: -0.02em; farve: $sort} p (farve: rød dollars; skrifttype vægt: 600;} div (margin top: $margen; overløb: skjult. - fru tekst overløb: cæsar, cæsar, tekst - o-text-overflow: overløb: cæsar.), den næste styles er simpelt.vi giver kun forbindelser en $grøn farve med $røde, svæv stat og overordnede margener, der fastsættes på h3, p og div elementer i, budskabet.de enkelte former for h3, p og div elementer er lidt mere fantasi.det, h3, er fastsat til at bruge $afsnit skrifttype, og har nogle brev afstand, der trækker i afstanden lidt mere kamp design.okay, tag den, styles er alle om at holde indholdet, der findes, så sørger vi for, oversvømmelse, er skjult, og hvis der er nogen overløb viser vi en, cæsar, viser, at der er mere tekst.sådan noget kan ske med server side kode (og sandsynligvis ville være), men det er rart at være her i css i forbindelse med denne forelæsning, redde dit arbejde og over til browseren...,,,,,,, det er fantastisk!vi har tre lidt forskellige udformninger, der foregår, som kontrolleres af den enkle stil over.det fuldender css for, hukommelsen, så alt, hvad vi skal gøre nu, er en kopi af avancen fem gange og ændre indholdet baseret på design.hvis en app fungerede rigtigt, vi behøver ikke at gøre dette, men for det pædagogiske behov.giv dem fem minutter til at kopiere, pasta og ændre den kode for hver rubrik. lad os tage et hurtigt kig i browseren at kontrollere vores stilarter arbejder helt, når vi ikke har mere end ét budskab kasse,,,,,, smukke!vores web - app, er helt sikkert ved at tage form, og vores budskab kasser fungerer efter hensigten, på alle browser størrelser. vi har erobret størstedelen af vores web - app nu, men der er stadig et vigtigt punkt tilbage: den fod.denne del af vores program er vigtigt, fordi det huser en bruger kan type /efter deres meddelelse.der er nogle ret vanskelige bidder til dette, så lad os komme i gang!, ,The Footer,First things first, let's write the following markup in our index.html file:, <footer> <h4>Thank your Family, Friends, Followers</h4> <div class="connect-box"> <div class="connected-as group"> <img src="images/faces/jl.jpg" class="connected-image" alt=""> <span>Connected as @tomaslau</span> <a href="#" class="disconnect btn btn-grey">Disconnect</a> </div> <form action="" method="post"> <div class="connect-message"> <textarea name="connect" id="connect" cols="30" rows="10" placeholder="Type your message here to your friends, family and followers"></textarea> < /div > < "id =" postbtn "klasse =" post - btn "> efter tak < /knap > < /form > < div klasse =" sociale knapper gruppe "> < href ="&#"klasse =" sociale btn twitter "> tweet det elsker < /a > < en href ="&#"klasse =" sociale btn facebook "> andel på facebook < /a > < /div > < div klasse =" copyright "> 2013 & en kopi, lavet med kærlighed i london.< /div > < /div > < /fod > er der et par dele denne fodboldkamp.de primære fokusområde er form i midten, som, selv om de ikke nødvendigvis brug for her, vil gøre det muligt for brugeren at udstationere deres budskab.den sociale btn, har brug for nogle layout skiftende styles og alle de fod indhold skal være centreret på skærmen.lad os begynde øverst og gå direkte til css... fod (polstring: $polstring * 4; tekst tilpasse: center; baggrund: $hvid; h4 (margin top: 0px; skrifttype familie: $afsnit skrifttype; skriftstørrelsen: 26px; skrifttype vægt: 400; farve: $darkgrey;}} for det første bør vi sætte, polstring, på den fod, at presse alt væk fra kanten pænt.for at få alt samlet på skærmen, vi har fastsat, tekst, tilpasse, ejendomsret til midten.de former for temaet /under pos. her er meget enkelt og meget ligner det, vi har gjort inden for en titel.- lad os tjekke det ud i browseren.,,,, det er en god start, men vi har stadig en vej at gå.lad os fortsætte i vores sass fil.,. - kasse (bredde: 100% margen: 0 auto; @ medier skærm og min bredde: $bryde tre) (bredde: 525px;}}. forbundet, som forbinder besked. {baggrund: lette ($grå, 4%);} ligesom mange af vores elementer, forbind kasse, skal være 100% - for mindre skærme.det bør så kontakt, på vores $bryder 3, punkt til bredde set i den udformning, der er 525px,.vi så baggrundsfarve i forbindelse med og forbinde budskab, et lys grå farve. "forbundet" afdeling. tilsluttet som {grænse øverste venstre spoleben: 5px; grænseoverskridende øverste højre spoleben: 5px; grænseoverskridende nederst: 1px fast $hvid; tekst tilpasse: venstre polstring: $polstringsmaterialer /2 $polstring * 2. forbundet image (bredde: 30px. højde: 30px; grænseoverskridende radius: 50% flyder: venstre margen: $margen /2} levetid (flyde: venstre. højde: 30px; linje højde: 30px; farve: $darkgrey;}. afbryd {holdning - absolut. top. - 10px; ret: - 10px; polstring: $polstringsmaterialer /2 $polstring.margen top: 3px; grænseoverskridende radius: 20px; baggrund: $hvid; tekst): ingen; farve: $darkgrey; tekst omdanne: store; skriftstørrelsen: 80%; &: den {baggrund: $røde; farve: $hvid;} @ medier skærm og min bredde: $bryde to) {holdning: statiske; flyde: ret.}), denne rimelige del af css for den øverste del af vores, forbinde kasse.det første skridt er at afrunde de øverst til højre og venstre, forbundet med.vi ønsker også en let adskillelse mellem denne kasse og det følgende afsnit er så simpelt, 1px fast $hvide grænse vil gøre det pænt.endelig har vi brug for noget polstring, men vi har brug for mere til venstre og højre, end vi er på toppen og bunden, så at holde det pænt og ryddeligt vi bruger simpelthen vores $polstring, variable dele af to top og bund, og formere sig i to til venstre og højre.det er et godt eksempel på, hvor vi ændrer vores variabel værdi stadig vil holde alt i forhold til pænt., twitter detaljer, de næste to erklæringer kontrol den tilsluttede brugeres twitter profil image og deres @ brugernavn.for at holde det standard fastsatte vi den bredde og højde af image i forskning, så vi ved, at det altid vil være et kvadrat, af den rette størrelse.for at få det til at se ud som en cirkel, blot at anvende en grænse radius, fra 50% til det.både profil billede og @ brugernavn bør være drevet tilbage, og vi bør give @ brugernavn, få det væk fra en margen til profil billede., sluk knappen,, afbryde, knap har nogle forskellige ting.på en lille skærm beslutninger, vi har brug for denne knap til at stå i vejen for den anden tekst i denne æske, så jeg valgte en god mulighed ville være absolut position, det bare ud over dens beholder.en position, - 10px, øverst og ikke er i orden.du kan ønske at lege med, hvis du synes, det kunne være bedre.den anden styles her kontrol ud med en simpel, svæv, at tilføje en flot dristige, $rød farve for at understrege den indsats.en smule over her vil bare sparke knappen tilbage i dokumentet flow og flyder lige så det sidder overfor twitter detaljer.dette vil ske noget ved og over vores $bryde to, punkt. red, red, red!det er tid til at tage et kig igen:,,,, det ser godt ud!vi er meget tæt på at få det færdigt nu.den næste er beskeden rubrik område.,, beskeden kasse. - meddelelse (grænse nederste, venstre radius: 5px; grænseoverskridende nederste højre spoleben: 5px; textarea {grænse: ingen; baggrund: gennemsigtige; bredde: 100%, højde: 130px; polstring: $polstring * 2 - webkit overgang: rubrik skygge 0.4s lette, - - 0.4s lette overgangen: rubrik skygge, - o-transition: rubrik skygge 0.4s lette; - ms overgang: rubrik skygge 0.4s lette; overgangen: rubrik skygge 0.4s lette; &: vægt (oversigt: ingen. - webkit rubrik skygge: indpresningsdybde 0px 0px 20px darken ($grå, 10%); rubrik skygge: indpresningsdybde 0px 0px 20px darken ($grå, 10%); - webkit overgang: rubrik skygge 0.4s lette, - - 0.4s lette overgangen: rubrik skygge.- o-transition: rubrik skygge 0.4s lette; - ms overgang: rubrik skygge 0.4s lette; overgangen: rubrik skygge 0.4s lette;}}}, denne blok skal placeres efter, sammenhængende, blok, men stadig inden for det samlede, fod, erklæringer,.,, forbinde besked, boks har afrundede hjørner på bunden. til venstre og højre for at fuldføre fremkomsten af den samlede beholder med afrundede hjørner.den textarea sig helt sikkert brug for noget - som browser misligholdelse er ret grim.disse former er ret enkel, men du kan se, vi er ved at tilføje en css overgang til rubrik skygge.konstruktionen ikke vise det, fokus, stat skal se ud, så jeg besluttede at få en lille skygge i hele vejen rundt inde i boksen.det forsvinder, når fokus er tabt. lad os se det i praksis, skal vi?,,,, jeg tror, det ser ret godt ud.den skygge, måske ikke lige dig, så lege med at få noget, du mener, er rigtigt. efter "tak". efter btn (bredde: 100%; tekst tilpasse: center; polstring: $polstring * 2 margen top: $margen * 2 baggrund: $green. farve: $hvid; skrifttype vægt: 500; grænse: ingen; grænseoverskridende radius: 5px; - webkit overgang: alle 0.4s lette; - moz overgang: alle 0.4s lette; - o-transition: alle 0.4s lette; - ms overgang: alle 0.4s lette; overgangen: alle 0.4s lette; &: den {baggrund: lette ($grønne, 10%); - webkit overgang: alle 0.4s lette; - moz overgang: alle 0.4s lette; - o-transition: alle 0.4s lette; - ms overgang: alle 0.4s lette; overgangen: alle 0.4s lette;}}, allevigtigt, post - tak, knap!ganske enkelt styles.de skal bare fylde bredden af beholderen på alle tidspunkter.det vil også blive skubbet væk fra den besked område, en smule, så en margen, hjælper os her.vi har en overgang erklæring, men denne gang er det fastsat, at alle, for at animere alle ejendomme, der har en værdi ændring at holde alt glat.det betyder også, at vi i fremtiden kan tilføje andre former som en farve, ændre på den, og det vil stadig være animeret., medmindre sagen og tage endnu et kig:,,,,,,, det er dejligt.det er præcis, hvad vi vil have.tid til at stil de sociale medier forbindelser.,, sociale medier, knapper, sociale knapper (polstring til venstre: 0px; margen top: $margen * 2; @ medier skærm og min bredde: $bryde tre) (polstring: $polstring * 3 0 $polstring * 3 117px; margen top: 0px.}. sociale btn (polstring: $polstringsmaterialer /2 14px; bredde: 100%; display: blok; margen: $margen /2, 0; grænseoverskridende radius: 20px; tekst tilpasse: center; farve: $hvid; tekst): ingen; tekst omdanne: store; skriftstørrelsen: 70%; @ medier skærm og (min bredde: $bryde tre) {flyde: venstre;margen: $margen /2; polstring: $polstringsmaterialer /2 $polstring * 2: bredde: auto;}}. twitter {baggrund:�acee; &: den {baggrund: lette (# 00acee, 10%);}}. facebook {baggrund:b5998; &: den {baggrund: lette (# 3b5998, 10%);}}} denne kode bør gå indenfor, fod, blok i vores sass fil.tanken med disse knapper er for dem at være 100% - og stablede vertikalt i mobile /tablet resolutioner.så du gå op til den skala til desktop - de skal modsvare design.medierne forespørgsel til sociale knapper, med en hel del af forsøg og fejltagelser, for at opnå en "samlet" se på desktop - størrelser.værdien af 117px, til venstre polstring var det punkt, jeg fandt, at give det ønskede resultat. hver, sociale btn, har nogle enkle stil give basen udseende.vi må præcisere styles for hver knap.i denne formular er det bare et, baggrund, farve, forskel.her bemærke, at jeg har brugt hex værdi og ikke en fræk variabel.der er ingen reel grund til andet end dette er det eneste sted, hvor disse anvendes farver, således at ændre dem, vil ikke blive meget af et spørgsmål.hvis vi havde den sociale forbindelser, andre steder, jeg ville helt sikkert have sat dem op som variabler.begge knapper er lidt lysere udgave af deres baggrund, svæv,.,, før vi ser, kan vi lige så godt få vores endelige stil blok på plads:,. ophavsret (skriftstørrelse: 90%; farve: $darkgrey; @ medier skærm og min bredde: $bryde tre) (skriftstørrelse: 100%), som navnet antyder, at denne blok styrer vores små ophavsret mærke i meter.den skriftstørrelse, svarer til browser størrelse ændringer her, med 100% på $bryde tre,., redde og tage et kig på vores mesterværk!,,,,, der deler,,,, søde!det hele ser awesome, og at kun var vores jul web - app grænseflade.,, bonus, er dette et stærkt sæsonbetinget tema, der er baseret på en jul og nytår begreb.med bare lidt du nemt kunne ændre den, så den passer til dine behov, f.eks.:,,, himlen er topmålet, konklusion, jeg håber du har nydt at arbejde gennem dette net app med mig.det var et sjovt projekt til at bygge, og jeg er glad for, at jeg var i stand til at dele mine metoder til, hvordan til at bygge den.kildekoden er altid til rådighed via downloade forbindelser så føle sig fri til at grave i det, og lad mig vide, i de bemærkninger, de tanker, de har, eller hvis nogen af jer vil forbedre det. tak til thomas for den oprindelige udformning, og tak for behandling og efter.