Skip to Content
Author's profile photo Former Member


Hello Folks,

This is my first Blog with respect to UI Framework. Here is some key points and issues which i faced in SAPUI5/HTML5 with respect to UI designing, and rendering of control either in mobile/tab or laptop/desktop.

About LESS:

Less Framework is a CSS grid system for designing responsive WebUI’s either its for a mobile or laptop. It contains 4 layouts, 1) default layuout 2)Mobile Layout

3)Tablet Layout 4)Mobile with Extensive layout.

Depends on your requirement you can use any of the above 4 layouts with respect to Columns.It works corresponding grids with pixel sizes.

The best deal is to first code the Default Layout (992 px), and then use CSS3 media queries to code several child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do. They will also inherit all styles given to the Default Layout, so coding them is very fast.

you can find more about LESS:  Getting started | Less.js

here is a simple example for login page.

Step 1: Add CSS file in your index.html of SAPUI5 project. Add the test.css after </script> tag for best practice.


    <link rel=”stylesheet” href=”../css/less/test.css” />


  <body class=”sapUiBody” role=”application”>

    <div id=”content”></div>

Step 2: I have defined the content in my login.less file.


.login-password-label {

  display: none;

  font-size: @font-size-default;

  font-family: @font-ericsson-arial;

  margin: 0 0 -5px 0;

  padding: 10px 0 0 0;

  text-align: left;


Step 3:  In test.less you have to import the required LESS files with respect to your project.

@import “menu.less”;

@import “login.less”;

Step 4: you can write your batch file to create the CSS files. either single or multiple CSS. so here i am creating test.css instead of menu.css,login.css.

Hence according to my login.less, test.css has created.


Step 5: So once you deploy your SAPUI5/HTML5 application either in mobile or desktop, the view will be like this.

Desktop view:


Mobile View:


@ Experts: let me know if anything need to be added.


Prasad Sistla.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jason Moors
      Jason Moors

      Reading your blog I'm slightly confused, you seem to be mixing the Less Framework grid system (Less Framework 4) and the Less CSS pre processor (Less.js)?

      Regarding the grid system, I'm not sure I see the benefit when SAPUI5 already provides a responsive layout?

      It's also worth mentioning that the standard SAP themes uses Less to generate the CSS.



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      thanks Jason for your comments.

      here i want to reduce the time of designing content in CSS, for similar kind of elements through out the application.i saw in so many cases, with similar kind of UI Controls, writing different CSS's doesn't make sense. the same will be applicable to layouts as well.

      am i answered your question?


      Prasad Sistla.