Ionic for Building a Website

5 min readJan 3, 2022

I have been developing my personal website in React for a while and I was using mainly Bootstrap for the styling. When it comes to the mobile application, I was using React Native and Expo for the development. While front-end with React and Bootstrap was quite easy and I felt very comfortable with them, I couldn’t say the same thing with React Native and Expo. Even though React and React Native are similar to each other, you need to learn quite a lot of staff before you start producing a good mobile application.

Recently, I encountered Ionic Framework and I wanted to give it a try for my mobile application. It is very easy to learn and the things you can create with basic knowledge look very professional. You don’t need to mess with the CSS as long as you don’t need some customization. Almost everything is ready out of the box. The experience I had was great.

So, once I improved my skills in Ionic with a mobile app, I started to think if I can use these Ionic skills for building a website. At the end of the day, mobile applications with Ionic are just websites, which look like a native app with the help of Capacitor. After some research, I found out it would not be a problem once I learn the grid system in Ionic. Another question was if I can implement a Navbar similar to the one, which Bootstrap has by default. I needed to customize a little bit to end up with a Navbar but honestly, it looks now better than what I had before with Bootstrap. My personal website is now fully built with Ionic components and styles. One of the other advantages was a quite easy implementation of Dark mode.

Below I will describe the 3 most important learnings I had when I transitioned my website to Ionic.

1. Ionic Grid System

<IonRow>
  <IonCol size={6}></IonCol>
  <IonCol size={6}></IonCol>
</IonRow>

Similar to Bootstrap, in case you need to adjust the size depending on window width, you can use sizeXs, sizeSm, sizeMd, sizeLg and sizeXl attributes:

<IonRow>
  <IonCol sizeXs={12} sizeMd={12} sizeLg={6}></IonCol>
  <IonCol sizeXs={12} sizeMd={12} sizeLg={6}></IonCol>
</IonRow>

Once you start to practice, you will realize that it is quite easy to achieve your grid system goals.

2. Dark Mode

It is very easy to implement a dark/light mode switcher in Ionic. The main idea is to toggle class dark for document body. Before you implement the toggle, you need to make sure that the corresponding theme variables file is updated. Make sure that you remove @media (prefers-color-scheme: dark) and separate body, ios, md classes with an additional dark class like below:

/** Ionic CSS Variables **/
:root {
  --ion-color-primary: #3880ff;
}

/** Ionic Dark Colors **/
body.dark{
  --ion-color-primary: #428cff;
}
.ios body.dark{
  --ion-color-step-50: #0d0d0d;
}
.ios ion-modal.dark {
  --ion-background-color: var(--ion-color-step-100);
}
.md body.dark {
  --ion-background-color: #121212;
}

Once you implement the way above, you will be able to define a custom variable, which will be different depending on if the body has a dark class or not.

3. Navbar for Ionic Page

I have tried a lot of options when it comes to Ionic and I ended up with the solution below.

I used IonToolbar as you would use in a mobile application. Within the toolbar, I added IonButtons for each page of my page. But it won't be enough since on smaller screens you will end up with a full menu rather than a button, which expands the menu items. Therefore, I needed to create a Hamburger icon, which will open the Buttons when necessary but is visible only when the window is small. To achieve this, you need to write some CSS but it is pretty easy and uses IonPopover, which helps you to open the menu once you click. The sample will be in React but the idea should be the same in each framework:

import { IonButton, IonButtons, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonToolbar, useIonPopover } from '@ionic/react';
import { moon, sunny, menuOutline } from 'ionicons/icons';
import './Navbar.css'

export default function Navbar(){

  const [present, dismiss] = useIonPopover(PopoverList, { 
    closePopover: () => dismiss() 
  });

  return(
    <IonHeader className="navbar">
      <IonToolbar>        {/* --> Buttons for Large Screens */}
        <IonButtons slot="start">
          <div className="menu-items-list"> 
            <IonButton routerLink='/sun'>
              <IonIcon icon={sunny} />
              <IonLabel className="button-label">
                Sun Page
              </IonLabel>
            </IonButton>
            <IonButton routerLink='/moon'>
              <IonIcon icon={moon} />
              <IonLabel className="button-label">
                Moon Page
              </IonLabel>
            </IonButton>
          </div>
        </IonButtons>

        {/* --> Buttons for Small Screens with Hamburger */}
        <IonButtons slot="end">
          <IonButton 
            onClick={(e) => present({ event: e.nativeEvent })}     
            className="menu-burger-icon">
            <IonIcon icon={menuOutline} slot="icon-only" />
          </IonButton>
        </IonButtons>

      </IonToolbar>
    </IonHeader>
  )
}

const PopoverList: React.FC<{ closePopover: () => void }> = ({ closePopover }) => (
  <IonList>
    <IonItem button routerLink='/sun'>
      <IonIcon icon={sunny} slot="start" />
      <IonLabel>Sun Page</IonLabel>
    </IonItem>
    <IonItem button routerLink='/moon'>
      <IonIcon icon={moon} slot="start" />
      <IonLabel>Moon Page</IonLabel>
    </IonItem>
    <IonItem 
      lines="none" 
      detail={false} 
      button 
      onClick={closePopover}>
      Close
    </IonItem>	
  </IonList>
);

And now include the CSS, which will hide the corresponding section of the Navbar depending on the width of the browser window:

@media (max-width: 862px) {
  .navbar .menu-items-list{
    display: none !important;
  }
}

@media (min-width: 863px) {
  .navbar .menu-burger-icon {
    display: none !important;
  }
}