Social Network Theme / UI With Sass

Social Network Theme With Sass – Part 4

alright guys welcome to I think this is part 4 and hopefully this is the last video I'm gonna try to squeeze in the rest here there's not too much we have

to do as far as CSS we've done most of it aside from the responsiveness which really isn't that much either so we do have a couple other HTML pages to create one is the dashboard so let's go ahead

and do that so in dist I'm going to create a file called dashboard dot HTML and let's grab our boiler plate here and let's paste that in ok so we have our navbar we're gonna have our container

with our heading I'm just going to change this to dashboard and for the text here actually for the know we'll use it we'll leave the user icon but for the text let's just say like welcome

John Doe so we'll welcome the user and then under that we're gonna have some buttons I'm gonna just put this put these in a div with the class of – – will do – BTN our buttons buttons ok and

then within here let's go ahead and create a link I'm going to give us a class of just BTN and this is going to go to create – profile dot HTML but the text is gonna say edit profile this is

basically the same form within the real application we build it's the same pretty much the same HTML so that's one actually we want to have an icon within this a tag so let's actually just put

this on a new line and then we'll put an icon right here so this is going to be FA s and then FA – user – circle and then I also want it to be the text primary color so I'm going to also add

text – primary like that okay so just to see what it looks like if we go to the landing page and hit the logo here we'll see our dashboard and there's our button

so I'm gonna copy this a tag just copy it down twice so we're also going to have an ad experience and let's do an ad education and we're just going to change up these icons so this ad experience is

going to be FA – black – Tai and then this one is going to be FA – graduation cap so save that looks like that let's see F a black tie that's actually an F a B icon there we go okay so those are

buttons now underneath that we're gonna have some tables with our experience credentials and education credentials so let's go under the buttons the – buttons here and let's put in h2 I'm gonna use

my – to give it some margin and I'm gonna say experience credentials and then underneath the h2 we're gonna have a table and I'm actually going to give this a class of table and then within

the table let's put a tea head some basic HTML here table row and then our table headings we're gonna have company and let's see the last one is for the button so that's gonna be blank the

second one is gonna be the title and then this one is gonna be the years now I'm gonna have a special class just to make this table look good on mobile devices I'm gonna have a class called

hide – SM which is going to be it's basically going to just hide whatever is in it on smaller screen I'm gonna make it do that later on so let's add it here as well because if we

have too many table columns it's gonna look it's not gonna look right on mobile devices all right so that's our head and now we need a body so let's do T body and we're gonna have our table row our

columns so this first one is the title let's say traversing media go ahead and copy that down so this is gonna be the what is this the title so I'll say senior developer and this is also going

to have that hide class all right and then we're gonna have this one and this is gonna be the years so I'm just gonna do like zero two I'll actually wait a minute this is John Doe let's actually

make it make sense so we'll say we wanted to say the same stuff that's on his profile and let me see what so for years we said October 2011 to current so just do that and then we want a delete

button so let's do another column here with a button and we're gonna give this a class of BTN and BTN danger and let's just say delete okay we'll go back all right now the

table looks pretty crappy but we're gonna add a little bit of styling later now I want to have two two experiences here so let's see what I want to do let's just grab this TR and let's put

one directly under it and I'll just change this to Sun Microsystems okay so now we have two experiences now education is going to be pretty much the same so what I'll do is copy let's copy

from this h2 down to the end of the table and we'll go under the table and we'll paste that in and change this to education credentials and say we're gonna have school so we'll have school

will have degree and years and then I'm just going to change this to what I say university degree and years like I said like 1999 all right so we'll just have one

education so I'll get rid of the second row okay so let's save that good now the last thing that I want to have here is a delete account button so I'm gonna put

that under the table let's do a div with the class of my to give it some spacing on the top and bottom and then a button and it's gonna be BTN BTN danger and let's put an icon it's going to be FA s

and then FA – user – – and then next to that we're gonna say delete my account there we go okay so let's see for the table we'll put that in utilities because we might

use tables you know you might use tables somewhere else so let's go – where are my SAS utilities and we'll put this guess we'll just put this down at the bottom doesn't really matter I guess so

let's say class table all I don't want a style is the the th and the TD so it's a take class of table th and class of table TD actually we could just do th and TD okay we'll just do padding one

