nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Maak snel metselwerkrasterlay-outs met Bricks.js

Het is altijd vrij eenvoudig geweest om rasters te maken met jQuery, met behulp van plug-ins en gratis tutorials van ontwikkelaars.

Metselroosters zijn echter moeilijker te bouwen, omdat ze niet gelijk over de pagina passen . U beschikt over kolommen met vaste breedte voor kolommen, maar de itemhoogten kunnen enorm variëren .

Om een pixel-perfect metselwerkraster te maken, heb je een plug-in nodig zoals Bricks.js .

Deze plug-in is volledig open-source en belachelijk snel. Het geeft het raster weer in minder dan een halve seconde, zelfs met tientallen items op de pagina.

De meeste mensen herkennen metselwerkroosters van Pinterest sinds ze de lay-out hebben gepopulariseerd. Maar sindsdien is het ook in veel andere websites gebruikt.

Als u wilt beginnen met Bricks.js, heeft u wat inhoud en een standaardpaginalay-out nodig . U installeert de plug-in direct vanaf npm of via GitHub als dat eenvoudiger is.

Bij de initiële configuratie geeft u drie specifieke parameters door :

  1. Container - een DOM-containerelement voor het raster
  2. Packed - een kenmerk dat bepaalt hoe de items in het raster stromen
  3. Maten - een reeks van breedten en goten, gedefinieerd in pixels

De plug-in gebruikt al deze waarden om het metselwerkraster vanuit het niets te automatiseren.

En je kunt het zelfs gebruiken voor oneindige belasting als je metselwerkroosters wilt die net als Pinterest werken.

Bekijk de demopagina voor een interactief raster dat u kunt wijzigen om te testen. U definieert het totale aantal elementen en het automatiseert het proces terwijl de totale renderingtijd wordt weergegeven.

Ik heb bijvoorbeeld een raster met 500 elementen getest en het duurde slechts 13 milliseconden om te voltooien. Dit heeft geen invloed op de tijd voor het laden van alle 500 afbeeldingen, maar 13 ms voor een automatisch gegenereerd raster is zeer indrukwekkend.

Begin zelf door de bestanden te downloaden van GitHub en de installatie-instructies te volgen. Dit kan in eerste instantie verwarrend lijken, maar hoe meer je ermee speelt, hoe gemakkelijker het is om het in te stellen.

30 Nuttige pipetten en kleurpipet voor ontwerpers

30 Nuttige pipetten en kleurpipet voor ontwerpers

Als u een webontwerper of een grafisch artiest bent, bent u zeker van verschillende kleuren op internet of van afbeeldingen die u in uw eigen ontwerpen wilt gebruiken. Omdat het onmogelijk is om elke kleurwaarde te onthouden, is een pipet een must-have; geen enkele ontwerper zou er geen moeten zijn!Met een pipet kunt u eenvoudig ergens op uw computerscherm klikken om specifieke kleuren te pakken en kopiëren voor uw eigen persoonlijk gebruik, zoals het maken van paletten of kleurenschema's.

(Technische en ontwerptips)

Wanneer bepaalt het merkontwerp eigenlijk?

Wanneer bepaalt het merkontwerp eigenlijk?

Als merkidentiteitsontwerper heb ik vaak moeite met deze vraag. Kijkend naar bedrijven als Apple, Dell, Google en Amazon, die allemaal begonnen met saaie, weinig enthousiaste logo's en geen echte merkidentiteit om over te spreken, dan merk ik dat ik vaak nadenk over welke van mijn potentiële klanten echt van mijn diensten zullen profiteren, en die misschien nog een paar jaar nodig hebben om in bedrijf te zijn voordat ze de maximale kosteneffectiviteit van het huren van mij kunnen krijgen.

(Technische en ontwerptips)