Responsive Windows Login page UI Tutorial— Part 2

*Originally posted on Medium.

Who’s ready for part 2?

In part 2 of this tutorial, we will be making the Windows Login page responsive using SCSS variables, mixins and media queries. Confused? Don’t you worry. You’ve got this! As always, this tutorial is beginner friendly. Enjoy! :)

If you haven’t already, check out part 1 of this tutorial to know how we structured, styled and animated the login page.

SCSS Variables (for screen sizes)

//Variables
$mobile-width: 340px;
$tablet-width: 500px;

The beauty of SCSS are its features and one of those features is variables.

So what are SCSS variables? They are basically a method of storing information that can then be reused throughout your stylesheet. To make something a variable, you use ‘$’ followed by the variable name and the information that you want to store in that variable.

To begin the process of making the login page responsive we start by using two SCSS variables, $mobile-width and $tablet-width, to store the widths of the devices we want the login page to be responsive to. Here, we’ve set the mobile-width variable to be 340 pixels and the tablet-width variable to be 500 pixels.

Media queries (using mixins)

//Mixin - Media queries
@mixin mobile {
   @media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width - 1px}) {
     @content;
  }
}

The next step is our media queries. We will be using the variables that we declared earlier together with a mixin to make our media queries easier to work with as well as improving the readability of our code.

We’ll start with the mixin, which have the media queries nested inside. We define our screen sizes within our media queries using the variables we declared earlier. With @content, it gives us the ability to pass blocks of content to our mixins.

To translate, we have a mixin called mobile which contains a media query which says that between the mobile-width (340 pixels) and tablet-width (500 pixels), this block of CSS rules should apply.

Applying mixin using @include

@include mobile {
  #login-page-container {
    font-size: 12px !important;
  }
  #login-page-inner {
    width: 300px !important;
  }
  #user-image-container {
    width: 110px !important;
    height: 110px !important;
  }
  .fa-user-o {    
    line-height: 110px !important; 
  }
  #password {
    width: 200px !important;
  }
}

The last thing we need to do is to apply the mobile mixin which contains our media query that applies to devices with a screen size between $mobile-width and $tablet-width. We do this using @include and passing the CSS rules that we want to apply within it. Our aim is to make the login page components smaller when the screen size is between the sizes we declared in our mobile mixin earlier.

For any screen sizes that are different from the screen sizes we declared in our mobile mixin, the CSS declarations that we typed in our stylesheet earlier in part 1 apply.

You’ll see the term, !important, after the CSS declarations we make in this section of our stylesheet. The term ‘!important’ is a rule used to override any previously assigned CSS declarations that were set in a stylesheet.

We start by changing the default font-size for #login-page-container from 16 pixels to 12 pixels.

The width of #login-page-inner is set to 300 pixels and for the #user-image-container, we set the width and height to 110 pixels. We set the line-height of the user icon, .fa-user-o, to 110 pixels so that it is centered vertically within the newly sized #user-image-container. Finally, we give #password a width of 200 pixels.

And that’s it! In the GIF above, you can see how our login page responds to different screen sizes.

For easy access, I have gathered the pens in this two-part tutorial and put them in a collection on Codepen. You can check it out here.

I hope you enjoyed part two of this tutorial! Till next time! ✌️