Social Network Theme / UI With Sass

About this course

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev

Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below

hey what's going on guys so in this video or this little series we're gonna be building a social network UI or website theme and this is based off the dev connector application which is the

app that we build in my stack course on udemy and I'll put a link to that in the description but basically we build out the whole application but we don't do the HTML CSS stuff in the course so I

figured I'd make a free series on YouTube where we can build this using HTML CSS and sass ok we'll be using the sass CSS preprocessor so we can use nesting and variables mix-ins all that

good stuff okay and we'll also be working with CSS grid flexbox we're gonna create a bunch of utility classes for things like buttons and badges and all that stuff so

base is almost like our own little framework like bootstrap okay so let's just take a look real quick this is the landing page just a background with an overlay and we have some call to actions

and if we click sign up it takes us to the form here so pretty simple and the login form I have an example of one of the alerts so we'll have some alert classes utility classes so developers

will just show us the list of developers here I just have to john doe's but obviously you can change it to whatever you want and then if we click view profile it takes us to the full profile

with this top section the BIOS skill set experiences education and then at the bottom the github repos ok so we'll create classes for things like these badges and stuff and we're also using

font awesome for the fonts so if we go to back to the landing page and I click on the logo here it takes us to the dashboard which is basically the logged in area and you can see that the nav bar

has changed up a little bit so here we have experience education credentials delete buttons we have at a profile button which takes us to a forum to create or edit a profile

obviously this stuff isn't functional this is just the theme but we'll create that then we have the ad experience and the ad education forum which are pretty identical so we'll do some copying and

pasting just to move things along but we'll create that and then if we go to posts we have this text area here and the posts with some like and unlike buttons comments go to comments it'll

take us to the single post page so we have like 8 8 or 9 pages to do here so it will take a couple different videos but like I said it's going to sharpen your CSS skills your sass it's also

responsive you'll see if I take this down to about here the the navbar changes the font size all that and you can see that everything still looks pretty good so this is all stack this is

CSS grid we're actually using grid template areas for the profile if we go to the dashboard you can see that now these buttons spread all the way across so we just have a cons for the logout

button logout link in the post so I'm sorry the dashboard and then the posts so everything is really responsive and we're gonna be using CSS media queries alright so that's it guys let's go ahead

and jump in and let's get started alright so we're gonna go ahead and get started with our theme now the way that you compile sass is is up to you I'll be using the extension here let me just

open my extensions live sass compiler which is right here so to me this is the easiest way to do things it's built right into the text editor but you could use whatever you want if you want to use

node sass I have a bunch of videos showing you how to do how to create node sass if I remember I'll put a link in the description in just in case you don't use vs code but this is this is

the easiest way so that's what I'll be using now if you install the live sass compiler you just want to go to your settings and if we search for sass and go down to live sass compiler and we say

right here edit in settings Jason I have a couple special settings just to show you guys what these so basically this settings dot formats

I have format compress so it's gonna compile it into a minified CSS file and it's gonna have the dot min dot CSS extension and it's gonna save it to a folder called dist slash CSS I also have

generate maps at the false so that it doesn't create any source Maps so if you want to follow along exactly and have the exact same environment then go ahead and add those to your settings Jason

okay so let's go ahead and start to create our structure here so I'm going to create a folder called dist okay that's where basically our public website is going to go our UI and then

we're also going to have a folder called s CSS for for our sass files all right now I'm gonna create our main sass file in here so let's create a file called style dot s CSS okay I make sure you use

s CSS and just to test things out I'm gonna go ahead and put a variable in here I'll call it primary color and I'll set it to red and let's say body and we'll set the background to that primary

color alright so I'll save that now inside dist I'm going to create a file called index dot HTML so this is basically the landing page we're gonna have a bunch of HTML pages but we're

going to start here and I'm gonna put in my boilerplate with Emmet so just exclamation enter tab and I'm just going to change the title here I'll say welcome to the dev connector and I'm

gonna put a link here to a style sheet which is going to be in CSS slash style dot CSS so basically this is going to be the file that gets compiled from SAS and for now I'll just put an h1 in here and

I'll just say whatever hello okay so I'm going to save that now to get this compiled we have to run our SAS compiler and once you install live SAS compiler you'll see this button down here that

says watch SAS so I'm going to click that and immediately it's going to look at my and it's going to compile it into this CSS folder ok created it for me and

you'll see style mndot CSS which just creates this alright we don't want to touch this file at all this is the compiled CSS we want to strictly work in within our sass or RS CSS directory ok

so now if I go to my HTML file I'm going to use the live server extension to open it and run it and let's see what did I do wrong here oh I forgot the min so should be style dot min SIA hoops min

dot CSS all right so if we go back now we get the red background which is horrendous so we're gonna get rid of that okay so now we have our environment set up so the next thing I'm going to do

is I'm going to just start to create some of the HTML I want to have the the navbar will style that and we'll kind of just go from top to bottom alright now we do need font awesome so I'm gonna

grab that before I forget so we're gonna go to font awesome comm and start using free and then we're just gonna grab that link and copy it and then we'll go back and put that right above our style CSS

alright so our head area should be all set now we'll go down into the body and we're gonna start the navbar so we'll get rid of this h1 and let's do a nav tag here and we're gonna have a

class of nav bar and I'm gonna have background classes like I said I'm gonna have a lot of utility classes that it's pretty much like a mini framework will have BG dark BG primary and I do borrow

a lot of my class names from bootstrap so they look very familiar but of course we're not using bootstrap so let's do BG – dark here and in that way you can easily change the color of your navbar

if you want you know stuff like that so let's put an h1 in here and I'm gonna have a link to the dashboard so let's do to dashboard dot HTML and inside here I want to have the code icon so I'm

use file awesome we want a class of FAS and FA – code and of course I'm using Emmet here and next to that we're going to say dev connector okay and then under the h1 let's put a ul and we're gonna

have some list items with some links so this one's gonna go to profiles HTML and we'll just gonna say developers here and let's copy this down a couple times under that we're gonna have our register

which is going to go to register HTML and then we'll have our login okay and that's it that's our nav bar so I'm gonna save that now you'll see things format like it just did because they

have the prettier extension installed which is right here and I have it set to format on save so that's why it kind of formats and changes a little bit when I save so let's check it out in the

browser so it looks horrible right now but we'll fix that so I'm gonna just go to my stylesheet now my sass I should say and start to style the navbar alright now I'm gonna add some before I

do the navbar actually I'm gonna add some default styling so I want some variables and what I like to do in sass is have a separate file for things like variables mix-ins functions and i

usually call it config or underscore config so in our s CSS let's create a file called underscore config dot s CSS and in here I'm gonna put all my variables which I'm actually going to

just paste in okay so the primary color is gonna be that light blue we have a dark color which is a very dark blue almost gray light color is of is a very light gray we have danger and success

which are red and green and then I have a max width as a variable and this is going to be the containers max width okay so let's save that let's jump into style dot s CSS and we need to bring

this in now this is a partial this underscore config so it won't get compiled into CSS it's just to basically include into this file and the way we do that is without

imports and we just need to import the name of the file which is config no underscore no dots s CSS just like that okay so if we do that that'll bring the variables in I'm just gonna add some

basic resets and course tiles so let's set box sizing to border box here and let's set margin and padding to zero just to kind of reset everything okay and then for the body

I'm actually going to be using a font called railway so that's one thing that I need to get so I'm going to go to fonts dot google.com and let's search up here for a railway which is right here

so I'll hit the plus sign and then down here I'm just gonna grab this link right here you could put it in your style sheet or your HTML I'm just gonna put it right in the HTML so we're gonna put it

in our head right under font awesome okay so now we can go back here in our body and we can use font family and we can now do railway and then I'm just gonna do sans-serif

okay now the font size let's see font size we're going to use one round I'm going to be using REM units a lot if you're not familiar with REM units basically one REM is equal to whatever

the default font size of the HTML or the the root tag is so this right here which by default is 16 pixels okay but you can manually change it like if I were to do HTML font size 10 pixels then one REM