REM and let's text a line everything to the left okay so save that and that kind of spreads things out a little bit and the th the table headings I want to have a

background so I'm gonna say for just the th let's do a background of the light color there we go okay so I think that looks pretty good so that's our dashboard now all we really have left

are the form no we have the post – I forgot about that and since we're logged in now we actually have a different navbar so we're gonna have to address that so

let's go to dashboard HTML let's go up to our navbar alright so the nav bars is gonna have in addition to developers let's see so we have developers we don't want register

and login we do want posts so we'll say posts change this to post on HTML and then we're also going to have dashboard but what I'm gonna do here is let's say

let's add our link okay so we have our link and then inside here I'm gonna have an icon for the dashboard so I'm gonna say I FA s and then FA – user and then I'm also gonna wrap the text in a span

with that hide SM because I don't want to show the text because I want it all to fit on mobile devices so let's do a span with the class of hi – SM okay we just want to wrap oops I just want to

wrap a dashboard here and close that all right let's save that okay so it looks like that now with the logout I want to do the same type of thing with an icon so I'm

gonna copy that Li and this will just go – we'll have it go to login HTML and then let's change the icon to FA – sign out alt okay and then we'll just say log o and if we save now we have the icon as

well all right so that's that's pretty much the navbar we're going to use for the rest of the pages so I guess what I'm gonna do is take that now bar and put that in our boilerplate

there okay so next thing is the edit profile our creates actually create profile so let's create that file so create dash profile dot HTML and let's grab our boiler so copy that and paste

that in alright so for a create profile it's it's a pretty big form so I'm probably going to do some copying and pasting so if you guys want to pause the video and copy it or you want to get it

from the description you can do that but let's start let's see right below the navbar and we're gonna have this just say create your profile and here let's say let's get some information to make

your profile stand out alright so I'll save that and underneath that I'm just gonna put a small tag and I'm gonna notify the user that an asterisk is equal to required fields so that they

know that they have to fill those out alright so we have quite the form to put here so I think what I'm gonna do is just paste it in and then just go over it real quick so you guys can copy it or

if you want to grab it from the code in the description you can do that as well but let me just paste this in and let's just go over it it's basically using all the styling we've already added it's

using the form class so as you can see right here and then each field is wrapped in a form group we have a select I did give these names although it doesn't really matter for this this is

just the the interface but we have some options so value 0 select professional status just kind of a label that we just have all the different options alright and then we

have a small tag with the class of form text that just just has some information most of these fields do so then we have a form group with the company we have the website we

have the location so all of these just kind of have some helper text we have the skills which is just telling you to put a comma-separated value in the actual course we take that and change it

to an array in store in the database github username so if they wanted to you know have repositories on their profile they could put in their github username what else we have the text area which is

the bio right here and then we have this add social networks link button but it's not going to be functional obviously this is just HTML and CSS in the course this is this stuff is hidden by default

and then you click the button and this stuff shows all right and then each each one of these has a class of form group and social input so that's something we're gonna have to add to our CSS and

then we just have the social media icons and an input for a twitter facebook youtube linkedin and instagram and then at the bottom we just have a submit button and a go back button why is this

submit button smaller than the go back let me just check something out here margin padding padding is good oh it's the font for some reason this impetus button isn't the railway font doesn't

look like alright so we'll have to fix that so let's um let's jump into our forum s CSS file because it's we're gonna put this stuff and for the submit button

what I'll do is make sure I'm within the forum you know we have the forum wrapping everything a forum class so I'm going to take the input with the type of submit and I'm just gonna say the font I

want to inherit so let's save that and let's check it out there we go so now it's the same font and now it's the same size so for the social stuff let's go right here and let's say social input

and what I want to do is align the icon with the the input so I'm actually going to use flex here I'm going to the social input I'm gonna say display flex and if I save it you'll see that it's going to

just align them together now there's some things I want to do with the icons in particular so I'm gonna just grab the icon and add padding 0.5 REM instead of width of 4 REM so I'll save that and

that just gives us some space and what I'd like to do is just use the actual colors of these these logos so I have those I'm gonna grab them and paste them in so within this eye tag here I'm gonna

go ahead and do that and just take each class and add a color of that of basically the branding of each one so if I save now we get the nice colors of each

