FORUMS
Post Reply Subscribe to Thread Email Thread

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

31st January 2014, 03:14 PM |#1  
Wetzel402's Avatar
OP Senior Member
Thanks Meter: 62
 
Donate to Me
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, 03:03 PM |#2  
Member
Thanks Meter: 24
 
More
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, 03:23 PM |#3  
Wetzel402's Avatar
OP Senior Member
Thanks Meter: 62
 
Donate to Me
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, 05:24 AM |#4  
Member
Thanks Meter: 24
 
More
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