would be 10 pixels but I'll usually leave it at a base 16 all right we're gonna do a line height of 1.6 and a background we'll do background color of white okay and then the color of the

text is gonna be almost black we're gonna do a real dark gray so if we save it so it should just look like this let's remove that the underline from the links

and also I'm gonna use the primary color for the links by default so let's add right here for all of our a tags we want to do text actually you know what I'm gonna make this what's up with my mouse

today I'm gonna make this smaller and make this smaller so that we can see what's going on at the same time so let's do text-decoration:none and let's set the color to the primary color okay

so if we save that we get rid of the underline and we get the primary color so for the ULS I'm just going to remove the bullets with list-style:none and for any images we have I want them to take

up the full width of their container without breaking out so I'm going to set the default width of images to a hundred percent okay and that should be it for the core styles now we're going to move

on to the actual navbar so it's a bar and we have a class of nav bar and we're gonna be using flexbox here so usually the way that I decide for flex and in the grid the grid I usually use for four

main layouts you know like like for instance the profile page all the boxes I'll use the grid for that for things like a lining text inside of a navbar I'll use flex I think it's just I think

it's just it's easier than than using the grid for little things like that so we said display flex so I'm gonna go ahead and align items to the center okay and as soon as I say display flex

everything aligns horizontally like that now I want the links way over here so we can do that by adding a justify content of space between because we want to put all the available space in between the

two elements the two flex items okay and then we're gonna set some padding let's do 0.7 REM and two REM and we'll save that alright so again this is a multiplier of whatever the HTML element

font sizes which is 16 so two REM is 32 pixels 0.7 is whatever 16 times 0.7 is if a lot of people will put a base 10 so they automatically know that for instance zero point seven is seven

pixels two would be 20 pixels but I just I don't know I keep it at 16 just preference really so we want this nav bar to be positioned fixed because I always want it to be at the top so we

want to do a position fixed and also a z-index of 1 so that's always on top of the rest of the content I'm gonna make sure it's a width of 100% and we want it from the top zero position and let's add

a border bottom and I'm gonna do solid one pixel and primary color okay and the last thing I want it to be a little translucent so I'm going to use 0.9 opacity and we'll save now notice that I

haven't added a background that's because remember we have that utility class that BG dark and I'm gonna take care of that afterwards first I want to get these links sorted out so with inset

with sass we can nest things we can nest properties or selectors so within the navbar here I'm going to go ahead and put a ul and I want it I want the UL to be a flexbox so that I can align it

correctly so display flex and now you'll see that they're side-by-side okay and then for the a tags in the navbar I'm going to set the color to white let's set the padding to 0.45 R M and let's

set the margin to zero on the top and bottom and 0.25 Ram on the left and right now if I save it everything's going to disappear just because of the color is white so I'll just comment that

out for now until we change the background now in hover State I actually want the Prime marry color because remember it's good the the links are gonna be white so when

it's hovered I want primary so we can simply do ampersand colon hover so any eight tags within the nav bar that hovered we want to set the color to the primary color alright so we'll go ahead

and save that so our nav bar looks pretty good now let's let's create the background utility classes now what I like to do when I'm building with sass is have a

special file for our utility classes so in s CSS I'm going to create a new file called underscore utilities dot s CSS and let's just go ahead and bring that into our main file here up at the top so

we want to say utilities all right and then inside utilities we're gonna add let's see let's do some of our main utilities first well know we'll do it as we move along so let's do the

backgrounds so we'll have backgrounds now backgrounds are gonna be you know BG – primary BG – light all that stuff so let's add in here just dot BG and then in these curly braces I'm gonna take the

ampersand and then do a – primary for instance and what this means is if you're not familiar with SAS this this ampersand is a placeholder it's going to be replaced with just BG so when we add

the class BG – primary in our HTML this will whatever isn't here will take effect okay and I'm gonna set this – it's a background color and let's use the primary color and then we're gonna

want color color:white all right so what I'd like to do though is instead of instead of passing it instead of putting a background color and the color for every

