LESS within SAPUI5/HTML5

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

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>

</head>

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.