AtomicKitchen in brief Documentation

Feature Overview

Status: May 2021

Basic functionalities

  • Create, edit, duplicate, delete workspaces, in which you can create, edit, duplicate, delete, nest, preview, group, categorize or sort modular «design components»
  • Each component can consist of HTML, CSS, JavaScript
  • From each workspace you can publish several versions of style guides
  • Every workspace or style guide can include 6 levels of hierarchy:
    Styles, Atoms, Molecules, Organisms, Segments and Templates,
    in which you can nest components in each other
  • In this way you can create and publish complete page templates
  • Choose between «mobile first» or «desktop first» CSS structure
  • For each component the CSS can be defined «responsive», that means in relation to a viewport (e.g. S-, M-, L-View)
  • CSS/JS frameworks can be implemented as a working basis

Backend functionalities

  • Nest and sort design components via «Drag & Drop»
  • Autosuggest-Search for components
  • User management for additional co-editors
  • Most CSS/HTML-statements are entered without code input over autocomplete lists and «Drag & Drop» wizards
  • All inputs are possible in different measurements (px, em, rem, %)
  • Digital asset management: Uploading and administration of own web-fonts, images and an individual CSS or JS codes
  • Integration of all Google fonts (with preview functionality)
  • Define individual breakpoints for CSS media queries, define pseudo elements and classes
  • Responsive WYSIWYG preview of components during the creation process

Styleguide features

  • Code Pattern Library: «Copy & Paste» the native code (HTML, CSS and JS) of single components
  • Export/Download the complete style guide which you can use also offline
  • The style guide shows all elements «resonsive». You can control the viewport-size via the navigation
  • Integration of internal notes, labels and other explanatory texts
  • Autosuggest-Search for finding the correct component
  • Define custom startpage and individualize level and label names
  • Possibility of password protection and design-customization of the style guides
  • Display all assets and elements with additional imformations, such as integrated elements, size, dimension, last edit and more
  • Evaluate page templates in own windows
  • Comments can be made on each component, so a feedback discussion can be held about each design element.