Ionic for Building a Website

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

Sample View of Navbar

The navbar, which is described above, will look like below normal window:

Once the window gets smaller, the navbar buttons will be replaced by the Hamburger button, which can be used to view the page links:

I hope this article will motivate you to use Ionic for your web application.

In case you have any questions, please feel free to use the Contact page to reach out.

Thanks for reading!

--

--

--

https://www.ozan.pl/aboutme/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Integrating Social Logins in web-apps

How To Develop and Build Next.js App with Java Backend

Building a note application using 8base, GraphQL and React

User Management with Context in React.

Publish/subscribe with PostgreSQL and Phoenix Framework

Implementing a nested menu with animations in React.

How To Run VueJS With NodeJS Backend on GCP Cloud Run

ES5 functions vs. ES6 ‘fat arrow’ functions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ozan Tellioğlu

Ozan Tellioğlu

https://www.ozan.pl/aboutme/

More from Medium

Chrome Extension Development— Add this to Your Skill Set

Building a blog with Explosiv

Top 6 technical assessment tools to vet a ReactJS Developer

Build Your Own CRA Template