You'll notice here that I have two tabs open in my terminal,

and one of them I'm going to use to run the application,

and the other one I'll use just for typing in terminal commands.

So I just started up the application,

let me switch over and make sure that it is actually running.

Now, we want to switch over to sublime text, and

we want to get started on the markup.

First though, there is one bit of adminstrivia I want to take care of,

and that is in the get ignore file.

If you're on a Mac, like me, you'll want to add dot

DS underscore store to your get ignore file because

we don't want these DS store system files getting committed to our repo, so

we want to add it to our git ignore, and that will just ignore

any DS store files that end up there, and they won't get committed.

So just add dot DS store on a new line and that will ignore them.

If your using Windows or

Linux, you'll want to make sure that similar system files are ignored.

So I've saved that file, and now we want to

start our markup with the application layout,

and that's gonna be inside of app, views,

layouts, application.html.erb.

Now, if you're not familiar, the application layout is

basically a wrapper for the rest of a rails application.

So, if you look at something like to do lists or to do items,

you'll see a couple of different views in here, and these were covered

in previous lessons, but I just want to give you a quick refresher here.

You'll see something like index.html.erb, and that's actually the index

view for a particular model, in this case, to do lists.

This markup will appear where it says

yield inside of our application layout, so

all of our views elsewhere in the app will appear here.

Modifying the application layout will modify pretty much every

page in our app because it's modifying everything that is

wrapped around whatever is yielded in the application.

So with that in mind,

I want to rearrange a couple of things throughout the entire application.

First, I want my Flash messages to actually appear at

the top of my markup here, so I'm going to highlight this here,

I'm going to remove it, and then I'm going to come up here

just after the start of the body and paste that in there.

And this is pretty much unchanged from what rails already provides for

us, but we're going to do some styling here later on and

we're gonna do it using foundation, so we want to add a couple of

foundation classes that will actually style this for us.

So, I'm gonna leave the message type in here and

I just want to type in a few classes, and

those will be Flash alert box and text center.

And later on, when we're actually doing some styling,

there will be a little bit more apparent what those classes do.

Text center is fairly obvious, it will center the text.

Alert box will just add some alert styling.

Now, just below our message I want to add an anchor element,

and this anchor is going to lead to nowhere.

It's just going to be some JavaScript, and I'm gonna add the class close.

And what this anchor will do is add a button

which will allow us to dismiss any kind of alert messages or

Flash messages that pop up.

So I'll save that,

one thing I should point out is that I typed an HTML entity here called times.

That is just going to print an X,

so it's sort of like when you did multiplication in school and

you said this number times this number, and use an X as the symbol.

So that's all that is.

And I want to apply some classes that are provided to us through Foundation.

So first, I'm going to change this to say header.

Change header down here.

And I'm going to remove a couple things here.

Don't need that line break.

I don't want this to be a list anymore, so we need to actually remove the unordered

list and move all the list items here.

So I'm just removing these closing list items, and

then we need to remove the opening ones,

being careful to preserve these logged in and logged out links.

There we go.

And then I also don't want this to appear at all, so I'm going to remove that.

We don't actually need that headline element there.

So now I'm ready to add some foundation classes.

So inside of this header,

I'm going to apply the class row and global header.

Now the first one, row, is a foundation class,

and what this will do is, as it implies, create a new row,

and inside of that row we can add some columns.

So this will basically break up different sets of columns, and

you'll see this class, row, appear again later on.

We'll get to that very shortly here.

Now inside of this header, we're going to add a div,

and I want to close it down here

because this is actually going to be a set of columns.

In fact, this is just going to be one column represented by this div, but

I want it to span across several foundation columns,

and we're gonna add quite a few classes here, but I'll explain each one.

So first, we wanna add small-12,

then small-centered, then medium-8,

and medium-centered, and

then large-5 and large-centered,

and then, finally, the class columns.

Now, what does all this do?

Well, each one of these small, medium, and large, are how many columns

this particular div should span across at different responsive sizes.

Sow we could have just said small 12, and small centered,

and that would have let the divs span across 12 columns and center it.

Of course there are 12 columns in foundation, so

that means it will span across all columns.

And if we just let it at that and didn't add any of these additional classes,

then it would have span across 12 columns at small, medium, and large sizes.

But since foundation is a mobile first framework,

we can add that small 12 class first and

then we can additionally say if we want it to be different at larger sizes.

So working our way upwards at medium sizes.,

we want it to only span across eight columns, and then at the largest size,

we only want it to span across five columns.

The last class that we want to add is columns.

In foundation, that class, columns or column, will do exactly the same thing.

It's really just a stylistic thing,

so throughout this project we'll be typing columns, but

I just wanted to point that out, in case you're used to just typing column.

Now, that will just do the header.

We actually need to add some classes around the rest of our content,

so let's do that now.

And I'm gonna make some room to work here.

Move that up just so you can see what I'm doing.

And on this div, I want to remove content, and

instead I'm going to say, row, and then collapse,

and that's gonna create a new row, and it will make sure

that the columns actually span edge to edge when it's a small-12.

So let's create another div around here for

our columns, and I'll just tab that in, and

we want this to be exactly the same as what we have up here.

So I'll paste that in.

Okay, that looks good.

And then finally, again,

we'll use another HTML5 element, footer,

and similarly, write the class row,

then inside we'll add a div.

And then once again, we want all the same classes, so

we'll copy and paste that right there.

And there's one more class there that we want to add, and that's text center

because we want the text in our footer to be centered

just like in our Flash messages up here.

Now, there's some code that we want to add inside of our footer.

We want to show the settings link, which is basically

just the edit user path, if users are logged in.

So let's type that out now.

So we'll say, if logged in and

we'll end that there.

We want to display.

A link to.

And say settings, and it'll be the edit_user_path,

and we want to pass that the current_user.

So let me delete all this extra space here.

Save that out, and if we switch back to the browser and refresh the page here,

we should see that we're now using the foundation responsive columns.

So if I resize the browser, you can see that at mobile sizes,

our application will span edge to edge, which is exactly what we want.

It doesn't look too pretty now, but we'll change that soon, and

then as we get up to larger sizes, say on a tablet,

it will span a little bit wider, but not quite touching the edges.

And then finally, at desktop sizes, it will span across five columns.

So now we can switch back to our terminal and type git status, and

you'll see that we modified the git ignore and the application.html.erb layout.

Then we can type get commit dash an to add and

write our message, and

we'll say modify the application layout.

And then I can just type git push.

And it will push it to the design branch.