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.

   </script>

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

  </head>

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

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

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

.login-username-label,

.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.

test.JPG

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

Desktop view:

/wp-content/uploads/2015/01/login_desk_622556.png

Mobile View:

/wp-content/uploads/2015/01/login_mobile_622558.png

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

Regards,

Prasad Sistla.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    Regards,

    Jason

    (0) 
    1. prasad sistla 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?

      Regards,

      Prasad Sistla.

      (0) 

Leave a Reply