CSS grid/layout framework with focus on fixed elements and single page full screen layouts

Question

Rule of thumb - if you\'re messing with CSS too much in your layouts, switch to a framework. I\'ve been going over the dozens of grid/layout frameworks out there and most of the

Answer 1

"dozens of grid/layout frameworks out there and most of them focus on the traditional document grid layout."

You make it sound like its a bad thing. I dont see why you would not use a grid framework. It is fairly standard practice if you have any intention what so ever to make your application tablet and mobile friendly. Most of them are extremely quick to setup with little to no extra css required.

Take kube for example. It is very minimalistic and flexible. You basically just add pre defined classes to the div tag you wish to apply as the for the size.

<div class="units-row">
    <div class="unit-30"></div>
    <div class="unit-70"></div>
</div>

This type of step does not mess with modals or ifames. To modify all you need to do is change the class .. need a larger left hand side, just change the class of the div

<div class="units-row">
    <div class="unit-80"></div>
    <div class="unit-20"></div>
</div>

This will degrade gracefully for the smaller resolutions while keeping your style of coding as it would be in any other application.

You can write from scratch if you want but .. why?

foundation is also really good and the one i use for my projects

Answer 2

Disclosure: I'm the OP and I'm tossing an idea to get the general response.

There's no need for a specialized framework because you can use TABLES for that.

Yes, I'm talking about the widely avoided area of <table> <tr> <td> for layouts. It's common knowledge that tables should be avoided for layout. I tried to go over the reasons mentioned here: Why not use tables for layout in HTML?

It seems to me that most reasons aren't valid in this case (SPA):

Separation of content from layout - Since an SPA is not really content (it's just a skeleton with AJAX filled data), this argument doesn't apply. This is just an interface, I don't expect Google to index it.

Tables are less maintainable - Not in this case. The CSS hell you have to go through to implement this with divs is much less maintainable.

Tables are slower to render - Of course, but we want a complex layout that requires more calculations to render. Heck, we usually compensate with JS resize events. It would be much efficient for the browser to do this natively inside the render engine.

Answer 3

In some project I did it with the help of a code like this (tested on FF):

<style>
#topMenu {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100px;
}
#sidePanel {
    position: fixed;
    left: 0px;
    top: 100px;    
    width: 100px;
}
#sideMenu {
    width: 100%;
    height: 50px;
}
#sideList {
    border-width: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FFF0F0;
}
#content {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    background-color: #F0FFF0;
}
body {
    border-width: 0px;
    padding: 100px 0px 0px 100px;
    margin: 0px;
}
</style>

<div id="topMenu">Top menu</div>
<div id="sidePanel">
    <div id="sideMenu">Size menu</div>
    <iframe id="sideList"></iframe>
</div>    
<iframe id="content"></iframe>

<script>
function onResize() {

    var sizePanel = document.getElementById("sidePanel");
    sizePanel.style.height = (document.documentElement.clientHeight - 100) + "px";   
    document.getElementById("sideList").style.height = (sizePanel.clientHeight - 50) + "px";   

    var content = document.getElementById("content");
    content.style.width = (document.documentElement.clientWidth - 100 - 10) + "px";
    content.style.height = (document.documentElement.clientHeight - 100 - 10) + "px";
}

window.addEventListener("resize", onResize);
onResize();

</script>