Front end

My CSS 3 Flex Box

Personal Flex Box utility in LESS

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.

Main box
Main box

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

Main box .u-flex

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/>.

header
main content here
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

header
main content here with .u-flex
footer

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

header
main content here with .u-flex
footer

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.

header
main content here with .u-flex
footer

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

Main element with text

header
footer

Usually this structure is enough to start with

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

Asymmetrical hashtag tilde whatever, selfies beard squid kitsch mixtape tofu plaid. Marfa selfies williamsburg, green juice dreamcatcher poutine farm-to-table seitan pabst chillwave selvage ugh blog VHS 8-bit. Humblebrag offal selfies, four loko pickled irony tilde. Forage intelligentsia chia kombucha, ugh typewriter ramps pickled 3 wolf moon irony pour-over neutra DIY messenger bag. Direct trade lo-fi iPhone plaid polaroid, blog affogato offal sartorial seitan hoodie. Semiotics cold-pressed photo booth green juice, ethical mixtape authentic +1 scenester. Fashion axe hoodie deep v, chicharrones poutine gastropub disrupt etsy mumblecore kitsch williamsburg literally gluten-free man bun.

footer

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

Asymmetrical hashtag tilde whatever, selfies beard squid kitsch mixtape tofu plaid. Marfa selfies williamsburg, green juice dreamcatcher poutine farm-to-table seitan pabst chillwave selvage ugh blog VHS 8-bit. Humblebrag offal selfies, four loko pickled irony tilde. Forage intelligentsia chia kombucha, ugh typewriter ramps pickled 3 wolf moon irony pour-over neutra DIY messenger bag. Direct trade lo-fi iPhone plaid polaroid, blog affogato offal sartorial seitan hoodie. Semiotics cold-pressed photo booth green juice, ethical mixtape authentic +1 scenester. Fashion axe hoodie deep v, chicharrones poutine gastropub disrupt etsy mumblecore kitsch williamsburg literally gluten-free man bun.

footer

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

Main element with Flex Box child elements

header
footer

Basic structure

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

It would be nice to have a navigational sidebar

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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.

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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.

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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;

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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)
  }
header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer

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

header

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.

Tilde banh mi four loko vinyl, franzen taxidermy readymade retro cliche chartreuse cardigan typewriter. Try-hard etsy viral, drinking vinegar pork belly ethical chillwave bicycle rights. Celiac gastropub williamsburg forage, literally asymmetrical retro pinterest four dollar toast helvetica next level farm-to-table. Four loko shabby chic intelligentsia austin church-key, vice food truck shoreditch meditation marfa tofu pabst chia distillery. Plaid next level scenester ennui. Normcore photo booth biodiesel ugh cornhole, neutra fanny pack chia franzen dreamcatcher synth austin. DIY church-key umami brooklyn pitchfork mlkshk.

footer
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

You've successfully subscribed to Harianto van Insulinde!

Keep my Blog ad free or
buy me a coffee ☕