# Introduction

Karacks workbench has three main sections:

• Visual DOM with Item Actions
• Preview Area with Page Actions, and
• Classes and Properties editor for the selected item.

# Visual DOM

The Visual DOM section displays the HTML elements in the parent-child format. Karacks treats the elements as items. Hovering over the items highlights the rendered element in the preview section. Selecting an item highlights it persistently in the rendered preview and shows the item's classes and properties in the Classes and Properties section. The View Orientation button changes the item's children's listing from vertical to horizontal and vice versa.

The Item Actions dropdown has seven menu items, and they are associated with the selected item.

• Add Child Item

  Adds a new item as a child for the selected item. More information in the Add a New Item section

• Move up

  Moves the selected item above the siblings in the parent's list

• Move down

  Moves the selected item below the siblings in the parent's list.

• Move into Next Sibling

  Moves the selected item into the next sibling's children's list.

• Move out of Parent

  Moves the selected item out of the current parent into the parent's parent item list.

• Put in Local Bucket

  Saves the selected item to a local bucket for future use.

• Delete

  Deletes the selected item.

# Preview Section

The Preview section has a top bar with several editor options:

• Undo

  Undo recent action

• Redo

  Redo the action previously undone.

• Save

  Save the design project to the cloud.

• Actions

  Dropdown with two options:

  • Preview Page

    Open a new window with the rendered view

  • Download Project

    Download projects as raw HTML, Angular, Vue, or React

• Pages

  Drop with the list of pages in the current project.

• New Page

  Add a new blank page.

The main Preview area has an outline of the device view for the selected responsive view and an embedded renderer to display the webpage within the device dimensions.

You can scale the device views with the Scale option in the Classes and Properties section.

# Classes and Properties Section

The Classes and Properties section, as the name suggests, lists the Tailwind utility classes and text fields for setting properties.

Top section

• Screen sizes (xs, sm, md, lg, xl, and 2xl)

  Select screen size to add utility classes as a responsive variant. (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, and 2xl: 1536px)

• Variant

  Select a from one of the four supported variants: responsive, hover (hover:), focus (focus:) and focus-within (focus-within:)

  Hover and focus variants also work with the selected responsive screen size (md:hover: or lg:focus:)

• Scale

  Select the scale of the preview section. The default value is 1.

The Classes

The TailwindCSS utility classes apply to specific attributes. In the Editor, the classes are listed as dropdown items. They are categorized by commonality and ordered by the usage frequency.

• Width, Height, Margin, Padding, and Spacing classes let you determine the size and spacing for individual elements.
• Structure, Layout, Align, and Listing classes let you arrange the HTML elements.
• Background, Border, Rounded, and Text classes let you add decoration to HTML elements and text.
• Misc, Interactivity, Transition, and Transform classes let you set shadow sizes, stroke-widths, cursor icons, animation durations, and element transformations.
• Divide, Ring, Ring-Offset, and Placeholder classes are similar to Border and Text classes for element and text-decoration.

The Properties

There are eight fields listed here for the selected item:

• Type

  Indicates the item tag type

• Attributes

  Lets you add attributes to the tag

• Content

  Lets you enter the content that goes between the beginning and end of the current tag

• Comment

  A label to explain the item's purpose

• Page Title

  Only available for the PAGE type

• File Name
• Header
• Script

# Start a new project

To start a new project, navigate to the menu at the editor's top-right corner and click on New Project/Manage Projects menu item.

You have three choices:

• Library

  You can choose from the free sample projects from the library, and if you have purchased the PRO version, then you can select a premium design project

• My Designs

  If you are signed in and have saved projects, then you can choose one of them.

• Create a blank project

  As the name suggests, create an empty project by completing the form with the title, description, and tags.

# Change Background Color

• Select an item in the DOM.
• Go to the Background tab in the Classes and Properties section.
• Change the type to solid.
• A new button labeled color is enabled.
• Click the box next to the color label to open the color panel.
• Choose a color to assign the background of the selected ingredient.

# Add an HTML tag

• Select the parent item.
• Click the Item Actions dropdown menu and select Add Item.
• Navigate to the HTML tags tab.
• Search or filter to find the correct tag.
• Click on a tag box to choose a tag.

# Create a simple layout

• Select the body tag and add two HTML div tags.
• Set the flex flex-col and justify-between classes on the body tag.
• Add two div tags to the first div tag. These will be header and body tags.
• Set the flex flex-col classes to the first div tag.

# Create a header

• Select the header div tag
• Set the classes flex flex-col space-y-4 md:flex-row md:justify-between md:space-y-0 (learn how to set responsive tags)
• Add a div tag for the logo and a nav tag to the menu
• Add an icon/image to the logo div and a title. (Learn to add icon here)
• Set the logo div classes as flex space-x-4
• Set classes for the icon and the title
• Set the classes for nav tag (flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-2)
• Add an 'a' HTML tag to the nav tag
• Set the padding, background, and hover settings for the 'a' tag
• Save the item to the bucket (learn how to save the item to the bucket)
• Add the bucket item to the nav tag for the rest of the nav links
• Rename the nav links

