Technical Features

Project Management

CSS Framework Support

Thinkin' Tags supports multiple CSS frameworks. Existing projects can be updated when a new version of a CSS framework becomes available.

Site Management

Project can contain multiple HTML pages, stylesheets and media files. New HTML pages can be created as blank files or as clones from existing pages.

Internal Editors

HTML Editor

Double click on any element in your layout or in the DOM tree to open the editor and get direct markup access. The HTML editor provides syntax highlighting, live code linting and supports Emmet (ZenCoding) for fast markup creation.

CSS Editor

Thinkin' Tags offers manual CSS editing based on the media blocks in your stylesheets. The editor provides syntax highlighting and live CSS linting.

CSS Engine

Stylesheet Management

For every HTML file, you can define the included stylesheets as well as their order. Stylesheets can be disabled temporarily and all your modifications become visible immediately.

Selector Usage

Thinkin' Tags automatically checks all selectors if they are used in the recent open file. This makes it easy to identify unused selectors.

CSS Inspector

Thinkin' Tags has it's own CSS engine which allows not only to easily control all hitting CSS rules on any element, but also calcutates the CSS cascade and interitance for your selectors. This gives you full control over your design.

Pseudo Selectors

To make the design process more effective, you can manually trigger the matching of CSS pseudo selectors like :active, :hover and :focus.

CSS3 Support

CSS3 Media Queries

The internal CSS engine supports CSS3 Media Queries. This makes it possible to simulate diffent media types (e.g. print media) and custom viewports of mobile devices (smartphones, tablets). So you can prototype responsive designs and check different device classes without leaving the application.

Vendor Prefixes

Auto-completition of CSS properties and automatic creation of vendor-prefixes makes it very comfortable to work with CSS3. The automatic creation of vendor-prefixes follows the recommendations of caniuse.com and html5please.com.

Rapid Prototyping

Workflow

Visually oriented workflow

Thinkin' Tags offers a new, visually oriented workflow. Unlike traditional WYSIWYG editors Thinkin' Tags takes care of the structural design your layout, and gives you full control over the source code. In addition to context-based DOM manipulation features, a conventional HTML editor is always available to work directly in the source code.

Responsive Design

The interface builder allows to test and edit your layout in varying scenarios, without having to leave the application. For example, viewport widths of different devices (smartphones, tablets) can be emulated. In the same way, the media type "print" can be emulated to optimize print styles for the layouts directly in your browser.

Visual DOM Manipulation

Thinkin' Tags provides a full set of featureset for DOM manipulation, Edit node types, (un)wrap elements or its childen or empty/remove elements from the context menu of any structural element.

Automatic ID tracking

When you modify element IDs, Thinkin' Tags tracks all existing relations (e.g. labels that are connected to form elements via for-attribute), made to this element and can update these references. This is particularily useful when building forms.

Typography

Web Typography

Thanks to its visual workflow, the optimization of web typography becomes very user-friendly. Via sliders you can quickly test basic typographic characteristics. The immediate feedback of the application allows rapid and goal oriented work and at the same time it invites you to experiment with typography.

Google Webfont Library

Directly from within the application you have full access to over 600 fonts from Googles Webfont Library and with a single click you can integrate any fonts directly into your project.