Suggestions for CSS Grid Builder -...

User 108671 Photo


Registered User
4 posts

I'm with Dan Clements when he wrote: A simple a,b,c step tutorial to starting a new project would be nice. It always opens in that ski project and I don't have a clue what to do with it.
User 244626 Photo


Registered User
811 posts

GDEWebMan wrote:
I am Loving this ........ Really getting control of it!
Noticing: When creating a New Container that the Tree just shows it as a Container & there doesn't appear to be a way to name the container so it shows in the Tree.
Example:
Container
Container
Container
Would be nice if we could identify in the Tree.
Example:
Container Header
Container Menu
Container Main
I now we can create ID and change CSS Class like this:
<nav class="container container-8">
<a class="link-text menu-item" href="#">HOME</a>
<a class="link-text menu-item" href="#">SERVICES</a>
<a class="link-text menu-item" href="#">ABOUT US</a>
<a class="link-text menu-item" href="#">CONTACT US</a>
</nav>
<div class="container container-1">
<span class="text-element text-1">1</span>
<span class="text-element text-1">2</span>
<span class="text-element text-1">3</span>
<span class="text-element text-1">4</span>
<span class="text-element text-1">5</span>
<span class="text-element text-1">6</span>
<span class="text-element text-1">7</span>
<span class="text-element text-1">8</span>
</div>
But it does not Show in the TREE.
Can this be done?
If so .................. Please DO!

Thanks
GDEWebMan


YES, custom identifiers for the tags would be WONDERFUL !
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,558 posts

I think it would be helpful if the Grid Editor window floated on the screen, as do the Components and Resources windows. This would allow one to see the effect of the 'Apply to Canvas' button without leaving the Grid Editor.

Frank
User 244626 Photo


Registered User
811 posts

Explicit and Implicit Line Grids would be nice.
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,558 posts

This is a very minor matter.

In the Selection Settings Row of the Grid Editor, the four buttons next to the word 'Manage' have the following tool-tips -
(a) Add Duplicated Row Before
(b) Add Duplicated Row After
(c) Move Row Up
(d) Move Row Bottom

I think that item (d) would be more aptly described as 'Move Row Down'.

Frank
User 2899549 Photo


Guest
1 post

+1 for being able to name the elements in the menu area (maybe automatically doing it if the id is given.

But would it also be possible to add a section to link to javascript files like codepen and jsfiddle provide? Something that wouldn't require the user to edit the html every time its exported.

Those are the only 2 things preventing me from purchasing and using the Grid Builder as my new visual editor! Great work guys
User 2841352 Photo


Registered User
2 posts

It would be great if you could undock the the settings elements at right like you can in Photoshop. I work with multiple screens, and would like to place them outside the main design window.
User 2706435 Photo


Ambassador
444 posts

This should be a pinned thread, like in the other discussion groups. I didn't notice this until I separately posted a feature request thread. Mod, feel free to delete my posts.
    1. Grid Editor to be movable in the screen, and resizable. Right now, the Grid Editor covers up elements one might want to change and use a visual reference.
    2. A quick way to launching Grid Editor. For example, when selecting a text element, instead of remembering which container in the drop down is attached to the grid, have a dot or something, or a quick access button to the closest (or parent) grid of the selected element.
    3. Up/Down sections to get to the right grid. I have not got this far, but I can see how it will be useful when creating nested grids.
    4. A color-coded view of canvas, that matches colors in Grid Editor, and CUSTOMIZABLE COLORS.
    5. A separate Grid Editor window for the parent of the selected element.
    6. When resizing the canvas, keep the topmost element in place, so that when resizing to a smaller window, instead of on only pushing content down, and out of view, the canvas stays "anchored" on an element. This can go both ways too, top and bottom screen. Perhaps have a "resizing anchor" option at top of the screen
User 2706435 Photo


Ambassador
444 posts

In the Grid Editor
have an option to "lock" grid area selection settings cell area. For example. If I am moving a grid area around, Suppose its Row 3 to 3. But I change it to Row 4. I'd like to an automatic change when I click one number. Change one, the other changes to match it. Same with columns. Right now, to move a grid area and keep the same column/row dimensions, whenever one number is changed, the same thing must be manually done to the other number.
User 2706435 Photo


Ambassador
444 posts

Grid Editor
When areas A and B need to be exchanged, B is moved to replace A. A is no longer visually present in the grid. It name is present in the Name drop down. However, I can see with some complex grids, a user forgetting or confusing what the area was that he just replaced. Perhaps a highlight in the drop down of areas not visible, or any areas that have conflict/overlap.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.