Grunticon is een Grunt.js taak die kan worden uitgevoerd op een map met SVG-afbeeldingen. Je kunt ook gebruik maken van PNG-afbeeldingen, maar de resultaten zullen erg niet "vectorish."
Grunticon werkt door het nemen van al deze SVG pictogrammen en genereert CSS-code die u kunt gebruiken om goed te verankeren ze op webpagina's, met ingebouwde ondersteuning voor responsieve lay-outs en Retina-apparaten.
De CSS-code gegenereerd door deze app omvat alle basics, die in drie verschillende versies:
- SVG data URLs
- PNG gegevens URL's
- Klassieke PNG-afbeeldingen
De derde methode werd opgenomen als een fallback voor browsers niet SVG-gegevens ter ondersteuning, waardoor de SVG iconen als gewone PNG-afbeeldingen. Als de SVG zijn niet beschikbaar in een PNG-vorm, dan Grunticon converteert ze automatisch voor u en plaats ze in een speciale map.
Door het bewerken van een paar regels in het Grunt.js taakbestand kunnen ontwikkelaars ook de kenmerken van de uitgevoerde pictogrammen instellen, variërend van de CSS voorvoegsel om de locatie van een voorbeeld HTML-bestand.
Samen met de CSS kan een kleine JS-bestand ook worden gegenereerd, die kan worden gebruikt om asynchroon laden van de SVG-bestanden, zorg ervoor dat ze niet rendering pagina te blokkeren als er meerdere items worden gebruikt op dezelfde pagina.
Iconen gegenereerd via Grunticon hebben ook de mogelijkheid om te worden vormgegeven via CSS, gesmolten in verschillende kleurvarianten, en zelfs geanimeerd.
. Installatie-instructies zijn voorzien README-bestand van het pakket
Eisen
- Grunt.js 0.4.2 of hoger
Reacties niet gevonden