Forem: Rajat Kapoor

CSS Container Queries - The future of responsive web design is almost here

Rajat Kapoor — Tue, 25 May 2021 16:44:31 +0000

With the huge number of smartphone users and increasing power of these devices, ensuring that your web applications run fine on all screen sizes is more important than ever. Fortunately CSS provides a couple of ways to style the same HTML in different ways on different devices.

Responsive web design right now

You can skip to the next section if you're already familiar with @media queries.

We can use @media queries in our CSS to conditionally apply CSS styles on the basis of the device or browser/user-agent properties. These properties could be the width of the screen, orientation of the device, whether the device is a screen reader or a printer, etc.

Here is a small demo showing how media queries work.

We will just add one div in our html.

<div class="box">
    This is a responsive box. Resize your browser width to see the styles change
<div>

And here is our CSS:

.box {
  background: lightblue;
  width:100%;
  height:100vh;
}

@media(max-width:800px) {
  .box {
    background: hotpink;
    color: white;
    font-weight: 700;
  }
}

You can check the whole demo here:
https://codepen.io/rajatkapoor/full/NWpgWor

If you open the above link on a desktop/laptop you will see a screen with a blue background with black colored text written on it. Something like this:

But if you open this on a smartphone, you will have a pink background instead of blue and the text would be written in white.

Magic right?

This is possible because of the @media queries. This happens because we apply certain styles only when the width of our device screen is less than 800px. This is the CSS that causes the different styles on mobile and desktop.

@media(max-width:800px) {
  .box {
    background: hotpink;
    color: white;
    font-weight: 700;
  }
}

Enter `@container` queries

@container queries are only supported on Chrome Canary with the enable-container-queries flag enabled. You can download Chrome Canary here. Once installed, open the URL chrome://flags/#enable-container-queries and enable container queries.

There is a polyfill under development that you can use to use container queries today. You can check it out here.

@container queries are one of the many features that are coming to CSS. Unlike media queries, which can only let you conditionally apply CSS styles on the basis of the browser properties(width, orientation, etc), container queries allow you to conditionally apply styles based on the properties of the container!

For example, using container queries you can style cards to appear differently depending on the size of the element they are placed in. And that is what we will try to build.

Here's what what we will build

We will build a card that will change styles depending on the width of its container, and not the width of the screen.

Here's a demo that works only on Chrome canary.

Here's the same demo with the cqfill polyfill.

You can see the full code of this demo in this github repository.

Let's try it out

We'll use good old plain HTML and CSS for this project. Here is our initial HTML. Notice that we have also linked to our own "styles.css file".

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Queries | Rajat Kapoor</title>
    <!-- our own styles -->
    <link href="./styles.css" rel="stylesheet">
</head>

<body>
</body>

</html>

We will start by creating a very simple card, with an image, title, and some text. This card will have a card--header with an image and a card--body with a title and other card content. The card is styled using flex with flex-direction: row, so the image stays on the left-hand side and the rest of the text content on the right.

We will wrap this card in a div with class parent large and will wrap all of this in a container to center everything on the page.

<!-- index.html  -->
<!-- ... -->

<body>
    <div class="container">
        <div class="parent large">
            <div class="card ">
                <div class="card--header ">
                    <img class="card--image" src="./img.jpeg" alt="card image">
                    <!-- we have this img.jpeg file in our folder -->
                </div>
                <div class="card--body ">
                    <h1 class="card--title ">
                        Lorem ipsum dolor sit amet.
                    </h1>
                    <h3 class="card--content ">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil expedita accusantium, quidem
                        ducimus doloribus architecto a est deleniti, rerum saepe hic. Repellendus itaque ab officiis
                        voluptate ea earum perferendis consequatur!
                    </h3>
                </div>
            </div>
        </div>
    </div>

</body>

/* styles.css */
body {
    background-color: lightblue;
}

.container {
    display: grid;
    place-items: center;
    grid-gap: 1em;
}

.card {
    background: white;
    border-radius: 2em;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 2em;
}

.card--header {
    width: 100%;
}

