Maak apparaatmodellen in de browser met DeviceMock
Je vindt talloze gratis apparaatmodellen online, variërend van PSD's tot Sketch-bestanden. Maar wat als u snel mockups van apparaten in uw browser zou kunnen bouwen ?
Nou, dankzij de mensen van rm-labo, dat kan! Met hun gratis jQuery-plug-in, DeviceMock.js, kun je een vectorapparaat rond elk pagina-element wikkelen, met behulp van eenvoudige JavaScript en SVG's.
Hoe werkt dit precies?
Nou, eerst heb je een kopie van jQuery en een versie van de DeviceMock-plugin van GitHub nodig . Dit wordt geleverd met een JS-bestand, een CSS-bestand en enkele SVG-bestanden om de eigenlijke apparaten te maken.
U kunt elk type element op de pagina targeten, van een eenvoudige afbeelding tot een volledige div of zelfs een ingesloten element, zoals een iframe. Dit betekent dat je zelfs een coole mini-browser op je site kunt bouwen met een iframe naar een andere pagina.
Deze plug-in ondersteunt vijf verschillende apparaattypen :
- webbrowser
- smartphone
- Tablet
- Desktop
- laptop
Al deze mockups gebruiken platte ontwerpstijlen omdat ze zijn gebouwd met SVG's. En ze lijken allemaal erg op Apple-apparaten, bijvoorbeeld omdat de smartphone een kloon van de iPhone is en de desktopmonitor opvallend veel op een iMac lijkt.
Al deze vectoren zijn eenvoudig toe te voegen en ze werken in elke browser met SVG-ondersteuning .
U kunt zelfs eigenschappen wijzigen, zoals de mockup-grootte, het thema (wit / zwart) en de richting (portretlandschap).
Als u de browsermodelup gebruikt, kunt u zelfs een dummy-URL opgeven in de adresbalk. Dit is een leuke manier om nog meer maatwerk toe te voegen.
Toegegeven, deze bibliotheek zal niet voor iedereen bruikbaar zijn, maar lost wel een nicheprobleem op dat veel UI / UX-ontwikkelaars tegenkomen bij het maken van prototypen.Ga voor meer informatie naar de GitHub-pagina of bekijk de live-site voor een actieve demo.
The 101 On The World's Miljardairs [Infographic]
Hoeveel miljardairs ken je naast Mark Zuckerberg en Bill Gates? Weet jij wie de rijkste miljardair in Azië is, of de rijkste miljardair ter wereld in de wereld? In welk land wonen de meeste miljardairs en in welke bedrijfstak hebben ze hun fortuin gemaakt?Verkrijg de 101 op de miljardairclub van de wereld in deze interessante infographic van Exceptional Villas Barbados .
19 Google Apps Scripts voor Pro Gmail-gebruikers
Met Google Apps Scripts kunt u dingen op het Google-platform doen die anders onmogelijk zouden zijn zonder grote hoeveelheden code te hoeven schrijven . Het is een eenvoudige, beginnersvriendelijke, JS-achtige taal die in de cloud wordt uitgevoerd en waarmee u Google-services kunt coderen, scripten en automatiseren