one of these I'd like to create a mix in that we can use that that will set the the text and the background so in our config let's go to config SCSS and let's create a mix in okay a mixin is like

it's kind of like a function except it doesn't return anything it just outputs whatever you put there so in our case background color text color so let's say set background and text color okay so we

create a mixin by doing at mixing and then we'll call it set – background and it's going to take in a color and I'll just grab these and put that in here okay now this primary color I'm actually

going to replace with whatever color is passed in now for the text this is this is another great thing about sass is we can actually test the the lightness of the background and then decide the text

color based on that so I'm gonna have an additional function this is actually going to be a function because it's going to return something but I'm gonna go above it and I'm gonna say set text

color based on the background all right so let's do at function and say set – text – color and that's gonna take in a color okay and then we're going to use a

conditional here okay and SAS you can have if statements so we're gonna do at if and there's a function called lightness that will test the lightness of something so we're gonna say if the

if the lightness of the color that's passed in is greater than let's say 50 then we want it to be a dark text so we want to return from this so at return 333 okay else so basically if it's a

light color actually we need an @ symbol so if it's a light color then we want to return I'm sorry if it's a dark color we want it to return a light color so whites okay and now down here we can

simply take instead of doing just white for everything we can use set text color and we can pass in here the color which comes in right here so hopefully this makes sense we're setting

the background with the background color that's passed in but we're setting the text to either dark or light depending on that background color okay so let's save this and then if we

go back to our utilities all we have to do here in our utility is include the mixin so we can simply do @include and set background set background and then the color whatever the background color

is in this case is going to be the primary color okay I just figured we get this stuff out of the way so that we can use these classes from now on so that'll take care of the

primary now we want to do the rest so I'm going to just copy this let's do it's that's one two three four five and six we're gonna have so the next one is going to be light so BG light which is

going to take in the light color and then we have dark which is actually what the navbar uses that's going to take in the dark color and we have success I'm just going to do a control D here to

select the next primary and we're gonna do success and then this one will be danger and then this last one is gonna be white now white does we don't have a white color

so I'm just gonna pass in the color white like that all right now one thing I want to add here is for the light background and that the white I actually want a border so I'm just gonna add a

border to those so let's say border CCC which is a light gray and then one pixel solid so I'm gonna have that for the light and for the white color oops – copy that

okay so now I'm gonna save this and now you can see our dev connector has the BG doc and we can use any of these classes now within our theme so back in index.html I'm sorry back in style s CSS

let's uncomment the color white for the navbar and there we go now you might be asking well why did you put color white when we're looking at the background color and in deciding the

text color in our function well it's because they're links okay so if I were to comment that out they're not going to be white because they're links however if I were to

remove a link let's just go to developers here and just take away the a tag and save you can see that it's now white and just to give you even more proof that this works let's go into

where are we let's go into our no wait where are we navbar no utilities and it has BG doc right now actually you know what I'll do is just change than the HTML so instead of BG

dark let's do BG primary and save and now you can see it's still white because it because of the contrast let's make it white let's do BG white and save and notice that it's a dark color okay so we

don't have to worry about the text colors for backgrounds unless of course they're links we could implement that in the CSS but I'm just I'm just gonna leave that will just do links on our own

all right so let's put our a tag back and our BG dark class back okay so the navbar is all set aside from the responsiveness which we'll get to later it's actually just uncomment this white

right here so now we're going to do the rest of the index page which is the landing area so under the nav bar I'm just going to close this up under the nav bar we're going to have a section

and I'm going to give this a class of landing okay and then inside here we're gonna have another class of dark overlay because we're gonna have a background image but we need an overlay a dark

overlay so that the text is readable so that you could use basically any image otherwise the text will get lost in the image you could darken it with graphic design software like Photoshop but I'd

rather do it within the CSS so let's put another class of landing – inner and in here let's do an h1 I'm gonna have a class called X – large for headings and let's say developer connector and under

the h1 we're gonna have a P a paragraph with the class of lead and I'm just gonna say create developer profile slash portfolio share posts and get help from other developers okay and then

