Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP Wetzel402

31st January 2014, 04:14 PM   |  #1  
Wetzel402's Avatar
OP Senior Member
Thanks Meter: 41
 
244 posts
Join Date:Joined: Jan 2012
More
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 -->
The Following 4 Users Say Thank You to Wetzel402 For This Useful Post: [ View ]
2nd February 2014, 04:03 PM   |  #2  
Junior Member
Thanks Meter: 24
 
29 posts
Join Date:Joined: 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

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

3rd February 2014, 04:23 PM   |  #3  
Wetzel402's Avatar
OP Senior Member
Thanks Meter: 41
 
244 posts
Join Date:Joined: Jan 2012
More
Quote:
Originally Posted by aviatcogni

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.
4th February 2014, 06:24 AM   |  #4  
Junior Member
Thanks Meter: 24
 
29 posts
Join Date:Joined: Apr 2012
Quote:
Originally Posted by Wetzel402

I should have mentioned I'm also using jQuery mobile. Check out the basic card UI on JSFiddle.


Thanks mate...
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes