Building Mac OS 9 In WordPress (using Oxygen)

Published: 5 months ago

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.

Head Office Website
Eatsleepwork, another impressive one

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.

Low End Mac's Compleat* Guide to Mac OS 9 | Low End Mac

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%); 
}

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.

Chicago typeface: Apple Computer font made for Macintosh and used on iPod  felt friendly.

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

rectangle

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.

graphical user interface, text, application
The draggable window

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.

The draggable links

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).

graphical user interface, text

Here's the script tag:

<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

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

.draggable

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

containment: true

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-area

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:

graphical user interface, application

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.

graphical user interface, application

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

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kate
4 months ago

Thank you so much for this tutorial! Loved it. I have been playing around creating a draggable moodboard and can't wait to implement it on my new website.

Kate
4 months ago
Reply to  James LePage

Love it! As someone wanting to up-level and learn more .js, do you have any resources or places I should check out to find cool things I can play with?

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram