This post is a bit of a "project diary": not a tutorial, not a portfolio entry, just some words.

As our portfolio grows, and our blog becomes more well followed, the Isotropic Agency is preparing to launch a new version of our website in the first quarter of 2021. We've been doing a lot of research and strategy work which includes taking a look at some other well done agency websites for inspiration.

On this search, I stumbled across a healthy collection of websites that mirrored older desktop operating systems. Complete with windows, drag and drop, and more.

I decided that this was not the direction that I wanted to take the branding of the agency in, but nevertheless it was a cool idea. I had a couple spare hours on a recent weekend and decided to see if I could cobble something like those agency websites together using Oxygen Builder.

This page/theme builder is perfect for this application because you can build a page from the ground up.  

The design ideology of this experiment was made to closely mirror Mac OS 9, with a little bit of inspiration from Windows 95 and the early XP edition. The main feature of both of these web pages was the fact that you could drag the windows and individual files/shortcuts around the page, just like you would on a desktop.

These websites also had modals/windows that popped up when their respective links/shortcuts were clicked on. Aside from that, the design and layout of each website was relatively simple. It was a full height full with window that was designed to look like a desktop. Both websites had top bars that displayed information and navigation.

With the general idea in my head, I set about building the site. this was going to be a single page website, and because I didn't have weeks to invest in it (it’s not going live, just something fun that I wanted to build), some of the window/modal functionality would have to be left out.

The first thing to do was make several global CSS classes, making it much easier for me to style each element. I'm using the colors found in Mac OS 9, pictured below.

Here are some of those styles:

.window-base {
  box-shadow: inset 1px 1px 1px white, 1px 1px 0px #9c9c9c;
  background:#cecece;
}

.window-button-outer {
  width:20px;
  height:20px;
  border:solid 1px black;
    box-shadow: -1px -1px 0px #9c9c9c, 1px 1px 0px white;
}
.window-button-inner {
  box-shadow: 1px 1px 1px rgba(156, 156, 156, 0.5), -1px -1px 1px rgba(255,255,255,0.5);
  width:auto;
  height:calc(100% - 4px);
  margin:2px;
   background: rgb(130,130,130);
background: linear-gradient(-45deg, rgba(130,130,130,.85) 0%, rgba(255,255,255,.85) 100%); 
}Code language: CSS (css)

Once I had colors and CSS style generated, the next thing to do was install the font. After doing some research, I figured out that the font was called Chicago, found it online (it’s free), and installed it on the site using the Oxygen-recommended Elegant Custom Fonts. There’s another, thinner font in use, but I omitted that from this project.

The first aspect of the page to build is the header.

I didn't end up doing anything, but would probably add mega menu functionality to the menu icons in the left of the header if this was going to go to production. This would be done by using CSS hover styles, which hide and show absolutely positioned sub menus.

The right side of the menu displays the time which uses PHP, the users location (usa flag), which uses the user's IP, and the page that they are currently browsing, Which uses the dynamic data feature in Oxygen.

Now it's time to build out the actual desktop in Oxygen Builder. this is placed under the menu with a calculated height of calc(100vh – 40px), which ensures that the page remains full screen and helps with positioning.

There are two major elements that you can find on this page, the draggable links , and the draggable windows. In this case, the windows are already open when the user gets to the page, but we can set it up so the draggable links toggle each individual window. I never ended up doing this, but it can be done fairly simply with JavaScript.

I chose Draggabilly.js, which is a library that "make[s] that shiz draggable" and is "rad because it supports IE10+ and touch devices".

First, I added it to the head of the website by using Advanced Scripts. (You can also do this with Code Snippets, which is free).

Here's the script tag:

<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>Code language: HTML, XML (xml)

Once you've added the library to the site, you need to initialize it.

The library has several options, and can be initialized by using vanilla JavaScript or jQuery. I followed a pre existing example which is located on code pen that made the initialization easy. all you need to do is copy and paste this into a code block, or a code snippet.

First, specify the class that makes the element draggable. I stuck with the default

.draggableCode language: CSS (css)

The next thing to do is choose what area of your site the element can be dragged in. By default, if you choose

containment: trueCode language: JavaScript (javascript)

it selects the parent element. I wanted to use columns to initially space the elements on the desktop, so I added a custom class to that desktop container in Oxygen, and specified it in the JS like so:

containment: .desktop-areaCode language: CSS (css)

And that's it. Now, whenever you add the custom class of .draggable on your Oxygen website (wherever the library is initialized), the element and everything it contains will be draggable. Really cool.

Here's a visual representation of how I'm using the columns in Oxygen to initially position the elements:

Aside from that one library, the rest is just pure JS and css styling. For example, the individual windows had many of the same divs and styling making them up.

They used a ton of borders, 1px high divs, and box shadows (utilizing inset and outside) to add the depth styling that you can find in OS 9.

The final product was really cool, and not that tough to build.