Flexbox Patterns: Den ultimate CSS Flexbox Code Library

Den nyeste CSS Flexbox-egenskapen har radikalt endret måten utviklere skaper grensesnitt på. Ingen flere flyter og CSS hacks å få layouter justert perfekt. Ikke lenger bekymre deg for tilpassede responsive teknikker for å håndtere flerkolonneformede layouter.

Men selv om flexbox løser mange problemer, er det også komplisert å lære. For å hjelpe deg med å komme i gang er det et nytt nettbasert bibliotek kalt Flexbox Patterns som katalogiserer mange forskjellige flexbox-elementer til en sentral plassering.

Dette biblioteket er helt gratis å bruke, og det er åpent hentet fra GitHub. Alle eksemplene kan lastes ned lokalt gjennom NPM eller gjennom GitHub . Men du kan også bla gjennom eksemplene via nettstedet for å kopiere og lime inn koder etter behov.

Hvert mønster har sin egen side med en kort beskrivelse og kodeprøver. Du kan ganske bokstavelig talt kopiere og lime inn kodene i ditt eksisterende webprosjekt, selv om det anbefales at du først lærer litt om hva koden gjør og hvorfor du bruker den.

Ta for eksempel sideoverskriftsdemoen ved hjelp av flexbox for å justere alle elementene i en topp navbar side ved side.

Vanligvis vil dette kreve flyter og en clearfix-klasse for å få alt riktig justert.

Med flexbox kan du holde alt i en beholder med displayet: flex eiendom. På denne måten kan du definere hvordan elementene skal samhandle med hverandre og hvordan flexboxen skal fungere på mindre skjermer .

Mønstrene blir kontinuerlig oppdatert og dagens bibliotek fokuserer på de vanligste elementene som faner, sidebjelker og vertikal / horisontal sentrering.

Hvis du er helt ny til flexbox, så sjekk ut Flexbox Patterns. Nettstedet vil ikke lære deg alt det grunnleggende om flexbox, men det vil tilby eksempler på ekte verden du kan tinker med for dine egne webprosjekter.

Bygg nettsider Superfast med Foundation 5 [A Guide]

Ved hjelp av en ramme for frontend kan du forbedre webdesign arbeidsflyten på mange måter. Det kan hjelpe deg med å følge moderne designprinsipper som mobil-første tilnærming, semantisk markering og responsiv design. Du kan utnytte mange av CSS og JavaScript-elementene som er klare til bruk, og øker hastigheten på utviklingsprosessen, og frigjør mer tid til å fokusere på visuell og brukeropplevelse.Zurb Found

(Tekniske og design tips)

20 Briljante eksempler på bedre effekter ved hjelp av teksturer [Photoshop Tutorials]

Photoshop gir ubegrenset potensial når det kommer til plakater, bakgrunner for nettsteder og andre designelementer. Teksturer brukes ofte i bakgrunn som et tillegg til den abstrakte effekten. Tekstur kan opprettes kunstig ved hjelp av Photoshop-funksjoner og -filtre; alternativt, med et fotografi.Jeg er ganske sikker på at du har sett mange flotte bilder over hele Internett som ble opprettet ved hjelp av teksturer.

(Tekniske og design tips)