Share
In deze tutorial maken we onze webapp-front-end af, zodat alles er perfect uitziet en op alle schermformaten netjes functioneert. De laatste keer hebben we afgerond met het opmaken van de berichtvakken, waardoor alleen nog de inhoud overblijft. Zullen we er meteen in duiken? OK!
Misschien moet je de vorige delen van deze tutorial inhalen, in welk geval:
.message-content width: 100%; kleur: donkerder ($ grijs, 30%); @media-scherm en (min-breedte: $ break-two) width: 75%; zweven: rechts; @media-scherm en (min-breedte: $ break-three) width: 85%; @media-scherm en (min-width: $ break-four) width: 75%;
De verklaringen voor berichtinhoud zorg ervoor dat de breedte zich gedraagt wanneer de grootte van de browser wordt gewijzigd. We hebben het nodig om 100% breed te zijn voor kleine schermformaten, zodat het mooi onder de afbeelding past. Zodra we onze hit hebben $ Break-twee breedte moeten we dan de inhoud rechts laten zweven en de breedte een beetje naar binnen trekken om dat te compenseren.
De andere breekpunten hier zorgen er gewoon voor dat de breedte netjes in verhouding staat tot de breedte van de browser, dus op een tablet-achtige resolutie berichten box is nog steeds verticaal gestapeld maar onze berichtinhoud is erin gedreven, wat betekent dat de 75% breedte waarschijnlijk niet breed genoeg is. We trekken het terug naar 75% breedte zodra we de grootte van desktop-pc's hebben bereikt berichten box wordt zweefde en smaller.
a kleur: $ groen; &: hover color: $ red; h3, p, div margin: 0; h3 font-family: $ title-font; lettergrootte: 200%; font-gewicht: 400; letter-spacing: -0.02em; kleur: $ zwart; p kleur: $ rood; font-gewicht: 600; div margin-top: $ marge; overloop verborgen; -ms-text-overflow: ellipsis; -o-text-overflow: ellips; tekstoverloop: ellips;
De volgende stijlen zijn hier heel eenvoudig. We geven alleen maar links $ groen kleur met een $ rood zweven staat en overschrijft alle marges die zijn ingesteld op de h3-, p- en div-elementen die zich binnenin bevinden berichtinhoud. De individuele stijlen voor de h3-, p- en div-elementen zijn iets chiquer. De h3 is ingesteld om te gebruiken $ Title-font en heeft wat letterafstand zo ingesteld dat de afstand iets wordt ingetrokken om beter bij het ontwerp te passen. De div tagstijlen hebben alles te maken met het bewaren van de inhoud, dus zorgen we ervoor dat de overloop is verborgen en als er een overloop is, laten we dat zien ellips om aan te geven dat er meer tekst is. Dit soort dingen kan gedaan worden met server side code (en waarschijnlijk zou dit ook zo zijn) maar het is leuk om het hier in de CSS op te nemen voor het doel van deze tutorial.
Sla je werk op en ga naar de browser ...
Dat ziet er geweldig uit! We hebben drie enigszins verschillende lay-outs die allemaal worden bestuurd door de eenvoudige stijlen hierboven. Dat voltooit de CSS voor de berichten box dus alles wat we nu moeten doen is de opmaak vijf keer kopiëren en de inhoud wijzigen op basis van het ontwerp. Als deze app echt zou functioneren, hoeven we dit niet te doen, maar voor deze tutorial moet dat wel! Geef uzelf vijf minuten om de code voor elk vak te kopiëren, plakken en wijzigen.
Laten we nog een keer kort kijken in de browser om te controleren of onze stijlen perfect werken als we er meer dan één hebben berichten box...
Mooi! Onze webapp krijgt nu duidelijk vorm en onze berichtendozen werken zoals bedoeld voor alle browserformaten.
We hebben het grootste deel van onze webapp nu overwonnen, maar er is nog een belangrijk deel over: het footer. Dit deel van onze app is belangrijk omdat het de plaats herbergt waar een gebruiker zijn bericht kan typen / plaatsen. Er zijn een aantal behoorlijk lastige dingen, dus laten we aan de slag gaan!
Laten we eerst de volgende markeringen in ons index.html-bestand schrijven:
Dit voetgedeelte bevat een paar secties. Het belangrijkste focusgebied is de vorm in het midden die, hoewel niet noodzakelijk hier nodig, de gebruiker in staat stelt zijn bericht te posten. De sociaal-btns zullen een aantal lay-outveranderende stijlen nodig hebben en alle inhoud van de footer moet op het scherm gecentreerd zijn. Laten we bovenaan beginnen en direct in de CSS komen ...
footer opvulling: $ opvulling * 4; text-align: center; achtergrond: $ wit; h4 margin-top: 0px; font-family: $ title-font; lettergrootte: 26px; font-gewicht: 400; kleur: $ donkergrijs;
Eerst en vooral moeten we er wat instellen vulling op de footer om alles van de randen weg te duwen. Om alles gecentreerd op het scherm te krijgen hebben we zojuist de text-align eigendom tot centrum. De stijlen voor de slogan / kop hier zijn vrij eenvoudig en lijken veel op wat we eerder hebben gedaan voor een titel. Laten we dit eens bekijken in de browser!
Het is een goed begin, maar we hebben nog een weg te gaan! Laten we doorgaan in ons Sass-bestand.
.connect-box breedte: 100%; marge: 0 auto; @media-scherm en (min-breedte: $ break-three) width: 525px; .connected-as, .connect-message background: lighten ($ grey, 4%);
Zoals veel van onze elementen, de connect-box moet voor kleinere schermen 100% breed zijn. Het moet dan overschakelen naar onze $ Break-drie punt, op de breedte gezien in het ontwerp dat is 525px. Vervolgens stellen we de achtergrondkleur in van de contact-as en connect-bericht tot een lichtgrijze kleur.
.connected-as border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid $ white; text-align: left; opvulling: $ opvulling / 2 $ opvulling * 2; .connected-image width: 30px; hoogte: 30 px; grensradius: 50%; zweven: links; margin-right: $ marge / 2; span float: left; hoogte: 30 px; regelhoogte: 30px; kleur: $ donkergrijs; .disconnect position: absolute; top: -10px; rechts: -10px; opvulling: $ padding / 2 $ padding; margin-top: 3px; grensradius: 20px; achtergrond: $ wit; tekstdecoratie: geen; kleur: $ donkergrijs; text-transform: hoofdletters; lettergrootte: 80%; &: hover background: $ red; kleur: $ wit; @media-scherm en (min-width: $ break-two) position: static; zweven: rechts;
Deze mooie brok CSS is voor het bovenste gedeelte van onze connect-box. De eerste stap is om de top rechts en links van af te ronden contact-as. We willen ook een kleine scheiding tussen deze doos en het gedeelte hieronder, dus een simpele 1px solide $ wit border zal het goed doen. Ten slotte hebben we wat opvulling nodig, maar we hebben links en rechts meer nodig dan boven en onder, dus om dingen netjes en netjes te houden, gebruiken we gewoon onze $ padding variabel en deel door twee voor boven en onder, en vermenigvuldig met twee voor links en rechts. Dit is een goed voorbeeld van waar het veranderen van onze variabele waarde nog steeds alles in proportie zal houden.
De volgende twee verklaringen bepalen de Twitter-profielafbeelding van de verbonden gebruikers en hun @gebruikersnaam. Om de dingen standaard te houden, stellen we de breedte en hoogte van de afbeelding in de CSS in, zodat we weten dat het altijd een vierkant van de juiste grootte is. Om het als een cirkel te laten lijken, moet je gewoon een border-radius van 50%. Zowel de profielafbeelding als @gebruikersnaam moeten naar links worden verplaatst en we moeten de @gebruikersnaam een marge geven om deze weg te duwen van de profielafbeelding.
De Loskoppelen knop heeft een paar verschillende dingen aan de hand. Bij resoluties op een klein scherm hebben we deze knop nodig om uit de buurt te zijn van de andere tekst in deze doos, dus ik besloot dat het een goede optie zou zijn om de tekst absoluut boven en buiten de container te plaatsen. Een positie van -10px want boven en rechts is prima. Misschien wil je hiermee spelen als je denkt dat het beter geplaatst kan worden. De andere stijlen hier bepalen de look met een simpele zweven staat het toevoegen van een mooie vetgedrukte tekst $ rood kleur om de loskoppeling actie te benadrukken. Het enige reactievermogen hier schuift de knop gewoon terug in de documentstroom en zweeft hem recht zodat hij tegenover de Twitter-details staat. Dit gebeurt voor alles op en boven onze $ Break-twee punt.
Opslaan, opslaan, opslaan! Het is tijd om opnieuw te kijken:
Ziet er goed uit! We komen er nu bijna aan toe om dit nu af te ronden. Het volgende is het gebied van de berichtendoos.
.connect-message border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; textarea border: none; achtergrond: transparant; breedte: 100%; hoogte: 130 px; opvulling: $ opvulling * 2; -webkit-overgang: box-shadow 0.4s gemak; -moz-overgang: box-shadow 0.4s gemak; -o-transition: box-shadow 0.4s gemak; -ms-overgang: box-shadow 0.4s gemak; overgang: box-shadow 0.4s gemak; &: focus outline: none; -webkit-vak-schaduw: inzet 0px 0px 20px donkerder ($ grijs, 10%); box-shadow: inzet 0px 0px 20px donkerder ($ grijs, 10%); -webkit-overgang: box-shadow 0.4s gemak; -moz-overgang: box-shadow 0.4s gemak; -o-transition: box-shadow 0.4s gemak; -ms-overgang: box-shadow 0.4s gemak; overgang: box-shadow 0.4s gemak;
Dit blok moet na de. Worden geplaatst contact-as blokkeren, maar nog steeds binnen de overall footer declaraties.
De connect-bericht box heeft afgeronde hoeken links en rechts om het uiterlijk van de te voltooien totale container hebben afgeronde hoeken. Het tekstgebied zelf heeft zeker wat styling nodig, omdat de standaardinstellingen van de browser er lelijk uitzien! Deze stijlen zijn redelijk eenvoudig, maar je kunt zien dat we een CSS-overgang toevoegen voor box-shadow. Het ontwerp liet niet zien wat een focus staat zou er uit moeten zien dus besloot ik om een subtiele schaduw te laten vervagen helemaal rondom de binnenkant van de doos. Het vervaagt vervolgens wanneer de focus verloren is gegaan.
Laten we het in actie zien, zullen wij?
Ik vind dat er best goed uitziet! De doosschaduw is misschien niet naar wens, dus speel daar wat mee om iets te krijgen waarvan je denkt dat het goed is.
.post-btn width: 100%; text-align: center; opvulling: $ opvulling * 2; margin-top: $ marge * 2; achtergrond: $ groen; kleur: $ wit; font-gewicht: 500; rand: geen; grensradius: 5px; -webkit-overgang: alle 0.4s gemak; -moz-overgang: alle 0.4s gemak; -o-overgang: alle 0.4s gemak; -ms-overgang: alle 0.4s gemak; overgang: alle 0.4s gemak; &: hover background: lighten ($ green, 10%); -webkit-overgang: alle 0.4s gemak; -moz-overgang: alle 0.4s gemak; -o-overgang: alle 0.4s gemak; -ms-overgang: alle 0.4s gemak; overgang: alle 0.4s gemak;
Het allerbelangrijkste Plaats 'Bedankt' knop! Heel eenvoudige stijlen hier. De knop moet altijd de breedte van de container vullen. Het moet ook een beetje van het berichtgebied worden weggedrukt, dus sommige margin-top helpt ons hier. We hebben nog een overgangsverklaring, maar deze keer is deze ingesteld op allemaal om elke eigenschap die een waardeverandering heeft, te animeren om alles soepel te houden. Dit betekent ook dat we in de toekomst andere stijlen zoals een kunnen toevoegen kleur veranderen bij zweven en het zal allemaal nog geanimeerd zijn.
Sla het bestand op en kijk nog een keer:
Heerlijk. Dit is precies wat we willen. Tijd om die links naar sociale media te stijlen.
.sociale knoppen padding-links: 0px; margin-top: $ marge * 2; @media-scherm en (min-breedte: $ break-three) opvulling: $ opvulling * 3 0 $ opvulling * 3 117px; margin-top: 0px; .social-btn padding: $ padding / 2 14px; breedte: 100%; weergave: blok; marge: $ marge / 2 0; grensradius: 20px; text-align: center; kleur: $ wit; tekstdecoratie: geen; text-transform: hoofdletters; lettergrootte: 70%; @media-scherm en (min-breedte: $ break-three) float: left; marge: $ marge / 2; opvulling: $ opvulling / 2 $ opvulling * 2; breedte: auto; .twitter background: # 00acee; &: hover background: lighten (# 00acee, 10%); .facebook background: # 3b5998; &: hover background: lighten (# 3b5998, 10%);
Deze code moet in de footer blokkeren in ons Sass-bestand. Het idee met deze knoppen is dat ze 100% breed zijn en verticaal worden gestapeld op mobiele / tabletresoluties. Als u vervolgens de schaal naar het bureaublad verplaatst, moeten ze overeenkomen met het ontwerp. De mediaquery voor de sociaal-knoppen betrokken nogal wat vallen en opstaan om een "gecentreerde" blik op de desktopformaten te krijgen. De waarde van 117px want de linker vulling was het punt dat ik vond om het gewenste resultaat te geven.
Elk sociaal-btn heeft enkele eenvoudige stijlen om de basis te geven. Vervolgens specificeren we de stijlen voor elke knop. In deze app is het gewoon een Achtergrond kleur verschil. Merk op dat ik de hexadecimale waarde en geen Sass-variabele heb gebruikt. Er is geen echte reden voor dit anders dan dat dit de enige plek is waar deze kleuren worden gebruikt, dus het zou geen probleem zijn om ze te veranderen. Als we de sociale banden elders hadden, zou ik ze zeker als variabelen hebben ingesteld. Beide knoppen hebben een iets lichtere versie van hun achtergronden zweven.
Voordat we een kijkje nemen, kunnen we net zo goed ons laatste stijlblok plaatsen:
.auteursrecht font-size: 90%; kleur: $ donkergrijs; @media-scherm en (min-breedte: $ break-three) font-size: 100%
Zoals de naam doet vermoeden, bepaalt dit blok onze kleine Copyright-tag in de voettekst. De lettergrootte reageert hier op veranderingen in de browser, voor 100% zichtbaar op $ Break-drie.
Bespaar en bekijk ons meesterwerk!
Leuk! Alles ziet er geweldig uit en dat slaat zo ongeveer onze Christmas Web App Interface op!
Dit is een sterk seizoensgebonden thema, gebaseerd op een concept voor Kerstmis en Nieuwjaar. Met slechts een kleine aanpassing kunt u het gemakkelijk aanpassen aan uw behoeften, bijvoorbeeld:
Ik hoop echt dat je het leuk vond om via deze webapp met mij te werken. Het was een leuk project om te bouwen en ik ben blij dat ik mijn technieken over het bouwen ervan heb kunnen delen. De broncode is altijd beschikbaar via de downloadlinks, dus voel je vrij om te graven en laat me in de comments weten welke gedachten je hebt, of dat een van jullie het op welke manier dan ook zou verbeteren.
Met dank aan Tomas voor het eerste ontwerp en bedankt voor het lezen en volgen.
Accentsconagua