{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.
3 Responses to “One Line CSS Mobile Framework”
Post a Comment<< Home
About Me <<<
Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...
My projects <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- URL to QR Bookmarklet
- Semicolon Drama ; {
- Hand Drawn Icons 1.1 Update
- Box - CSS Framework
- Wireframing Icons
- CSS3 Fancy Box
- Hand Drawn UI Kit
- Some useful scripts for Photoshop Layer Manipulation
- 2011 summary report
- Hand Drawn Icons
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License