Social Network Theme / UI With Sass

Social Network Theme With Sass – Part 2

alright guys in the last video we went ahead and created the landing page but not only that we created a bunch of our utility classes if we go to our utility

sass file we have all of our backgrounds all of our text styles up here and then we have all of our button styles so we can use these all around the site alright now the next thing I want to

focus on is the register and the login page okay so these forms so I'm gonna I'm gonna keep the index.html open but I'm gonna create a new file in dist called let's do register dot HTML all

right and then we'll use Emmet here actually let's not use Emmet let's just grab the whole index.html go ahead and close that up and then we're gonna paste that in register which I spelled wrong

rename that okay so register HTML I'm going to paste everything in from the index file and then just kind of go through all we really want that's the same as the head and the nav bar so

everything in the head we can keep the same if you want to change the title you can I'm just going to leave it and then let's say we'll leave the nav now as far as the section I'm going to get rid of

every I'm gonna keep the section get rid of everything within it and then give this a class of container and the way this is gonna work is every inner page is going to have this section with the

class of container okay in fact you know what we could do is copy this and in I guess outside of our distal door we'll create a folder called resources and let's create a file called underscore

and we'll call this boiler so underscore boiler dot HTML so it's not an actual page but we can just kind of copy this for every new page we create so I'll just set that aside alright now what we

want to do within this container is create our form so we want to start here let's let's put our h1 and we can actually visit the page or no we can't hold on is it register there we go so

let's put our h1 and we're going to use two classes here so one is going to be large which we already have in our utilities but we're also going to have a text primary for when we want to have

that the text the primary color alright and I'll add the CSS afterwards so let's say sign up and then under the h1 let's put a paragraph with the class of lead and I'm gonna put an icon here so I'm

going to do FA s and then FA – user and then next to that icon I'm going to say create your accounts okay and then under the paragraph we're gonna have a form so let's say form actually going to give it

a class of form as well because all the forms in this UI and the steam are gonna have the same kind of styling and I'm gonna give them all the class of form so for action I guess for action we could

just have it go to dashboard dot HTML even though I mean it's not an actual functionality but it will at least redirect to that page and then let's see within form we're gonna have a form

group and within here we're gonna have an input with the type of text and I'm going to give this a place holder of name because we're not gonna have labels we're gonna use just placeholders okay

and then I think yeah that's that's pretty much it because we don't need special class names I'm gonna style just all the inputs within the form class so that's the name now let's just copy this

down and this is gonna be the email so I'll go ahead and change the type to email and the placeholder to email address and this is just gonna have a little tip

telling telling the user that the site uses Gravatar so if you want an avatar use an email that's associated with a Gravatar comm and I'm going to put that in a small tag with the class of form –

text okay and we'll just say this site this site uses Gravatar use a Gravatar email alright and then under that we want the password input so I'm just gonna copy the form group up here go

under this one and this one is going to be type password name is gonna be password and then we'll do one more this is gonna be the confirm password so let's say type password and we'll say

confirm password okay now if you want to add some validation here some front-end about validation you can do that like we could add required email that will have to be a valid email because of the type

and then we could do like min length here of let's say 6 and we'll do that here as well okay just some html5 client side validation so I saved that why isn't oh

there we go all right and will will style this stuff after and then there's one more thing I want to have under the form which is a paragraph and I'm going to give us a class of my – one which is

going to be a margin class and you'll see how we'll create those after so let's say already have an account then we want to send them we want to create a link to the login dot HTML and we'll

just say sign in okay so that's all the HTML now let's head over to the CSS and I'm gonna go to the utilities file first because we have a few utilities to add so the container is a utility because

we're using that all over the place and that's usually the first thing I like to put so I'm going to put that up at the top here so it's a container and I'm gonna set a max width and if you

remember we have a variable called max width and I believe I set it to 1,100 pixels let me just check so let's see we want to go to our config yep all right

so it's a container max-width and then let's set margin Auto we want to move everything to the middle so we're going to set margin Auto let's set an overflow of hidden and then let's add a little