.card--image {
    border-radius: 1em;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.card--body {
    padding: 2em;
    flex: 3
}

.card--header {
    flex: 2
}

.large {
    width: 100%;
}

This is how your page will look:

We will now add another div with class parent small and copy-paste the same card into it. We will also define styles for the small class.

<!-- index.html -->

<body>
    <div class="container">
        <div class="parent large">
            <div class="card">
               <!-- ...card -->
            </div>
        </div>
        <div class="parent small">
            <div class="card">
               <!-- ...card -->
            </div>
        </div>
    </div>

</body>

// styles.css

.small {
    width: 500px;
}

Note that both the cards are exactly the same and are just lying in two different divs. And this is how they look:

Adding container queries

We want the card to have the text content below the image in case the width of the container is less than 500px. We will also change the background of our card to hotpink and make the text white to make the changes more noticable.
For container queries to work, we need to add CSS to the container to define the "containment context" — the container queries of the children inside this containment context react to the properties of this container. We will make the divs with class parent as the containment context of these cards. To do that, we will modify the CSS of the parent class.

/* styles.css */

.parent {
    contain: layout inline-size style;
}

Now we can add container queries to our card.

/* styles.css */

@container(max-width: 500px) {
    .card {
        flex-direction: column;
        background-color: pink;
    }
}

Thats it! Now if you go back to your browser, you will see that the card in the div with the class small has the new styles applied.

Yay 🎉

We were able to control the styling on the basis of the container size and not just the device properties (screen size). That is the power of container queries.

Bonus — Let's make the `parent` resizable

Do you know you can quickly make anything resizable by just adding CSS. We'll do it to our parentclass.

/* styles.css */

.parent {
    contain: layout inline-size style;
    resize: horizontal;
    overflow: auto;
}

Now both the parent divs can be resized horizontally to see our container queries working in action.

Conclusion

With container queries, we will be able to approach responsive designs in a much smarter way. That said, container queries are in early stages of development. It is not recommended to use these in production right now. In fact, CSSWG changed the syntax between the time I started to write this article to the time I finished writing it 😅.

Follow me on twitter to get more web development related content.

Special thanks to Ahmad Shadeed for helping me with debugging why my container queries were not working in Chrome Canary. You can also read more about container queries in this article

Create your dev portfolio - Part 1: First things first

Rajat Kapoor — Mon, 17 May 2021 15:13:19 +0000

"You can't build a great building on a weak foundation." — Gordon B. Hinckley

In this post we will set up the foundations for our portfolio:

Create a Next JS app
Set up Chakra UI with a theme
Set up automatic deploys on Vercel using Github

So let's get started.

Intro

I have been developing web applications since my college days and been coding professionally for over 6 years. I have owned the domain https://rajatkapoor.me for so long but have never hosted anything on it. Now is the time.

In this series of posts, I will create a decent-looking developer portfolio for myself using NextJs and Chakra UI. I will then host it up on Vercel and point my domain (https://rajatkapoor.me) to it.

You can also follow along and create a developer portfolio of your own. You can follow on my progress here and check the github repository here.

Disclaimer:

I am horrible at design, so I will be looking at design resources and other dev portfolios to get inspiration.

Create a next JS App

We'll start with creating a new Next js app and run it

npx create-next-app portfolio // "portfolio" is the name of the app, you could call it anything you like

cd portfolio

// to run the app
yarn dev

You will see an output like this on your screen

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Go to the URL that's shown in your terminal and you will be able to see your app in action.

Setup Chakra-UI

Chakra UI is a react component library with a great set of components and a prop based model of styling them. All components in Chakra UI are accessible and can be configured with a very well defined theming system. With Chakra UI, you can quickly build accessible React apps. To install it in your app:

// make sure you're inside the portfolio folder

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Chakra UI apps have to be wrapped in a <ChakraProvider> for them to function correctly. We will wrap our react app's root component inside it. NextJS expects this root component to be default exported from a special file - pages/_app.js

// pages/_app.js

import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}
export default MyApp

Adding a theme

Chakra UI has a robust theme system, that allows you to re-use styles and add styling rules in a single place. We will neither add any relevant theme-related changes, nor utilize the full power of this theme. But we will configure it and keep it ready for use when the time comes.

For this, create a theme.js file at the root directory of your app.

// ./theme.js

import { extendTheme } from "@chakra-ui/react";

const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
};

const theme = extendTheme({ colors });

export default theme;

and then pass this theme to the <ChakraProvider> in pages/_app.js.

// pages/_app.js

import { ChakraProvider } from "@chakra-ui/react";

import theme from "../theme"; // <- import here

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}> 
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Now that we are all set up, let's update our 'pages/index.js' file to use some of the components from Chakra UI.

// ./pages/index.js

import Head from "next/head";
import Image from "next/image";
import { Box } from "@chakra-ui/react";

export default function Home() {
  return (
    <Box w={"100%"}>
      <Head>
        <title>Rajat Kapoor - Full stack developer</title>
        <meta
          name="description"
          content="Rajat Kapoor is a full stack developer from India"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Box>hi</Box>
    </Box>
  );
}

You will see a small but rewarding message on the top left 😎

Hosting on vercel

This section assumes you know basics of git and have set up this repository on Github or a similar platform. If that is not the case, please look out for already existing resources from which you can learn those things. If you're still not able to set it up, drop a message in the comments and I will be happy to help you out.

Vercel is a web hosting platform that allows you to host your NextJS (and many more types of apps) for free. It is made by the same people who made NextJS and provides a simple but powerful developer experience, especially for NextJS apps. Now let's get this hosted on Vercel, so that we can share the progress of our portfolio with everyone and get early feedback.

