header.html

<!--div id="canvas-header" class="container-fluid no-gutter">
    <div class="row-fluid">
        <div class="col-sm-6 col-lg-4">
            <div class="row-fluid">
                <div class="col-sm-12 col-lg-12 no-gutter">
                    <div class="title">
                        <input class="form-control editable input-lg" id="name-input" type="text" placeholder="{{I18N_NAME}}" value="{{name}}{{^name}}{{I18N_NAME}}{{/name}}">
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-sm-12 col-lg-12 no-gutter margin-top-5">
                    <div class="desc">
                        <textarea class="form-control editable" id="desc-input" type="text">{{description}}{{^description}}{{I18N_DESCRIPTION}}{{/description}}</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-lg-offset-4">
            <div class="row margin-top-15">
                <div class="col-sm-12 col-lg-12 text-right">
                    <button type="button" class="btn btn-primary btn-sm pull-right" id="saveBtn">{{I18N_SAVE}}</button>
                    <div class="pull-right margin-top-7 margin-right-8 small">
                        {{I18N_LAST_SAVED}} {{last_saved_date}}
                    </div>
                </div>
            </div>
            <div class="clearfix visible-xs"></div>
            <div class="row">
                <div class="col-lg-12 text-right">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs" id="edit-mode">{{I18N_EDIT_MODE}}</button>
                        <button type="button" class="btn btn-default btn-xs" id="presentation-mode">{{I18N_PRESENTATION_MODE}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div-->


<div id="canvas-header" class="no-gutter">
    <div id="header-info">
        <div id="title" class="title no-gutter">
            <input class="form-control editable input-lg" id="name-input" type="text" placeholder="{{I18N_NAME}}" value="{{name}}{{^name}}{{I18N_NAME}}{{/name}}">
        </div>
        <div id="description" class="desc margin-top-5">
            <textarea class="form-control editable" id="desc-input" type="text">{{description}}{{^description}}{{I18N_DESCRIPTION}}{{/description}}</textarea>
        </div>
    </div>
    <div id="header-controls">
        <div id="save-controls" class="margin-top-15 text-right">
            <button type="button" class="btn btn-primary btn-sm pull-right" id="saveBtn">{{I18N_SAVE}}</button>
            <div class="pull-right margin-top-7 margin-right-8 small">
                {{I18N_LAST_SAVED}} {{last_saved_date}}
            </div>
        </div>
        <div class="clearfix visible-xs"></div>
        <div id="mode-controls" class="text-right">
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-xs" id="edit-mode">{{I18N_EDIT_MODE}}</button>
                <button type="button" class="btn btn-default btn-xs" id="presentation-mode">{{I18N_PRESENTATION_MODE}}</button>
            </div>
        </div>
    </div>
</div>

styles.less

/*
	This is your main stylesheet.
	Import other LESS/CSS style sheets into this one.
	If you want more than one stylesheet like this,
	you'll have to add a compile/compress step to the grunt build process.

	For best optimization you should import css as less.
	@import (less) "mycssfile.css"
*/
@import (inline) "../js/vendor/jquery.ui/dist/jquery-ui.css";
@import (inline) "../js/vendor/fuelux/fuelux.css";
@import (inline) "../js/vendor/bootstrap/bootstrap.css";
@import "../../bower_components/bootstrap/less/variables.less";
@import "../../bower_components/bootstrap/less/mixins.less";


@import "app.less";
@import "header/header.less";
@import "canvas/canvas.less";

#canvas-header {
	.make-row();
}

#header-info, #header-controls {
	.make-lg-column(4);
	.make-row();
}

#header-controls {
	.make-lg-column-offset(4);
}

#title, #description, #mode-controls, #save-controls {
	.make-lg-column(12);
}

.styles-less {
	font-size: 10px;
}

.no-gutter {
	padding: 0;
}

.margin-top-15 {
	margin-top: 15px;
}

.margin-top-5 {
	margin-top: 5px;
}

.margin-top-7 {
	margin-top: 7px;
}

.margin-right-8 {
	margin-right: 8px;
}

input.editable, textarea.editable {
	border-color: white;
	background-color: transparent;
	box-shadow: none;
	resize: none;
	padding: 0px 4px;
	height: 26px;
	border-radius: 2px;
}

textarea.editable {
	height: 32px;
	font-size: .8em;
	color: #999;
	padding: 1px 4px 6px 4px;
}

input.editable:hover, input.editable:active, input.editable:focus, textarea.editable:hover, textarea.editable:active, textarea.editable:focus{
	border-color: #ccc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	background-color: #fff;
}