bit of padding on the left and right so zero and then let's do two REM and then I'm gonna add them some margin to the top because as you can see the navbar is covering everything because it's

positioned fixed so I'm gonna do margin top six REM and then just some margin bottom as well and let's do three REM for that so save and then it kind of moves it into place alright so what

other utilities utility classes we have Tech's primary I'm gonna put that under textiles so I'll say text primary and we're just gonna set the color of that to the primary color now if you want you

can create textiles for all the different colors like light dark success and stuff but I'm not going to be using that at all so I'm just going to have the text primary and what else did we

have think just I think that's it aside from the form stuff which we're gonna do next oh we don't have a submit button so for this register form we need to obviously have a submit button which is

going to go under the last form group here let's say we'll do input type submit submit I will say register and we should be able to use button classes on input buttons like this so we'll say BTN

and let's do BTN primary like that okay so now let's go back to I'm gonna put my forms to actually you know what I'm gonna create a separate file for my form styles just because it's it's quite a

bit and I don't why I don't feel like it fits either because it's not really a utility well I guess it is a utility but there's just so many so many styles associated

with it that I'm gonna create they'll my own file so let's do underscore forms or form dot s CSS and it's up to you when it comes to sass it's really up to you on how you want to structure it if you

wanted a ton of sass files like let's say one for your navbar one for your landing and all that you can do that I don't like to have too many but I do like to break it up a little bit rather

than just have this one big file so in our form actually let's bring it in first so go ahead and bring this in so we want to import our form styling and let's go ahead and put a form class now

we don't really have any any styles for the actual form tag it's just the stuff within it such as form group so I'm gonna do ampersand – group which will target the form group

class and I just want to add margin to the top and bottom will do one point two REM on the top and bottom here kind of separates things a little and then we have the form text which is wait what is

form text let's see what did I do yeah okay so the span I thought I called it something else but yeah the small tag not the span the small tag which is this okay any help text I thought I called it

help text but form text works so let's do ampersand – text and we want to display it as a block that will move it on to the next line and then let's do a margin top we went down a little bit

will do 0.3 REM and color I'm gonna do Tripoli make it a little lighter okay and then we want to do our inputs now we can target the specific types of inputs we want because remember I used input

for the button and I don't want to style the button I'm just doing like the name the password email so I'm going to put input and then types so let's do for the inputs that are text the type of text

and I'm actually gonna copy this down a couple times so let's see we're also gonna grab email and password and later on we're gonna have a date field so we also want this to pertain to that also

any select lists and any text areas okay so all of these are going to get the same styling now let's see I want to display make sure they're all displayed as block said I want the width to go all

the way across so if I save you'll see nothing happens what do they do wrong oh I put a colon there we go so now all of these are gonna span all the way across which is what I want

they're way too skinny though let's add some padding inside of them so as will do 0.4 REM and mostly going to up the font size just a bit to 1.2 REM and make the border one pixel solid and see see

see there we go so it looks pretty good I think I think that's it yeah so we will have some stuff for the social inputs on the create profile form that will go in here but I'm not going to do

that just yet now I want to do the margin classes because you see how this is so close to this I like to have margin and padding classes so I can simply add in like my one which is

margin on the y-axis so margin top and bottom okay I also like to have M – 1 M – 2 M – 3 which is margin all around so we're going to create that but we're gonna do it in a SAS type of

in a sassy way so let's go to our config because this is where I want to put this anytime we have like this logic type stuff I like to put in my config and we could just manually create the classes

like it's going to turn out to be my dash 1 and it will have a margin of 1 REM top and bottom 0 left and right and we'll do – 1 2 3 4 and so on all the way up to 5 and then also M – 1 through 5

which will just be all around like that now you could manually type that out but I like to use a little bit of logic with sass so let's say margin and padding and I'm gonna have a variable called space

amounts and I'm gonna set this to a list of 1 through 5 whoops I put an equal sign that's not right : okay now I'm gonna loop through the space amounts okay we can even have

