Social Network Theme / UI With Sass

Social Network Theme With Sass – Part 3

alright guys so now we're gonna start to work on the developers page here which is going to be profiles dot HTML right now it doesn't exist but we're going to

go ahead and create it so let's go into our dist and create a file let's call it profiles dot HTML okay so if we visit it it's completely blank let's copy everything

that's in our board member we created resources boiler HTML I'm going to just grab all that stuff and paste that right in here okay and then we want to start within our container

and from here let's put an h1 actually you know what let's let's add a little bit to our boiler because we always in most pages we have an h1 and then a paragraph so I'm gonna put in we'll just

close this make this a little smaller let's put in an h1 with the class of large and text – primary and then we'll just we'll just say heading in large letters here and then under that we'll

have a paragraph with class of lead and usually we have an icon in here I'll just do FAS and FA – user and then usually we'll have some text here which will just change alright so I'm just

going to add that to the boilerplate so we'll just copy that make sure you save it and put that in profiles alright so the text here is gonna say developers and the icon is actually going to be

connect develop as the icon we want and then for the text we're going to say browse and connect with developers okay let me actually make this a little bigger alright so let's see underneath

the paragraph we're gonna have a class of profiles alright now this profiles class is gonna hold each individual profile listing and each one is going to have a class of profile I'm also going

to give it a class of BG – light which remember gives it a light background with a border and these these profile classes are going to be grid items so and so I should say that the profile

class is going to be the grid and then everything that's directly within it will be a grid item and there's going to be three grid items the image the div with the name and location stuff like

that and then the skills the UL with a skill set so let's do the first grid item which is the image so the image we're actually gonna have a helper class or utility class I should say of round

image so that we can make it rounded and then for the source I'm gonna go ahead and paste this Gravatar in this Gravatar URL alright now if you go to the Gravatar Doc's this is actually the

didn't like the default one this guy right here so it's this link if you want to copy this instead of you know typing this out and then I just have a parameter of s

200 which is the size the default size okay just to let you know that so that's the image now underneath the image is going to be the next item which is a div that has a few things in it so we're

gonna have an h2 with the name John Doe I'm gonna have a paragraph it says developer it's Microsoft and then we're gonna have another paragraph with the location

we're gonna say Seattle Seattle Washington and then to that we're gonna have a link to profile dot HTML which is the the single profile page and this is actually going to have a couple classes

we want BTN and BTN primary alright and we'll say view profile so I save that so far it's gonna look like that yeah so that doesn't look very good but I should actually make this bigger because we

want to be able to see the alignment and stuff so underneath that div we're gonna have a ul and we're gonna do an Li with the class of text primary because I want these to have the primary color for the

text and we're gonna have a check mark so an icon and we want to use fa fa s and fa – check and then we'll put a skill like HTML okay and then we'll copy this down a couple times and let's we'll

do HTML CSS JavaScript and Python so if I save that see the images giant we're gonna we're going to take care of that but there's gonna be two listings so I'm going to copy the whole profile div this

one right here which ends here so we'll just grab that and let's put that and paste that right underneath so now we have two listings alright so now we're gonna style this so let's go into

style dot CSS and let's see let's go down to the bottom here so under landing let's do profiles page and we're gonna take the class of profile and we want to display

it as a grid now doing that does nothing at first because we haven't defined our columns so we're gonna use grid – template oops template columns and I do have a crash

course on CSS grid if you're interested I also I should probably should have mentioned this in the beginning I have a full udemy course on HTML and CSS I'll put that link in the description so

we're gonna do fractional z' the first column is going to be two fractions second is going to be 4/3 is going to be two so if I save that now it's going to go ahead and do

that so we have the first item which is the image two fractions second is this area 4/3 is this area – okay we just want to add some other so let me see what this looks like if I I guess we can

do that so we're gonna align items here to the center as we do that you can see it aligned everything to the center let's add a grid gap as well I'm gonna put that right here grid gap which just

puts a gap in between items I'm gonna use two REM here okay so kind of separates things a little bit and then padding around the whole thing let's do one REM so it's not on the right against

the edge and then line height line height I'm going to do 1.8 and then just add a margin bottom so that they're not right on top of each other so we'll do one REM all right so I think that that's

pretty much all the round image which is utility so I'm going to go into my utilities and let's put that up at the top here I'll just go like right here so for round image we just want to set a

border radius of 50 percent and there we go so that doesn't look too bad and we're gonna make it responsive later cuz right now you know that that doesn't look very

good but we'll do that after all right so yeah that's it let's move on to the the main profile page now so in-district reate another file called profile singular dot HTML and let's grab our

boiler and paste that in whoops didn't copy okay so for the the standard profile this is probably the longest page that we're gonna have so let's go see we're actually not going to have the

