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

You might want to check out Cascade Framework and use this template as a starting point for your layout.

Answer 2

I don't know why you have been down voted on your answer. Everyone seems to agree that "There's no need for a specialized framework" is at least part of a good answer. Of course there are disadvantages in using table, but you seem to be aware of it, and listing the downsides made a very consistent answer in my opinion.

Despite of considering your answer, I would work with a Flexbox model. It seems more appropriate (as very well put by @cimmanon in another answer), semantic and even easier to maintain than tables. Besides, using up to date techniques may extend the life time of your application. Have a look at this library if your concern is backwards compatibility - http://flexiejs.com/

You can also simulate a table's behavior using other elements and a css Table model like: <div style="display:table">. Take this fiddle as example - http://jsfiddle.net/JWqVQ/

Here is a bit more about different rendering options - https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 3

Update 2 (This question seems to evolve!):

Criteria 1 - Switching between full page or inside modal should change the code as little as possible:

Because in this case the width/height of our body is always 100% of the window width/height, if you want your code to be easily adaptable to modals etc., you can always use position:absolute, as without any context this will be relative to the body.

Criteria 2 - The layout should support a multitude of ways to describe width and heights

Here's a JSFiddle that can do almost everything you mention. It uses both percentage and fixed pixel widths on the fixed elements. The first thing to note is that the only change I've had to do is add a box-sizing:border-box to each of our elements. Unlike flexbox, this has good support going back to IE8, and so shouldn't cause any issues. Adding this allows us to add padding to our elements without having to change widths to compensate.

Whilst the left sidebars have a width of 20%, they also have a minimum width of 100 pixels. To prevent the overlap with the main content to the right, we use some simple logic to establish the inverse:

Reaches Min At = Min-width / Width * 100

In our example, our left sidebar therefore reaches a min at 100/20*100 = 500px. Then we use an @media selector to change our main content's width when we reach this window size:

@media(max-width:500px) {
  #scrolling-content { 
    left:100px;
  }
}

By changing the window size on the fiddle, you'll notice that our main content area changes colour when you reach the min-size. Now I admit, this might seem confusing, but again, by using a language such as Less you could easily set the width and min-widths as variables, and use a simple function to change your CSS. Now the reason I used the phrase "almost everything" is because this could get much more complex if you wanted to do a similar thing in a modal, but who knows, it could be possible!

A little thing to take away: If you're ever going to use JavaScript to pick up resize events, definitely consider the jQuery debounced resize plugin as you don't want to be doing calculations hundreds of times more than you need to! I'm leaving the extra content in this answer as most is still relevant and historically accurate to your developing question

---

Update: There's a lot of answers suggesting using Flexboxs, but I really don't think that's a great solution at the minute. Don't get me wrong, I'd love it if FlexBox's were a really viable solution, but at the minute Support for them is terrible, and if you're going to polyfill it for the majority of the web then, you might as well be using any other JavaScript solution, and I don't think JavaScript is the right tool to use for the entire presentation of your page.

I still don't see why your goals are hard to achieve using simple CSS positions. You don't need to use any JavaScript and. I'd argue that it is very manageable. If you're really struggling with maintaining your stylesheets, then why not use something like Sass/SCSS or Less, as you could then create variables, mixins, functions etc., and significantly reduce the number of changes you need to make.

---

That said, he's a really quick mockup of your solution, working using just pure CSS and HTML. All I'm using is 4 fixed divs, and a simple modification could be made so that the "scrolling content" is not fixed, but just uses margins to be positioned correctly. That would have the added bonus of not having to scroll within the div, but being able to do so against the body.

All the required CSS:

div { position:fixed; }
#top {
    top:0;
    left:0;
    right:0;
    height:40px;
}

#menu {
    top:40px;
    height:40px;
    left:0;
    width:200px;
}

#long-list {
    top:80px;
    left:0;
    width:200px;
    bottom:0;
    overflow-y:auto;
}
#scrolling-content {
    top:40px;
    bottom:0;
    right:0;
    left:200px;
    overflow-y:auto;
}

It's pretty easy to note the repetition of 40px and 200px as the height and width of the menus. With that in mind, you could simply use a dynamic language's variable and define them only once (Less example):

@leftwidth: 200px;

#scrolling-content {
    left:@leftwidth;
}
#menu, #longlist {
    width:@leftwidth;
}

Dispute #1: Frameworks aren't flexible or easy to edit

