Share
I denne opplæringen vil vi fullføre vår web app-frontend, slik at alt ser perfekt og fungerer pent på alle skjermstørrelser. Sist gang vi rundet av ved å style meldingsboksen, forlot bare innholdet igjen å gjøre. Skal vi dykke rett inn? ok!
Du må kanskje hente opp tidligere deler av denne opplæringen, i hvilket tilfelle:
.meldingsinnhold bredde: 100%; farge: mørkere ($ grå, 30%); @media skjerm og (min bredde: $ break-two) bredde: 75%; flyte: høyre; @ media skjerm og (min bredde: $ break-three) bredde: 85%; @ media skjerm og (min bredde: $ break-four) bredde: 75%;
Erklæringene for meldingsinnholdet sørg for at bredden oppfører sig når nettleseren endrer størrelsen. Vi trenger den til å være 100% bred for små skjermstørrelser, slik at den sitter pent under bildet. Når vi treffer vår $ Break-to bredden må vi da flyte innholdet riktig og trekke bredden litt for å kompensere for det.
De andre bruddpunktene her, sørg bare for at bredden skalerer pent i forhold til nettleserbredden, så på en tablett-esque oppløsning vår meldingsboks er fortsatt stablet vertikalt, men vår meldingsinnholdet er floated innsiden av det som betyr at 75% bredde sannsynligvis ikke er bred nok. Vi trekker den tilbake til 75% bredde når vi kommer til desktop-baserte størrelser for å ta hensyn til meldingsboks blir floated og smalere.
en farge: $ green; &: svever farge: $ rød; h3, p, div margin: 0; h3 font-family: $ title-font; skriftstørrelse: 200%; font-weight: 400; brevavstand: -0.02em; farge: $ black; p farge: $ rød; font-weight: 600; div margin-top: $ margin; overløp: skjult; -ms-tekst-overløp: ellipsis; -o-tekst-overløp: ellipsis; tekstoverløp: ellipsis;
De neste stilene her er veldig enkle. Vi gir bare noen linker a $ grønn farge med a $ rød svinger tilstand og overstyrer eventuelle marginer som er satt på h3, p og div elementer inneholdt i meldingsinnholdet. De individuelle stilene for h3, p og div-elementene er litt mer fancy. De h3 er satt til bruk $ Title-font og har noen avstand mellom bokstavene satt for å bare trekke inn avstanden litt for å passe tett sammen med designen. De div tag stiler handler om å holde innholdet inneholdt, så vi sørger for at flyte er skjult og hvis det er overløp viser vi en ellipse for å indikere at det er mer tekst. Denne typen ting kan gjøres med serverens sidekode (og sannsynligvis ville være), men det er fint å inkludere det her i CSS for formålet med denne opplæringen.
Lagre arbeidet ditt og hodet videre til nettleseren ...
Det ser flott ut! Vi har tre litt forskjellige layouter som skjer, som alle styres av de enkle stilene ovenfor. Det fullfører CSS for meldingsboks så alt vi trenger å gjøre nå er å kopiere oppmerkningen fem ganger og endre innholdet basert på designet. Hvis denne appen skulle fungere for ekte, ville det ikke være nødvendig å gjøre dette, men for dette opplæringsbehovet må det! Gi deg fem minutter til å kopiere, lime inn og endre koden for hver boks.
La oss bare ta en rask titt i nettleseren for å sjekke at våre stiler fungerer perfekt når vi har mer enn én meldingsboks...
Vakker! Vår web app er definitivt i ferd med å ta form nå, og våre meldingsbokser virker som beregnet på alle nettleserstørrelser.
Vi har erobret mesteparten av vår webapp nå, men det er fortsatt en viktig del igjen: bunntekst. Denne delen av appen vår er viktig fordi den huser stedet en bruker kan skrive / legge inn meldingen deres. Det er noen ganske vanskelige biter til dette, så la oss komme i gang!
Første ting først, la oss skrive følgende oppslag i vår index.html-fil:
Det er noen få seksjoner til denne bunnteksten. Hovedfokuset er skjemaet i midten som, selv om det ikke nødvendigvis er nødvendig her, vil tillate brukeren å legge ut meldingen sin. De sosial-btns trenger noen layoutendringsstiler og alt innholdet i bunnteksten må være sentrert på skjermen. La oss starte på toppen og komme rett inn i CSS ...
footer polstring: $ polstring * 4; tekst-align: center; bakgrunn: $ white; h4 margin-top: 0px; font-familie: $ title-font; skriftstørrelse: 26px; font-weight: 400; farge: $ darkgrey;
Først av alt bør vi sette noen padding på bunntekst å skyve alt bort fra kantene pent. For å få alt sentrert på skjermen, satte vi nettopp tekst-Juster eiendom til senter. Stilene for tagline / overskriften her er ganske enkle og er svært lik det vi har gjort før for en tittel. La oss sjekke dette ut i nettleseren!
Det er en god start, men vi har fortsatt en vei å gå! La oss fortsette i vår Sass-fil.
.koblingsboks bredde: 100%; margin: 0 auto; @media skjerm og (min bredde: $ break-three) bredde: 525px; .koblet-som, .koblingsmelding bakgrunn: lysere ($ grå, 4%);
Som mange av våre elementer, den koble-box bør være 100% bred for mindre skjermer. Det bør da bytte, på vår $ Break-tre pek, til bredden sett i designet som er 525px. Vi setter deretter bakgrunnsfargen til koblet som- og koble-melding til en lys grå farge.
.tilkoblet-som grense til venstre-radius: 5px; Grense-topp-høyre-radius: 5px; border-bottom: 1px solid $ white; tekstjustering: venstre; polstring: $ polstring / 2 $ polstring * 2; .koblet bilde bredde: 30px; høyde: 30px; border-radius: 50%; flyte: venstre; margin-høyre: $ margin / 2; span float: left; høyde: 30px; linjehøyde: 30px; farge: $ darkgrey; .koble posisjon: absolutt; topp: -10px; høyre: -10px; polstring: $ polstring / 2 $ polstring; margin-topp: 3px; border-radius: 20px; bakgrunn: $ white; tekst-dekorasjon: ingen; farge: $ darkgrey; tekst-transformer: store bokstaver; fontstørrelse: 80%; &: svever bakgrunn: $ rød; farge: $ hvit; @media skjerm og (min bredde: $ break-two) posisjon: statisk; flyte: høyre;
Denne rette delen av CSS er for den øverste delen av vår koble-box. Det første trinnet er å avrunde toppen til høyre og venstre for koblet som-. Vi vil også ha en liten skille mellom denne boksen og delen nedenfor, så enkelt 1px solid $ hvit grensen vil gjøre trikset pent. Til slutt trenger vi litt polstring, men vi trenger mer til venstre og høyre enn vi gjør på toppen og bunnen, for å holde ting fint og pent, bruker vi bare vår $ padding variabel og divisjon med to for topp og bunn, og multipliser med to for venstre og høyre. Dette er et godt eksempel på hvor endring av vår variable verdi vil fortsatt holde alt i forhold pent.
De to neste deklarasjonene styrer de tilkoblede brukerens Twitter-profilbilde og deres @brukernavn. For å holde tingene standard, setter vi bredden og høyden på bildet i CSS slik at vi vet at det alltid vil være et firkant av riktig størrelse. For å få det til å vises som en sirkel, bruk bare a border-radius av 50% til den. Både profilbildet og @brukernavnet skal flyttes til venstre, og vi bør gi @ brukernavnet litt margin for å skyve det bort fra profilbildet.
De koble fra knappen har noen forskjellige ting som skjer. Ved små skjermoppløsninger trenger vi denne knappen for å være ute av veien for den andre teksten i denne boksen, så jeg bestemte meg for et godt alternativ ville være å plassere det helt utover beholderen. En posisjon av -10px for topp og høyre er bra. Du kan ønske å leke med dette hvis du tror det kan være bedre plassert. De andre stilene her styrer utseendet med en enkel sveve Legg til en fin fet skrift $ rød farge for å understreke koblingsaksjonen. Den eneste responsen her, vil bare sparke knappen tilbake i dokumentflyten og flyte den riktig slik at den sitter overfor Twitter-detaljene. Dette vil skje for noe over og over vår $ Break-to punkt.
Lagre, lagre, lagre! Det er på tide å ta en titt igjen:
Ser bra ut! Vi blir svært nær å få dette ferdig nå. Neste opp er meldingsboksområdet.
.Koble meldingen grense-bunn-venstre-radius: 5px; grense bunn-høyre-radius: 5px; textarea border: none; bakgrunn: gjennomsiktig; bredde: 100%; høyde: 130px; polstring: $ polstring * 2; -webkit-overgang: box-shadow 0.4s enkelhet; -moz-overgang: box-shadow 0.4s enkelhet; -Overgang: Box-Shadow 0.4s Enkel; -ms-overgang: Box-Shadow 0.4s enkelhet; Overgang: Box-Shadow 0.4s Enkel; &: fokus disposisjon: ingen; -webkit-boks-skygge: Innsett 0px 0px 20px mørkere ($ grå, 10%); boks-skygge: innsett 0px 0px 20px mørkere ($ grå, 10%); -webkit-overgang: box-shadow 0.4s enkelhet; -moz-overgang: box-shadow 0.4s enkelhet; -Overgang: Box-Shadow 0.4s Enkel; -ms-overgang: Box-Shadow 0.4s enkelhet; Overgang: Box-Shadow 0.4s Enkel;
Denne blokken skal plasseres etter koblet som- blokkere, men fortsatt inne i det totale bunntekst erklæringer.
De koble-melding boksen har avrundede hjørner nederst til venstre og høyre for å fullføre utseendet til samlet beholder å ha avrundede hjørner. Textarea selv trenger definitivt noen styling som nettleser standard er nede høyre gult! Disse stilene er ganske enkle, men du kan se at vi legger til en CSS-overgang for box-shadow. Designet viste ikke hva a fokus Stat skal se ut så jeg bestemte meg for å ha en subtil skyggefade i hele veien rundt innsiden av esken. Det fades deretter ut når fokuset går tapt.
La oss se det i aksjon skal vi?
Jeg synes det ser ganske bra ut! Boksen-skyggen kan ikke være til din smak, så lek med det for å få noe du føler er riktig.
.post-btn bredde: 100%; tekst-align: center; polstring: $ polstring * 2; margin-topp: $ margin * 2; bakgrunn: $ green; farge: $ hvit; font-weight: 500; grense: ingen; border-radius: 5px; -webkit-overgang: alle 0.4 s enkelhet; -moz-overgang: alle 0.4 s enkle; -o-overgang: alle 0.4s enkelt; -ms-overgang: alle 0.4 s enkelhet; overgang: alle 0,4 enkelt; &: svever bakgrunn: lyser ($ green, 10%); -webkit-overgang: alle 0.4 s enkelhet; -moz-overgang: alle 0.4 s enkle; -o-overgang: alle 0.4s enkelt; -ms-overgang: alle 0.4 s enkelhet; overgang: alle 0,4 enkelt;
Alt er viktig Legg inn 'Takk' knapp! Ganske enkle stiler her. Knappen skal bare fylle beholderens bredde til enhver tid. Det bør også skyves vekk fra meldingsområdet litt, så noen margin-top hjelper oss her. Vi har en annen overgangsdeklarasjon, men denne gangen er den satt til alle for å animere hver eiendom som har en verdiendring for å holde alt glatt. Dette betyr også at vi i fremtiden kan legge til andre stiler som a farge endre på svinger og det vil fortsatt være animert.
Lagre filen og ta en ny titt:
Herlig. Dette er akkurat det vi ønsker. Tid til å utforme disse sosiale medier-linkene.
.sosiale knapper polstring-venstre: 0px; margin-topp: $ margin * 2; @media skjerm og (min bredde: $ break-three) polstring: $ polstring * 3 0 $ polstring * 3 117px; margin-topp: 0px; .social-btn polstring: $ polstring / 2 14px; bredde: 100%; skjerm: blokk; margin: $ margin / 2 0; border-radius: 20px; tekst-align: center; farge: $ hvit; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; skriftstørrelse: 70%; @media skjerm og (min-bredde: $ break-three) float: left; margin: $ margin / 2; polstring: $ polstring / 2 $ polstring * 2; bredde: auto; .twitter bakgrunn: # 00acee; &: hover bakgrunn: lighten (# 00acee, 10%); .facebook bakgrunn: # 3b5998; &: svever bakgrunn: lighten (# 3b5998, 10%);
Denne koden skal gå inn i bunntekst blokkere i vår Sass-fil. Ideen med disse knappene er at de skal være 100% brede og stablet vertikalt på mobil / tabletoppløsninger. Så når du flytter opp skalaen til skrivebordet, bør de matche designet. Mediasøket for sosial-knapper involvert ganske mye prøve og feil for å oppnå et "sentrert" blikk på skrivebordsstørrelser. Verdien av 117px for venstre polstring var poenget jeg fant for å gi det ønskede resultatet.
Hver sosial-btn har noen enkle stiler for å gi grunnutseendet. Vi angir deretter stilene for hver knapp. I denne appen er det bare en bakgrunnsfarge forskjell. Merk her at jeg har brukt hex-verdien og ikke en Sass-variabel. Det er ingen reell grunn til dette annet enn dette er det eneste stedet disse farger er brukt, så det ville ikke være mye av et problem å endre dem. Hvis vi hadde de sosiale koblingene andre steder, ville jeg definitivt ha satt dem opp som variabler. Begge knappene har en litt lettere versjon av bakgrunnen på sveve.
Før vi tar en titt, kan vi også sette vår siste stilblokk på plass:
.opphavsrett font-size: 90%; farge: $ darkgrey; @media skjerm og (min-bredde: $ break-three) font-size: 100%
Som navnet antyder, kontrollerer denne blokken vår lille opphavsrettsmerke i bunnteksten. Skriftstørrelsen svarer til størrelsen på nettleserstørrelsen, og viser 100% på $ Break-tre.
Lagre og ta en titt på vårt mesterverk!
Hyggelig! Alt ser fantastisk ut, og det handler om å bryte opp vår Christmas Web App Interface!
Dette er et tungt sesongbasert tema, basert på et jul og nyttårskonsept. Med bare en liten tilpasning kan du enkelt endre det slik at det passer dine behov, for eksempel:
Jeg håper virkelig du har hatt glede av å jobbe gjennom denne webapps med meg. Det var et morsomt prosjekt å bygge, og jeg er glad jeg var i stand til å dele mine teknikker på hvordan å bygge den. Kildekoden er alltid tilgjengelig via nedlastingslinkene, så vær så snill å grave rundt og gi meg beskjed i kommentarene dine tanker du har, eller hvis noen av dere ville forbedre det på noen måte.
Takk til Tomas for det første designet, og takk for at du leser og følger med.
Accentsconagua