Quick Help within the Application

User Interface Tutorial

Within the builder application there is a user interface tutorial available. To start it, click on the  Help button in the upper right corner of the interface builder application.

Screenshot - User Interface Tutorial

Dialog Tutorials

All dialogs in the sidebar provide an indivual short documentation. To show these info boxes, click the right aligned question sign, besides the dialog headings.

Screenshot - Dialog Tutorial

Editing Workflow

Editing HTML

Drag & Drop Editing

  1. Go to "Markup" in the top menu, the application will switch workbench viewmode to "structural" (you can also use "linearized" viewmode for more precision).
  2. Click on a structural element (any element with a menu bar) to make it a "dropzone" for new elements.
  3. Select new elements from the "Element Browser" in the left panel and drop them into your active container

DOM Traversing

  1. Click on a structural element to activate it
  2. Child elements become draggable within it's parent element for DOM traversing in "structure" and "linearized" viewmode.

DOM Manipulation

  1. Click on the right aligned context menu button of a structural element
  2. Choose from several manipulation options (wrap, unwrap, wrap children, delete)

Editing CSS

Easy Editing Mode

  1. Select the "Design" entry from the main menu
  2. Click on any element in your layout to activate it.
  3. Coose a matching selector from "CSS Selectors" section in the Stylesheet Management" dialog in the sidebar.
  4. Modify CSS properties of the choosen CSS selector in the "CSS Properties", "Quick Typography" and "CSS Backgrounds" dialogs.

Advanced CSS Editing

  1. Click on any element in your layout
  2. Open "HTML/CSS Inspector"
  3. Modify CSS properties in the right panel of the inspector window

Editing Pseudo-Classes

  1. Open "HTML/CSS Inspector"
  2. Click on the Class-Button (:focus, :hover, :active), to trigger selectors, using this pseudo-class as active
  3. Modify CSS properties in the right panel of the inspector window

HTML Limitations

You can create almost anything in Thinkin' Tags that can be build within the <body> element. You don't have access to the <head> section of your HTML prototypes. The document head is generated by the application to ensure fully working valid source code when you export your project.

The second limitation applies to <iframe> elements. Thinkin' Tags supports only empty <iframe> elements with "src" attribute that references their content, e.g.:

<iframe width="640" height="360" src="http://www.youtube.com/embed/t4gjl-uwUHc"></iframe>

The <frame> tag is not supported in HTML5 anymore and therefore this tag will be filtered via Thinkin' Tags internal HTML editor.

Tutorial Videos

The ongoing development of the application results in changes to the user interface and in the naming of functions. On our Youtube-Channel, there are several application tutorials availabe in 1080p (Full HD) resolution. Please note that with the release of Thinkin' Tags v0.5 with its completely reworked UI these tutorials are out of date.

Internal CSS Engine

General Features

Some impressive features of Thinkin' Tags internal CSS engine:

  • Auto-completition of CSS properties and value keywords
  • Automatic creation of vendor-prefixed properties for most CSS3 properties, based on recommendations from caniuse.com.
  • Managing unlimited stylesheets
  • Calculation of the CSS selector cascade
  • Calculation of property inheritance
  • Support for !important values
  • Reconstructs property sets from CSS2.1 shorthand values
  • Allows to force match of pseudo selectors :focus, :hover and :active for comfortable CSS editing

General Limitations

The internal CSS engine has the following limitations:

  • CSS properties can only be defined once within a selector. Combinations of margin and margin-top are possible though. Properties are ordered aplhabetically.
  • The parser supports CSS2 media types (all, screen, print) as well as CSS3 media queries. The application provides a set of predefined media queries (named widescreen, tablet, phone) with customizable breakpoints (min-width / max-width) that can be defined as pixel values.

CSS3 and Vendor-Prefixes

Thinkin' Tags makes it really simple to work (or experiment) with CSS3. When you write an unprefixed CSS3 property, the application automatically adds all required vendor-prefixes based on the recommendations of caniuse.com. When you write a vendor-prefixed property instead, only this property will be added to the stylesheet.

Deletion of properties works the same way. When you delete the unprefixed property, then also the vendor-prefixed versions will be deleted. If you delete a vendor-prefixed property instead, then any other version of this property (prefixed or unprefixed) remains unchanged. This way, you have full control over your CSS, but writing code is reduced to a minimum.

Thinkin' Tags supports auto-completition and automatic creation of vendor-prefixed properties for the following CSS modules:

CSS Selector Support

Thinkin' Tags build-in CSS engine allows live analysis and modification of your stylesheets. Depending on the recent viewmode, you're working in, there are some limitations. Few selectors wont hit their target in "structure" or "linearized" viewmodes due to additional elements that will be rendered into the layout by the application.

The following table shows, which CSS selectors will work in the different viewmodes provided by the application.

PatternMeaningCSS levelViewmodes
structure | linearizedlive
*any element2yesyes
Ean element of type E1yesyes
E[foo]an E element with a "foo" attribute2yesyes
E[foo="bar"]an E element whose "foo" attribute value is exactly equal to "bar"2yesyes
E[foo~="bar"]an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"2yesyes
E[foo^="bar"]an E element whose "foo" attribute value begins exactly with the string "bar"3yesyes
E[foo$="bar"]an E element whose "foo" attribute value ends exactly with the string "bar"3yesyes
E[foo*="bar"]an E element whose "foo" attribute value contains the substring "bar"3yesyes
E[foo|="en"]an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"2yesyes
E:rootan E element, root of the document3nono
E:nth-child(n)an E element, the n-th child of its parent3noyes
E:nth-last-child(n)an E element, the n-th child of its parent, counting from the last one3noyes
E:nth-of-type(n)an E element, the n-th sibling of its type3yesyes
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting from the last one3yesyes
E:first-childan E element, first child of its parent2noyes
E:last-childan E element, last child of its parent3noyes
E:first-of-typean E element, first sibling of its type3yesyes
E:last-of-typean E element, last sibling of its type3yesyes
E:only-childan E element, only child of its parent3noyes
E:only-of-typean E element, only sibling of its type3yesyes
E:emptyan E element that has no children (including text nodes)3yesyes
E:link
E:visited
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)1yesyes
E:active
E:hover
E:focus
an E element during certain user actions1 and 2yesyes
E:targetan E element being the target of the referring URI3yesyes
E:lang(fr)an element of type E in language "fr" (the document language specifies how language is determined)2nono
E:enabled
E:disabled
a user interface element E which is enabled or disabled3yesyes
E:checkeda user interface element E which is checked(for instance a radio-button or checkbox)3yesyes
E::first-linethe first formatted line of an E element1yesyes
E::first-letterthe first formatted letter of an E element1yesyes
E::beforegenerated content before an E element2yesyes
E::aftergenerated content after an E element2yesyes
E.warningan E element whose class is "warning" (the document language specifies how class is determined).1yesyes
E#myidan E element with ID equal to "myid".1yesyes
E:not(s)an E element that does not match simple selector s3yesyes
E Fan F element descendant of an E element1yesyes
E > Fan F element child of an E element2yes *)yes
E + Fan F element immediately preceded by an E element2yesyes
E ~ Fan F element preceded by an E element3yesyes

*) not from structural elements to child element of its content