KhangIn case you missed it, last week I wrote a post about a recent side project I worked on and submitted to the DOHackathon:
I tweeted to share it, tagging the original creator of 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.
So here I am today, blogging about how I did it, and what I learned from following in his footsteps, and the awesome creator of XP.css as well. Hope this is useful to you in some ways.
The inspiration
I first coincidentally came across the XP.css repository of Adam 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 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.
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:
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:
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:
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:
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:
But hell no, it was absolutely not. Look at the CSS I had to set up and you will see:
[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:
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.
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:
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.
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
npmis 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 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!
