Share
Å bygge med et rutenett har blitt et daglig krav til utviklere av fremtidsutvikling. Ikke bare gir grids en følelse av rytme og konsistens i design, men når en kjent gridstruktur blir brukt, gir det et enkelt kollektivt design språk for tverrlagsarbeid.
Flexboxgrid er et nytt rammeverk som lar deg kombinere forutsigbarhet og felles språkstruktur i et rutenett system med fleksibilitet og enkelhet i flexbox. I dag skal vi gå gjennom det grunnleggende om å bruke Flexboxgrid, og bruke den til å bygge en enkel Dribbble feed portfolio side. La oss komme i gang!
Det første skrittet for å komme i gang med Flexboxgrid er å ta tak i CSS. For utvikling, bruk unminified versjonen.
La oss da snakke litt om hvordan Flexboxgrid fungerer. Dokumentasjonen er fullstendig omtalt på hjemmesiden på Flexboxgrid.com, men vi går over de høye punktene.
Flexboxgrid er bygd for å støtte fire primære bruddpunkter, vilkårlig oppkalt for å unngå pikselspesifikke bruddpunkter ved vedlikehold. Disse bruddpunktene er hånd, runde, skrivebord, og vegg, oppkalt etter hva som ses som hånd, lap, skrivebord og veggvisningsbredder (dvs.: hvor en enhet er sannsynlig å finne seg selv). Kolonneklassene selv er strukturert slik:
kolonne- [nummer] - [brytepunkt] kolonne 4 - håndkolonne-automatisk vegg
Flexboxgrid er et tolv kolonne rutenett, og bruker prosentvis baserte kolonner i kombinasjon med kraften til flexbox for et stallfast grid.
Merk: Nettleserstøtte for flexbox er fortsatt ufullstendig; Flexboxgrid skal ikke påberopes for prosjekter som krever full gjennomføring av nettleseren.
Ved å ta direkte fra dokumentasjonen ser merket for en eksempelrad med Flexboxgrid noe slikt ut:
Mottakelig
Det er en "automatisk" kolonnebredde som er tilgjengelig ved hvert bruddpunkt. Dette gjør noe annet enn en tradisjonell bredde: auto regel. Flexbox vil automatisk fylle raden på riktig måte med like store kolonner uavhengig av hvor mange som er plassert i raden.
autoautoauto
For eksempel, i eksemplet ovenfor, vil kolonnene ta opp en tredjedel hver.
Det er mye mer som kan gjøres med Flexboxgrid, inkludert justering av radens kolonner horisontalt:
så vel som vertikalt:
Flexboxgrid utnytter også Flexboxs enkle omarbeide teknikker og dynamiske mellomrom alternativer, men for nå vil vi gå videre med å lage vårt Dribbble-rutenett!
Vi starter med et enkelt, tomt HTML-dokument, inkludert jQuery og Normaliser. Du er velkommen til å bruke noe som HTML5 Boilerplate med verktøy som Modernizr, men for dette prosjektet vil vi være fokusert på JavaScript, HTML og CSS du trenger å skrive deg selv.
Herfra vil vi bygge opp strukturen til HTML-en vi vil bruke, og så kobler vi alt sammen med Dribbble API.
La oss først si at vi vil sette opp et rutenett som starter med minst to blokker per horisontal rad, og beveger seg opptil seks blokker per rad på vegg stoppunkt. Slik gjør vi det:
kolonne-6 - hånd dikterer det ved hånd breakpoint (for enheter holdt i hånden) vil hver blokk fylle seks av de tolv kolonnene. Vi kan derfor passe to Dribbble-miniatyrer på en rad av vårt layout på dette punktet.
På runde stoppunkt, kolonne-fire - lap dikterer at hver blokk vil være fire kolonner bredt, derfor kan vi passe tre over en rad.
La oss si at vi vil gjøre nettet litt mer dynamisk. Her er et eksempel på en rutenett med automatisk bredde og variable bredder.
Merk: i veggbrytepunktet har vi faktisk et rutenett med fem over; Dette ville normalt ikke være mulig med et tolv kolonne gridsystem uten at egendefinerte klasser ble lagt til, da tolv ikke er delbare med fem. Men med Flexbox kan kolonnebreddene enkelt beregnes automatisk.
Nå som vi har en rutenettstruktur på plass, la oss skrive koden som er nødvendig for å bringe inn vårt Dribbble-innhold. Vi bruker jQuery plugin Jribbble. Du kan ta tak i kilden fra GitHub. Jribbble gjør det svært enkelt å trekke inn skudd fra Dribbble.
Inkluder Jribbble i en egen JS-fil, eller i toppen av din script.js. Under Jribbble, vil denne koden bringe inn dine ønskede Dribbble-bilder.
(funksjon () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, funksjon (data) var skudd = data.shots; var h = "; $ (skudd) .each h + = ''; h + = ''; ); $ (' Dribbble-shots.) Html (h.); ); ());'; h + = '
Vi pakker inn koden vår først i et umiddelbart uttrykt funksjonsuttrykk, noe som gjør at vi beskytter JavaScript-omfanget. Deretter setter vi vår spiller-ID, og deretter bruker vi Jribbble til å ta med våre bilder. Når vi har våre skudd, bygger vi html ved å iterere over hvert skudd, og fylle et element med klassen dribbble-shots med den html.
Vår HTML-struktur bør se slik ut:
Mine Dribbble Shots
Vær oppmerksom på at vi også har tatt med en Google-skrifttype.
Deretter gir vi litt minimal styling i style.css:
kropp font-family: 'Maven Pro', sans-serif; bakgrunnsfarge: # f1faff; h1 font-weight: 400; * [klasse ^ = kolonne] / * maks-høyde: 100px; * / overløp: skjult; margin-bunn: 12px; * [klasse ^ = kolonne] img bredde: 100%; .container width: 80%; margin: 0 auto; stilling: relativ; polstringstopp: 100px; en display: blokk; opasitet: 0,9; a: svever opacity: 1;
Ditt endelige produkt skal se ut som dette:
Flexboxgrid tilbyr en svært fleksibel rutenettløsning som gir noen veldig interessant kontroll over avstanden, størrelsen, displayet og til og med bestilling av elementer. Når kombinert med overbevisende innhold, gjør Flexboxgrid det enkelt å gjøre det som tidligere var mye mer komplisert med rutenettet.
Accentsconagua
'; h + = '