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

Website im Browser editierbar machen

zum Beispiel in den Google Developer Tools (durch drücken der Taste F12 bei geöffnetem Browser) in der Console folgendes Script eintippen und mit ENTER ausführen.

Chrome Console Script Edit Content
Chrome Console Script Edit Content

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

oder dieses Script als Lesezeichen (z.B. im Chrome Lesezeichen Manager anlegen) speichern und anklicken, nachdem die zu editierende Seite geöffnet wurde.

Content Edit Lesezeichen
Content Edit Lesezeichen

WordPress Themes entwickeln – nützliche Links

Funktions Referenz
Codex offizielle Funktions Referenz von WordPress

Basis Template für den Aufbau eines eigenen Themes
HTML5 Blank WordPress Theme

Anleitung wie man ein sogenannten „Child Theme“ anlegt, also ein eigenes Theme auf Grundlage eines bestehenden Themes, welches weiterhin uneingeschränkt updatefähig bleiben soll.
Die Netzialisten – Anleitung Childtheme anlegen (Update) (11. JUNI 2015)

Frontend Dev Workflow Schritte

…von NULL an…

 

  1. Editoren einrichten
    1. z.B Adobe Brackets (brackets.io/)
    2. oder Netbeans
    3. oder Notepad ++
    4. oder PHPStorm
  2. install node.js (nodejs.org/en/)
  3. install git (git-scm.com/)
  4. install ruby (rubyinstaller.org/)
  5. install SASS (sass-lang.com/install)
  6. WINDOWS Rechts-Klick „git bash here“
  7. install grunt
  8. install compass (compass-style.org/install/)
  9. Frontend Framework vorbereiten
    1. z.B. Bootstrap (www.npmjs.com/package/bootstrap-sass#b-compass-without-rails)
      $ compass create my-new-project -r bootstrap-sass –using bootstrap
    2. Foundation
    3. ……………oder oder (usablica.github.io/front-end-frameworks/compare.html)

Logo oder Grafik scharf in allen Auflösungen und Zoom-Stufen darstellen

Wenn Sie eine Grafik (Firmenlogo, Icon oder Symbol etc.) bereits als Vektor-Grafik (aus Adobe Illustrator/InDesign o.a. Vektor-basierte Software) vorliegen haben, dann können sie die Möglichkeit in Erwägung ziehen diese Grafik als SVG in ihre Seite einzubinden, mehr über diese Technik erfahren Sie hier:

W3 Schools SVG Tutorial

SVG graphics do NOT lose any quality if they are zoomed or resized

Die Browser-Unterstützung (caniuse.com) ist mittlerweile sehr gut. Beim IE gibt es Schwierigkeiten bei der Skalierung („IE9-11 desktop & mobile don’t properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.“ (caniuse.com – Tipp).

Nützlicher weiterführender, ausführlicher Artikel: Wie Sie Ihre Website für Retina optimieren: Scharfe Bilder und trotzdem schnell (von digitalmobil.com)

 

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

Material Design Ressourcen

  • Google Material Design Styleguide Einführung
    • offizielle Google Doku
  • Material UI
    • A Set of React Components that Implement Google’s Material Design
  • Materialize
    • Ein modernes und responsives Front-End-Framework, basierend auf Material Design
  • MUI
    • MUI is a lightweight CSS framework that follows Google’s Material Design guidelines
  • Material Design Lite
  • Angular Material
    • „For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.“
  • Polymer 1.0
    • „Polymer 1.0 has been rebuilt from the ground up for speed and efficiency. The new, leaner core library makes it easier than ever to make fast, beautiful, and interoperable web components.“