Advertisement

Finishing Off the Merry Christmas Web App Interface

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!


The Story so Far

You may need to catch up with previous parts of this tutorial, in which case:


The Message Content

.message-content {
  width: 100%;
  color: darken($grey, 30%);
    @media screen and (min-width: $break-two) {
      width: 75%;
      float: right;
    }

    @media screen and (min-width: $break-three) {
      width: 85%;
    }

    @media screen and (min-width: $break-four) {
      width: 75%;
    }

The declarations for message-content make sure the width behaves itself when the browser resizes. We need it to be 100% wide for small screen sizes so it sits nicely under the image. Once we hit our $break-two width we then need to float the content right and pull the width in slightly to compensate for that.

The other break points here just make sure the width scales nicely in relation to the browser width, so on a tablet-esque resolution our message-box is still stacked vertically but our message-content is floated inside of it which means the 75% width probably isn't wide enough. We pull it back to 75% width once we get to desktop-based sizes to account for message-box being floated and narrower.

    a {
     color: $green;

      &:hover {
        color: $red;
      }

    }

    h3, p, div {
       margin: 0;
    }

    h3 {
      font-family: $title-font;
      font-size: 200%;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: $black;
    }

    p {
      color: $red;
      font-weight: 600;
    }

    div {
      margin-top: $margin;
      overflow: hidden;
      -ms-text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
    }
}

The next styles here are really simple. We are just giving any links a $green colour with a $red hover state and overriding any margins set on the h3, p and div elements contained within message-content. The individual styles for the h3, p and div elements are a bit more fancy. The h3 is set to use $title-font and has some letter-spacing set to just pull in the spacing slightly to more closely match the design. The div tag styles are all about keeping the contents contained, so we make sure the overflow is hidden and if there is any overflow we show an ellipsis to indicate there is more text. This kind of thing can be done with server side code (and probably would be) but it is nice to include it here in the CSS for the purpose of this tutorial.

Save your work and head on over to the browser...

building-xmas-web-app-18-message-content

That is looking awesome! We have three slightly different layouts going on, all of which are controlled by the simple styles above. That completes the CSS for the message-box so all we need to do now is copy the markup five times and change the content based on the design. If this app were to function for real we wouldn't need to do this, but for this tutorial needs must! Give yourself five minutes to copy, paste and change the code for each box.

Let's just take another quick look in the browser to check our styles are working perfectly when we have more than one message-box...

building-xmas-web-app-19-multiple-message-boxes

Beautiful! Our web app is definitely taking shape now and our message boxes are working as intended at all browser sizes.

We have conquered most of our web app now, but there is still one important section left: the footer. This part of our app is important as it houses the place a user can type/post their message. There are some fairly tricky bits to this, so let's get started!


The Footer

First things first, let's write the following markup in our index.html file:

<footer>
  <h4>Thank your Family, Friends, Followers</h4>
    <div class="connect-box">
      <div class="connected-as group">
        <img src="images/faces/jl.jpg" class="connected-image" alt=""> <span>Connected as @tomaslau</span>
        <a href="#" class="disconnect btn btn-grey">Disconnect</a>
      </div>

      <form action="" method="post">
        <div class="connect-message">
          <textarea name="connect" id="connect" cols="30" rows="10" placeholder="Type your message here to your friends, family and followers"></textarea>
        </div>
        <button id="postBtn" class="post-btn">Post 'Thank You'</button>
      </form>
      
      <div class="social-buttons group">
        <a href="#" class="social-btn twitter">Tweet the Love</a>
        <a href="#" class="social-btn facebook">Share on Facebook</a>
      </div>
      <div class="copyright">
        2013 &copy; Crafted with Love in London.
      </div>
    </div>
</footer>

There are a few sections to this footer. The main area of focus is the form in the middle which, although not necessarily needed here, will allow the user to post their message. The social-btns will need some layout changing styles and all of the footer content must be centered on the screen. Let's start at the top and get straight into the CSS...

