Share
Bouwen met een raster is een dagelijkse vereiste voor front-end ontwikkelaars. Niet alleen zorgen rasters voor een gevoel van ritme en consistentie in ontwerp, maar wanneer een bekende rasterstructuur wordt gebruikt, biedt het een eenvoudige collectieve ontwerptaal voor teamoverschrijdend werken.
Flexboxgrid is een nieuw raamwerk waarmee u de voorspelbaarheid en de gemeenschappelijke taalstructuur van een rastersysteem combineert met de flexibiliteit en eenvoud van flexbox. Vandaag zullen we de basisbeginselen van het gebruik van Flexboxgrid bekijken en het gebruiken om een eenvoudige Dribbble-feedportfoliopagina te bouwen. Laten we beginnen!
De eerste stap om aan de slag te gaan met Flexboxgrid is om de CSS te pakken. Gebruik de niet-geminimaliseerde versie voor ontwikkeling.
Laten we het nu eens hebben over hoe Flexboxgrid werkt. De documentatie is volledig inbegrepen op de startpagina op Flexboxgrid.com, maar we zullen de hoogtepunten bespreken.
Flexboxgrid is gebouwd om vier primaire breekpunten te ondersteunen, willekeurig benoemd om pixel-specifieke breekpunt onderhoudsproblemen te voorkomen. Deze breekpunten zijn hand-, ronde, bureau, en muur, genoemd naar wat wordt gezien als breedte van de hand, lap, desk en wall viewports (dat wil zeggen: waar een apparaat zich waarschijnlijk zal bevinden). De kolomklassen zelf zijn als volgt gestructureerd:
kolom- [aantal] - [breekpunt] kolom-4 - handkolom-automatisch - wand
Flexboxgrid is een raster met twaalf kolommen en gebruikt op percentages gebaseerde kolommen in combinatie met de kracht van flexbox voor een solide raster.
Notitie: browserondersteuning voor flexbox is nog steeds onvolledig; Er moet niet op Flexboxgrid worden vertrouwd voor projecten waarvoor volledige cross-browserimplementatie vereist is.
Rechtstreeks uit de documentatie halen, markup voor een voorbeeld rij met behulp van Flexboxgrid ziet er ongeveer zo uit:
sympathiek
Er is een "auto" kolombreedte beschikbaar bij elk breekpunt. Dit doet iets anders dan een traditioneel breedte: automatisch regel. Flexbox vult de rij automatisch met even grote kolommen, ongeacht het aantal dat in de rij is geplaatst.
autoautoauto
In het bovenstaande voorbeeld nemen de kolommen bijvoorbeeld elk een derde in beslag.
Er is veel meer mogelijk met Flexboxgrid, inclusief het horizontaal uitlijnen van de kolommen van een rij:
evenals verticaal:
Flexboxgrid maakt ook gebruik van Flexbox's eenvoudige herschikkingstechnieken en dynamische spatiëringopties, maar voor nu gaan we verder met het creëren van ons Dribbble-raster!
We beginnen met een eenvoudig leeg HTML-document, inclusief jQuery en Normalize. Voel je vrij om zoiets als HTML5 Boilerplate te gebruiken met tools zoals Modernizr, maar voor dit project zullen we ons blijven concentreren op de JavaScript, HTML en CSS die je nodig hebt om jezelf te schrijven.
Van hieruit bouwen we de structuur uit van de HTML die we willen gebruiken, en dan koppelen we alles aan de Dribbble API.
Laten we eerst stellen dat we een raster willen instellen dat begint met minimaal twee blokken per horizontale rij en maximaal zes blokken per rij verplaatst muur breekpunt. Dit is hoe we dat zouden bereiken:
kolom 6 - de hand dicteert dat op de hand- breekpunt (voor apparaten die in de hand worden gehouden) zal elk blok zes van de twaalf kolommen vullen. Daarom kunnen we nu twee Dribbble-miniaturen op één rij van onze lay-out plaatsen.
Bij de ronde breekpunt, kolom 4 - lap dicteert dat elk blok vier kolommen breed is, vandaar dat we er drie in één rij kunnen plaatsen.
Laten we zeggen dat we het raster een beetje dynamischer willen maken. Hier is een voorbeeld van een rasterrij met automatische breedte en variabele breedte.
Notitie: in het breekpunt van de muur hebben we eigenlijk een rooster met vijf over elkaar; dit zou normaal niet mogelijk zijn met een rasterstelsel met twaalf kolommen zonder aangepaste klassen toegevoegd, omdat twaalf niet deelbaar is door vijf. Met Flexbox kunnen de kolombreedten echter eenvoudig automatisch worden berekend.
Nu we een rasterstructuur hebben, laten we de code schrijven die nodig is om onze Dribbble-inhoud binnen te halen. We zullen de jQuery plug-in Jribbble gebruiken. Je kunt de bron pakken via GitHub. Jribbble maakt het extreem eenvoudig om foto's te maken van Dribbble.
Neem Jribbble op in een apart JS-bestand of in de top van uw script.js. Onder Jribbble zal deze code je gewenste Dribbble-shots opleveren.
(function () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, function (data) var shots = data.shots; var h = "; $ (shots) .each (function (i, shot) h + = ''; h + = ''; ); $ (' Dribbble-shots.) Html (h).; ); ());'; h + = '
We verpakken eerst onze code in een onmiddellijk opgeroepen functie-uitdrukking, die ervoor zorgt dat we onze JavaScript-scope beschermen. Vervolgens stellen we onze speler-ID in en vervolgens gebruiken we Jribbble om onze foto's te maken. Zodra we onze foto's hebben gemaakt, bouwen we de html door over elk shot te itereren en een element te vullen met de klas Dribbble-shots met die html.
Onze HTML-structuur zou er als volgt uit moeten zien:
My Dribbble Shots
Houd er rekening mee dat we ook een Google-lettertype hebben opgenomen.
Vervolgens zorgen we voor een minimale styling style.css:
body font-family: 'Maven Pro', sans-serif; achtergrondkleur: # f1faff; h1 font-weight: 400; * [klasse ^ = kolom] / * max-height: 100px; * / overflow: verborgen; margin-bottom: 12px; * [class ^ = column] img width: 100%; .container width: 80%; marge: 0 auto; positie: relatief; padding-top: 100px; a display: block; dekking: 0,9; a: hover opacity: 1;
Je uiteindelijke product moet er ongeveer zo uitzien:
Flexboxgrid biedt een zeer flexibele netwerkoplossing die een aantal zeer interessante controle mogelijk maakt over de afstand, grootte, weergave en zelfs de ordening van elementen. In combinatie met aantrekkelijke inhoud kunt u met Flexboxgrid eenvoudig doen wat voorheen veel ingewikkelder was met uw raster.
Accentsconagua
'; h + = '