{Carrer web log}

One Line CSS Mobile Framework

Thursday, August 30, 2012 { 3 Comments }

In the last couple of months I've made few Android Apps with web technology HTML + CSS + JavaScript and PhoneGap to package the apps for the Android Market.

Designing for Android is really challenging because you don't have standard screen dimensions like for iPhone or iPad so making px perfect design is practically impossible in Android.

The need of having fluid design in Android in several cases made me think how can I made simple and effective CSS layout that I can be used like a baseline in my future apps.

I was simply trying to make one column layout with fluid body and fixed margins.

If you have some experience with CSS you will know that mixing px and fluid layout is always hard to achieve with CSS.

How can this be done in CSS?

Probably there are several solutions for this problem but I wanted to implement the solution that will work in almost every browser. Naturally we need this solution only for the Mobile Browsers.

The solution is: width:auto;

.row { margin: 10px }

You don't believe me that this will work?

>> Here is the demo


Let us examine the code:

/* You don't need to specify float:none because is default, but in some cases you need to overwrite some previous float */

float:none;

/* The default state of the width is auto, you don't need to write this except if you want to overwrite some previous width statements */

width:auto;

/* In we want later to use position:absolute starting from that element we need: */
position:relative;

/* We can use px,ems,% for the margins */
margin:10px 20px;

/* And we can also add padding, border and rounded corners and other things .. */

padding:10px;
border: 10px solid #ccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
clear:both;

Problems with this solution:
If we have images they in some case break out from the layout.

To fix this problem we can use:

/* float:left or right */
float:left;

This solution can fix the image problem but will open another problem in some cases (little text) the layout will not take entire screen.

Other solution:
Using max-width and min-width with that is bigger than the biggest image. This solution will work but is not handy.

The final solution:
overflow: hidden;
You can read more here.


>> Here another demo

We can use this solution not just for android but for every other phone with decent HTML, CSS support.

This solution also works great with mobile Responsive Layouts.

>>Here is the Responsive Layout Demo1

>>Here is the Responsive Layout Demo2


>>Here is actual Android Working App build with this CSS Solution.

Conclusion:

Building layouts for mobile phones in most cases is one column grid if we don't know the size of that device like in case of many Android Phones it can be smart to use elastic column with px margins.

To achieve that in CSS we have this bulletproof solution:

.anynameyoulike, ul>li {
width: auto;
float: none;
overflow: hidden;
margin:10px;
}

You can also add padding, borders, rounded corners, shadows …

This solution also works for making Responsive Layouts.

Let me know if you have any questions, suggestions or comments.