Welcome back to part 3 in this series where we are creating our own little twitter clone. In the last post we got our main functionality working, we are able to create new status/tweets, edit them and delete them. This week we are going to make our application specifically the MyProfile page somewhat resemble twitter as at the moment it looks quite bad.
Disclaimer: Its been a while since I did full blown CSS and it has changed quite a bit so I wouldn’t be expecting anything amazing but I wanted to get back into learning more and more CSS hence this post. If you have any tips please post a comment
Anyway enough of me cover my ass 🙂 lets get started…
So first thing I did was I opened my twitter profile page so I could get an idea on how to style our profile page.
So just by looking at the profile page and inspecting some of the elements of the page the layout seems to be
- Navigation bar: It is a sticky navigation bar that follows with you as scroll.
- Jumbrotron: A jumbotron image that takes up a good amount of the viewport and goes from edge to edge.
- User profile image: A users profile image with approx dimension of 250×250 with rounded corners. It also seems to have a negative margin to it sits nicely into the jumbrotron.
- User statistics: How many tweets they have, how many they are following etc. ( we wont be implementing this yet)
- User details fields: All of the users details are just below that in a column.
- Tweets list: A list of all the tweets from the user(or which ones they Favorited/retweeted etc) in another column
- Who to follow list which is another column of people you might be interesting in follow( we wont be implement this yet)
So after identifying the elements that make up the page we can decide how the layout is structured, in twitter case its very simple row and column layout ( exactly what twitter “bootstrap” uses what a coincidence ;). In our case we are going have:
Navigation bar – which is top row
Jumbotron – which is one row
User profile image and User statistics – will be one row with 3 columns
User details, tweets list and who to follow list – will be a one row with 3 columns
So this gives us: 2 rows with 1 column and 2 rows with 3 columns.
So let’s get started, first we will get our HTML structured then we will worry about the CSS.
So first thing first let’s add the sticky navigation bar luckily bootstrap has got us covered on this via fixed top nav bar. I took the sample they give here
and make it my own.
Let’s give it a test by scrolling and make sure it stays with us.
Right now onto the Jumbotron again bootstrap makes this easy with the .jumbotron class:
Might be wondering why we have an empty container according to the docs: “…to make a jumbotron full width put it outside any containers”. I also I left it there so if we can anything into our jumbotron later.
Note: I had an issue that no matter what i tried I couldn’t get the jumbotron to go full width then after some digging around I found that express-generator adds 50px padding to body.. Ya so once I removed that it worked:
So we now have our navigation and jumbotron looking good, now onto the main sections of the page.
Firstly let’s code the user profile picture and statistics row. As we said it’s going to be a row with three columns of about equal length…for now though we are going to just have two columns (as we need to leave our textfield in so we can create new statuses) we will convert this into three columns in the next tutorial. So the code for that would look like:
As you can see we only have the user profile picture column filled in as the user statistics column content will be added in another tutorial. Again we are using the bootstrap grid system via .col .row classes. So here is how we look now:
Next let’s layout the final row for the user details, tweets and who to follow list:
Note: Again instead of having 3 columns at the moment we only have two we will add the third column later
Let’s see how it looks
Right we have all our HTML coded, we have our profile page structured exactly the way we want so let’s start customizing.
We are going to customizing in order the elements appear on the page:
Navigation – No styling needed yet
Jumbotron – so the default styling for the jumbotron in bootstrap is pretty good. However to make it fit our theme we are going to overwrite some of it:
So we set:
– background image to a placeholder image
– set a predefined height (it might be better to set this as max height but we can come back to that)
– Center our background position and size
Profile pic div
we already have a placeholder image in the HTML so we don’t need any background image tag what we need to set is:
– A negative margin so our profile picture moves a bit into our jumbotron
– Align everything to the center
Profile pic CSS:
So we are setting:
– solid white border that is 5px thick and has a radius of 25px (gives it rounded corners)
– We are also setting a predefined height and width so the big images don’t get out of control.
Let’s take a look at how our profile page looks after them changes
As you can see it is starting to look somewhat like Twitter:
Right onto our last row and last bit of css:
User details column:
So we have aligned the text to the left and have some margins to make it line up just the way we need.
This is probably the most “complicated” css we have to write since we want to get all our statuses and buttons aligned.
So are customizing multiple elements most of these are self-explanatory so to keep this post short I am not going to explain everything.
As you can see I am using a lot of inline floats to get our elements in position and exactly the way we want. This is probably not best way to format it and there is more than likely a better way but this worked for me. If I find anything better later I will mention it. (BTW its never a good idea to have inline styles we will pull all these out later)
So that’s it, all our CSS is done let’s take one last look at our profile page:
Not too bad if I do say so myself, I hardcoded the URLs to my images on Twitter so I could do a better comparison. Our profile page is not an exact replica but it very closely resembles the twitter users profile page.
I hope you guys enjoyed following the post, surprisingly I really enjoyed making it and getting back into CSS. I found it really fun trying to replicate another website and learning how they did certain things. That’s all for this week join me next week where we will continue on in our project.
P.S Because of our styling and additions of a few more divs the editing status functionality is broken, I will show you how to fix that next week 🙂