We're thrilled to announce a new enhancement in the Trongate framework that allows developers to easily customize the top margin of modals without modifying core JavaScript functions. This enhancement, while seemingly simple, solves a long-standing issue that has been a point of frustration for many developers.
The Problem We've Solved
Previously, the top margin of modals was hard-coded in JavaScript (with a value of '12vh'), making it extremely challenging for developers to adjust this value without altering the core framework code. This limitation could lead to inconsistencies in design across different projects and made it difficult to adapt modals to various layout requirements.
Our Solution: CSS Custom Properties for Margin-Top
We've implemented a solution using CSS custom properties (also known as CSS variables) that allows developers to easily override the default top margin value. This approach offers several benefits:
- Flexibility: Easily customize modal vertical positioning without touching JavaScript
- Maintainability: Keep your core framework files untouched
- Consistency: Apply changes globally or to specific modals as needed
- Backwards Compatibility: Existing projects will continue to work without modification
How to Use the New Feature
To take advantage of this new customization option for modal margin-top, follow these simple steps:
- In your CSS file, set the custom property for all modals:
:root { --modal-margin-top: 20vh; /* Replace with your desired value */ } - For specific modals, use a more targeted selector:
#mySpecialModal { --modal-margin-top: 30vh; }
That's it! The framework will automatically use your custom value for the top margin, falling back to the default of 12vh if no custom value is set.
Trongate MX for Dynamic Modals
Just in case you haven't heard our other news, the Trongate framework now comes with Trongate MX, an exciting new alternative to HTMX. With Trongate MX, you can create modals entirely dynamically, offering even more flexibility in your web applications. As a matter of fact, you can even have animations inside your modals by adding a simple attribute onto an HTML element.
To learn more about creating dynamic modals with Trongate MX, check out our comprehensive documentation: Building Dynamic Modals with Trongate MX
For those who prefer video tutorials, we've got you covered! Watch our YouTube tutorial on dynamic modals and animations with Trongate MX: Dynamic Modals & Animations with Trongate MX
Conclusion
While the ability to customize modal margin-top may seem trivial, we understand it's been a pain point for many developers. We're glad to provide this solution and continue improving the Trongate framework to meet your needs.
We're excited to see how you'll use these new features in your projects. As always, we welcome your feedback and suggestions for future improvements.
Happy coding, and enjoy your newly customizable modals!
And finally...
This is a period of intensive work for the Trongate framework. At the time of writing, we've rewritten large sections of the framework 'engine' and we are also in the process of rebuilding our documentation. There are a lot of gaps here and there and glitches will happen during this phase.
Did somebody say 'rewrite'?
Yes indeed, we're doing a boat-load of rewriting. The good news is, you don't have to worry about that. Trongate remains the only framework in all of PHP that puts stability first. We have this crazy belief that it's possible to improve code without breaking it! So, don't worry your pretty little self. With Trongate, you can relax. Trongate is the 'stability first' framework.