each icon or each brand alright so that looks pretty good I think we're all set there and we're all we should be all set with the form s CSS file so now let's do the

let's see if we go back to the dashboard we need to add experience and add education so I'm going to create both of those files so we'll say add – experience dot HTML

and let's also create add – education dot HTML so we'll go to experience and I think what I'll do is just paste this in because it's I mean it's it's all stuff that we've already gone over it's just

going to be really repetitive so let me just grab that actually one second we make sure this is correct yep so we'll just grab that paste it in and I'll just go over it so same navbar

all that stuff's the same and then we just have our h1 without experience you can see how things are pretty consistent on each page and that you want to keep that in mind when you're creating any

kind of website or UI so we have our lead we have our text here small tag with required fields with class of form and then just the different fields so job title company location we have the

dates and notice we're using the type of date here for from and – and then we just have a checkbox for the current job all right and then we have a text area for the description we actually don't

need BTN light here alright so I'll save that and we'll go to add experience what the he'll hold on oh I have that going to create profile so in the dashboard I just need to change my links up here and

this should be at education all right so now if we go whoa okay so in my out experience I just have the wrong CSS up at the top here I need to do dot min because initially I wasn't using that

all right so that's the out experience okay so the add education is gonna be pretty much the same thing so let me just grab that real quick and I eyes I hate copying and pasting I really do but

there's a lot of HTML in this project so and it gets very repetitive so if we're not doing anything that's that's different I don't see why not you know so let me just paste this in

and let me fix up the link here to dot min all right so if we save that and go to dashboard add education it's basically the same form so to show you real quick so school degree

field of study form not from date to date and notice the dates have the little drop down here and then we have the checkbox for current school text area and button which we don't need

button light and that's pretty much it alright so the last thing we have of a posts one thing also I had was this little this border right here I didn't put that in the other pages so if he

want that you can keep it it's just right here inside this Li with the dashboard but I'm going to get rid of it on both on both the ad education and at experience alright so now we just have

the posts so I'm gonna close up these HTML files and we have two more files to create so one is going to be want to be inside dist one is going to be posts dot HTML and then one is going to be post

dot HTML so we're going to start with posts and we'll go ahead and grab our boiler and paste that in here why is this I don't know why this isn't copying all

right so this is our post page and we want to put see we have text primary let's say and here I'm just gonna say posts and then for the text let's say welcome

welcome to the community alright so underneath the paragraph we're gonna have a post forum so I'm gonna give this it's going to be a div with the class of post – forum and we're gonna have a post

form header and I'm going to give this a class of BG primary and in here I'm just gonna put an h3 and I'm gonna say say something ok let's save this and let's go to our post page okay we're gonna add

a little bit of styling to this after so underneath that we're gonna have a forum underneath this this div right here so let's do forum it's going to have a class of forum and I'm also going to do

my one add some spacing we don't need an action and then inside the forum here we're going to have just one one field and a submit so a field is going to be a text area and I'm just gonna give this

see we don't need a name or an ID and I'll do call I'll just leave the calls at 30 let's do five rows and let's add a placeholder so placeholder we're gonna say creates a

post okay and then right under the text area we'll put an input with the type of submit and we'll just say submit and let's add a class I'm gonna do BTN dark and then my one I want in that work oh I

put an extra – there we go okay so underneath the form we're gonna have the post so we're gonna have a class of posts and inside there each one is going to have a class of post BG

white and my – one okay and basically we're going to use the the grid here just like we did with the developers or we kind of align things so we'll have let's see we're gonna have a few

different items one will be a div and we're gonna have the image the profile image but we're gonna wrap it in an a tag that goes to profile dot HTML so let's put an image here and I'm just

going to copy from let's go to let's see and go to profiles and I'm just gonna copy this oops put that right there okay so let's see we want to go right under the image still within the a tag

and let's put an H for and let's put the name John Doe all right and then we want to go outside of this div okay so that's gonna be a grid item and then we want another div and in here we're gonna have

a paragraph with the class of my 1 and this is gonna be like just the post text so I'll do let's say lorem 30 let's close this up okay so there's the text and then we also want to have some

buttons we want the like button and stuff like that so let's do button let's say class BTN and let's do well let's just do BTN we'll keep it gray and this is going to have inside of it and thumbs

