Read more about it in our introduction to Trimmings.
Once you've built your website and it's serving HTML that's presented the way you like it, you can start adding Trimmings hints that will enhance the way your interactions behave.
Perhaps you have a link to a detail page that you'd like to open in a modal. The standalone page probably has a header and footer that you wouldn't want to render in your modal. That's no problem. Just add an
inline hint to your link:
<a data-trimmings-inline="from: .detail-container, to: .modal-container" href="/photos/2"> View as a modal </a>
If your visitor clicks that link, the page will be fetched in the background, the element with the
detail-container class will be extracted from the result, and it will be inserted in an element with the
modal-container class that's already on the page. You can write CSS that will make this show up however you like. Now you have a modal! That's all there is to it!
trimmings.js in your
<head>. That's it. Trimmings will automatically activate when your page loads—no need to think about lifecycles.
Trimmings features are enabled on specific elements by adding
data-trimmings-* attributes. For more details on usage of each Trimmings feature, please consult the Trimmings handbook.
Licensed under either of
- Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
- MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)
at your option.
If you've found a bug or you'd like to propose a new feature, submit an issue and let's talk about it!
We expect that all contributors to Trimmings will abide by our Code of Conduct.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.