A few things have come up that have felt counter-intuitive when using the app. I'll list them here for consideration:
(Note: if these are in place and I simply haven't found them, I welcome insight!... I'm also breaking convention of usability feedback by proposing solutions instead of singularly proposing the problem I'm encountering. For support of my feedback, I'm including both the problem I'm encountering and a proposed solution.)
<hr />
Problem: I am unable to select multiple elements / objects at once through the cmd(super) + a key press which makes it more tedious to remove a series of classes from an attribute. I do note that cmd+shift+left (or +right) does select to the end or beginning of the line from the cursor position -- quite useful work around.
Proposed Solution: Cmd (super) + A for select all would be quite useful in the following scenarios 1. Attribute inputs 2. After clicking a parent element / component, cmd+a could highlight all items to be deleted within the parent (e.g.: a paragraph with a bold element, a link, and a span). 3. the component search input in the components pane
<hr />
Problem: I am unable to utilize "all" bootstrap components for prototyping purposes, particularly fine-tuned usability features which requires custom coding, custom components or adjustments to the code after exporting.
Proposed solution: The following components would be fantastic to have available (for now, I'm working on building them as custom components): 1. Tooltips (e.g.: apply a tooltip to an element) 2. Popovers 3. Scrollspy 4. stateful buttons (stateful, single toggle, checkbox / radio groups that look like button groups) 5. Affix any component via the WYSIWYG 6. br tag (currently have to use an online / downloaded custom component to introduce line breaks) -- would also be great to generate a line break via a somewhat conventional shift+return key press like many WYSIWYG editors allow. 7. media component customizations such as media-right, vertically centered, etc.
<hr />
Problem: I have to custom build Font Awesome features (http://fontawesome.io/examples/) such as icon lists. These are not bootstrap components but do leverage bootstrap components for their base, such as the unstyled list
Proposed Solution: Unique components related to our icon suites would be really interesting to have (I am creating and sharing these components online), perhaps labeled under misc components or "icon components" and / or as additional icon options within the options pane... such as: 1. Font Awesome's Stacked icons 2. Font awesome's icon sizing (fa-2x for example) 3. Font awesome's rotate / loading component 4. Font awesome fixed-width icons
<hr />
Problem: When sharing a component, my preview doesn't look accurate when using (WYSIWYG injected) font awesome icons in the design.
Proposed Solution: When utilizing default components like font awesome icons, show the icons in the hover / click preview in the online component tab
<hr />
Problem: shared components do not conform to "bootstrap only" components
Proposed Solution: introduce an honor system checkbox where users can indicate that the custom component leverages ONLY bootstrap components (part of my practice for universal theme purposes) or "leveraging bootstrap components with custom divs".
Example: Pretty User List (beautiful, but doesn't use bootstrap components, sadly, and isn't being used in my dev... you can see an alternative attempt that I made and shared online called "User Activity Panel"
<hr />
Problem: I can't figure out how to drag/drop selectors / components / elements between other elements via the overview pane to adjust their order... for example moving a paragraphed link in-between two divs.
Proposed Solution: Allow me to drag/drop an element in between things instead of only top / bottom of a parent. And / Or like with columns, allow -- from the overview pane, the ability to a selected object up or down via an arrow button press.
<hr />
Problem: the HTML pane does not allow me to right click and delete a node similar to my experience with inspecting an element / firebug in my browser making it a multi step process to change my behavior from my usual pattern of behavior.
Proposed Solution: Introduce delete node :)
<hr />
Problem: I have to manually set styles for text alignment such as text-center via an element's attributes.
Proposed Solution: Allow an advanced option for any block level element to utilize text styling such as text-left text-center text-justify, etc.
<hr />
Problem: I can't generate my own theme through the WYSIWYG editor and must import a theme which requires my styling / theme-ing to occur outside of the app.
** Proposed Solution:** A theme-tool would be ... amazing! And it would allow for best-practice theme creation to be applied by leveraging the established conventions provided by bootstrap (e.g.: forcing the convention).
- Perhaps consider: allow for custom setting of body-wide fonts via the font import experience
- Allow setting of the default color palette for primary, danger, warning, info, etc.
- List item
<hr />
Problem: I am unable to convert miss-integrated objects - such as images - to a default component when inside the correct parent. Example: I dragged and dropped an image into the media-left div and it did not inherit the locked "media-object" class. This often causes me to have to rebuild components or re-add content to my design which takes an unusual amount of time.
Proposed Solution: Consider allowing for a right-click "convert to [context specific item]" such as an image within a media-left div to become a "media object". Or to convert text to a link.
<hr />
Hope this is useful feedback.