up icon so we want a class of FA or FAS and a class of FA – thumbs – up and then I'm gonna have a span here that has the number of likes I'll just put 4 ok and then what we'll do is just copy this

copy that down and we're gonna have a thumbs down okay but there's not gonna be any count so I'm gonna get rid of this span all right let's save that so there's our thumbs up thumbs down and

then we just want a a link to the post HTML so let's put an a tag here that goes to post dot HTML and we're just gonna say here let's a discussion like that and actually let's give this

a class of primary alright so that's a post now I'm just gonna I want two of them so I'm gonna copy the div with the class of post which ends here and we'll grab that and let's put one right

underneath and we'll save okay so now let's style this thing so we're gonna go into C styles and down at the bottom let's say posts page and we want first the header so I'm going to do post form

– header I definitely want to add some some padding to that so let's say padding 0.5 rim okay I make that look a little better and then for the post class which wraps each each post we're

going to use the grid for this to align this stuff so let's say display grid and we're going to use grid template columns and I'm going to do one fraction and then four fraction okay so I save that

you can see that the first item which is the the div with the image and the name is one fraction and then the the text and all that is for okay let's add some grid gap I'll do two REM and then let's

align the items to the center okay and let's see let's let's take this first div and make sure that we text-align:center I don't want this text-align:center just this like the

name so within here let's do and ampersand let's say the direct div first child and we want to text text align that to the center okay there we go

why is no padding I thought let's add padding here there we go and the image you just pull this so the image kind of shrinks and grows I'm gonna I'm gonna make the image just stick it stick to

150 pixels so in here let's say the image let's do a width of 150 pixels like that so that it stays that size all the time okay so we have our post page now we're gonna have the individual post

page as well so if I click discussion it takes us to post HTML so post HTML has a lot as all the same styles there's no new style so I'm just gonna paste in the HTML but let me just find it real quick

all right so I'm gonna paste this in and just fix up a couple things here the link to the CSS and they just want to take that that pipe character away so let's save this and this is what it's

going to look like and basically it's just taking the components we use from the on the post and just kind of rearranging them adding a couple more so if we go down a little we have our back

two posts we have our div here with the class of post so this right here is the same exact element as this except it just doesn't have the buttons within it okay but the styling is the same okay it

has the class of post BG white and padding and stuff oh you know what that's why I forgot the p1 so in in the style right here for post I'm gonna get rid of this padding one room and if I go

back to post you'll see that there's no more padding that's because I forgot to add the p1 post HTML I'm actually gonna just see right here we want to add P – one for

that and for this one as well P – one there we go just to be consistent alright so back to post HTML okay so at the top we have that and then we have the form which is right here so same

same styling same class post form post form header then we have our text area and then under that we just have two more posts okay so if you guys want to copy that or if you want to just grab it

from the file that's fine okay so that's pretty much it as far as as far as you know fullscreen now we need to deal with with the responsiveness of it which isn't too bad actually there's not

there's not that much to do but let's open up our dev tools and let's use the device toolbar here so I'm just gonna go back to the home page and whoops why'd I do that

just want this smaller actually you know what I'll disconnect this okay so I mean this doesn't look too bad I do want the text to be smaller but I will mend doesn't look good obviously so let's

let's address that now the way that I'm gonna approach this is I'm gonna have a special sass file for mobile so I'm gonna just create a new file here called underscore mobile dot s CSS okay now

when I bring this in I actually want to bring it into the bottom of style dot s CSS that's what I wanted to basically put everything so because this is where is basically our media queries

let's do at import media okay and then we'll go not media mobile so in our mobile SCSS let's add a media query and basically all I'm going to say is anything that's under 700 pixels so

let's do a media query for the max width of 700 pixels so basically whenever the browser is less than 700 pixels wide this stuff will kick in so remember we have our hide – SM class so we just want

to set that to display:none when 700 pixels are less is in effect all right and then the container if we go to let's say register you see how closest is to the nav bar I mean that

we're gonna fix this now actually you know what let's do that first let's do the nav bar so initially the nav bar was set to display flex but what I'm gonna do here is take that away and just

display block okay just like that and let's text a line everything to the center and if you want to style things differently I probably should have said this in the beginning if you want to