Head on to https://vercel.com and create an account. You could also use your social account to sign up.

You will land on a page that will allow you to import a git repository. Connect your Github (or any other git provider's) account, select the repository where you have pushed the code for this project, and click on "Import".

Choose to use your personal account when prompted. You will land on the page where you could choose a name for your project and change other settings. All the settings should have been auto-configured correctly and you would not need to change anything. Just click on "Deploy" and let the magic happen.

The deployment will start and you'll be greeted with a success message as soon as it completes.

Click on the "Visit" button to view the deployed website. For every commit that you push to your repo, Vercel will automatically deploy the latest code on this URL. Vercel will also maintain a live, deployed copy of each of your commits for you to look back (or if you wish to roll back to a previous version). Check out the "Deployments" tab on your project on Vercel dashboard to see deployments corresponding to all your commits.

Conclusion — of the beginning

That must feel like an achievement. Tap your shoulder, clap for yourself. You've done a lot.

In the next post, we'll actually start building the portfolio - by adding a navbar, a main hero section and highlight some of our work. Stay tuned for more.

4 ways to perfectly center content using CSS

Rajat Kapoor — Fri, 14 May 2021 09:48:58 +0000

Centering content in CSS is something that beginners struggle a lot with. CSS provides a lot of options that allow you to center content inside a container. We'll try some of the most commonly used ones.

Centering text

Let's start by learning how to center text in a container

<!--  our html has a container and text content inside -->
<div class="container center">
  this text should be centered
</div>

We can center the text content using text-align: center. Here's is how our CSS looks

/* Just to see how big the container is*/
.container {
  background: black;
  font-size: 2rem;
  color: turquoise;
  height: 400px;
}

.center {
  text-align: center;  /* horizontally center aligns the text */

  vertical-align: middle;  /* aligns the text in the middle of the `line-height` of the text*/
}

See it in action:

If you want to place the text at the center of the screen, wrap it in a div and follow any of the techniques below.

Centering a div inside another

There are multiple ways to do it. Check out all of these and let me know your favorite one in the comments. For the next few examples, we'll use this common HTML and CSS and highlight only the CSS changes needed to center the contents

HTML:

<!--  our html has a container which contains a div we wish to center-->
<div class="container center">
  <div class="inner">
  </div>
</div>

#### CSS:

html,
body {
  height: 100%;
}
.container {
  background: black;
  width: 100%;
  height: 100%;
  font-size: 2rem;
}

.inner {
  background: turquoise;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Using `margin`

We can horizontally center the inner div using margin

.inner{
  margin: auto;
}

See it in action here

Using `flex`

To center this using flex, we need the following CSS:

.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

See it in action here

Using `grid`

.center{
  display: grid;
  place-items: center;
}

See it in action here

Conclusion

This is not all of it. There are many other ways to center content. Post your favorite way of centering content in the comments.

Writing my first custom react hook - useOutsideClick

Rajat Kapoor — Wed, 12 May 2021 16:53:52 +0000

When react hooks were launched, they completely changed the react ecosystem. I have been using react hooks for quite some time now and I am a big fan. But like a lot of other developers, I have never written a custom react hook. This is mainly because firstly, all the functionality I need is available in a third-party hooks library, and secondly, procrastination.

I am a firm believer in learning by doing. So I am going to create a very simple hook - useOutsideClick. This hook will help us to trigger a function when a user clicks outside a component.

Where can we use this?

Close expanded states of a component when a user clicks outside
Close modals when users click outside the modal

and many more

How will we create this?

This may not be the best way, but I have been using a very simple approach in my older class-based components. I will just try to replicate that with a custom hook. Here's what we will do:

We will add an onClickListener to the document when the component mounts
In this click listener, we will trigger the outsideClickHandler when the target of the click lies outside the desired component

Let's get started

You can find the final code of this tutorial in this github repository and a live working demo here

Let's create a react app and run it using the following commands

npx create-react-app useOutsideClick
npm install # to install all dependencies
npm run start # to run the app

We'll first create the outside click functionality in a simple functional component and then try to extract it into a custom hook

Let's edit src/App.js to look like:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="main">Click me</div>
    </div>
  );
}

and update the styles in ./styles.css to make things slightly less ugly

html, body, #root {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
}

.main {
  background: lightskyblue;
  font-size: 2rem;
  width: 20vh;
  height: 10vh;
  display: grid;
  place-items: center;
  border-radius: 40px;
}

If you check the browser, you'll see something like this

Adding outside click functionality

We'll now try to detect when the user has clicked outside the div that says "click me" using the useEffect and useRef hooks.

We will start by creating a new ref for the <div> outside which we want to detect clicks

const mainRef = useRef();