underneath that I'm gonna have a div with the class of buttons and inside here we'll have our register button so I'm gonna do an a tag here and have a it's actually a link but I'm gonna

format it as a button with BTN and BTN – primary and yes these are very pretty much identical to bootstrap classes so let's do register dot HTML and then I mean if you were to switch to bootstrap

you have most of the classes in place so in here let's just say register and then let's copy this down and let's to login actually I'm gonna say sign up see sign up and then down here we'll

just put in whoops I'll put in our login text all right and that should do it let's save that now notice everything is underneath the nav bar that's because the nav bar is fixed so we're gonna fix

that within our CSS so let's head to style dot CSS and we're gonna start to work on our landing classes so let's put a comment here we'll say landing and we're gonna have a class of landing and

I'm gonna go ahead and position this relative so that we can do some absolute stuff later within it and here's what we're going to put the background image now I'm gonna include in the description

a link to to all the code all the HTML CSS in the image I'm not sure how I'm going to do it yet I'll probably use some kind of platform but we're gonna have you'll have an image in there and

we're gonna put that inside the dist folder inside a folder called IMG all right so I'm just gonna let me just open this in my finder and grab the image real quick okay and of course you could

use any image you want I got this image from pixels com2 if you want to search for it if you just search for like I don't know laptop or coding or something like that all right so let's see we're

gonna add the background image here so it's actually close that up and let's say background:url and dot dot we're gonna go up one level to image and in to showcase dots and it's a JPEG I think

that's the right location right yeah it should be because right now right now we're in the SAS file but we're doing this relative from the CSS file so we want a no-repeat

and let's do position Center Center and we want to cover the whole thing here show the whole image and then let's set the height of the landing to 100 viewport Heights which is the entire

height of the browser no matter how big or small its stretched out so we'll save that now we have our background image now as far as the text we want this all to be centered we want to make the text

larger stuff like that so we have at that class of landing in ER so what I'm going to do is within the landing class I'm going to use ampersand – inner because remember the ampersand gets

replaced with whatever is here so it's gonna be landing in ur and let's do color and make sure everything is white and we want to set the height of this to a hundred percent because I'm gonna be

using flexbox to align everything alright so it's to display flex now if I do display flex you can't really see it up here but it makes everything go in a row side by side and I don't want that I

want it to go up and down so I'm going to set Flex direction to column which will make it go vertical instead of horizontal now to Center everything let's set let's do a actually let's add

a width of 80% and margin auto and then to center everything we're going to do a line items to the center and when I save that you can see it's centered up here I know it's really hard to see right now

but I also want to Center it this way vertically so for that we can use justify content oops I want justify content center now the reason that didn't work yet is because

if we look at the HTML we have dark overlay in between the two so doc overlay also has to have a height of 100% in order to Center it this way it has to be a hut a hundred percent of its

containers height so we'll fix that in a minute let's just add a text-align:center here as well and then we should be all set with landing in ER okay so now let's see

I guess we'll do the dark overlay before we continue on with you know the font sizes and stuff actually the font sizes are going to be tilt utility classes too so let's go into utilities and I'm

considering the the dark overlay as a utility because we can you I mean we're only using it once but it's something we could use over and over so I am gonna put that in in utilities so let's go

right here and we'll add dark overlay and watch as soon as I put in height of a hundred percent everything should get centered and there we go okay we also want a width of 100 percent and the way

that we're gonna make this an overlay is by positioning the dark overlay absolute within the landing class and we want it to start from the top zero and left zero and go a hundred percent heightened

width which we already put above there all right so if I were to add a background color now like let's say red and save it's going to cover the entire thing now

obviously we don't want this we need it to be translucent so instead of using a solid color like this I'm going to use RGB a which is red green blue alpha and it allows us to to add a transparent

color so RGB a red green blue I'm going to use zero for all of that making it black and then let's do 0.7 for the transparency so if I save now you can see that it's black but it's also

transparent which gives us an overlay if you want it lighter you could do you know any any number you want here I think seven is pretty good okay so that gives us our overlay now next thing I'm

