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

Workflow CSS mit Compass (Windows 10)

  1. Googel: „ruby windows installer“
  2. rubyinstaller. downloads latest stable Version x64
  3. Git installieren um im Windows Explorer Bash/Command auszuführen
  4. rechts-Klick „Git bash here“
  5. Ruby updaten mit „gem update –system“
  6. „gem install compass“
  7. compass install Anleitung um Projekt anzulegen
  8. config.rb Rubydatei anlegen und im Root-Ordner speichern (wo compass ausgeführt werden soll)
  9. Beispiel um mehrere Dateien mit Unterordnern zu verarbeiten Stackoverflow: Compass with multiple input/output folders
    1. require 'compass/import-once/activate'
      # Require any additional compass plugins here.
      
      # Set this to the root of your project when deployed:
      # http_path = "/"
      # css_dir = "css"
      # sass_dir = "sass/**/*"
      # images_dir = "img"
      # javascripts_dir = "js"
      cid = ARGV[0] || "default"
      cid = cid.sub(/\.scss$/,'').sub(/^.*\//,'')
      puts "making with cid="+cid
      http_path ="/fcss/" + cid + "/"
      css_dir = "public/fcss/"+cid
      sass_dir = "sass"
      images_dir = "sass/img"
      generated_images_dir="public/fcss/"+cid+"/img"
      http_images_path="/fcss/"+cid+"/img/"
      output_style = :expanded #: :compressed
      
      # You can select your preferred output style here (can be overridden via the command line):
      # output_style = :expanded or :nested or :compact or :compressed
      
      # To enable relative paths to assets via compass helper functions. Uncomment:
      # relative_assets = true
      
      # To disable debugging comments that display the original location of your selectors. Uncomment:
      # line_comments = false
      # If you prefer the indented syntax, you might want to regenerate this
      # project again passing --syntax sass, or you can uncomment this:
      # preferred_syntax = :sass
      # and then run:
      # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
      

Warum lieber Bootstrap anstatt selber bauen

Dieser Beitrag ist in der „Sie“-Form geschrieben, nicht ohne Grund. Es ist ein ernstes Thema. 😉

 

Mittlerweile arbeite ich seit 3 Jahren intensiv mit dem CSS/JS Framework Bootstrap und über die Jahre habe ich das Framework (auszu-)nutzen gelernt. Wie viele angehende Mediengestalter hat man zunächst die Grundkenntnisse von HTML und CSS gelernt, ein Grundgerüst anlegen, Überschriften, Absätze, Bilder usw.. Als ich damals in der 10. Klasse HTML gelernt habe, hat man Webseiten fast ausschließlich auf dem Desktop angeschaut. Layout basierten noch auf Tabellen, die Designs waren fix. Heute existieren tausende von unterschiedlichen Auflösungen und Gerätegrößen die per Finger- Stift oder Maus bedient werden können, in Zukunft wird die Sprachsteuerung, Steuerung über Optiken und Kamera sowie Steuerung über Bewegung der Hardware selbst sich weiter verbreiten. Es gibt also inzwischen genügend technische Herausforderungen an denen man sich noch selbst versuchen muss, weil es dafür noch keine fertigen Baukästen gibt.

Am Ende soll die Seite funktionieren und bedient werden können. Der Endnutzer möchte die Seite  benutzen können, gerne darf sie dabei auch schön aussehen. Da es viele Internetseiten mit gleichen oder sehr ähnlichen Angeboten gibt, soll die Seite auch immer möglichst sehr individuell sein und dem Endnutzer das ultimative Stöbererlebnis (UX – User Experience) bieten. Ich konnte Bootstrap erfolgreich einsetzen und meinem Arbeitgeber somit seine Unternehmensziele erreichen lassen: klares, aufgeräumtes benutzbares Design, schneller entwickeln, effizienter entwickeln, wiederverwendbare Design-Elemente und damit einheitlicheres Design für E-Mail/Blog/Shop/Externe Module/Backend, Performance, Erhöhung der CR, Reduzierung von Bugs/Fehlern, Erhöhung der Browserkompatibiltät, Sichtbarkeit für Suchmaschinen erhöhen, dokumentierter Code, bessere Zusammenarbeit mit anderen Abteilungen, Einbindung externer Entwicklungen…. und trotzdem musste und muss ich bis heute noch Überzeugungsarbeit leisten, warum Selberschreiben nicht die erste Wahl sein sollte und warum zuviel Individualität den Erfolg vermiesen kann.

Eine Argumentationskette:

Bootstrap ist überladen und enthält viele Module, die ich für mein Projekt nicht brauche und macht meine Seite langsamer.

Man muss und sollte Bootstrap nicht 1:1 in sein Projekt einbinden. Es gibt verschiedene Wege Bootstrap an sein Firmendesign individuell anzupassen und trotzdem update-fähig zu bleiben. Was man nicht braucht lässt sich über den Bootstrap Customizer rausschmeißen. Wer fit in LESS oder SASS ist kommentiert die unnötigen „includierten Module“ einfach aus. Farben, Schriften, Abstände, Grid lassen sich über den Customizer oder die zentrale variables.less/scss anpassen.

Unser Design ist zu individuell, so dass wir es selbst entwickeln müssen.

Das Design und die Navigations-Elemente von Bootstrap sind von Designern gebaut und von einer großen internationalen Community getestet, kommentiert und weiterentwickelt worden. Bootstrap kann dadurch in allen gängigen Browsern mit ihren individuellen „Macken“ und durch die „mobile-first“ Philosophie überzeugen. Wenn sie etwas so individuell gestalten, so dass sie es mit Bootstrap nicht umsetzen können, dann müssen sie damit rechnen dass die Gefahr um ein vielfaches höher sein wird, dass ihre im stillen Kämmerlein entwickelte Individual-Lösung nicht allen Belastungstests standhalten wird. Erfahrungsgemäß durchlaufen Eigenentwicklungen erst einmal einige BETA-Phasen bis sie fehlerfrei laufen. Ohne eine große Community dahinter sind sie ein vielfaches fehleranfälliger oder decken nicht jedes „worst case“-Szenario ab. Wenn es gar nicht anders geht, wägen sie die Möglichkeit der Erweiterung oder Individualisierung durch Plugins, Themes oder Bootstrap-Erweiterungen ab. Wenn sie Bootstrap aufgrund des Grids ggf. schon einbinden, dann schöpfen sie dessen Potentiale auch voll aus.

Glauben Sie wirklich dass sie in der Lage sind schneller ein eigenes „Framework“ zu schreiben, welches sich mit einem einsatzbereiten, strukturierten und dokumentiertem, vielfach wiederverwendbarem Bausatz von einem  aus einer tausend-Mann-starken Community bestehendem Team messen kann?

Wenn ich Bootstrap benutze, sieht meine Seite aus wie jede andere.

Dann passen sie es an, siehe Punkt 1. Wenn Ihre Website zudem noch Produkte verkaufen soll, wägen sie ab was Ihnen wichtig ist. Optik oder Funktionalität. Ein Blog, eine Landingpage oder eine reine Kunstseite zur Selbstverwirklichung muss nicht unbedingt einwandfrei funktionieren, aber sobald der Kunde Geld auf der Seite lässt, muss sie vom ersten Moment an performant funktionieren, sonst glaubt der Kunde das Geld könnte auf der Seite genauso verloren gehen wie die verrutsche Navi. Und bedenken sie auch, dass ein Design welches man „irgendwie kennt“ wahrscheinlich auch schneller und leichter versteht zu bedienen ohne langes suchen und ausprobieren. Frustieren sie den User also nicht mit ausgefallenen Navigations-Spielereien, er will doch einfach nur was kaufen und nicht spielen. Benutzerführung sollte also noch vor Spaß stehen, aber Spaß die Webseite zu benutzen darf gleich direkt danach kommen. 🙂

Wir sind ein Startup, haben weder Zeit noch Geld, wollen uns dennoch von der Masse abheben und keine Standardlösung

Sie fangen gerade erst an? Erfahrungsgemäß muss es gerade am Anfang schnell und günstig gehen, da ist nicht einmal Zeit für einen Styleguide und der Code kann auch nicht dokumentiert werden. Das wird sich rächen, spätestens wenn der Entwickler wechselt und ein Neuling, Freelancer oder Externer Entwickler aus Übersee das Chaos verstehen muss. Gerade für den Start sind Frameworks zu empfehlen. Der Code und das Design sind nämlich bereits dokumentiert. In meinen Projekten dient Bootstrap zum Teil sogar als Styleguide bzw. Bootstrap kann wunderbar als Vorlage für einen Styleguide „missbraucht“ werden.

Klassen-Bezeichnungen, Modul-Struktur und JS-API, sowie die Verschmelzung von  HTML/CSS und sehr nützlichen JS-Funktionen vereinfachen den Entwicklungsprozess.

Mit Bootstrap lassen sich binnen weniger Stunden komplette Webseiten zusammenklicken, oftmals spart man sich sogar das Erarbeiten von Photoshop Vorlagen durch das erstellen klickbarer Prototypen, welche der finalen Umsetzung nahzu 100% entsprechen können, Frust seitens Design oder Endkunden bleibt aus. Die Module sind auch einem Nicht-Entwickler schnell erklärt, so dass auch andere Abteilungen/Kollegen/Wordpress-Authoren ggf. in einem WYSIWYG-Editor damit arbeiten können.

Ich habe keine Lust ein großes, einschränkendes Framework einzuführen welches meine Kollegen erst lernen müssen zu benutzen, obwohl Sie HTML, CSS und JS bereits beherrschen.

Wie sieht die Arbeit aktuell aus. Diskutieren sie über jede Klassenbezeichnung? Ärgern sie sich über Konflikte im Code und wundern sie sich warum die CSS-Datei immer weiter wächst? Die Zusammenarbeit mit Kollegen kann durch den Einsatz eines Frameworks erleichtert werden. Viele grundlegene Elemente sind bereits vorgegeben und da erübrigt sich so manches Meeting oder anstrengende Grundsatz-Diskussion. Syntax und Namensgebung des Frameworks können und sollten auch als Orientierung/Vorlage für Weiterentwicklungen dienen. Beispiel: Es gibt das Modul „Buttons“ in Bootstrap. Alle Buttons haben das Prefix „btn-“ und enden mit einem Kürzel welches die Funktion/Aussage des Buttons beschreibt. Möchte man dieses Modul nun durch einen eigenen Button ergänzen, so kann die Namensgebung des Frameworks als Vorlage dienen. LESS-Mixins und die Klasse „btn“ liefern zudem bereits ein Grunddesign, man muss dieser Klasse also nur neue Farben zuweisen. Ich denke meinen PHP-Entwicklern und Fans der OOP erzähle ich hier nichts neues. Überlegen sie vorher, ob sie den ein oder anderen Bootstrap-Standard-Button nicht einfach über die zentrale variables-Datei oder den Customizer anpassen möchten und ein weiterer Code-aufblähender Button somit gar nicht erst notwendig wird. Ihren Kollegen werden sich durch das Framework zunächst eingeschränkt fühlen, wenn sie es gelernt haben zu benutzten, werden sie es lieben, versprochen.

 

Zusammfassung: Gründe warum ich nicht mehr auf Bootstrap verzichten möchte:

  1. Zeitersparnis -> Entwicklungs-Kostenersparnis, ggf. kann sogar Personal eingespart werden
  2. weniger Bugs/Fehler durch zeitnahe Bug-Fixes durch eine große Community über viele unterschiedliche Plattformen-> hohe Browser-Kompatibilität ->mobile-first -> responsive -> für Onlineshops kann das eine Steigerung der Conversion Rate zur Folge haben /Unternehmens-Erfolg steigern
  3. Support auch für alte Versionen (bis heute wird BS2 noch supported, BS3 wurde zunächst in LESS geschrieben jetzt auch für SASS-Liebhaber bereitgestellt und BS4 ist in der BETA-Phase)
  4. Design und Code ist dokumentiert somit können auch Unternehmensfremde Personen ohne vorherige lange Einarbeitung damit arbeiten, zudem ist die Doku sehr benutzerfreundlich geschrieben.  Die Module sind einzeln verlinkt so dass sie problemlos in Konzepten und Protkollen, Chats mit Kollegen verwendet werden könne.
  5. Doku enthält immer ein Beispiel und sogar komplette Templates.
  6. Man muss das Rad nicht immer neu erfinden, das Framework hilft bei der grundsätzlichen Ideenfindung zur Gestaltung und Umsetzung einer Seite.
  7. BS ist von Designern entwickelt und versucht mit jeder neuen Version den hohen Ansprüchen (auch Individualitätsansprüchen) von Designern aus aller Welt gerecht zu werden
  8. BS ist weit verbreitet und viel genutzt, dadurch stehen zahlreiche Plugins und Erweiterungen, Tipps und Tricks zur Auswahl, die wiederum die Erstellung eines individuellen Designs ermöglichen.
  9. BS Verschmelzung von HTML/CSS mit JS über das data-Attribute -> Tabs, Menus, Dialoge können ohne auch nur eine Zeile JS schreiben zu müssen im HTML erstellt werden. Mit der API kann man eigene Funktionen in die Bootstrap-Logik einhängen
  10. Konsistentes Design (Aufbau eines CD wird durch Einsatz eines Frameworks erleichtert)
  11. Funktioniert wie ein Wireframe -> Schnelle Entwicklung von Prototypen
  12. Relativ unkompliziert Änderungen durchführen
  13. Cross-Browser-Support

Wahrscheinlich gibt es noch viele viele weitere Gründe, ich liebe BS einfach 🙂


Weiterführende Links, Ressourcen etc.