Was ist AtomicKitchen? Dokumentation
Login
Kontakt
ENDE

Funktionsübersicht

Stand: Mai 2021

Basisfunktionalitäten

  • Arbeitsbereiche erstellen, editieren, duplizieren, löschen, in welchen modulare «Designkomponenten» erstellt, bearbeitet, dupliziert, gelöscht, verschachtelt, gruppiert, kategorisiert oder sortiert werden können.
  • Jede Komponente kann aus HTML, CSS und JavaScript bestehen.
  • Von jedem Arbeitsbereich können mehrere Versionen von Styleguides veröffentlicht werden.
  • Jeder Arbeitsbereich bzw. jeder Styleguide kann bis zu sechs Hierarchie-Ebenen enthalten:
    Stile, Atome, Moleküle, Organismen, Segmente und Seiten-Templates,
    in denen Sie Komponenten ineinander verschachteln können.
  • Auf diese Weise können Sie ein code-basiertes Desginsystem erstellen. In diesem können Sie komplette Seitenvorlagen fertigen und veröffentlichen.
  • Wählen Sie zwischen einen «mobile first» oder «desktop first» Aufbau ihres Systems.
  • Für jeden Baustein kann das CSS «responsive», d.h. in Bezug auf die Viewportgrösse (z.B. S-, M-, L-View) definiert werden.
  • CSS/JS-Frameworks wie Bootstrap, Foundation oder UIkit können als Arbeitsgrundlage importiert werden.

Backend Funktionen

  • Verschachteln und Sortieren von Komponenten via «Drag & Drop»
  • Autosuggest-Suche nach Komponenten
  • Benutzerverwaltung für weitere Co-Editoren
  • Die meisten CSS/HTML-Angaben werden ohne Code-Eingabe über «Drag & Drop» Auswahllisten und Autosuggests implementiert
  • Alle Eingaben sind in verschiedenen Masseinheiten (px, rem, em, %) möglich
  • Digitales Asset-Management: Hochladen und Verwalten von eigenen Webfonts, Bildern und individuellen CSS- oder JS-Code
  • Integration aller Google-Schriften (mit Vorschau-Funktion)
  • Definition von Breakpoints für CSS-Media-Queries
  • Responsive WYSIWYG-Vorschau der Komponenten während des Erstellungsprozesses

Features der Styleguides

  • Code Pattern Library: «Copy & Paste» des nativen Codes (HTML, CSS und JS) einzelner Komponenten
  • Export/Download des gesamten Styleguides, der auch offline verwendet werden kann
  • Die Styleguides zeigen alle Elemente «resonsive» an. Die Viewportgrösse können Sie über die Navigation steuern
  • Einbindung von Anmerkungen, Labels und anderen erklärenden Texten
  • Autosuggest-Suche zum Auffinden der richtigen Komponente
  • Benutzerdefinierte Startseite, individuelle Ebenen- und Kategoriebezeichnungen
  • Optionaler Passwortschutz und Design-Anpassung des Styleguides
  • Anzeige aller Assets und Elemente mit zusätzlichen Informationen, wie integrierte Elemente, Dateigrösse, Dimension, letzte Bearbeitung u.a.
  • Seiten-Templates können in eigenen Fenstern geöffnet und evaluiert werden
  • Es können zu jeder Komponente Kommentare abgegeben werden, so dass eine Feedback-Diskussion über jedes Designelement geführt werden kann.