CSS-Queries

Documentation of learning how to implement container queries

Table of contents

• Technologies
• Setup
• Features
• Sources
• Devlog

Technologies

Project is created with:

• HTML
• CSS

Setup

To run this project, clone repo and click index.html file.

Features

• Here's my journey of implementation container queries in my projects.
• First I want to create test project where I can experiment.

Sources

What helped me:

• An Interactive Guide to CSS Container Queries
• MDN
• Frontlive Newsletter

Devlog

Here is my devlog :D

I'am fan of learning new ways to improve my work and projects. So while reading Frontlive Newsletter I found article about CSS Container Queries.
Previously I design my projects with media queries and percents to acheive responsibility. But it append to be tricky and laggy sometimes.
For small websites I think that can be enough - but I want to improve myself and design more efficient websites :D

Let's start by creating simple page with two blocks with text inside.\

    <main>
        <article class="kenobi">Hello there</article>
        <article class="grievous">General Kenobi</article>
    </main>

Now we are trying to center these blocks - and we will give them some look :D\

*
{
    margin: 0;
    padding: 0;
}

main
{
    /*styling*/
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

article
{
    /*styling*/
    display: flex;
    align-items: center;
    justify-content: center;
}

And now we have centered our page :D
We should add our container query:\

main
{
    /*styling*/
    container: blocks / inline-size;
}

@container blocks (min-width: 180px)
{
    article
    {
        font-size: clamp(14px, 10px + 1.33cqw, 20px);
    }
}

Thanks to this query we can style element by the size of container.
Now we added query to change font size. What else we can do?

Well, for now I don't exactly know. I want to make these block in column when the size of container is small.
And I've found what I was doing wrong:
I should be changing main's flex-direction, not article's.

So let's test something

body
{
    container: blocks / inline-size;
}

@container blocks (max-width: 700px)
{
    main
    {
        flex-direction: column;
    }
    
    article
    {
        background-color: #836FFF;
        font-size: clamp(15px, 18px + 1.33cqw, 30px);
    }
}

Am I doing it right? Maybe. I get what I looked for.
But I'll read more about container queries and I'll design that page properly.