Hjernen din på Front-End Utvikling

0
12

En del av jobben for å være en front-end utvikler, er å bruke ulike teknikker og teknologier for å trekke av ønsket UI og UX. Kanskje du jobber med en design som er laget og implementere sine planer. Jeg vet når jeg ser på en design (pokker, selv om jeg vet at jeg ikke kommer til å bygge det), min front-end hjernen begynner å utløse alle slags ting som jeg vet vil være relatert til oppgaven.

La oss ta en titt på hva jeg mener.

Sjekk ut denne nydelige Dribbble skutt for en Mat Oppskrift Nettsted fra Riko Sapto Dimo.

Det er et meget tiltalende design, og det er masse i det å tenke på fra en front-end web design og utvikling ståsted.

Vi skal for det meste være snakker om design mønster valg og HTML/CSS-tech valg. Det er mye mer til jobben i front-end utvikling. Tilgjengelighet! Ytelse! Semantikk! Design-systemer! Alle viktige ting som godt.

Multi-line polstret tekst

Ah ja, du ser hvor teksten har en bakgrunn som følger lengden på linjer med tekst. Vi har ringt til, som Multi-Line Polstret Tekst i det siste og sett på en rekke måter å gjøre det. Den enkleste og mest moderne måten å håndtere det er med safe-dekorasjon-break.

Se Penn Multiline Polstring med safe-dekorasjon-break av Chris Coyier (@chriscoyier) på CodePen.

Flexbox header

At toppteksten er bare tigge for flexbox. Det er en single-retning layout med elementer av ulike størrelser og ulike mellomrom mellom dem. Å uttrykke det i flexbox er kommer til å være enklere enn noen annen metode, og ikke krever noen fast størrelse eller magiske tall — for ikke å nevne fleksibel!

Grid layout

Den samlede side layout her kan uttrykkes pent med CSS rutenett. Husk at flexbox og rutenettet er ikke i odds. Et element er plassert i en celle i rutenettet kan være flexbox! Som overskriften ovenfor, som gjør perfekt forstand. Hovedområdet for innhold og bunntekst, som grid celler, kan sannsynligvis gå begge veier.

Vertikal skriftlig

Ikke den mest åpenbare ting å ta av! Det beste alternativet er å bruke å skrive modus. Jen Simmons har skrevet om dette, og her er en demo:

Se Pennen Skriver-Modus Demo — Overskrift av Jen Simmons (@jensimmons) på CodePen.

Linje fastspenning

Ser ut som vi har noen avbrudd skjer her. Generell ytelse-messig, vil vi sannsynligvis bli lyst data som blir sendt kun være noen få linjer lang. Men fronten kan hjelpe deg med dette også, hvis det må til. Tre linjer med tekst er vist her med ellipse på slutten. Kanskje design virkelig trenger kopi av å alltid være på maksimalt tre linjer. Det kalles linje fastspenning.

Se Pen Linje Clampin ” av Chris Coyier (@chriscoyier) på CodePen.

Tilpassede skrifttyper

Som de fleste nettsteder i disse dager, dette designet er belagt i tilpasset web-skrifter. Med en design som dette slående, vil jeg være svært forsiktig om min skrift legge teknikk. Tarmen min forteller meg at jeg ville være mer i FOIT enn FOUT her, og ideelt sett vil jeg cache som font fil så hardt jeg kunne, slik at vi ville ha verken så ofte som mulig.

Tekst over bildene

At teksten “Middag” er holdent over noen travle fotografiske bilder nedenfor. Det er fortsatt lesbar selv, i stor grad på grunn av de lyse hvite teksten over et mørkere bilde. Vi har dekket tenker dette gjennom i det siste i detalj. Hvit tekst over et mørkt bilde er generelt veien å gå, og mørkere nok slik at bare om noen vil bildet være OK. Det finnes andre alternativer selv om, som graderinger og uskarphet (som også er i bruk her i bunntekst)

Se Penn ByKwaq av Chris Coyier (@chriscoyier) på CodePen.

SVG-ikoner / Star-rangeringer

Det finnes en rekke enkle, vector ikoner spredt rundt design. De er en sikker vinner for en SVG-ikonet system. Dette er min nåværende anbefaling for nærmer seg en SVG-ikonet system. Inline SVG. Enkel og kraftig.

De star-rangeringer er trolig SVG territorium som godt. Her er en god samling av valg. Gradvis øke fra radio knapper alltid virker som en smart vei å gå:

Se Penn CSS: Radio-Inngang Stjerner av Jake Albaugh (@jakealbaugh) på CodePen.

Hamburgere

Det kan virke litt overflødig på en stor skjerm design som dette, spesielt når det er en navigasjon allerede er synlig. Men hei, det er vanskelig å unngå i disse dager, og det er noe å si om opplæring av brukere hvor navigasjonen på nettstedet kan skje uavhengig av hvor du er på jakt på nettstedet.

Her er en samling av de type menyer.

Se Penn Hamburger meny bla med teksten endring av Eric Grucza (@egrucza) på CodePen.

Noe annet i design jeg ikke nevne at tankene går med en gang?

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!