Din Hjärna på Front-End-Utveckling

0
89

En del av jobbet för att bli en front-end utvecklare är genom att tillämpa olika metoder och tekniker för att dra i önskad UI och UX. Kanske du arbeta med en design team och genomföra sina konstruktioner. Jag vet att när jag tittar på en design (fan, även om jag vet att jag inte kommer att vara med och bygga upp det), min front-end börjar hjärnan som utlöser alla typer av saker som jag vet kommer att vara relaterad till uppgiften.

Låt oss ta en titt på vad jag menar.

Kolla in denna härliga Dribbble skott för en Mat-Recept Webbplats från Riko Sapto Dimo.

Det är en mycket tilltalande design, och det finns massor där att tänka på en front-end web design och utveckling.

Vi kommer att vara mestadels talar om design mönster val och HTML/CSS-tech val. Det är mycket mer jobb med front-end utveckling. Tillgänglighet! Prestanda! Semantik! Design system! Alla viktiga saker också.

Multi-line vadderade text

Ah ja, det ser ut där texten har en bakgrund som följer längden på raderna i texten. Vi har som kallas Multi-Line Vadderade Text i det förflutna och tittat på ett antal olika sätt att göra det. Det enklaste och mest moderna sättet att hantera det är med box-dekoration-paus.

Se Pennan Flerradigt Utfyllnad med box-dekoration-bryta av Chris Coyier (@chriscoyier) på CodePen.

Flexbox header

Att huvudet är bara tigger om flexbox. Det är en enda riktning layout med inslag av olika storlekar och olika utrymme mellan dem. Att uttrycka det i flexbox kommer att vara lättare än någon annan metod och inte kräver någon fast dimensionering eller magic numbers — för att inte tala flexibel!

Grid layout

Den övergripande layout här kunde uttryckas fint med CSS nätet. Kom ihåg att flexbox och nätet är inte på odds. En del placeras i en ruta i rutnätet kan vara flexbox! Som rubriken ovan, det verkar vettigt. Det huvudsakliga innehållet området och sidfot, som rutnät av celler, kan nog gå hur som helst.

Vertikala skriva

Inte den mest uppenbara sak att dra bort! Din bästa insats är att använda skriva lägen. Jen Simmons har skrivit om detta, och här är en demo:

Se Pennan att Skriva Läge Demo — Rubrik av Jen Simmons (@jensimmons) på CodePen.

Linje fastspänning

Ser ut som att vi har lite trunkering som händer här. Allmänna prestanda-vis, vi skulle nog vilja data som skickas bara vara ett par rader lång. Men fronten kan hjälpa till med detta också, om det har. Tre rader med text visas här med tre punkter i slutet. Kanske den design som verkligen behöver kopiera för att alltid vara högst tre rader. Det kallas linje fastspänning.

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

Anpassade teckensnitt

Liksom de flesta webbplatser dessa dagar, denna design är belagd i egna web fonts. Med en design som denna slående, skulle jag vara mycket försiktig om min font laddning teknik. Min magkänsla säger mig att jag skulle vara mer till FOIT än FOUT här, och helst skulle jag cache att fonten så hårt jag kunde, så att vi skulle ha varken så ofta som möjligt.

Text under bilder

Att sms: a “Middag” är helt och hållet under några hektiska den fotografiska bilden nedan. Det är fortfarande läsbar dock till stor del på grund av den ljusa vit text över en mörkare bild. Vi har täckt tänka igenom detta tidigare i detalj. Vit text över en mörkare bild är i allmänhet den väg att gå, och mörknade nog för att bara om någon bild kommer att vara OK. Det finns andra alternativ, som gradienter och oskärpa (som också är i användning här i sidfoten)

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

SVG-ikoner / Stjärniga betyg

Det finns ett antal enkla, vektor ikoner utspridda kring design. De är en säker satsning för en SVG-ikonen system. Detta är min nuvarande rekommendation för att närma sig en SVG-ikonen system. Inline SVG. Enkelt och kraftfullt.

Dessa stjärnor är förmodligen SVG territorium. Här är en bra samling av alternativ. Successivt öka från alternativknappar alltid verkar som en smart väg att gå:

Se Pennan CSS: Radio Input Stjärnor av Jake Albaugh (@jakealbaugh) på CodePen.

Hamburgare

Det kan tyckas lite överflödigt på en stor skärm design som denna, särskilt när det finns en navigering som redan synliga. Men hey, det är svårt att undvika i dessa dagar och det är något att säga om utbildning för användare där navigering på webbplatsen kan hända oavsett om du tittar på sajten.

Här är en samling av dessa typer av menyer.

Se Pennan Hamburger meny vänd med text förändring av Eric Grucza (@egrucza) på CodePen.

Allt annat i den design som jag inte nämner att din hjärna går till direkt?

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!