h1 and paragraph in this spot so I'm just going to get rid of that and we are going to have a back button because we want to be able to go back to the profiles but one second I just want to

check what what's going on here with this icon so when profiles HTML what did I do wrong with the icon fa – connect develop which i think is right FA – connect

develop why isn't that showing up oh I think yeah it's FA be some of these font awesome classes have FA B see that that works now I'm not really sure why if anyone knows please explain that to me I

don't know the social media ones have FA B as well all right so let's see let's go back to the profile HTML and like I said we want to have a backlink or back button so it's gonna be an a tag with

BTN just BTN actually and it's going to go to profiles dot HTML all right we'll just have this say back to profiles okay we'll save this we should be able to go to the page now

when we see our button so like I said we're gonna be using the the grid system here and we're going to use the grid template areas so I'm going to go under this link here and I'm gonna have a

class I'm gonna label each part of the profile this is gonna be the top part actually let's put the grid the wrapper class first which is going to be called profile – grid and then I'm gonna do an

my – one alright so here we're gonna have the top part so this I'm going to call I'm going to give a class of profile – top and I want it to have the primary background so BG – primary and

then P – 2 which is padding all around okay we're gonna have the image in here so I can actually copy the image from profiles this right here okay so we'll put that in there and then under the

image I'll have an h1 with the name let's actually give this h1 a class of large and then we'll have a paragraph with the class of lead and let's say developer at Microsoft and under that

we're going to have the paragraph with the whoops with the location and then we're gonna have a bunch of social media icons so I'm gonna have a class called icons and I'm gonna add the

my – one class as well so have a bunch of links I'm just gonna have it go nowhere it doesn't matter but normally you know in a real in the real application it goes to their social

media pages but let's use I with the class of FAS this is going to be for their website okay so it's gonna be f a – globe and with font awesome you can increase the size of the icon with FA –

2 X 3 X 4 X we're gonna use 2 X so let's save and see what we get now we can't see the the icons yet because they're wrapped in a link and the links if you remember by default are the primary

color so we won't be able to see them just yet so I'm just gonna copy this now the social media icons like I said I've FA B so we're gonna put in Twitter here and I'll just grab this let's do two

three four so we'll have Twitter we'll have whoops they put G a should be FA so here let's do Facebook and let's do LinkedIn and let's do Instagram all right so that's it for the top part and

it's good this is gonna look kind of funny until we get to the CSS but under the top div which let's see where that ends ends right here we're gonna put the about part so let's give this let's give

this a class of profile – about and I'm gonna use BG – light and P – – you can see how helpful these utility classes are it's like I said it's almost like having your own framework in fact you

could take the ideas from this theme and create your own CSS framework which I've done a couple times so in here let's put an h2 I'm gonna use a class of text – primary

and we're gonna say John's bio and then just put a paragraph I'm just gonna do lorem let's do lorem 20 which will just give us some dummy text and then under that paragraph we're gonna have a div

with the class of line which will be another utility to just create a line and then we'll have an h2 with the class of text primary and this is gonna be it's gonna say skill set okay so we'll

say skill set and under that we're going to have a class called skills and we're gonna have a bunch of divs with the class of p1 just to give them some padding and inside here we'll have the

check icon so it's going to be FAS dot – check and then the skills so let's say HTML ok I'll copy this down a few times let's do CSS what else JavaScript and

Python okay so I save that now you can see we get that doesn't look good yet but we'll fix that next is going to be the experience so under the about which ends right here let's add experience and

let's do class profile – exp I'm going to use BG white here and P – – all right and we're going to have h2 text primary and let's say experiences and we'll have a div and inside this div we're gonna

have an h3 I'm gonna give this actually we're not going to give this a class just h3 and let's do Microsoft and then we'll have a paragraph with like the years so we'll say like maybe October

2011 two currents and then a paragraph let's do a strong tag so this will be the position and then outside of the strong tag let's say senior developer even though I think of Microsoft they

have different levels but that's fine so paragraph again and we're gonna have a strong tag with the description job description and I'm just going to do lorem Delorme 15 okay so that's a job

experience now I'm going to copy let's see you want to copy actually I think so you have h3 yeah so we want this div okay this dib that has all the information we're going to put another

one in here and I'm just going to change up the data he'd say son microsystems he will say that he worked there from 2004 to say November 2010 and position let's say systems admin we'll

just leave the same description okay so that's the experience let's save that it should look like that now for the education it's gonna be pretty similar so let's actually copy the experience so

it ends here oops so I'll go right underneath paste that in I'll say education and we're going to change this to profile edu BG white p2 let's change this to education and then

I'm just gonna have one education so I'll get rid of the second div here Sun Microsystems and let's say for education will say University of Washington will say went there from September 1993 to I

