Top bar
- X-mode and Grid are useful when your designs get complex and you need organization, or if you prefer these modes from other design tools like Figma
- Contrast checker for WCAG 2.0 Guidelines
- Responsive helper slider gives you fully fluid breakpoint previews
- Open link in new tab
- Class Manager: **!important** This is a powerhouse of AT. Search and filter your classes by various states, quickly delete classes if you make errors, search by identifiable names (e.g. test-class)
Structure Panel
- Toggle All
- Find Replace
- Elements Tag: Developer mode with HTML tags, color indicators, and drop down selector
- Structure Helper: in addition to the RED and BLUE indicators in structure panel, there is an additional advanced filtering option in the question circle at the top of structure panel
Context Menu (Right Click on Structure Panel items)
]
- Hide/Show Element is useful to quickly hide elements for fewer distractions (don’t get too reliant on it!)
- Move Elements: Right click to un-indent or more elements up/down the structure panel tree.
- Delete Wrappers & Move Children Up: Saves a ton of time when you are deciding to between adding/removing wrappers to groups of content vs. drag-and-drop Extend Classes & Styles Find & Replace Class Converter Style Overview Basic Text / Rich Text / Heading Converter Component Class Manager
- Hide/Show Element is useful to quickly hide elements for fewer distractions (don’t get too reliant on it!)
- Move Elements: Right click to un-indent or more elements up/down the structure panel tree.
- Delete Wrappers & Move Children Up: Saves time when you are deciding to between adding/removing wrappers to groups of content vs. drag-and-drop E
- Extend Classes & Styles – comes in handy when you might start with ID styling if you can’t decide on a name, you can extend
- Find & Replace
- Class Converter Style Overview
- Basic Text / Rich Text / Heading Converter – Similar to convert to block/container/section/div but for text/headings
- Component Class Manager – immediately filter out any un-used classes on the selected structure panel element – no need to filter byt ‘active on page’; get access to the AI feature
Elements Shortcuts
- Saves a TON of time when building you structures out, basically a quick-add
- Section, Container, Clock, Div, Block, Button, heading, texts (although you can swap between heading/text/rich text with context menu also) Note: I’d like to able to add any element to this quick-add
- SVG and Icon (and set Icon to SVG by default)
Classes & Styles
- Extend Global Classes & Styles
- Find and Replace Styles
- Group Classes by Locked Status
- Export ID Styles to Classes
- Style Indicators in the media queries panel
- Indicators of styles inherited from a class
- Breakpoint Indicator
- Locked Class Indicator
- Clone Class
- Copy Class to Clipboard
Builder Tweaks for Elements
- Enable Element CSS Shortcut
- Style Overview Shortcut
- Class Manager Shortcut
- Enable Go to Parent Shortcut
- Enable Lorem Ipsum Generator
- Disable the PIN Icon on the elements list
- Close all open Style accordions by default
- Superpower the Custom CSS control
- Grid Builder
- Box shadow generator
Custom Element Settings
- Set “p” as the default HTML tag for Basic Text
- Set “figure” as the default HTML tag for Images
- Set SVG as the default library for Icons (preferable to use svgs, not icon element)
- Overflow hidden DROP down rather than typing
