This is really fantastic but can I suggest that instead of having one field for "gap" you separate it into column and row gap because, just like in Bricks itself, it's not immediately obvious that you can set column and row gap by entering two separate values. Great work!
Thank you Maxime, great examples and explanation. Really appreciate the time you invest in developing your plugin and helping us push our design and development skills.
Terrific. Best explanation (loosely) for when to use grids and when to use flex was Geary’s flex is for content and grid for page. This is fabulous. Well done and thank you.
🥳 This feature release is truly epic and a significant step forward in making the power of CSS grid accessible to a wider audience, particularly those accustomed to page builders. This enhancement significantly surpasses the more basic grid interfaces that Bricks has offered until now. I have a suggestion that could make it more convenient for class-based editing. Since the grid builder already adds an opening comment like /** GRID BUILDER (autogenerated on 14/12/2023) **/, it would be great if it could also include an ending comment. This would allow for easier regex-based replacement during subsequent edits (could be optional with a checkbox if you don''t like it as default). For instance, it could look something like this: /** GRID BUILDER (Start - autogenerated on 14/12/2023) **/ /* The grid builder styles go here */ /** GRID BUILDER (End - edits will be overwritten) **/ This way, when you need to update the grid, the system could easily identify and replace the entire section enclosed by these comments. It would streamline the process of managing and updating grid settings. The best practice for overriding specific settings in cells would be to repeat the selector after the autogenerated CSS, using the same nth-child approach. What do you think?
Yeah that’s something I could look into, but it would also erase potential custom css that you could insert inside the declarations (like my flex:1 in the post grid example) - you’d need to remember styling outside of the comments, and never delete the comments, otherwise the mess begins. :)
@@AdvancedThemer Absolutely, and that's the purpose of the "End - edits will be overwritten" disclaimer. If you adopt this optional approach, adding something like flex would be added outside and below the autogenerated grid CSS as a best practice in that case. The key here is that any replacement would occur only if the end comment is detected. Additionally, you could introduce a pop-up confirmation when saving, asking users whether they want to overwrite the existing grid. This feature could be quite beneficial, as it helps prevent the accidental duplication of GRID CSS, especially during frequent edits. It simplifies the process, reducing the need for manual cleanup of redundant code. Food for thought. Great work, dude!
To add a little dessert to our mental dining session: Another advantage worth considering is the potential for class-based grids in the future versions of Bricks. Should this feature become available, any custom CSS wouldn't be able to directly modify the grid settings. Instead, users would need to rely on repeating the nth-child selector for any additional modifications outside the core grid definition. Hence, it aligns with the best practices but also prepares us for potential future enhancements in Bricks, ensuring smoother transitions.
@@maxziebell4013 @AdvancedThemer The question is what % people (notice I didn't say developers) would even be using regex? If this is implemented, I would hope it, as an optional setting, was tucked away! I personally do certain replacements in css / code directly in the DB via sql query, never even having to even visit WP or admin.. and adjustments sometimes for multiple sites done in 2 or 3 secs lol. For example, sure while working on a page I sometimes use the CSS box or Super CSS box for that page. I then cut it all out and replace it with one line: @>@some_unique_letter_number_combo-@
What is the recommendation for applying the grid - to a class or an ID? And would this change if using a loop (I see the loop means the CSS is saved as custom CSS).
Great! I couldn't see myself working without AT. Just two suggestions: Instead of saying "Iniate Grid", why not "Reset Grid?" Instead of keeping the old custom CSS with an active look, why not put it between "/*" and "*/" and convert it into a note? Less visual noise, and the code, if necessary, can be reused. Best!
🎯 Key Takeaways for quick navigation: 00:00 🚀 *Overview of Advanced Themer 2.3* - Introduction to version 2.3 of Advanced Themer. - Highlight of the new CSS Grid Builder feature. - Overview of the video's agenda and invitation to follow along for tricks and examples. 01:17 🛠️ *Enabling CSS Grid Builder in Theme Settings* - Instructions to enable the CSS Grid Builder in the theme settings. - Demonstration of accessing the Builder tricks elements option. - Toggle on the Grid Builder option and save the settings. 02:40 📏 *Exploring CSS Grid Builder Features* - Overview of the CSS Grid Builder interface. - Explanation of breakpoint customization for different devices. - Demonstration of adjusting grid columns, rows, and values. 04:00 🎨 *Manipulating Items Inside the Grid* - Instructions on manipulating individual items inside the grid. - Demonstration of changing labels, rows, columns, and Z-index. - Visual representation of grid manipulation and item rearrangement. 09:17 🌐 *Applying Grid to Frontend Responsively* - Explanation of the need to apply the grid to the frontend for each breakpoint. - Demonstration of applying grid settings and adapting them to different views. - Highlight of the importance of applying the grid for changes to take effect. 13:46 🤯 *Working with Grid on Class Level* - Introduction to applying grid values on the class level. - Explanation of the difference in workflow compared to the ID level. - Cautionary note about managing competing settings on the ID level. 18:47 🔄 *Responsive Design and Class Level Grid* - Demonstration of making grids responsive on the class level. - Explanation of generating and managing CSS code for class-level grids. - Emphasis on maintaining good CSS practices when working with classes. 19:53 🔄 *Overlapping Grids Example* - Introduction to creating an overlapping grid effect. - Demonstration of adjusting grid size, resizing images, and setting Z-index. - Quick and easy steps to achieve visually appealing overlapping grids. 23:10 🔄 *Post Grid Example with Query Loop* - Application of CSS Grid to a query loop for a post grid. - Explanation of dealing with query loops and applying grid settings to the container. - Demonstration of making the post grid responsive and adding static blocks. 27:44 🎉 *Conclusion and Viewer Interaction* - Recap of the covered examples and features in the video. - Invitation for viewers to comment with questions or suggestions. - Closing remarks and anticipation for the next video release. Made with HARPA AI
![ILLSLICK - WINTER IS COMING [Official Video]](http://i.ytimg.com/vi/dwTMeM1zIhQ/mqdefault.jpg)
Brilliant overview of the final release Maxime - really excited to see how fast Advanced Themer is growing in both popularity and features. :)
You are developing AT much faster than we can create websites for our customers. 😃Keep up with this awesome work!
Thanks mate. A truly helpful update. Keep up the good work.
Wow 😮, Brilliant.. Thank you for thos great ATheamer 🙏🏻🙏🏻
This is really fantastic but can I suggest that instead of having one field for "gap" you separate it into column and row gap because, just like in Bricks itself, it's not immediately obvious that you can set column and row gap by entering two separate values. Great work!
Sounds like a good suggestion :)
Simply Amazing! It's a game changer.
Keep up the good work, Maxime. The speed you're implementing new features is awesome. And man, the grid builder… 👏
Thank you Maxime, great examples and explanation. Really appreciate the time you invest in developing your plugin and helping us push our design and development skills.
Wonderful, the Bricks Team should hire you :D
Terrific. Best explanation (loosely) for when to use grids and when to use flex was Geary’s flex is for content and grid for page. This is fabulous. Well done and thank you.
This is way better than even Webflow and Cwicly. Bravo!
You set a new benchmark for Visual CSS Grid Builder.
Thank you Maxime for this lively feature and for examples.
Wow. Really impressive. I’m really looking forward to trying this new feature out.
Absolutely amazing stuff. Wasted so much time tinkering these grid settings manually. Love this. ❤🎉
Incredible stuff, thanks for your work!
Awesome! very nice and handy! I've spent hours building a specific grid layout. Your grid builder will save allot of time!! Thank you
AMAZING!! A GAME CHANGER!
🥳 This feature release is truly epic and a significant step forward in making the power of CSS grid accessible to a wider audience, particularly those accustomed to page builders. This enhancement significantly surpasses the more basic grid interfaces that Bricks has offered until now.
I have a suggestion that could make it more convenient for class-based editing. Since the grid builder already adds an opening comment like /** GRID BUILDER (autogenerated on 14/12/2023) **/, it would be great if it could also include an ending comment. This would allow for easier regex-based replacement during subsequent edits (could be optional with a checkbox if you don''t like it as default).
For instance, it could look something like this:
/** GRID BUILDER (Start - autogenerated on 14/12/2023) **/
/* The grid builder styles go here */
/** GRID BUILDER (End - edits will be overwritten) **/
This way, when you need to update the grid, the system could easily identify and replace the entire section enclosed by these comments. It would streamline the process of managing and updating grid settings.
The best practice for overriding specific settings in cells would be to repeat the selector after the autogenerated CSS, using the same nth-child approach.
What do you think?
Yeah that’s something I could look into, but it would also erase potential custom css that you could insert inside the declarations (like my flex:1 in the post grid example) - you’d need to remember styling outside of the comments, and never delete the comments, otherwise the mess begins. :)
@@AdvancedThemer Absolutely, and that's the purpose of the "End - edits will be overwritten" disclaimer. If you adopt this optional approach, adding something like flex would be added outside and below the autogenerated grid CSS as a best practice in that case. The key here is that any replacement would occur only if the end comment is detected. Additionally, you could introduce a pop-up confirmation when saving, asking users whether they want to overwrite the existing grid. This feature could be quite beneficial, as it helps prevent the accidental duplication of GRID CSS, especially during frequent edits. It simplifies the process, reducing the need for manual cleanup of redundant code. Food for thought. Great work, dude!
Definitely food for thought :)
To add a little dessert to our mental dining session: Another advantage worth considering is the potential for class-based grids in the future versions of Bricks. Should this feature become available, any custom CSS wouldn't be able to directly modify the grid settings. Instead, users would need to rely on repeating the nth-child selector for any additional modifications outside the core grid definition. Hence, it aligns with the best practices but also prepares us for potential future enhancements in Bricks, ensuring smoother transitions.
@@maxziebell4013 @AdvancedThemer The question is what % people (notice I didn't say developers) would even be using regex?
If this is implemented, I would hope it, as an optional setting, was tucked away!
I personally do certain replacements in css / code directly in the DB via sql query, never even having to even visit WP or admin.. and adjustments sometimes for multiple sites done in 2 or 3 secs lol.
For example, sure while working on a page I sometimes use the CSS box or Super CSS box for that page. I then cut it all out and replace it with one line:
@>@some_unique_letter_number_combo-@
Maxime!! you are amazing my friend!
This was what I needed. Thanks al lot!
Amazing!
Brilliant. Thank you for this.
Next level grid builder 🎉🎉
What is the recommendation for applying the grid - to a class or an ID? And would this change if using a loop (I see the loop means the CSS is saved as custom CSS).
Great! I couldn't see myself working without AT.
Just two suggestions:
Instead of saying "Iniate Grid", why not "Reset Grid?"
Instead of keeping the old custom CSS with an active look, why not put it between "/*" and "*/" and convert it into a note? Less visual noise, and the code, if necessary, can be reused.
Best!
🎯 Key Takeaways for quick navigation:
00:00 🚀 *Overview of Advanced Themer 2.3*
- Introduction to version 2.3 of Advanced Themer.
- Highlight of the new CSS Grid Builder feature.
- Overview of the video's agenda and invitation to follow along for tricks and examples.
01:17 🛠️ *Enabling CSS Grid Builder in Theme Settings*
- Instructions to enable the CSS Grid Builder in the theme settings.
- Demonstration of accessing the Builder tricks elements option.
- Toggle on the Grid Builder option and save the settings.
02:40 📏 *Exploring CSS Grid Builder Features*
- Overview of the CSS Grid Builder interface.
- Explanation of breakpoint customization for different devices.
- Demonstration of adjusting grid columns, rows, and values.
04:00 🎨 *Manipulating Items Inside the Grid*
- Instructions on manipulating individual items inside the grid.
- Demonstration of changing labels, rows, columns, and Z-index.
- Visual representation of grid manipulation and item rearrangement.
09:17 🌐 *Applying Grid to Frontend Responsively*
- Explanation of the need to apply the grid to the frontend for each breakpoint.
- Demonstration of applying grid settings and adapting them to different views.
- Highlight of the importance of applying the grid for changes to take effect.
13:46 🤯 *Working with Grid on Class Level*
- Introduction to applying grid values on the class level.
- Explanation of the difference in workflow compared to the ID level.
- Cautionary note about managing competing settings on the ID level.
18:47 🔄 *Responsive Design and Class Level Grid*
- Demonstration of making grids responsive on the class level.
- Explanation of generating and managing CSS code for class-level grids.
- Emphasis on maintaining good CSS practices when working with classes.
19:53 🔄 *Overlapping Grids Example*
- Introduction to creating an overlapping grid effect.
- Demonstration of adjusting grid size, resizing images, and setting Z-index.
- Quick and easy steps to achieve visually appealing overlapping grids.
23:10 🔄 *Post Grid Example with Query Loop*
- Application of CSS Grid to a query loop for a post grid.
- Explanation of dealing with query loops and applying grid settings to the container.
- Demonstration of making the post grid responsive and adding static blocks.
27:44 🎉 *Conclusion and Viewer Interaction*
- Recap of the covered examples and features in the video.
- Invitation for viewers to comment with questions or suggestions.
- Closing remarks and anticipation for the next video release.
Made with HARPA AI
You forgot the part about how to add a 'Static Item' in the grid 👍
Every time I start a new project I have more things that AT does and I don't need other plugins for ^_^
Wow
Hello, Internet!😍
grande!