footer {
    padding: $padding*4;
    text-align: center;
    background: $white;

    h4 {
        margin-top: 0px;
        font-family: $title-font;
        font-size: 26px;
        font-weight: 400;
        color: $darkgrey;
    }

}

First of all we should set some padding on the footer to push everything away from the edges nicely. To get everything centered on the screen we just set the text-align property to center. The styles for the tagline/heading here are quite simple and are very similar to what we have done before for a title. Let's check this out in the browser!

building-xmas-web-app-20-footer-styles1

It's a good start but we still have a way to go! Let's carry on in our Sass file.

.connect-box {
  width: 100%;
  margin: 0 auto;

  @media screen and (min-width: $break-three) {
    width: 525px;
  }
}

.connected-as, .connect-message {
  background: lighten($grey, 4%);
}

Like many of our elements, the connect-box should be 100% wide for smaller screens. It should then switch, at our $break-three point, to the width seen in the design which is 525px. We then set the background colour of the connected-as and connect-message to a light grey colour.

"Connected As" Section

.connected-as {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom: 1px solid $white;
     text-align: left;
     padding: $padding/2 $padding*2;

     .connected-image {
         width: 30px;
         height: 30px;
         border-radius: 50%;
         float: left;
         margin-right: $margin/2;
     }

     span {
        float: left;
        height: 30px;
        line-height: 30px;
        color: $darkgrey;
     }

     .disconnect {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: $padding/2 $padding;
        margin-top: 3px;
        border-radius: 20px;
        background: $white;
        text-decoration: none;
        color: $darkgrey;
        text-transform: uppercase;
        font-size: 80%;

        &:hover {
           background: $red;
           color: $white;
        }

        @media screen and (min-width: $break-two) {
           position: static;
           float: right;
        }
    }
}

This fair chunk of CSS is for the top section of our connect-box. The first step is to round off the top right and left of connected-as. We also want a slight separation between this box and the section below, so a simple 1px solid $white border will do the trick nicely. Lastly, we need some padding, but we need more on the left and right than we do on the top and bottom so to keep things nice and neat we simply use our $padding variable and divide by two for top and bottom, and multiply by two for the left and right. This is a great example of where changing our variable value will still keep everything in proportion nicely.

Twitter Details

The next two declarations control the connected users' Twitter profile image and their @username. To keep things standard we set the width and height of the image in the CSS so we know it will always be a square of the correct size. To make it appear as a circle simply apply a border-radius of 50% to it. Both the profile image and @username should be floated left and we should give the @username some margin to push it away from the profile image.

Disconnect Button

The disconnect button has a few different things going on. At small-screen resolutions we need this button to be out of the way of the other text inside this box, so I decided a good option would be to absolutely position it just above and beyond its container. A position of -10px for the top and right is fine. You may wish to play around with this if you think it could be better placed. The other styles here control the look with a simple hover state adding a nice bold $red colour to emphasise the disconnect action. The one bit of responsiveness here will just kick the button back into the document flow and float it right so it sits opposite the Twitter details. This will happen for anything at and above our $break-two point.

Save, save, save! It's time to take a look again:

building-xmas-web-app-21-connect-box1

Looking good! We are getting very close to getting this finished now. Next up is the message box area.


The Message Box

.connect-message {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  textarea {
    border: none;
    background: transparent;
    width: 100%;
    height: 130px;
    padding: $padding*2;
    -webkit-transition: box-shadow 0.4s ease;
    -moz-transition: box-shadow 0.4s ease;
    -o-transition: box-shadow 0.4s ease;
    -ms-transition: box-shadow 0.4s ease;
    transition: box-shadow 0.4s ease;

    &:focus {
      outline: none;
      -webkit-box-shadow: inset 0px 0px 20px darken($grey, 10%);
      box-shadow: inset 0px 0px 20px darken($grey, 10%);
      -webkit-transition: box-shadow 0.4s ease;
      -moz-transition: box-shadow 0.4s ease;
      -o-transition: box-shadow 0.4s ease;
      -ms-transition: box-shadow 0.4s ease;
      transition: box-shadow 0.4s ease;
    }
  }
}

