DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 14. Styling
Rustam Apay
Rustam Apay

Posted on

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 looks

How keyboard should look:

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