loops and SAS we can have this each loop and we can say each space I'm just gonna call this space in and then our variable of space amounts which is our list and let's start off by doing the classes for

the all-around margin so we'll have dot m – and then whatever the space is so I can use a syntax here to put in a variable and that syntax is a number sign in curly braces pretty much like

like a template literal and JavaScript acceptance instead of a money sign it's a number sign and I think the reason for that is because we use the number sign in the variable name so here we want to

put whatever that spaces so it'll loop through these and it'll output M – 1 through m – 5 and for each one we want to do a margin and we want it all the way around so I'm just gonna put in here

space just like that and then let's do the vertical margin so I'll just copy this and instead of just em – I'm gonna do my – and then just add a zero you know what I forgot

to put REM otherwise it's just gonna be margin 1 2 3 4 5 what needs to have a unit so REM and then this will just do just the top and bottom because we're saying 0 on the left and right

alright and then I want to do the same with padding so I'm gonna copy all of this and let's change this to padding and then we can just change the M to a P and then change this to padding change

that and this will be py and what's we'll change this to padding all right so now I'm going to save this and once it gets compiled I just want to show you what it turned into

and this is all minified so it looks all jumbled but this is what it created m1 margin 1 REM my one margin 1 REM 0 P 1 padding 1 REM py 1 so all the way up to 5

all right so that way we can just simply add these classes where ever we need margin and padding all right so let's close that up and now you can actually see that this

paragraph has been pushed down because it has margin on the top and bottom so that's it for the signup page I want to close up the config and we can close up the form as CSS for now as well the

index don't need that so now let's do the log in since it's pretty much the same thing just – a couple fields so I'm gonna copy everything in register HTML and then I'm going to create inside my

dist folder a login dot HTML and inside here I'm just gonna paste everything go up to the top here and let's change this to say sign in instead of sign up and let's change the paragraph text here

we're going to say sign into your accounts and let's just get rid of the name form group because we don't want a name and then for the email we're gonna keep the email but get rid of this small

text here we don't need that and then get rid of the confirm password div right here and for the button we'll change that to login and then for the paragraph we're

going to say don't have an account then we want to take them to register and we'll change that to sign up all right so if I save that we click on login there we go so that should be all set

one thing I do want to do though is the alerts okay so we might as well take care of that now so for alerts they're gonna go usually right within the container and they'll

just put a comment here say alert so usually they'll go right here and it'll just be a class of alert and an alert – whatever kind of alert let's say danger and we'll just say like invalid

credentials and save now obviously we want to style this so an alert is obviously a utility so I'm sure you already have it open let's go to utilities and let's go down below

buttons and say alerts all right so again this is gonna work similar to the other stuff that we've done the buttons and all that so we're going to have a class of alert and first of all let's

add some padding will do 0.8 and let's set some margin so one room we could add the my one class but I don't want to have to do that for alerts utility classes I like them to have their own

padding and stuff if it's going to be consistent and then I'm just going to add an opacity here of 0.9 just to make it a little translucent and the background by default is gonna

be the light color okay just like the buttons and then the color the default text color will be three three three okay now we're going to create the special or I guess the subclasses so

we'll do an percent dot alert – primary and we're gonna take advantage of our set background mix in so let's do include set – background and pass in our primary color alright and then I'm going

to copy this down let's see two three four so we have primary we have dark change that to dark and we have success in danger all right wait a sec class alert an alert danger

what do they do wrong here so this should have padding oh I did know 0.8 there we go however this should have white text because we're using alert danger let me

go into my config real quick because it should set the text color to red I think we might have to adjust the lightness so let's try 60 there we go okay so I guess the lightness was just a little too low

for that contrast so now it's white okay good all right so we have both of our forms we have our Lert both i should say our login and register form there's there's other forms as well so let's

close those up those are done so I think that in the next video we're gonna start on the developers or the the profiles page where it lists out all the profiles we're going to be using the grid system

and then we'll do the individual profile pages which will be using the grid system pretty extensively with grid template areas

In this part we will create the login and register pages with more utility classes as well as generate some margin and padding classes using Sass logic

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