style things differently feel free the UL which is the the menus we're gonna also text align to the center and we're gonna justify content remember the UL is still flexbox so we're gonna use justify

content center there and that pushes everything to the middle ok the h1 which is the logo I'm just gonna have a margin bottom because those are very close together so margin bottom one RIM push

that down a little bit and yeah that should do it let's see so if I just want to go – yeah okay so see how we just see the icons for the

logout in the dashboard that's because of this hide SM same thing with the tables see how the tables don't look horrible it's because we're hiding some of the columns so that it doesn't

stretch out too far now this stuff here these buttons I want these to spread all the way across I think that we did we display flex or they're just side by side so what we'll do is set those to

display as a block so let's see they have a class of – buttons so let's go outside of the nav bar here and let's say – – buttons and we want the links inside of that class and we're going to

display them as block as opposed to inline puts them on their own thing there let's just make the width 100% and let's make a margin bottom so that they're not right on top of each other

and there we go so back to the Container I want to just move things down so I'm gonna go right here say container so the container has a margin top of six R M by default but I'm gonna make it 8r m on

smaller screens with this nav bar because it's nav bars has a you know it's bigger so it saved that and now that pushes it down okay another thing is the text Styles like this is too big

so let's say text styles and let's do extra-large so initially this was I believe for R M so we're gonna set this to 3 R M so I'll save and now you can see that smaller and let's do the same

for a large so large we're going to set in the font size from 3 to 2 R M and then for lead which is that paragraph right there we're going to set the font size from 1.5 to one just one like that

all right so we're almost there let's see if we go to developers that doesn't look very good so I'm gonna basically just stack all this stuff here remember this is the this is the we're using the

grid so let's go just go out here and say profiles so the class of profile is already display grid but I'm gonna change the grid template columns to just one fraction 1fr that way everything is

on just one one row all right and then I'm also gonna hide the skills just because this is just too long so I think that we should just hide the skills so I'm gonna actually didn't let's Center

everything too so let's do text align Center and then let's take the UL which is the skills there and let's let's do a display:none okay so that looks pretty good

now we have to do the profile okay because obviously this is not this doesn't look good and if you remember we use grid template areas and all I'm gonna do here is just change the

orientation of the grid template areas so let's take the profile grid because that's where that's the class we added the grid to and let's say grid template areas now so I'm just going to go on the

next line here now initially we had like top top about about and then we had exp and edu on the same row alright so what I want to do now is just stack everything so we just want one column

here so say top about and then experience and then edu and then github now when I save that this still doesn't look right it's going off the screen it's because of the skill set right here

these the the skills it there this is flexbox and it's in a row so it's basically stretching the content oh so all we have to do here is grab the profile about skills well I guess we'll

just do that skills and we can just change the direction from a row to a column so let's say flex direction column and save and now everything is in place all right it

looks like I forgot a padding class on this last repo so I'm gonna go back to profile HTML and let's see what I missed so p1 yeah this last one I forgot my p1 class there we go alright guys so I

think that's it actually pose let me check out posts yeah we need to fix this so this is simple whenever you have a grid where you use grid template columns basically to make it responsive you just

need to set the grid template columns to one fraction so it's just it's just stacked all right so in mobile let's go down to the bottom here and let's grab they each have the class of post okay

it's already displayed grid we just need to change the grid template columns to 1fr like that and save and now it's stacked let's see this stuff here let's change the padding so that this goes

straight across so we'll grab the a tag and and button within the post and set padding to 0.3 REM and 0.4 rim there we go so that way as less padding and it can go across like that and if you want

to mess with it some more you can do that but I think this looks pretty good alright cool so let's get rid of this I just want to put this back ok so that's it guys we have created a nice little UI

I can't get back to the home page though so if you want to add a home link or do something with that you can but or just do that but that's it hopefully you guys enjoy this little

series and if you're interested in making this actually function into an actual application you can check out the Martin stack course where we use X node Express react redux MongoDB to make this

into an actual functional application alright thanks for watching guys and I'll see you next time

In this part we will add the rest of the pages, finish up the utility classes and make the site responsive with media queries

Code:
https://github.com/bradtraversy/devconnector_theme_sass

MERN Course With Full App:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Follow Traversy Media:
https://www.facebook.com/traversymedia
Posts by traversymedia
https://www.instagram.com/traversymedia