Part 06 - Mockup 2

Wireframing in HTML & CSS

Last updated by Red Cap Tom on June 24, 2020 at 12:31 +0300

This is no longer maintained

This tutorial series was cowardly abandoned by its creator mid-way due to (exciting!) circumstances. While I can't promise I'll ever finish it, I hope you found some of it useful. If you really-really-really-really want me to finish it, nag me at hey@redcaptom.com.

The Video (Scroll down for the article)

Coming soon!

In Comes CSS

A note about this article vs. the video

The articles for parts 1-8 in this series were written after recording the videos. This means that in many cases, there are style (or actual) differences between what's in the video, and what's in the articles.

Also, If you're here while not all the articles are fully written - apologies! I am in the process of transcribing, editing and uploading them here and in dev.to.

Note that while I try to convey the same amount of information in both venues, I (more often than not) fail miserably. I generally prefer creating new content to refactoring old one, so this process irks me and in the process of just getting it done I'm cutting corners.

If the article doesn't feel “complete” enough - please watch the video. Oh, and tell me that I need to step up my game! We're all in this together, after all, aren't we?

If you follow the Video above, you'll notice that I'm building up a new HTML wireframe, that has a bunch of improvements and some custom CSS to make it prettier. Here's the new, final result:

new-wireframe

Here's the new HTML:

<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <title>
        Countries We Ship Button
    </title>
</head>

<body>
    <div class="container">
        <div class="headerContainer">
            <div class="header">
                <h1>Countries We Ship To Button</h1>
            </div>
            <div class="prompt">
                <p>Please select the type of button you'd like to create:</p>
            </div>
        </div>
        <div class="singleButtonType1">
            <div class="type1Example">
                <button class="type1Button">Countries We Ship To Button</button>
            </div>
            <input type="checkbox" value="type1">Type 1
        </div>
        <div class="singleButtonType2">
            <div class="type2Example">
                <button class="type2Button">Countries We Ship To Button</button>
            </div>
            <input type="checkbox" value="type2">Type 2
        </div>
        <div class="toggle">
            <button class="toggleButton">Toggle</button>
        </div>
    </div>
</body>

</html>

And the new CSS:

/* A lot of the information can be learned from Shopify Polairs */
/* Form elements use the default of the OS  */

html {
    /* Load system fonts */
    font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
    /* Make type rendering look crisper */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Disable auto-enlargement of small text in Safari */
    text-size-adjust: 100%;
    /* Enable kerning and optional ligatures */
    text-rendering: optimizeLegibility;
}

/**
   * Form elements render using OS defaults,
   * so font-family inheritance must be specifically declared
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

.container {
    display: grid;
    grid-template-columns: 200px 50px 50px 200px;
    grid-template-rows: auto;
    grid-template-areas: "header header header header""type1 type1 type2 type2"". toggle toggle .";
    row-gap: 20px;
}

.headerContainer {
    grid-area: header;
}

.singleButtonType1 {
    grid-area: type1;
}

.singleButtonType2 {
    grid-area: type2;
}

.toggle {
    grid-area: toggle;
}

.type1Button {
    /* So I can set a margin-bottom */
    display: inline-block;
    padding: 0.5em 1.5em;
    border-radius: 8px;
    border: 2px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.65em;
    cursor: pointer;
    color: white;
    background-color: black;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.type2Button {
    /* So I can set a margin-bottom */
    display: inline-block;
    padding: 0.5em 1.5em;
    border-radius: 8px;
    border: 2px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.65em;
    cursor: pointer;
    color: black;
    background-color: white;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* 
.toggle {
    margin: auto;
} */

.toggleButton {
    padding: 15px;
    cursor: pointer;
    background-color: dimgray;
    border-radius: 5px;
    border-color: dimgray;
    border: 2px dimgray;
    font-size: large;
    color: black;
    font-weight: bold;
}

This is basically done! We now have a proper wireframe we can refer to when building our app. You can follow the video for my entire thinking pattern, but if you're just up for the final result - now you have it:)

Moving on - let's learn a little bit about React in our first (!) sidestep, before going head-first into building our application. If you've got React chops feel free to bypass the next 3 articles, and jump straight to article 10, which deals with Shopify's design system, Polaris.

An offer

If you're working on a Shopify app, and your app uses Polaris for the front-end, I want to hear from you. I am willing to sit down and run a debug session / add a new feature with you for your application, if you agree to stream it live with me (or record it and publish it later). It's not easy writing a full-stack JS app, doubly so when you're not from within the ecosystem. Let's do it together and help all the people! :)

E-Mail me at hey@redcaptom.com, and let's set it up.