7.css - My Case Study
Tags: todayilearned, showdev, css, javascript
Published: 2021-01-10 16:50:20

In case you missed it, last week I wrote a post about a recent side project I worked on and submitted to the DOHackathon:
{% link https://dev.to/khangnd/7-css-my-first-published-package-21fd %}

I tweeted to share it, tagging [the original creator](https://twitter.com/jdan) of [98.css](https://github.com/jdan/98.css), who was the initiator. Apparently, he would notice but surprisingly, he seemed to be amused by how I did it and asked me to blog about it. {% twitter 1345190754369593344 %}

So here I am today, blogging about how I did it, and what I learned from following in his footsteps, and the awesome [creator](https://twitter.com/adamhamdev) of [XP.css](https://github.com/botoxparty/XP.css) as well. Hope this is useful to you in some ways.

# The inspiration

I first coincidentally came across the [XP.css](https://github.com/botoxparty/XP.css) repository of [Adam](https://twitter.com/adamhamdev) as I was exploring Github. And I was totally absorbed by the uniqueness and creativity of the idea, to recreate the UI system of Windows XP on the web. Then I also got to know about [98.css](https://github.com/jdan/98.css) which was the repo where the idea originated. And as a fellow loyal fan of Windows, I started a similar project of my own for Windows 7, from a clone of XP.css.

# The way I did

After cloning XP.css to my machine, I gave my repo a new name. Some ideas were *W7.css* or *Win7.css*, but I finally decided that it should be a name as simple as its predecessors, so I went with **7.css**.

From the 98.css design system that was all wrapped up in just one CSS file, Adam scaled up XP.css to an SCSS skeleton and named it the GUI framework. It was extremely easy to work with as each SCSS file acted as a UI component where I can quickly find which file I need to modify for a certain component. So, I started "upgrading" the styles from Windows XP to Windows 7.

![GUI framework](https://dev-to-uploads.s3.amazonaws.com/i/a36sw4uaxgoxr3p30wyu.png)

## Button

The components were all basically the same as those in the formers, only one new component that I added was the Progress Bar. However, the adaptation to Windows 7 style was quite challenging and required a lot of attention to details to make it somewhat resemble the actual UI. The key factors to recreate the design of Windows 7 (which I think was known as **Skeuomorphism**, a popular design trend at the time) were **`gradient background`** and **`box-shadow`**. For instance, a Windows 7 `button` would look like this:

![A Windows 7 button](https://dev-to-uploads.s3.amazonaws.com/i/494s3kmnny9d657ik99h.png)

Notice how the gradient cut at about halfway, from a light gray to a darker gray, and a slim white border around the edges of the button. So to recreate this, the key CSS properties used were:

```css
button {
    ...
    background: linear-gradient(to bottom, #eee 45%, #ddd 45%, #bbb);
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
}
```

## Radio Button

For a `radio button`, it was quite trickier as the design was like this:

![A Windows 7 radio button](https://dev-to-uploads.s3.amazonaws.com/i/d5xs4jlf1btqek0gxfl3.png)

As a common method, to override the browser's default styling of radio buttons, one has to hide the actual `input` and have the `label` handle all the tough work. So in my case, I also had to use a `label`, with a `::before` pseudo-element to create the outer circle, and an `::after` to create the inner mark. Notice how there was a gray inset shadow in the outer circle, and some glowing in the upper left side of the blue inner mark. So the CSS rules and key properties used were:

```css
input[type=radio] + label::before {
    ...
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #ddd, inset 1px 3px 4px #888;
}

input[type=radio]:checked + label::after {
    ...
    background: #7cd3eb;
    box-shadow: inset -1px -1px 0 0.5px #16638f, inset -1px -1px 0 1px #1985c0;
}
```

## Progress Bar

The looks of a `progress bar` seemed a little bit similar to a button's due to some cutting gradient, so I thought at first, it would be easy to recreate:

![A Windows 7 progress bar](https://dev-to-uploads.s3.amazonaws.com/i/flfizx2d207lry8n6z9j.png)

But hell no, it was absolutely not. Look at the CSS I had to set up and you will see:

```css
[role="progressbar"] {
    ...
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.1),
      transparent 20%,
      transparent 80%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.6) 25%,
      rgba(0, 0, 0, 0.05) 35%,
      rgba(0, 0, 0, 0.05) 90%,
      rgba(255, 255, 255, 0.2) 95%
    ),
    #ddd;
}

[role="progressbar"] > div {
    ...
    background-color: #0bd82c;
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2),
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.2)
      ),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.05) 90%,
        rgba(255, 255, 255, 0.2) 95%
      );
}
```

Told you... So what I did was, set up two `divs`, one for the outer container, the other for the inner bar (I know some might think of using the `::before` pseudo-element for the inner bar, but you cannot dynamically progress it this way). Notice how both `divs` had the same gradient, from a lighter shade to a darker shade, only the colors are different. So to apply this flexibility, I added a `background-image` as the mask (with a lot of transparency) on them for the gradient, and add the respective `background-colors` underneath.

## Window components

And how this would be a CSS recreation of the Windows 7 design if it missed the Window components? So let's take a look:

![A complete Windows 7 window](https://dev-to-uploads.s3.amazonaws.com/i/sr89hhmq62nljhcwbe0q.png)

This was probably the most challenging part of all, I would not address all the things I did to put together a complete Window but just some major points that you might find interesting. If curious, please feel free to take a look at the code directly in [the repo](https://github.com/khang-nd/7.css/blob/main/gui/_window.scss).

In principle, it was still mostly all about **`gradient background`** and **`box-shadow`**, but more advanced, as I had to use different angles of the gradient for the glassy effect of the frame. A raw look without content would then look like this:

![A raw Windows 7 window frame](https://dev-to-uploads.s3.amazonaws.com/i/04vfwi9d9hblhrk2m5o0.png)

For the title bar's controls, the key factor was again, you've guessed it, the `gradient background`, but this time, with a combination with the `radial-gradient` to create the glowing effect at the bottom of the controls when they are hovered or active.

![A Windows 7 title bar](https://dev-to-uploads.s3.amazonaws.com/i/2w1mqxb924z3wj7tjrjx.png)

And that is some insight I could give you in the context of this article. Drop a comment if there are certain things you want to know more in detail.

# The things I learned

As the first open-sourced package I have published, I got to learn quite a lot from this side project including but not limited to the following things:

* EJS and PostCSS are wonderful techs. (But I did not know before. Shame...)
* Receiving stars to my repository is really *addictive*, it motivates me to keep working on the project, although I cannot spend the stars...
* Publishing a package to `npm` is not as hard as I thought.
* You may think of your side projects as silly things you do just for fun, but *sometimes* they turn out even more popular than the stuff you do for real.
* Share your work with the public, either via social networks, or any sites that you can promote or post about it, so that it can reach as many people as possible, to see the actual value of your work; otherwise, it remains a silly thing forever.
* [Hacker News](https://news.ycombinator.com/) was the most successful media to draw audiences to this project. (And I just got to know about it shortly before, it's not popular from where I live.)

That is all folks. Thank you for reading!