I am looking to create a dynamic layout where different content such as tables and masks can be displayed in multiple areas or columns on a website. Typically, the left column will contain a list, the middle column details of an entry, and the right column notes, help, and additional details. Since there are over 500 possible configurations with datatables.js, it's not feasible to define everything statically. Depending on the viewport size, only one or two of these areas may be visible at a time.
Users should be able to adjust the width of each area based on the total available space, so I am considering using Split.js (). The goal is for these areas to adapt to the available space within their container rather than the viewport directly. Unfortunately, this functionality does not exist natively.
My initial idea is to define styles for various width configurations using SCSS mixins and Bootstrap Mixin. Then, I would use media queries to apply these styles dynamically based on the current width set by split.js and window resize events. While this approach may work, it has limitations such as handling resize events and requiring manual setup.
<div>
<div class="split" id="one"></div>
<div class="split" id="two"><</div>
</div>
------------
@mixin one_xs {@include make-col($size, $columns: $grid-columns) } /*style for small list */
@mixin one_sd {..}
@mixin one_md {..}
@mixin one_lg {..}
@mixin two_xs {..}
@mixin two_sd {..}
@mixin two_md {..}
@mixin two_lg {..}
@include media-breakpoint-up(xs) {
@include one_xs;
#two { display: none}
}
…
@include media-breakpoint-up(lg) {
#one .detect_xs {@include one_xs;}
#one .detect_sd {@include one_sd;}
#one .detect_lg {@include one_lg;}
#two .detect_xsmall {@include two_xs;}
…
}
<script>
Split(['#one', '#two']);
...
window.addEventListener('resize', function() {
…
if ( $('#one').width() ) > 1024) {
$('#one').AddClass(".detect_md");
…
}
Do you think this approach would work effectively? Are there alternative methods for implementing this concept more efficiently without necessarily relying on Split.js or Bootstrap? Any ideas or suggestions would be greatly appreciated.