don't know June 1999 and we don't have a position let's do a degree so degree will say master's and we also want to have a field of study so I'm gonna just copy this down field of study will say

computer science like that save that and we have our education all right so the last thing is gonna be the github profile so the github section which is gonna go under

the education so under this div github repos so of a class of profile – github and let's do class of text or h2 class of text primary and let's say actually let's put an icon in here also low what

I do so in this h2 I'm actually going to give it a class of my – one as well but in this h2 let's put it a github icon so it's a class of fa b and then FA –

github and then next to it will just say github repos I save that you can see that gives us the little icon alright so under the h1 or I'm sorry under the h2 we're gonna have a div with the class of

repo okay each one is gonna have a class of repo and BG – white and my – one alright and inside here this is also gonna this is going to use I believe we use flat the grid system here but we're

gonna have a couple different items so the first one will be a div and it's going to have an h4 inside with an a tag and the title so repo one will say and then under the h4 will have a paragraph

will just use lorem ten that will be the description of the repo and then we want to go under the div here and put our second the second item which is gonna be this is gonna be like well actually

there's only two items there's this part this div and then the stars Watchers Forks things like that so we're actually going to have a class called badge with different colors just like

bootstrap does so we'll put a ul and let's do an Li with the class of badge and badge – primary and we'll say stars so the number of stars it has which is also 244 I'll copy this down a couple

times change these numbers up so this one here is gonna be the Watchers and I'm gonna change the class to badge dark and then we'll have badge light and this one's gonna be forks whoops not forms

okay so that's a repo now I'm going to copy this div this repo div and we'll have let's do two more so right underneath I'll paste another one we'll change this to repo two and then let's

do one more underneath that one so this ends here like that and we'll save all right so that's the HTML I know that was a lot but now we're gonna jump into the the styling okay so let's go to style

dot s CSS and we want to stay I want to do our grid so we could put an ampersand – grid in here but this is this is for the profiles page so I don't want to do that I want to keep this separate so

let's say profile page and let's say profile – grid all right so for the profile grid of course we want to display as a grid and we're not using template columns or using grid template

areas which basically allows us to visually map out what we want so remember all the different sections we have I want the top so I'm gonna put some quotes right here and I'm gonna say

top top alright and then under that we want about about and the reason I'm putting it twice is because we're gonna have a total of two columns this column here I actually want the

experience in the education next to each other like that okay the rest they're all it's gonna take up the whole two columns the last is going to be github github and github so those are our

template columns it's put a semicolon there and let's add a grid gap so grid gap I'll do one REM now if I save let's make this a little bigger let's see profile grid if I'm not

mistaken it should at least should at least line up let me just check check something here so class profile grid grid template areas and I'm missing something because I could have swore

that it would at least format oh I put a comma here there we go okay I knew that was supposed to happen but right now it's just everything is even and we don't want that we will basically want

everything every template area to take up both rows except for our experience in education so in order to do that we need to assign these grid areas to actual selectors or actual classes so

within profile grid I'm gonna do ampersand and then let's do profile dot profile – top and we want to set the grid area to top because that's what we used up there alright so I'm gonna do

that and I'm gonna have other styles for these but I just want to get this the layout down first so in addition to profile top let's see we're going to have

where we have next the about so we have a class of profile about and we want to map that to the grid area of a boat okay then we have profile exp we want to map that to exp and then edu want to map

that to the edu area and then we also have the github it's a profile – github – get up alright so let's save that and that didn't work great area mmm the hell am I missing if top about exp edu github

oh I know I did we need a space here cuz it's not it's a it's nested I mean we don't even need this the ampersand Piz if it was on the same selector as this which it's not there just nested so we

don't need any of those there we go so you can see the top goes all the way across this goes everything goes all the way across except github why isn't that let's see why is github not oh I left

the amber Sam okay and there we go so everything goes across except for experience and education and the reason for that is because up here we made sure that we have exp and edu experience in

education on the same in the same row okay everything else is takes up the whole row so hopefully that makes sense now we need to style everything basically

within the grid items so let's start with the top so profile top so let's say we have let's do display flex like I said when I align stuff within within like the main

areas of a site or UI I like to use flex so I'm going to use flex direction I don't want them to be side by side so I'm going to use column and let's do align items to the center and let's

justify content center and also text-align:center we want everything to be centered okay save that good let's see for the image the image is obviously way too big we get this guy's ugly mug

like taking up our whole browser so let's go with in profile top and let's say the image within profile top I want to set a width of 250 like that okay much better and then let's see we have

the icons actually do I have a margin class on the profile on the image I think I want yeah I wanted to do that so let's also do my dash one on the image okay so let's see in addition to the

