Eine eigene Icon Schrift generieren mit Node

Der icon-font-generator macht es möglich. Das kleine Programm ist in sekundenschnelle installiert und ebenso schnell ausführbar. Man gibt nur einen Ordner mit SVG-Dateien und einen Ausgabe-Ordner an und der Rest passiert automatisch.

icon-font-generator my-icons/*.svg -o icon-dist

Das Programm erzeugt:

  • eine CSS Datei
  • eine HTML Datei mit einer übersichtlichen namentlichen und bildlichen Darstellung der Icons
  • json File
  • svg,eot,ttf,woff Font

Im Zusammenspiel mit Node.js können Sie Ihre SVG-Icon-Dateien zu einer flexiblen Webfont zusammenfassen, um schließlich die Vorteile einer Webfont zu nutzen:

NPM Icon Font Generator unter Windows mit Node.js Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
NPM Icon Font Generator unter Windows mit Node.js
Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
  1. eine Webfont kann über CSS individuell angepasst werden
    1. Schrift/Icon-Größe
    2. Farbe
    3. Schatten
    4. Transparenz
  2. Schriftart wird einmal zentral eingebunden und kann dann im ganzen Projekt über Klassen eingesetzt werden
  3. Schrift kann einfach verschickt werden
  4. ist übersichtlich

 

Wie die Icons bestenfalls aufgebaut sein sollten ist hier beschrieben, inklusive einer Alternative für die Generierung (habe ich selbst nicht getestet, da ich lieber auf Internet-unabhängige, lokale Lösungen zurückgreife) :

Create an Icon Font Using Illustrator

live.js – entwickeln ohne „F5“-Refresh der Seite

livejs.com

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.

Quelle: http://livejs.com/ von Martin Kool

Frontend Frameworks (HTML, CSS, JavaScript)

Warum das Rad immer wieder neu erfinden, wenn zahlreiche Frameworks bereits gute Bausätze liefern aus denen sich schnell wunderbare Webseitenoberflächen gestalten lassen. In der folgenden Liste habe ich einige Frameworks zusammengetragen.

HTML/CSS Frameworks

  • Bootstrap 3 (4 BETA)
    • „Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.“
  • bootmetro metro style web framework
    • „simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8“
  • marcellop (basierend auf Bootstrap)
    • „simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8“
  • kickstart
    • „Faster and lighter than Bootstrap“
  • ZURB foundation
    • „The most advanced responsive front-end framework in the world.“
  • Semantic UI
    • „User Interface is the language of the web“

JavaScript Frameworks


externe Quellen und Artikel