Own brewed less stylesheet with the use of flex-box .u-box class. My css class explanations.

The use of .u-box and .u-flex to create a structure.

Flex Box

<style rel="stylesheet/less" type="text/less">
	/**
	 ** mixins 
	 **/

	.flex() {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}

	.flex--column() {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		  -ms-flex-direction: column;
			flex-direction: column;
	}

	.flex--row() {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		  -ms-flex-direction: row;
			flex-direction: row;
	}

	.flex--align-center() {
		align-items: center;
	}

	.flex-flex(@flex: 1) {
		-webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: @flex;         /* OLD - Firefox 19- */
		-webkit-flex: @flex;          /* Chrome */
		-ms-flex: @flex;              /* IE 10 */
		flex: @flex;    
	}

	.flex-content(@content) {
		-webkit-justify-content: @content;
		-ms-flex-pack: @content;
		justify-content: @content;
	}

	/* END mixins */




	/** 
	 ** utils 
	 **/ 

	.u-box {
		.flex();
		
		/*
		 * Flex Direction: COLUMN - Where elements goes from TOP to BOTTOM
		 */
		&--column {
			.flex--column();
		}

		/*
		 * Flex Direction: ROW - Where elements goes from LEFT to RIGHT
		 */
		&--row {
			.flex--row();
		}

		// flex-wrap on default `nowrap` where items is inline
		&--wrap {
			flex-wrap: wrap;
		}
		&--wrap-reverse {
			flex-wrap: wrap-reverse;
		}

		&--list {
			margin-right: -1rem;
			margin-bottom: -1rem;

			> * {
				margin-right: 1rem;
				margin-bottom: 1rem;

				&:empty {
					display: none;
				}
			}
		}

		/* 
		 * Justify content HORIZONTALLY - left/right/row
		 */
		&--justify {
			&-flex-start {
				justify-content: flex-start;
			}
			&-flex-end {
				justify-content: flex-end;
			}
			&-center {
				justify-content: center;
			}
			&-space-between {
				justify-content: space-between;
			}
			&-space-around {
				justify-content: space-around;
			}
		}

		&--inline {
			display: inline-flex;
		}

		/* 
		 *  Align content VERTICALLY - up/down/column 
		 */
		
		&--align {
			&-flex-start {
				align-items: flex-start;
			}
			&-flex-end {
				align-items: flex-end;
			}
			&-center {
				align-items: center;
			}
			&-stretch {
				align-items: stretch;
			}
			&-space-between {
				align-items: space-between;
			}
			&-space-around {
				align-items: space-around;
			}
		}


		&--align-center {
			-webkit-align-items: center; /* Safari 7.0+ */
			align-items: center;
		}

		&--flex-end {
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
		}

		&--queries {
			.flex--column();
		}
	}


	.u-flex {
		.flex-flex(1);

		&--minWidth {
			flex-basis: 320px;
		}

		&--grow {
			flex-grow: 1;
		}

		&--shrink {
			flex-shrink: 0;
		}
	}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>

Make sure css have this

body {
  margin: 0;
  min-height: 100vh;
}

if browser don't support 100vh. Use Chrome. No really I don't make outdated browser hacks for MSIE anymore.

Initiate platform

Ground zero, just an empty placeholder. Nothing special. Your workspace.

Make parent (<body/>) element with .u-box so the rest will fill to the bottom

Give the main box a .u-flex class, so it fills to the right

Building elements

Main box in place

Let’s make a <header/><main/><footer/>.

Ideally we want to have <footer/> on the bottom of the page. We can do it with position: fixed or position: absolute, but there’s no need. To do that we want to fill the main content not with elements but with .u-flex

As you can see it doesn't fill up. Means we need to put .u-box on it's parent.

Since display: flex default direction is a row we need to modify the direction as column: flex-direction: column.
Now let’s put extra modifier next to .u-box to .u-box.u-box--column.

.u-box--column is added after u-box.

Main element with text

Usually this structure is enough to start with

