UI Styling

Every segment of UI should be styled trough mixins which will be included in a master syle sheet file. Each mixin has a set of parameters for suiting UI appearance to desired application look and feel.

Page layout

Easy and simple way to create page layout conaining most common UI sections and elements such as Header, Footer, Search bar, Breadcrumbs, Dashboard, Left & Right column and Footer.

Usage

This is one of the basic components for building the master style sheet for app or site.

It applies to layout page with the required HTML structure as shown in example in "Required HTML structure" section.

Implementation

In order to make this mixin available paste following code into your app SCSS style sheet and adjust file path if needed

@import "../Preprocess/Mixins/_MXN-layout-FixedHeaderAndFooter.scss";

To use mixin with default parameters paste following line of code into your app SCSS style sheet

@include MXN-layout-FixedHeaderAndFooter();

All parameters can be passed as comma separated arry of values, but it's more likely that you will need to override default vaules for just few of them as shown in following example.

@include MXN-layout-FixedHeaderAndFooter($_headerHeight: 100px, $_columnsSpacing: 15px);

Required HTML structure

Example