and pass it as the ref prop to the div

<div className="main" ref={mainRef}>

In our click handler, we will check whether the event.target lies inside the target element. We can do that using the contains function. For now, we will just log if the click is outside the element

const onOutsideClick = (e) => {
    const inMain = mainRef.current.contains(e.target);
    const isOutside = !inMain;
    if (isOutside) {
      # call the outside click handler here
      console.log("Clicked ouside");
    }
  };

We want to listen to clicks on the whole document as soon as the component mounts or whenever the ref changes. We will do that using the useEffect hook.

useEffect(() => {
    document.addEventListener("click", onOutsideClick);
    // cleaning up the event listener when the component unmounts
    return () => {
      document.removeEventListener("click", onOutsideClick);
    };
  }, [mainRef]);

Our src/App.js will now be like:

import { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const mainRef = useRef();
  const onOutsideClick = (e) => {
    const inMain = mainRef.current.contains(e.target);
    const isOutside = !inMain;
    if (isOutside) {
      console.log("Clicked ouside");
    }
  };
  useEffect(() => {
    document.addEventListener("click", onOutsideClick);
    return () => {
      console.log("cleanup");
      document.removeEventListener("click", onOutsideClick);
    };
  }, [mainRef]);
  return (
    <div className="App">
      <div className="main" ref={mainRef}>
        Click me
      </div>
    </div>
  );
}

That's it. We now just need to extract this functionality in a custom hook.

Creating a custom hook

Create a new file called useOutsideClick.js. We will now copy over the code from our src/App.js file to src/useOutsideClick.js and update it to accept the componentRef and the outsideClickHandler

# src/useOutsideClick.js

import { useEffect } from "react";

export const useOutsideClick = (componentRef, outsideClickHandler) => {
  const onOutsideClick = (e) => {
    // updated this to use the passed componentRef
    if (!componentRef.current) {
      return;
    }
    const inMain = componentRef.current.contains(e.target);
    const isOutside = !inMain;
    if (isOutside) {
      outsideClickHandler();
    }
  };
  useEffect(() => {
    document.addEventListener("click", onOutsideClick);
    return () => {
      console.log("cleanup");
      document.removeEventListener("click", onOutsideClick);
    };
  }, [componentRef]);
};

We will now use this inside our app.

#src/App.js

import { useEffect, useRef } from "react";
import "./styles.css";
import { useOutsideClick } from "./useOutsideClick";

export default function App() {
  const mainRef = useRef();
  useOutsideClick(mainRef, () => console.log("Clicked outside"));
  return (
    <div className="App">
      <div className="main" ref={mainRef}>
        Click me
      </div>
    </div>
  );
}

And things work perfectly 🎉

Example

We will now update our app to showcase one of the use cases. When the user clicks the blue <div>, we will show more content below it. We will hide this content when the user clicks anywhere outside this button on the screen. We maintain this state in the state variable expanded

#src/App.js

import { useEffect, useRef, useState } from "react";
import "./styles.css";
import { useOutsideClick } from "./useOutsideClick";

export default function App() {
  const mainRef = useRef();
  // initially not expanded
  const [expanded, setExpanded] = useState(false);

  // set `expanded` to `false` when clicked outside the <div>
  useOutsideClick(mainRef, () => setExpanded(false));
  return (
    <div className="App">
      // set `expanded` to `true` when this <div> is clicked
      <div className="main" ref={mainRef} onClick={() => setExpanded(true)}>
        Click me
      </div>
      // show more details only when `expanded` is `true`
      {expanded && <div className="more">Lorem ipsum dolor sit amet</div>}
    </div>
  );
}

/* src/styles.css */

/* add this */
.more {
  text-align: center;
  font-size: 1.2rem;
  background: lightskyblue;
}

This is how things look now

Summary

Hooray! We have written our first custom hook. You could also check out one of the widely used custom hook libraries( react-use or rooks ) and try to recreate one of the hooks for practice

Forem: Rajat Kapoor

CSS Container Queries - The future of responsive web design is almost here

Responsive web design right now

Magic right?

Enter @container queries

Here's what what we will build

Let's try it out

Adding container queries

Yay 🎉

Bonus — Let's make the parent resizable

Conclusion

Create your dev portfolio - Part 1: First things first

Intro

Disclaimer:

Create a next JS App

Setup Chakra-UI

Adding a theme

Hosting on vercel

Conclusion — of the beginning

4 ways to perfectly center content using CSS

Centering text

Centering a div inside another

HTML:

Using margin

Using flex

Using grid

Conclusion

Writing my first custom react hook - useOutsideClick

Where can we use this?

How will we create this?

Let's get started

Adding outside click functionality

Creating a custom hook

Example

Summary

Enter `@container` queries

Bonus — Let's make the `parent` resizable

Using `margin`

Using `flex`

Using `grid`