Bossable.com – MEAN Stack: 3 – Intro to Bootstrap Buttons, Glyphicons, CSS, Navbar

Bossable.com – MEAN Stack: 3 – Intro to Bootstrap Buttons, Glyphicons, CSS, Navbar


Hi my name is Shristi, and welcome back to the 30 day mean stack challenge, I’m just going to start up Grunt let’s get the app up and running and we’ll look at what we created and
today we’ll extend that out a little bit further by
continuing to to work on this page, so this is what we created in the previous video. Today we’re
going to jazz this up a little bit and where we’ve just mentioned ‘icon’, we’re going to add in the actual glyphs and in that in that
place. So let’s do that we start off with icon over here, when we look at the wireframe for what we want to
create will continue using Bootstrap, because Bootstrap actually has a whole heap of glyphs in a font format that we can
just bring in and use now if I’m brand new to Bootstrap and I’ve got no idea how to do buttons the best place to start is on the Bootstrap website and go across to CSS and just jump down, I’ll make that a little bit bigger. Just go down to buttons. I can see that Bootstrap already has a series of buttons for me the button that I want, the first one that we want to created was this green button with the image of the user on there to do that I can just copy this code here, so just grab that and bring that over and pop that in I don’t actually want to have any text in the middle, what I want is that image of that user so to do that (code) for the class that I want to set up to find the right glyph, Just go across to components and I can see there’s a whole heap of glyphs that are already here for me, and one of the first ones is this one for user, so just copy
everything put that into that class and close off that tag jump down to the next one and when we look at it, we see that the text next to this button is actually nice and
quite big so (code) (code) (code) down the bottom where it says ‘Total Customers’, that’s a bit of a muted kind of colour, and Bootstrap also has a class for that, so we’ll just put that into a span (code) (code) and I’ll just grab that and paste that into there. said let’s have a quick look at our handy
work, so I’ll just save that You can see that Grunt’s constantly looking at this file and every time we make changes
it’s restarting it for me There we go, at the moment I’ve got something that looks like this and you can see that the buttons a little bit out of alignment with the text. The text is nice and big because it’s now got the h1 tags around it, and that one has changed colours slightly, because it’s now got a bit of a muted colour but I’m not really
happy with this how do I know what’s going on here? The best way for me to identify because I’m using Chrome, I’ll make that a little bit bigger we can go across to tools and go to developer tools and if I just now just right click on that text and just do an ‘inspect’ you can have a look at all the CSS that’s actually been applied for that style there are a couple of ways that I could make this button move down and align with the H1 tag, one way is to create some custom css but I’m going to go with the lazy way and that is just by putting this button in H1 tags (code) (code) (code) when I save that, I should now see that the same attributes that were being applied to the text should also be applied to the button, so we’ve got some alignment happening here, alright so now we just need to do that for all of the other icons I’m going to show you the long way in this particular video and in the next one what we do is actually apply a bit of Angular magic and look at how much code we can get rid of when we apply Angular. So let’s go through the long way but we will have a short cut soon I can just copy these pieces of code down here, and I just need to change the icon, so I’ll just show you the icons that we’ve got that’s calendar throw that into H1 tags so this is a bit of a test for you too, if you want to pause the video here and just go through and try and do this yourself it’ll just give you a bit of practice this next one is edit this end one is what they call a ‘record’ keep moving on, this one is what they call eye-open and flag the last H1 tag and (code) (code) alright, so lets have a look at that hopefully we’ll start to see something that looks a little bit more like this okay so one thing that we’ll notice here is that everything is green which isn’t quite what we wanted over here when we look through this and we can go back to our buttons, and see that we’ve actually used the word success for all of these right? but we don’t want them to be green just jump back to CSS and I’ll show you what the code is for the other colours go down to buttons again the darker blue is primary the lighter blue is info, the orange is warning the red is danger so coming back here so this one is primary then we have success again, because that’s green we have the lighter blue that’s info we’ve got this orange colour and then we’ve got our red at the end danger alright, so let’s have a look at a couple of other things while we’re at it. So this background we see it’s still quite white but the colour here is more of a gray colour, and the way that we can change that we’ll just change the body so we’ll see that in the modules, each module has a whole set of different folders and
we’ve been looking at views and we’ve been looking at the home client view but if we go into CSS, we’ll see that there’s a CSS file that’s already been set up for us now in order to change this background across-the-board what we want to do
is add in a body colour it’s quite straight-forward, we just want to change the background colour, whoops not background attachment background-color: and we can change that to anything we like for example, I could just change that to gray but the cool that I like about Webstorm is is has this colour picker I can just grab that come over here click and choose that so let’s go and see that that’s good to see that it has that grayish
colour that gives us that similar look that
we’ve got here we see at the top we’ve got app makers and here we’ve got Mean App ours is dark, whereas here whereas this one is a clear kind of colour if we look at Bootstrap, and we go across to go to components: see
Bootstrap has this thing called NavBars, and they’re essentially the
navigation bars at the top you can see that if I wanted a NavBar that is this lighter gray colour, what I need is a NavBar with a class of navbar default whereas if I wanted something that was a bit darker which is the one that we currently have in the app we’ve got this NavBar inverse so if you
wanted to change that where do you actually find that in the app? I can show you where that is, That’s actually the hook-in from the server side to the app itself, so it’s actually it’s up in the app>views, and go to layout within layout, these are all the things that create the head of the app, and point to where the body kind of kicks in to the app itself and this is how our app connects down to our Angular app if you like so here we’re actually saying that we’re going to include this header client view and bring that into our app and when we’re doing that we’re going to push in this this navigation bar, we’ve fixed it to the
top and it’s an inverse bar. We’re going to change that to default so that’s easy restart grunt whilst Grunt is starting up, the next thing I’m going to do is go to public modules view so where we were
before but this time instead of going to the home client view, I’m going to go to the header client view and if you go down to line 9 you see that we’ve got this ‘nav brand’ which is the equivalent of what we’ve got up here on our mock-up so I want to
change that to AppMakers, to be similar to our our mockup just like that there save that I’ve got my mockup over here, when I go an look at the actual app so, let’s have a quick look at the mobile version, if we go back to our app and we make this a bit smaller we’ll see that we’re starting to get that similar format happening for the mobile app as well alright, so that’s it for this video thanks very much, please subscribe to
the channel: and check out Bossable.com for more
details thanks again

Comments

  1. Post
    Author
  2. Post
    Author
    Justin O'Neill

    your tutorials are great, I would just recommend others to be careful when putting h1 tags everywhere.. not good for SEO! I know it's hard to cover everything, but just throwing that out there 🙂

    SEO is a whole other ball game.

  3. Post
    Author
    Adrian Begi

    Thank you for these tutorials! They help a lot when beginning with MEAN stack. I have a question. How would I add my own custom style sheet ?

  4. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *