Ubuntu 19.10 Login in CSS
I love beautiful minimalist designs. Today we are gonna create together Ubuntu 19.10 (Eoan Ermine) Login. Using Semantic HTML and CSS only.
Why Semantic HTML and CSS only? Why aren’t we going to use JavaScript?
Well, you should use JS only when needed and as you will see, we can go quite far without it. You can recreate cool effects with CSS only.
Rely on CSS as much as you can (also some parts can be GPU accelerated).
1 Define your parts
First of all, check again at the very top of the article the Pen or the image with the Ubuntu Login. We need to think about the diferent parts of our login to break it into pieces. Divide and conquer!
We are gonna use custom HTML tags to define our elements.
<user-name></user-name>Why are we gonna use mostly our own HTML tags instead of common tags?
It’s good practices to use semantic elements that clearly defines their content: easy to read, understand and debug. Don’t code this shit:
However, because we don’t have semantic elements for each piece of code that our minds can create we have to define our owns. And thankfuly we can do it in HTML with custom tags : )
It’s best practice to use a dash like this <ui-name> (write anything you want in both side) for your custom tags in order to avoid name conflicts with other tags. Also, it’s obviously a good idea not to use tag names that are already defined by HTML.
Our Login
We can break the Ubuntu Login <g-login> in two pieces, an user part <g-user> made up of an user avatar <g-avatar> and an user name <g-name>.
<g-login> <g-user>
<g-avatar></g-avatar><g-name>Darlene Alderson</g-name>
</g-user>
<g-help>Not listed?</g-help></g-login>
And a password part <g-password> made up of a title <g-title>, an input for the password <input type="password"> and two buttons, one for cancel <button>Cancel</button>and another for unlock <button>Unlock</button>.
<g-login> <g-user>
<g-avatar></g-avatar><g-name>Darlene Alderson</g-name>
</g-user>
<g-help>Not listed?</g-help>
<g-password>
<g-title>Password:</g-title>
<input type="password">
<button>Cancel</button><button>Unlock</button>
</g-password>
<g-help>Log in as another user</g-help></g-login>
By default <g-password> is hidden, however, everytime we click on <g-user> we show it up.
Please, take a moment to compare the code above with the shit we saw full of divs, classes and styles. Now, with custom semantic tags any human being can know what it’s going on with your code.
Why don’t we use Web Components?
That would be the next level. Web Components let’s us have our components with our style and interaction integrated like any HTML element. Think for example about the canvas HTML element and all the magic behind. With web components you can do exacly that.
However, we just focused on custom tags without integrating inside: the style and the functionality. For recreating the Ubuntu Login CSS is fine for now.
2 Styling
We have broken The Ubuntu Login into pieces, let’s add now the style.
Screen <body>
The Ubuntu Login appears in the middle of the screen. We are gonna use Flexbox because we only need one direction for that and of course the typical background color and the Ubuntu font-family.
body {
background: #4e194b;
display: flex;
justify-content: center;
align-items: center;
height: 95vh;
font-family: Ubuntu;
color: white;
user-select: none;
}User <g-user>
The user includes the avatar image and name. We are gonna use Flexbox again and a fixed width. Notice that we need margins, rounded corners and an :hover effect.
g-user {
display: flex;
align-items: center;
border-radius: 5px;
margin: 10px 0;
width: 345px;
}g-user:hover {
background-color: rgba(255, 255, 255, 0.25);
}
Our avatar is a SVG image. In my case I have intregrated it directly as a URL encoded image in the CSS because didn’t want to access external data from Codepen (check the Pen code at the very top) but in your own project just set the path with your file. Don’t forget to add margins : )
g-avatar {
background-image: url(avatar.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 24px; /* we set image size with the padding */
margin: 15px 20px 15px 15px;
}Notice that the tricky part here is that I decided to set size using just the padding property. If you wanna do the same do not forget to set the rest of the background properties as I did. The key factor is to set the background-size: contain.
Password <g-password>
Now, the password part. It includes a title, an input and two buttons. We use in this cases CSS-Grid because Flexbox only contemplate one direcction and we need the title in the first row, the input in the second one and the buttons in the third one but confronted (in different sides).
g-password {
display: grid;
grid-gap: 10px;
margin-bottom: 25px;
}With CSS-Grid we set our elements wherever we want without dividities.
g-title {
grid-column: 1 / 4; /* from column 1 to 3 */
grid-row: 1; /* first row */
}input[type=password] {
grid-column: 1 / 4; /* from column 1 to 3 */
grid-row: 2; /* second row */
}button:first-of-type {
grid-column: 1; /* first column*/
grid-row: 3; /* third row */
}button:last-of-type {
grid-column: 3; /* last column */
grid-row: 3; /* third row */
}
Why don’t we use so many classes or classes at all in CSS?
A gold rule in CSS specificity is to start styling elements with tag selector (type selector) to make easier in the future to override any style, since tag selectors have the lowest priority when styles overlap.
Further more, there is tremendous abuse of CSS classes in HTML especially due to the ignorance of CSS selectors by programmers.
Please, try not to over-engineer with CSS classes and set some styles with tag selector whenever possible.
Why don’t we use CSS libraries like many webs do?
Probably there are some CSS libraries to accomplish the Ubuntu default GNOME sytle. But as you have seen with too little CSS we can improve a lot our HTML and achive an unique beautiful style.
Believe me, among HTML, CSS and JS, CSS is the easiest one. Don’t be afraid to test things.
Nowdays, Chrome and Firefox devtools allow you to use an interface to generate CSS on the fly directly for your web apps and pages.
3 Simulate Click Events in CSS
Last but not least, yes we can simulate clicks with CSS to cope with the show/hide effect of the password part. Nevertheless do it only when you wanna show your UI without no JavaScript at all because it’s a kind of tricky.
You need an invisible input checkbox and a label around what we wanna click on to simulate the click effect.
<input type="checkbox" id="click">
<label for="click">
<g-user>
<g-avatar></g-avatar>
<g-name>Darlene Alderson</g-name>
</g-user>
</label>By default our <g-password> is not displayed. We show or hide the password depending if our input checkbox is :checked or not.
g-password {
display: none;
grid-gap: 10px;
margin-bottom: 25px;
}#click:checked ~ g-password {
display: grid;
}
Further insights
You can check the Pen to have all the CSS details. I wanted to change the caret but there is no much support for that in CSS yet.
Try to create any login you want, replicate one or use the power of your imagination to innovate 😊
★ If you love Semantic HTML and CSS as I do, you can also check how to recreate the Ubuntu Terminal.
Keep in touch
Do you think all operating systems should support CSS styling by default? What are your thoughts about semantic HTML? Leave a comment to let us know!
And if you want to know next time I publish something, you can also follow me on Medium. Don’t forget to hand clapping (Flamenco style) 😊
T-Shirts
★ Now you can have some of my coolest T-Shirts for programmers, check it out!
