Create Mac Style Windows using Bootstrap 4

Quite a common request is to produce HTML components that resemble Apple design elements.

I had previously posted on how to create an Apple style scrollbar which was built in Visual Studio. Today I'm going to detail some changes that you can make to the the Card Component in Bootstrap 4. Mac Style Window 

Where will I use this?

You're a developer that has built a desktop application and would like to create a small showcase of the app in a frame that resembles the customer's system. Even if you've created a web based application and want to show the design in a browser window with a frame that matches that of MacOS.

Implementation

Bootstrap is a very popular framework for building sites - in fact, over 20 Million websites use it.

For this example I will be using Bootstrap 4 and the Card Component whilst utilising as much of the inbuilt classes as possible.

It turns out it was very easy to develop.

First include the Bootstrap CSS - BootstrapCDN has always been a go-to to build a website off this framework. Once the CSS has been referenced in between the <head></head> tag you can start.

Let's go through modifications needed using the example on the docs.

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

The first (and main) part of the card is to add the Mac Windows controls to the top, I've utilised SVG to draw three circles to resemble the red, yellow and green options.

Mac Window Controls

Simply place the graphic before the Card Body to produce the below. Note that I've wrapped the SVG in a DIV tag and added some margin.

<div class="card" style="width: 18rem;">
    <div class="ml-3 mt-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
            <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
                <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
                <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
                <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
            </g>
        </svg>
    </div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Mac Window

The final part to this is to add a shadow to give some depth to the window. Luckily Bootstrap has a class you can add easily to any component.

The final (and very simple) piece of code to produce a Mac style window is shown below.

<div class="card">
    <div class="ml-3 mt-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
            <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
                <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
                <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
                <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
            </g>
        </svg>
    </div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Bonus - Dark Mode

Mac Window Dark

Bootstrap has classes to show a dark background instead of the default light design.

Use the code below to show a dark window instead.

<div class="card shadow bg-dark">
    <div class="ml-3 mt-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
            <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
                <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
                <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
                <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
            </g>
        </svg>
    </div>
    <div class="card-body text-light">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link text-warning">Card link</a>
        <a href="#" class="card-link text-warning">Another link</a>
    </div>
</div>

Sandeep Bansal
Salesforce Marketing Cloud Technical Architect
Follow me on LinkedIn

Comments

Powered by