This block should be placed after the connected-as block, but still inside the overall footer declarations.

The connect-message box has rounded corners on the bottom left and right to complete the appearance of the overall container having rounded corners. The textarea itself definitely needs some styling as browser defaults are down right ugly! These styles are fairly simple, but you can see we are adding a CSS Transition for box-shadow. The design didn't show what a focus state should look like so I decided to have a subtle shadow fade in all the way around the inside of the box. It then fades out when focus is lost.

Let's see it in action shall we?

building-xmas-web-app-22-message-box

I think that looks pretty good! The box-shadow may not be to your liking, so play around with that to get something you feel is right.

Post 'Thank You'

.post-btn {
  width: 100%;
  text-align: center;
  padding: $padding*2;
  margin-top: $margin*2;
  background: $green;
  color: $white;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;

  &:hover {
    background: lighten($green, 10%);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
}

The all important Post 'Thank You' button! Quite simple styles here. The button should just fill the width of the container at all times. It should also be pushed away from the message area a bit, so some margin-top helps us here. We have another transition declaration, but this time it is set to all in order to animate every property that has a value change to keep everything smooth. This also means that in the future we can add other styles like a color change on hover and it will all still be animated.

Save the file and take another look:

building-xmas-web-app-23-thank-you-btn

Lovely. This is exactly what we want. Time to style those social media links.


Social Media Buttons

    .social-buttons {
        padding-left: 0px;
        margin-top: $margin*2;

        @media screen and (min-width: $break-three) {
            padding: $padding*3 0 $padding*3 117px;
            margin-top: 0px;
        }

        .social-btn {
            padding: $padding/2 14px;
            width: 100%;
            display: block;
            margin: $margin/2 0;
            border-radius: 20px;
            text-align: center;
            color: $white;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 70%;

            @media screen and (min-width: $break-three) {
                float: left;
                margin: $margin/2;
                padding: $padding/2 $padding*2;
                width: auto;
            }
        }

        .twitter {
            background: #00acee;

            &:hover {
                background: lighten(#00acee, 10%);
            }
        }

        .facebook {
            background: #3b5998;

            &:hover {
                background: lighten(#3b5998, 10%);
            }
        }
    }

This code should go inside the footer block in our Sass file. The idea with these buttons is for them to be 100% wide and stacked vertically at mobile/tablet resolutions. Then as you move up the scale to desktop they should match the design. The media query for the social-buttons involved quite a bit of trial and error to achieve a "centered" look at desktop sizes. The value of 117px for the left padding was the point I found to give the desired result.

Each social-btn has some simple styles to give the base appearance. We then specify the styles for each button. In this app it is just a background color difference. Note here that I have used the hex value and not a Sass variable. There is no real reason for this other than this is the only place these colours are used, so changing them would not be much of an issue. If we had the social links elsewhere I definitely would have set them up as variables. Both buttons have a slightly lighter version of their backgrounds on hover.

Before we take a look, we may as well put our final style block in place:

    .copyright {
        font-size: 90%;
        color: $darkgrey;

        @media screen and (min-width: $break-three) {
            font-size: 100%
        }
    }

As the name suggests, this block controls our small Copyright tag in the footer. The font-size responds to browser size changes here, showing 100% at $break-three.

Save and take a look at our masterpiece!

building-xmas-web-app-24-social-and-copyright

Responsive Split

building-xmas-web-app-25-responsive-split

Nice! Everything is looking awesome and that just about wraps up our Christmas Web App Interface!


Bonus

This is a heavily seasonal theme, based on a Christmas and New Year concept. With just a little tweaking you could easily change it to suit your needs, for example:

The sky really is the limit
The sky really is the limit

Conclusion

I really hope you have enjoyed working through this web app with me. It was a fun project to build and I'm happy I was able to share my techniques on how to build it. The source code is always available via the download links so feel free to dig around and let me know in the comments any thoughts you have, or if any of you guys would improve it in any way.

Thanks to Tomas for the initial design, and thank you for reading and following along.

Advertisement