MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll continue adding Bootstrap styles – buttons, glyphicons, navbars to build a home page in our Mean Stack.

We look at:
– Continuing to build based on our App Design (use cases, storyboard, and wireframes)
– An Introduction to Bootstrap Buttons
– An Introduction to Bootstrap Glyphicons
– A Quick Intro to Chrome Developer Tools
– An Introduction to Bootstrap NavBars
– Changing the color of the MEAN NavBar
– Changing the Brand Label on the NavBar

The functional design post mentioned in this video of the home page – use case, storyboard and wireframes can be found here: Home Page Design.

The code mentioned in this video is below:

Layouts

This code goes into home.client.view.html

<section data-ng-controller="HomeController">
    <div class="row">

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-success">
                            <i class="glyphicon glyphicon-user"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                    <h1>20,408</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                    <span class="text-muted">TOTAL CUSTOMERS</span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-primary">
                            <i class="glyphicon glyphicon-calendar"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                   <h1>8,382</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                    <span class="text-muted">UPCOMING EVENTS</span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-success">
                            <i class="glyphicon glyphicon-edit"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                    <h1>527</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                    <span class="text-muted">NEW CUSTOMERS IN 24H</span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-info">
                            <i class="glyphicon glyphicon-record"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                    <h1>85,000</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                    <span class="text-muted">EMAILS SENT</span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-warning">
                            <i class="glyphicon glyphicon-eye-open"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                    <h1>268</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                   <span class="text-muted">FOLLOW UP REQUIRED</span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="row">
                <div class="col-xs-2">
                    <h1>
                        <button type="button" class="btn btn-danger">
                            <i class="glyphicon glyphicon-flag"></i>
                        </button>
                    </h1>
                </div>
                <div class="col-xs-10">
                    <h1>348</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-10 col-xs-offset-2">
                   <span class="text-muted">REFERRALS TO MODERATE</span>
                </div>
            </div>
        </div>
    </div>

</section>

Background CSS

This code goes into core.css

body {
    background-color: #eeeeee;
    }

Layouts

This code goes into layout.server.view

<header data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-default"></header>

header

This code goes into header.client.view

	<div class="navbar-header">
		<button class="navbar-toggle" type="button" data-ng-click="toggleCollapsibleMenu()">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a href="/#!/" class="navbar-brand">AppMakers</a>
	</div>

Video Transcript

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 yesterday and today we’ll extend that out a little bit further by continuing 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 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 we’ll 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 create is 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. 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.
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 button is 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, let’s 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 (Bootstrap) 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. 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 grey 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.
We can change that to anything we like. For example, I could just change that to grey but the cool thing that I like about Webstorm is that it has this colour picker. I can just grab that over here click and choose that, so let’s go and see that.
That’s good to see that it has that greyish 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 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 grey 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.

If you wanted to change that where do you actually find that in the app? I can show you where that is. It’s actually the hook-in from the server side to the app itself, so 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.

This is how our app connects down to our Angular app if you like. 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 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 because we changed a server file. 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.

I want to change that to App Makers, to be similar to our mockup just like that. Save that, when I go and look at the actual app, 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.

Thanks for joining me, please subscribe to the YouTube channel or check out www.bossable.com for more details.