You mentioned that it's difficult to easily manipulate CSS frameworks, as relying on static content, they have to make decisions over the number of columns to use (in Bootstrap and many other cases they choose 12 as it's easily divisible by 1,2,3,4,6). However, in Bootstrap 2, it's very easy to customise the number of columns. Expect this feature to also exist when Bootstrap 3 RC2 comes out. There are also many resources which allow you to use Less with Bootstrap. That said, it would be fairly routine to create a Less-style flexible fluid-grid system, see demo (Disclaimer: I have no experience with Less, this article helped me with looping):

/* The total number of columns you wish to use */
@columns: 15;
/* 
    We loop through and for each create class
   .dynamic-<index>-<columns> 
*/
 .looping (@index) when (@index > 0) {
    (~".dynamic-@{index}-@{columns}") {
        width: percentage(@index/@columns);
    }
    .looping(@index - 1);
}
/* Stop and do nothing at 0 */
.looping (0) {}
/* Call our function */
.looping (@columns);

And then your HTML markup simply becomes:

<div class="cf rows">
    <div class="dynamic-4-15">4/15th width</div>
    <div class="dynamic-7-15">7/15th width</div>
</div>

Dispute #2: Percentage-based modals are difficult using CSS

In the comments you mentioned that you "would want the layout to be relative to the dialog width, not the browser window width". Well that's certainly possible too. In fact, it's really easy, and requires almost no change to our code:

#some-modal {
   position:fixed;
   top:10%;
   bottom:10%;
   left:10%;
   right:10%;
}
/* Before this was simply div, and it was fixed, now it's absolute */
#some-modal div {
   position:absolute;
   padding:10px;
}

Answer 4

I don't think you should need to use a framework, especially if you're not familiar with them and are having trouble. If you just set the different views to overflow:scroll, you should be able too create what you describe in that image. Another thing you could do is set an iframe to each view like what the Javadocs do.

Answer 5

For the record, I think Ian gave by far the most complete and accurate answer here for a pure CSS answer and that would work perfectly. However, you also wanted to know what alternatives you had, and I have to at least provide another option so you know it's available:

I challenge your premise that Javascript doesn't do what you want it to do. JQuery is in my view a truly revolutionary library for Javascript and simplifies it immensely. According to Wikipedia, Jquery is "used by over 65% of the 10,000 most visited websites". From personal experience, trying to use pure CSS on my website fell flat for me. Using JQuery gave me much more flexibility and control over my CSS, no longer forcing me to use relative values. I'm a control freak so that worked for me.

JQuery is very easy to learn and allows CSS to be supplemented with browser events using Javascript handlers and events. For example, if you want to change CSS on refresh:

$(document).ready(function() {
    $(window).resize(function() {
         var windowWidth = $(window).width();
         $('#div').css('width',windowWidth-100); //the # references id, like in CSS
    });
});

See a more detailed example in action on my JSFiddle

If JQuery sounds like the right path for you to make your CSS dynamic and flexible for any occasion, there are several tutorials out there. It doesn't take long if you know CSS and Javascript and it works like a charm. Even if you don't know Javascript, you can do quite a bit with JQuery. Certainly what you're looking for with just a bit of a learning curve.

Answer 6

You can do this with straight, minimal CSS and be completely flexible (user changes font sizes or your content is of unknown length? no problem).

http://codepen.io/cimmanon/pen/vusmz

Assuming this markup:

<header>Header</header>

<div class="container">
  <div class="sidebar">
    <aside>Menu (fixed)</aside>
    <nav>long list</nav>
  </div>
  <main>
    <p>...</p>
  </main>
</div>

The CSS:

body, html {
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@supports (flex-wrap: wrap) {
  body {
    display: flex;
  }
}

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}

.sidebar {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}
@supports (flex-wrap: wrap) {
  .sidebar {
    display: flex;
  }
}

header {
  background: yellow;
  height: 3em; /* optional */
}

aside {
  background: green;
  height: 4em; /* optional */
}

nav {
  background: orange;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: scroll;
  height: 1px;
}

main {
  background: grey;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: scroll;
  height: 1px;
}

Browser support is limited due to the requirement for flex-wrap: wrap support (IE10 is the only browser with "partial support" that supports it: http://caniuse.com/#feat=flexbox). Current browser support is limited to Chrome, Opera, IE10 and Blackberry 10.

Be aware that the scrolling elements have an extremely small height, which can cause issues for browsers that lack full Flexbox support (see: Flexbox and vertical scroll in a full-height app using NEWER flexbox api for more information).