14. Styling

Width of keys

Current keyboard layout looks not realistic. E.g. space button is small like alt or ctrl.

How keyboard looks:

How keyboard should look:

If we look at the second image, or on a real keyboard, carefully, we'll notice that there are the primary keys: letters and numbers, and secondary keys: Tab, Backspace, Ctrl, Alt etc.

All primary keys have the same fixed width. But their number decreases from the top rows to the bottom. And the secondary buttons compensate for this decrease in number by increasing their width.

Rows 2 and 3 contain 13 primary keys and 1 secondary each. Backspace and Tab have the same width, and it is about 1.8 of primary key width. So we can say, that each row width is 14.8 units.

Row 4 contain 11 primary keys and 2 secondary. CapsLk and Enter have the same width:
(14.8 - 11)/2 = 1.9

Counting like this number of primary keys and width compensation of secondary keys in each row, and doing some approximation to achieve more realistic view, we get styling for the keyboard.

styles.css

/* specified keys */

/* 1st row */

.key.Backspace {
    flex: 1.8;
}

/* 2nd row */
.key.Tab {
    flex: 1.8;
}

/* 3d row */
.key.CapsLock {
    flex: 2;
}

.key.Enter {
    flex: 2;
}

/* 4th row  */
.key.ShiftLeft {
    flex: 2.5;
}

.key.ShiftRight {
    flex: 1.5;
}

/* 5th row  */
.key.Space {
    flex: 8;
}

With these styles our keyboard looks realistic.

Vertical alignment

Now the keyboard placed at the top of the screen. It's kinda asymmetric. Let's center it vertically.

Open developer tools: mouse right-click on the chrome page --> Inspect --> tab Elements (near the Console). Look at element nesting.

In order to center <div id="app"> we'll add to an element that wraps it (body) the style display: flex and other styles. We also add semantic tags: header, footer and main -- good attributes of an internet page.

index.html

<body>
    <header>
        <h1>Keyboard Learning App</h1>
        <p>
            Read a tutorial for beginners on
            <a href="">how to code this app from the scratch</a>
        </p>
    </header>
    <main>
        <div id="app"></div>
    </main>
    <footer>
        <div class="socialLinks">
            <a href="https://github.com/apayrus/keyboard">Github</a>
            <a href="https://twitter.com/ApayRus">Twitter</a>
        </div>
    </footer>
    <script src="./index.js" type="module"></script>
</body>

styles.css

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* by default body has margin 8px, we don't need it */
    padding-left: 8px;
    padding-right: 8px;
}

header {
    text-align: center;
}

main {
    width: 100%;
}

footer {
    text-align: center;
}

a {
    text-decoration: none; /* removed underline */
}

a:visited {
    color: blue;
}

.socialLinks a {
    display: inline-block;
    margin: 0.5rem;
}

Result

Diffs in code 14

Entire code after the chapter 14

Congratulations

Thank you my dear friend, if you followed this tutorial until now. You spent a lot of time to learn all these things (14 chapters). Honestly, me too -- to write it.

I hope this tutorial will help to newbies around the world. And the project itself will help to people to see how their languages all are fit into a single hardware keyboard with fixed number of keys. It unites us.

Blog

Rustam Apay

Width of keys

Vertical alignment

Congratulations

Join Our Newsletter. No Spam, Only the good stuff.

Related