Flexible User Interface

The UI layer in M# is based on cross-browser-compatible HTML and fully based on Cascading Style Sheets (CSS) in order to make it easy to accommodate literally any visual design. It uses ASP.NET Web-forms in a very efficient and clean way. Also using jQuery for all visual effects it provides a flexible and modern user experience. Furthermore all UI functionality is modularised, making it easy to move objects around the screen.

For example every forms (data entery modules) are arranged in this way:

<div class="form-group">

    <div class="group-label">

        <Label class="control-label" for="Name">

            Client name: 

        </Label>

    </div>

    <div class="group-control">

        @Html.TextBoxFor(x=> x.Name, new {@class="form-control"})

    </div>

</div>

 

That is a wrapper around the whole data entry item and wrappers around label and text box separately. This allows designer to have maximum control and arrange items in different ways just by applying proper CSS code (though a default one is provided so that you can leave the design to later and quickly get the page concept and control follow working).

 Similarly a search section in list modules follows the same pattern:

<div class="form-group">

    <div class="group-label">

        <Label class="control-label" for="Gender">

           Gender:

        </Label>

    </div>

    <div class="group-control">

        @Html.DropDownListFor(x=> x.Gender, Model.Gender_Options, new {@class="form-control"})

    </div>

</div>

Anything is possible

With such flexible arrangements you can apply CSS to itemlabel, and input and have them in different shapes and designs where your html remains clean and easily configurable for different devices and search engine robots. Any design, no matter how complex, can be implemented easily on M# projects:

 LESS

Unlike many code generators and project templates M# does not limit you to old standards of web designing. It generates a flexible HTML file for you and then you can use all power of LESS to give it some style.

 

.button(@color) { cursor: pointer; padding: 7px 10px;
    
&:hover, 
    
&:focus { background-color: lighten(@color, 7%); }
}

input[type=button]
input[type=submit] { .button(#1e83af);

    &[Value='Cancel'] {.button(#666); }
    
&[Value^='Add'] { margin-right: 5px; }
    
&[Value='Export'] { padding-left: 26px !important; .button(#1e83af); }
    
&[Value='Logout'] { width: 94px; .button(#842222)
}


CSS

If you are not ready for LESS or you have some legacy design old ways is still open to you. Again M# does not impose any restriction on how do you give styles to your HTML elements.

Master pages

For each project, you can define as many Master Pages as you like and assign them to different pages or areas of the project. This way the look and feel of various sections of the website and placement of its elements is in your control. One may use a Master Page for Administration section, another for public facing parts and a third one for dialog boxes. Master pages are normal ASP.NET master pages and M# does not make you learn new tags and invented symbols for implementing a web page design.

Master pages

jQuery

Many parts of M#’s default template is implemented using jQuery and a rich JavaScript front end. This immediately brings all browser compatibility and code predictability of jQuery to your project in addition to all those jQuery libraries that are based on jQuery. But if for any reason you are not using jQuery bear in mind that M# does not limit you and you can switch to your favourite library at any time.

 

jquery

« Back