Hello Guys. I’m working on an ionic app and I’m stuck because I can’t create this layout. I’ve found similar html solutions online but I can’t use them because they are done plainly in html and they use absolute pixels (e.g margin-left:10px;). I dont want to do this because the app will be running on android devices with different screen sizes. Any help in creating this type of layout in ionic will be appreciated.
Layout file in question is attached. 
Thanks guys…
Here is my attempt at the layout using Ionics grid system, although it may need to be modified for smaller devices and if you want the ribbon to change: http://codepen.io/brandyshea/pen/RPGxrg?editors=110
I’m using scss for the styling.
Hi…
I cannot thank you enough. Just took a look at the codepen example. Looks exactly like what I hope to achieve.
Thank you so much. Lemme know how I can help 
Hi. Please I need your help with the layout you sent me.
When I use a larger image for the portion on the left, it doesn’t scale. Instead, it expands to the size of the image and this doesn’t suit the purposes.
Secondly, On the device, I can’t get the ribbon to work.
I’m guessing the problems are because of scss. Do I have to do any extra configuration since scss is used for the styling?
Thanks in advance. Really appreciate.
Yes, you need to setup Sass for the scss to work. Run through this tutorial to setup sass and let me know if you run into any issues: http://ionicframework.com/docs/cli/sass.html
If you don’t want to use Sass you can view the compiled version of the CSS on the codepen and use that.
oohh, I see.
I’ll give it a try and let you know how it works out.
As always, thanks a lot
Hey. I’ve already implemented the layout in my project. It works well; though I might need to adjust some things. I used the compiled css also.
Thanks a lot for your help
Hi. This is the wrongest medium to ask you this but I couldn’t figure any other way.
I’ve been using the Ionic framework for some time now and while the framework makes it extremely fast for you to make progress in your app, I began to find some of the default elements, styles and templates kind of static and dull (honestly, no offense).
There are other ionic framework apps (like viceversa, throwback) that use beautiful layouts and elements not made available by the ionic framework. For example, the login page of the viceversa android app is very beautiful because it uses facebook and twitter buttons that are mostly used on the web.
My main question is how can I achieve that kind of layout in my ionic apps. To give my apps a very nice custom look and feel familiar to both web and mobile. My prototype or inspiration as you may call it is the viceversa android application.
I just wanna be able to achieve that kind of layout in my Ionic apps. Throwback is another app that can be used to better understand this question.
Thanks a lot for your usual help.
Screenshots for viceversa, throwback and mallzee are attached: ANY HELP ON HOW I CAN ACHIEVE THESE KIND OF LAYOUTS IS WELCOME.
The default styles are meant to be that way. A clean slate for you to build your own custom styles.
The apps you’ve listed below took the default Ionic and created their own custom css. You’ve kind of answered you’re own question, it’s all custom 
Take some time, read up on some css articles and start to mess around with the scss mixins that are available in Ionic’s code.
Alright sir. Thanks a lot
Hi.
I’ve been trying to place some images and text in my side menu which will be fixed at the bottom. I tried using an ion-footer but the height of the footer doesn’t change and the image keeps falling through the screen. Is there any way to achieve this kind of content in a footer?
I’ve attached an image to further explain my dilemma.
Thank you for your usaual help
The footer bar is set to a static 44px tall. If you need something else, you would just have to change the css for it’s height.
Thank you so much. That went a long way in helping me.
HI. Please, I need your help on another issue.
I’m trying to create an app that allows users to select a profile picture from their gallery and upload it to parse. I’m having trouble figuring out how to get the image to get saved on the parse backend. Also, once the image has been saved to parse, how do I retrieve it and display it in my Ionic app. Any help will be appreciated. Thank you very much.
That’s gorgeous, I want this kind of thing for my app too instead of the ‘plain’ default look …
But I’m quite sure it can all be achieved with some CSS.
I’ve seen many Ionic apps that look really slick and graphical.
Gonna use those apps (viceversa and so on) for inspiration.
Maybe this?
Didn’t try it yet but I need this functionality too in my app.
(in my case the image can be from a camera or from another source)
Oh and by the way, this one just appeared in my newsfeed, and looks like it is addressing exactly your problem:
http://www.clearlyinnovative.com/ionic-framework-camera-image-uploads-and-base64-strings/
Uploading images from Ionic to Parse.com, base64/memory issues.
And a solution, I’m going to use this too in my app.
Or you can simply go to some theme/UI oriented online shop and buy already finished UI. Just google CSS3/HTML5 UI Kit’s.
This way you don’t need to reinvent the wheel, so to speak.
Nice. That;s the same thing I’m doing
That might make sense because I’m already overloaded enough being the solo developer of 2 big and complex apps.
Maybe that’s how those folks come up with these slick UIs. But it has to be compatible with Ionic, otherwise it’s defeating its purpose.
That’s the beauty of it; it doesn’t have to be compatible with Ionic.
A list element is list element, a button is s button, you only need to reapply new CSS. While better than the rest, Ionic is no more different than other frameworks, it’s all CSS and HTML.