going to do is is this stuff here doesn't look very good so we have a couple classes I'm actually going to go to the top here I like to organize this in a certain way so let's say text

styles so for instance we have our extra-large heading which I'm going to make the font size for R M and let's make the line height we're gonna lessen the line height to one point two and

then let's add a margin bottom of one R M okay and then let's see what else we have a class of large which is going to be very similar except it's going to have the the font size is going to be

three R M all right and then we have our lead which is four paragraphs and that's going to have a font size of 1.5 r m and let's see line height we don't need an extra line height margin bottom is gonna

be one room as well so let's save that good and I'm just going to make this a little bigger like that okay so next thing our last thing on this page really is the buttons okay

and the buttons are gonna have a utility class as well our utility classes so we're gonna do something similar to what we did with the backgrounds so put this let's see we'll go right below the

backgrounds and say buttons and this this is how I like to build themes and user interfaces I like to have these utility classes that we can use all over the place and then you know we have our

main styles for our specific components like the nav bar the landing page but it's all preference really I think it's better than just putting it into like one big monolithic file so buttons I'm

going to display as an inline block and I'm going to add a background a default background of the light color okay we're gonna add other classes like BTN primary and stuff to change the

color but by default if that's left off I want it to be just the light color and then the text will make dark gray and then padding let's do 0.4 REM top and bottom 1.3 left and right okay and then

border I'm gonna say none and we want to make sure the cursor cursor is a pointer because we're going to use this on links and actual buttons and let's see what else let's make the font size make sure

that's one REM and I'm gonna add a margin right just to push because when we have buttons in a row I want to push the next one over a little bit so we'll do half REM here and let's get rid of

any outline not outputs it's funny I just wrote that automatically outline:none so if I save it's gonna look like that now like I said we want to have different color classes so I'm

gonna do ampersand dot BTN – primary because with our buttons we're going to have we're gonna add the class BTN and a sub class like BTN primary or BTN dark and I'm going to use the same mix in the

set background as we did with the backgrounds so set background and pass in here since this is primary we want the primary color as the background okay so I'll save that it looks like I

looks like I used button primary for both buttons which I didn't want to do I actually want one of them this the second one I want to be BTN light

like that okay so back to utilities let's say so that's button primary now for the hover I'm just gonna lighten it a little bit cuz in SAS we have lighten and darken so let's do an ampersand :

hover so this particular button when it's hovered we're gonna set the background to lighten and this will take in two things the color which is primary color

and then the percentage we want to lighten it which I'm going to do five percent so if I save I hover over a primary you see it lightens a little bit now I want it to have a smooth effect

rather than just change rapidly like that so I'll just add a transition on its so we'll say transition I'll just use all and then 0.2 seconds and let's do an ease in effect so that way if I

hover over it has kind of a smoother effect and you can make this longer if you want all right so let's button primary now I'm gonna copy this this button primary and we're gonna actually

wait a minute did I go yeah right here alright so we're gonna do that's one two three four and that's it four so primary we're also going to have dark where we just change this to dark and let's see

for the hover we're gonna just lighten the dark color 5% and then this one will be success I'm just going to control D twice and then change that to success and then this one will be danger

all right now for just the regular hover because we have all the hovers for the special classes the color classes but I'm gonna go I'm still within just the BTN and put in a hover

oops you want an ampersand hover and I'm gonna use background lighting now since this is the light color I'm gonna use I'm actually gonna use the dark color a lighter dark color if that makes sense

so let's put in dark color as the background when we hover but I'm gonna lighten it 20% okay I'm also going to change the text color to white now actually you know what I put in the

index.html button light but I'm actually gonna not have a button light just BTN is the button light so if I save that and go and save my utility so if I hover over this now we get the dark color but

it's 20% lighter all right so I think that's fine if you want to do a button light you couldn't you can do that but I'm just gonna leave it so BTN is just the stant this right here alright cool

so excuse me I think that we're done with the landing page so in the next video we're gonna start on some of the inner pages