image we want the icons because we can't even see them so remember we have the class of icons right and we want each link in the icons class to be white so we can see them and then I'll add some

margin on the left and right I'll do 0.3 room all right so now we can actually see the icons looks like the website one is missing though see why it's it not F G a

sorry for the little mistakes guys but I mean it happens so I like when I hover over these to get the dark color so let's just go with in here and let's say ampersand : hover and we'll say we want

the color to be the dark color so now if I hover we get that dark color alright so that's I think that's it for the top now let's do the about which is this section here now we do have a

utility class of line which we have to we have to add that so let's go into our utilities real quick and I'll go right under the round image and let's say line so line is just going to have a height

of 1 pixel and let's do a background of CCC and let's do a margin of 1.5 REM on the top excuse me in 0 left and right excuse me okay so now I get that line now back in

our style sheet here we have our profile about class so I'm going to nest some some stuff into that let's see we also want to just make sure everything is aligned text-align:center all right and

then within here we want to do the skills okay so we have skills and I want those to display flex I want them side by side so as soon as I save that there side by

side however we want to move them to the middle so let's justify content center a line items center and text the line Center there we go okay so that takes

care of that so for the education and stuff I mean these are have basically the same elements so we can style both at the same time so I'm going to go gonna go under both of these and let's

for instance a profile – exp and let's do the div within it so we'll say the immediate div also profile – exp sorry edu immediate so what this pertains pertains to is each div inside

both experiences and education and I just want to add a couple things I want to do a margin bottom because right now they're like stuck to each other so we'll do margin bottom one REM and

padding bottom as well so padding bottom I'm going to do one REM and border I'm gonna put a border bottom of gray one pixel and I'm gonna do dotted so let's save that and now you can see that these

divs are nicely separated now I don't want a border on the last one you see how there's a border on the very bottom that's not needed I just want them in between so what I'll do is use the last

child pseudo selector so I'm gonna grab both of these and let's do actually you know what I could do I didn't do this in the first place but I think this would be easier is if I just do ampersand and

then last – child sorry if you guys can hear my son upstairs and then we're gonna do border none' like that and now that's gonna get rid of those okay so let's see these these paragraphs

are really close together so I'm gonna actually no you know what we can do here I didn't think of this at first but let's get rid of both of these here and let's put them in here we'll do

ampersand and then give like that sometimes you don't see things until afterwards but that should do it okay so then we can continue to put stuff in here because I want to do the

paragraph so we'll say a paragraph within those I'm gonna add margin 0.5 REM to the top and bottom okay kind of separate that stuff out a bit alright so now we just need to do the github so

this area down here and the badges if you remember we have the utility badges but for the github we want to use flexbox for the repos to a line that aligned the two items so let's see we're

gonna go trying to think how I want to do this yeah let's go profile github repo so repo I'm gonna display flex again I'm sorry if you guys can hear my son yelling in the background for those

of you that don't know I have a son with autism and he he can't talk but he's he yells a lot so there's nothing wrong if you hear me yelling so let's say display flex and as soon as I save that you can

see that the two items within the repo are now aligned this way okay now I'm just gonna kind of push things over by taking let's see well go within the repo let's get the will do hamper samp

and let's get the first child I want the first one here and I'm just gonna sign flex seven and then a flex basis of 70% just to kind of give it some space and then the last child which is this div

let's grab that I'll just copy this I'll say last child and I'm gonna do flex 3 flex basis 20% like that okay and why is it no padding though I think I was supposed to put a padding class on my

repos I thought I did yeah okay let's go back to the HTML to our repos and let's see I have my one but I also want P – one on these to add the padding so that one and this one P – 1 ok so that way

it's not stuck to the sides okay so the last thing we want to do with the badge the badges over here so let's go to our utilities and let's put this I'll just go down to the bottom under let's go

right under the alerts and say badges all right so we're going to have a badge class that's gonna be we'll do make the font size a little smaller a little juice arrow point 8r m I'm gonna have

some padding just a little bit I'm going to do 0.1 rim and text a line to the center and margin 0.3 REMS so they can separate a little bit and then the background background by default I'm

going to use the light color and color 333 okay so they look like that right now so let's do the individual color classes so nested within here I'm gonna do ampersand dot

badge – primary we're gonna use our mix in so you can see how helpful this mixin is and it decides the text color for us which is the best part whoops one set background and we're

gonna Stu primary color and then let's copy this down three more times this is gonna be dark this is gonna be success and this is gonna be danger and save and now you can

see that these are different colors alright so our profile is complete so we're getting there in the next video we're gonna start on the the dashboard so we want to have the dashboard we also

have a couple forms and we have our posts area all right so I'll see you in the next video

In this part we will work on the profile list and single profile page and work with CSS grid template areas, flex and more

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