# Create a footer

• Select the footer div tag
• Add an h3 tag
• Enter the copyright notice
• Set the class for the footer tag as flex justify-center

# Create a section

• Add an HTML div tag
• Set the classes to mx-2 sm:mx-4 md:mx-6 lg:max-w-screen-lg lg:mx-auto flex flex-col space-y-6 py-6 px-4
• Add h2 tag with title content and set the classes to text-3xl md:text-5xl lg:text-7xl font-semibold tracking-wider text-warmGray-600
• Add h2 tag with subtitle content and set the classes to text-xl md:text-2xl lg:text-4xl font-light tracking-wider text-warmGray-700
• Add a div and set the classes as grid grid-cols-1 lg:grid-cols-3 gap-y-4 lg:gap-y-0 lg:gap-x-6
• Add a div to create a card (to create a card go here)
• Save card to bucket
• Add card to div twice
• Edit card content to each card

# Create a card

• Add an HTML div tag and set classses as flex flex-col
• Add two child div tags
• Add padding, margin and background to the first div tag m-2 px-6 py-4 bg-yellow-400
• Add icon (learn how to add icon here)
• Add h2 with title content and set classes as text-warmGray-500 font-semibold text-sm md:text-normal tracking-wide
• Add h2 with subtitle content and set classes as text-warmGray-600 font-light text-xs md:text-sm tracking wider
• Add p tag with description content and set classes as text-warmGray-700 text-sm

# Add an icon

• Select item to add icon
• Navigate to the Item Actions dropdown
• Click Add Item
• You will see a pop-up window with several tabs
• Navigate to the Icons tab
• Filter the icons with keywords
• Select the icon by clicking on the icon box
• The icon is added to the selected item

# Save an item to bucket

• Select item to save it to the bucket
• Navigate to the Item Actions dropdown
• Click the Save item to bucket menu item
• A pop-up window appears with a form
• Enter the title, description, and comma-separated tags
• Filter the images with keywords
• Click submit
• The item is now in the local bucket (available only in the current browser session)
• To access the item, click on the Add Item menu item in the Item Actions dropdown and go to the Local Bucket tab

# Push bucket item to cloud

• Select any item
• Navigate to the Item Actions dropdown
• Go to the Local Bucket tab
• Filter the items to find the item that you want to push to the cloud
• Click on the hamburger menu and click Save to Cloud.
• The item is now in your account on the cloud.

# Add item from cloud

• Select any item
• Navigate to the Item Actions dropdown
• Go to the Cloud Bucket tab
• You can pick the item From Library or My Items sub-tabs
• Filter the items with keywords
• On the chosen item, click on the Hamburger menu
• Click Select
• The item is now in the selected item in the Visual DOM

# Manage items

Logging out of Karacks removes all the items in the Local Bucket. You can manage the items in the Cloud Bucket using the Hamburger menu

• Select any item
• Navigate to the Item Actions dropdown
• Go to the Cloud Bucket tab
• Go to the My Items sub-tab.
• Click on the hamburger menu of the item you want to manage
• You can choose the action from the menu
  • Select -> adds the item to the selected item
  • Edit -> edit the title, description, and tags for the item
  • Duplicate -> create a copy of the item
  • Delete -> delete the item from the cloud

# Add an image

• Select item to add image
• Navigate to the Item Actions dropdown
• Click Add Item
• You will see a pop-up window with several tabs
• Navigate to the Images tab
• Filter the images with keywords
• Click the hamburger menu on the image of your choice
• Click Add Image
• The icon is added to the selected item

# Upload image

• Select any item
• Navigate to the Item Actions dropdown
• Go to the Images tab
• On the top-right corner of the tab, click the Choose file button.
• If you have space available, Karacks will upload the image to the cloud
• You can now click on the hamburger menu to Add Image to the selected item

# Manage images

• Select any item
• Navigate to the Item Actions dropdown and click Add Item
• Go to the Images tab
• Click on the hamburger menu of the image you want to manage.
• You can choose the action from the menu
  • Add Image -> adds the image to the selected item
  • Delete -> delete the image from the cloud

# Extract components from the web

• Select an item, navigate to the Item Actions menu and click Add Item
• Go to the From Web tab.
• Enter the URL of the website you want to extract components
• Click the Load button
• Karacks gets the HTML from the website
• If the website does not load properly, then
  • Open the webpage in a new browser tab (Google Chrome, Firefox, or Microsoft Edge)
  • Open the browser Dev Tools
  • Go to the Elements (or Inspector for Firefox) tab.
  • Right-click on the <html> tag and to open the element menu
  • Navigate to Copy and click on Copy outerHTML
  • Paste the copied HTML into the text-area
• Hover over the rendered page to see the TailwindCSS utility classes associated with the HTML element
• Click on the preferred element to extract and save it to the Local Bucket
• Extracting process may take longer for an element with a lot of child elements
• After extracting, the item copies to the Local Bucket
• You may add the item from Local Bucket to add to the selected item in the Visual DOM, or you may save the item to the Cloud Bucket

# Preview page

# Export project