Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,780,683 Members 51,007 Now Online
XDA Developers Android and Mobile Development Forum

[CSS][UI][Phonegap][HTML]Share your CSS/HTML

Tip us?
 
Wetzel402
Old
#1  
Wetzel402's Avatar
Senior Member - OP
Thanks Meter 39
Posts: 236
Join Date: Jan 2012
Cool [CSS][UI][Phonegap][HTML]Share your CSS/HTML

I thought I would start a thread were developers could share UI information. I am working with a "Google cards" style layout:

Code:
.card {
	position:relative;
  	-moz-border-radius: 1px;
	border-radius: 1px;
    -webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
    float:left;  
    background:#FFFFFF;  
    width:100%;  
    color:#000000;  
    padding:5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom:10px;
}
.top-card-pad {
	position:relative;
	float:left;  
    background: transparent;
    width:100%; 
    margin-bottom:10px;
}
.top-card-pad is called as a div to add the proper padding at the top of a page.

Basic Android actionbar and iOS navbar:

Code:
<!-- Android Action bar -->
		<div id="header" data-role="header" data-position="fixed">
			<a href="#" id="action-title" class="ui-btn-left" data-role="button"
				data-icon="carat-l" data-corners="false" data-rel="back">My App</a>
			<h1></h1>
			<a href="#" id="hrefresh" class="ui-btn-right" data-role="button"
				data-icon="refresh" data-iconpos="notext" data-corners="false"></a>
		</div>
		<!-- iOS nav bar -->
		<div id="header" data-role="header" data-position="fixed">
			<a href="#" id="action-title" class="ui-btn-left" data-role="button"
				data-icon="back" data-corners="false" data-rel="back">Back</a>
			<h1>My App</h1>
			<a href="#" id="refresh" class="ui-btn-right" data-role="button"
				data-icon="refresh" data-iconpos="notext" data-corners="false"></a>
		</div>
		<!-- /header -->
Want to thank me? Use this link and we both get 500 mb of Dropbox space!
or this link and we both get 5 gb of Copy space!


Droid Bionic - Stock JB - rooted(retired to a dev device & GPS)
Samsung Galaxy Note II - Paranoid Android 4+
Dell Venue 8 Pro - Windows 8.1
The Following 4 Users Say Thank You to Wetzel402 For This Useful Post: [ Click to Expand ]
 
aviatcogni
Old
#2  
Junior Member
Thanks Meter 24
Posts: 29
Join Date: Apr 2012
Hi,

Can you share whole HTMl to visualize how this looks? Sorry I m new to mobile dev..

Quote:
Originally Posted by Wetzel402 View Post
I thought I would start a thread were developers could share UI information. I am working with a "Google cards" style layout:

Code:
.card {
	position:relative;
  	-moz-border-radius: 1px;
	border-radius: 1px;
    -webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
    float:left;  
    background:#FFFFFF;  
    width:100%;  
    color:#000000;  
    padding:5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom:10px;
}
.top-card-pad {
	position:relative;
	float:left;  
    background: transparent;
    width:100%; 
    margin-bottom:10px;
}
.top-card-pad is called as a div to add the proper padding at the top of a page.

Basic Android actionbar and iOS navbar:

Code:
<!-- Android Action bar -->
		<div id="header" data-role="header" data-position="fixed">
			<a href="#" id="action-title" class="ui-btn-left" data-role="button"
				data-icon="carat-l" data-corners="false" data-rel="back">My App</a>
			<h1></h1>
			<a href="#" id="hrefresh" class="ui-btn-right" data-role="button"
				data-icon="refresh" data-iconpos="notext" data-corners="false"></a>
		</div>
		<!-- iOS nav bar -->
		<div id="header" data-role="header" data-position="fixed">
			<a href="#" id="action-title" class="ui-btn-left" data-role="button"
				data-icon="back" data-corners="false" data-rel="back">Back</a>
			<h1>My App</h1>
			<a href="#" id="refresh" class="ui-btn-right" data-role="button"
				data-icon="refresh" data-iconpos="notext" data-corners="false"></a>
		</div>
		<!-- /header -->
 
Wetzel402
Old
#3  
Wetzel402's Avatar
Senior Member - OP
Thanks Meter 39
Posts: 236
Join Date: Jan 2012
Quote:
Originally Posted by aviatcogni View Post
Hi,

Can you share whole HTMl to visualize how this looks? Sorry I m new to mobile dev..
I should have mentioned I'm also using jQuery mobile. Check out the basic card UI on JSFiddle.
Want to thank me? Use this link and we both get 500 mb of Dropbox space!
or this link and we both get 5 gb of Copy space!


Droid Bionic - Stock JB - rooted(retired to a dev device & GPS)
Samsung Galaxy Note II - Paranoid Android 4+
Dell Venue 8 Pro - Windows 8.1
 
aviatcogni
Old
#4  
Junior Member
Thanks Meter 24
Posts: 29
Join Date: Apr 2012
Quote:
Originally Posted by Wetzel402 View Post
I should have mentioned I'm also using jQuery mobile. Check out the basic card UI on JSFiddle.

Thanks mate...
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes