Signup for the Ionic Newsletter to get the latest news and updates!

  • Troy DC Thompson

    Awesome Post! Only thing not mentioned here that I have on my pwa at is a tutorial with scalable vector graphics (SVG) to ensure users get crisp images on any device.

  • Simon Grimm

    Ionic 1 was not really ready for web, but Ionic 2+ gives so much flexibility to build a highly custom UI for browser/tablet/phone size. The development is amazing, and you build a super cool looking website + PWA + App with that 🙂

    Thanks for sharing your grid tips, will definitely use them soon!

    • Rodrigo Fernández

      I’m glad you found the tricks useful!

  • Generic Comment

    At the moment I’ve been giving the ion-app a max width and margin 0 auto, because I couldn’t find a decent way of making the toolbars’ content align with fixed grids.

    @media (min-width: map-get($grid-breakpoints, lg)) {} is a great trick.

    Thank you for these tips and tricks!

    I think most of these should be the default in Ionic.

    • Rodrigo Fernández

      The only gotcha with using `ion-app { margin: 0 auto }` is that the headers and footers wouldn’t go side to side of the screen, they will show cut on the sides. This is a personal preference, but I think it looks better when they use 100% of width but the content is centered.

      • Generic Comment

        Absolutely. Your method is way better.

  • Gustavo

    Your blog post helped me understand the extra considerations for desktop.
    Thank you!

  • Ray Lawlor

    I’m hoping this isn’t a stupid question…

    Is there any way to use Ionic without the UI layer and switch to a common front end framework like Bootstrap or UIkit? That way we could use Ionic router etc but design a frontend with common frameworks?

    Or is it better to switch to straight Angular if we wanted to use these?

    • Masood Usmani

      You’ll just need to use an ion-nav component for the router and animations to work, but you don’t have to use any ionic UI components if you don’t want to. I think the vendor bundle will still include the ionic UI components even if you don’t use them though.

      Whether this is better than using angular is upto whether you really want to use Ionic’s routing and transitions, and if you’re fine with a larger bundle size.

    • Rodrigo Fernández

      It looks that you want to use Ionic without Angular. If that’s the case, I would wait for Ionic v4 to be released and use the new `ionic-core` Web Components for routing. Then you would be able to use any component you want with jQuery, React, Vue or nothing at all.

  • RhysC

    This is awesome!

  • Daniel Griffin

    Any way to change the tabsPlacement/tabsLayout dynamically? Setting the properties while in an observable/hostlistener and changing the screen width doesn’t update the UI

    • Rodrigo Fernández

      In my example the tabs placement and layout are changed dynamically when the component is created, so I’m guessing you’re asking about changing them afterwards.

      I’m not sure if it would work for your use case, but whenever I need to show/hide headers and footers after initialization, I get a reference to the “ as a property with `@ViewChild(Content) content: Content` and then run `this.content.resize()` to update. It should help you to recalculate the paddings of the content after the tabs have moved. It’s documented here:

  • Aman

    Hi Rodrigo,
    Thanks for sharing the useful information. I’m wondering how you managed the navigation. I mean If I copy a link say `` and paste in new window, It opens the same item with the navigation history back to tabs. I’m curious how you implemented that functionality.

    • Rodrigo Fernández

      Hi Aman, thats a good question!

      We used the `defaultHistory` property of the `IonicPage` decorator, so the back button is shown and the user is able to go back from a deeplink:

      Honestly, getting the navigation and deeplinks right was the hardest part but since every app has its own needs I decided not to cover it in this post.

      I hope it helps!