Now we can put the normal <div/> in it and add some text.

I put extra child element <div class="main-content" /> inside <main/>

I gave <div class="main-content" /> with some style: max-width: 320px; margin: 0 auto

Main element with Flex Box child elements

Basic structure

Let’s put <div class="main-content" /> in a wrapper called <main/>.

It would be nice to have a navigational sidebar

Made a <nav/> sibling of <main/>

 - <body/>
   - <header/>
   - <main/>
     - <main/>
     - <nav/>
   - <footer/>

Let’s give the parent of those siblings a .u-box. Remember display: flex default direction is row.

Put .u-box in the parent element of these siblings <main/><nav/> which is <main />

Of course we want to fill the remaining space. Let's do that with .u-flex.

To fill the space with: .u-flex. Just like <main class="u-flex"/><nav/>.

For SEO stuff we keep in mind that <main/> element should be first before <nav/> sidebar in this markup.
We can change the order how we put our siblings. So we switch <nav/> element order just with styling order: -1;

<nav/> with Flex Box styling order: -1 to change.

Optionally you can add extra sibling for another sidebar <aside/> for example ads content.

Final styling

We’re going to give sidebars width 120px, not like: width: 120px but with flex-grow: 0; flex-shrink: 0; flex-basis: 120px. That’s shorthand for flex: 0 0 120px;
Therefore I made a LESS function for multi browser goals: .flex-flex(@flex: 1);

This is very useful if you want to change flex directions from Row to Column.

  .flex-flex(@flex: 1) {
    -webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: @flex;         /* OLD - Firefox 19- */
    -webkit-flex: @flex;          /* Chrome */
    -ms-flex: @flex;              /* IE 10 */
    flex: @flex;    
  }

  .sidebar {
    .flex-flex(0 0 120px)
  }

Media Queries

Remember that we have that three siblings <main/><nav/><aside/> that has a parent <main/> that uses .u-box. We can add extra modifier, for example: .u-box.u-box--queries. So you can use @media() {} to change flex-box direction to column.

.flex--row() {
      -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex--column() {
      -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.u-box.u-box--queries {
  .flex--column();
}

@media (min-width: 768px) {
  .u-box.u-box--queries {
    .flex--row();
  }
  .sidebar {
    .flex-flex(0 0 120px)
  }
}

Make sure you move .sidebar class inside that media query.

On a mobile version should look like this

When the screen reach above particular width, this case min-width: 768px:

html
  body.u-flex.u-box.u-box--column
    header(style='background-color: #646065; color: navajowhite') header
    main.u-flex.u-box.u-box--queries(style='background-color: navajowhite;')
      main.u-flex(style='background-color: gold')
        .main-content(style='max-width: 320px; margin: 0 auto')
          p
            | Blog fap chia banjo, sriracha beard wolf chambray waistcoat leggings food truck aesthetic narwhal taxidermy. Intelligentsia sustainable fixie, occupy locavore kinfolk aesthetic scenester fingerstache. Pour-over keffiyeh PBR&B tousled, hashtag
            | DIY single-origin coffee lumbersexual godard tote bag post-ironic YOLO. Blog letterpress deep v tilde chicharrones. Echo park taxidermy hella, pug hammock scenester intelligentsia 8-bit drinking vinegar portland godard tofu jean shorts +1 chambray.
            | Portland stumptown PBR&B, flexitarian gastropub schlitz forage tote bag. Waistcoat dreamcatcher shoreditch, art party echo park leggings kombucha everyday carry post-ironic salvia intelligentsia pitchfork slow-carb blue bottle ethical.
      nav.sidebar(style='order: -1; background-color: cadetblue; color: aliceblue')
        ul.nav-sidebar.u-list
          li Main
          li Profile
          li About
          li Contact
      aside.sidebar(style='background-color: cadetblue; color: aliceblue')
        .ads Ads
        .ads Ads
        .ads Ads
    footer(style='background-color: #646065; color: navajowhite') footer

Still hating Jade script. I just use the converter