Using Flexbox with bootstrap 3 and laravel 4 blade templates and the accompanying LESS mixin

Question

I am trying to implement a flexbox solution to display an embedded mailbox system for a site that is under construction. The basic design that I need to implement is displayed in the framework:

The red border area where I need to implement flexbox.

Since development is done using Laravel Blade Tempting, we use the included files to create the contents of the three panels (left mailboxes, middle email list and right email viewer).

The basic structure of the code is as follows:

This first piece of code sets the view for the inbox:

@extends('layouts.master') @section('content') <div class="content-container" ng-app="cs" ng-controller="MessagingCtrl"> <div class="content-pane message-centre"> <div class="row email-container"> <div class="col-xs-12 header"> <h3>Message Centre</h3> </div> </div> <div class="row email-panes"> <div class="col-xs-2 mailboxes"> @include('messages.partials.sidebar', ['active' => 'inbox']) </div> <div class="col-xs-3 emails"> @include('messages.partials.message-list') </div> <div class="col-xs-7 email-viewer"> @if(isset($message_opened)) @include('messages.partials.message', ['message' => $message_opened]) @endif </div> </div> </div> </div> @stop @section('scripts') {{HTML::script('assets/js/modules/cs.js')}} {{HTML::script('assets/js/app/configurations/messaging.js')}} {{HTML::script('assets/js/app/controllers/MessagingCtrl.js')}} @stop 

As you can see, we use partial elements to include three vertical panels. Mailboxes are a simple structure of two sections with a links. By clicking on one of them, you will see a list of emails in the middle pane, which lists the letters as unordered list items. Finally, clicking on one of these elements will display the contents of the selected message in the right right pane.

I need to make sure that the three panels or columns have the same height, and as we know css has size limits for adjacent divs of the same height. Thus, flexbox to salvation.

My question is about how flexbox is supported in bootstrap 3, and if there are any special considerations I need to make when implementing flexbox. I have the following basic css (LESS) mixins:

 .flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex(@values) { -webkit-box-flex: @values; -moz-box-flex: @values; -webkit-flex: @values; -ms-flex: @values; flex: @values; } .order(@val) { -webkit-box-ordinal-group: @val; -moz-box-ordinal-group: @val; -ms-flex-order: @val; -webkit-order: @val; order: @val; } .wrapper { .flexbox(); } .item { .flex(1 200px); .order(2); } 

In particular, I need advice and help on how to implement LESS to host the boot grid.

Any advice would be appreciated.

Answer 1

I think one option would be to overwrite the boot CSS for your flexbox area. As far as I understand, you can apply the following CSS code after (or at the end) Bootstrap CSS code:

 .row.email-panes { display: flex; } .row.email-panes .col-xs-2{ flex-grow:2; background-color: green; } .row.email-panes .col-xs-3 { flex-grow:3; } .row.email-panes .col-xs-7{ flex-grow:7; background-color: red; } 

Or Less (with some attachment):

 .row.email-panes { display: flex; .col-xs-2{ flex-grow:2; background-color: green; } .col-xs-3 { flex-grow:3; } .col-xs-7{ flex-grow:7; background-color: red; } } 

demo: http://codepen.io/anon/pen/yyVMVo

Due to the fact that you are overwriting Bootstrap grid classes, you will have a reserve for browsers that also do not support flexbox.

My code does not contain vendor prefixes. In your example, you use mixins to set these provider prefixes. Using (a) post-processor post-processor seems to be best practice based on community consensus. also see LESS transition mix with prefixes