Challenge 1: Parental Selectors

[00:00:00]
>> Mike North: I'd like to now, kind of jump into this project that I've had everyone check out, and show you how it works. So I'm gonna switch over to my code here.
>> Mike North: And let's see, make sure we've got everything ready.
>> Mike North: So, what I've had you check out is a project that has a folder in it called Exercises.

[00:00:30]
And if you open that folder up, you'll see that we have, I believe, 11 folders here, each of which corresponds to like a little task that we're gonna go through today. So these iter are basically separate programs and the way that you'll fire them up is, let me make sure I kill the one that's already running.

[00:00:52]
>> Mike North: I should refresh this, good. So the way you'll fire them up is we're gonna go, I'll get rid of my sidebar run -e, and then you move the exercise. And at the bottom at each of these exercise instructions I'm gonna give you, there'll be a command at the bottom that will start with run dash e and then a name.

[00:01:13]
So in this case we're gonna start with nesting. And you'll see a banner that says, we've started this exercise, and you can go and view your app at localhost, colon 3000. So if you go into a browser and view that, you should start to see something on the screen.

[00:01:34]
>> Mike North: So what you're gonna be left with here are some tests. I've written a mini CSS testing framework for the purpose of this workshop and it essentially finds the elements and asserts that the styles of them are where they should be. If you've followed the instructions as appropriate.

[00:01:56]
Sometimes you'll find that I don't explicitly tell you what to do in the instructions for the exercise, but you'll find that the styles are asking you to do something. Like the background of something should be a particular color. So if we look at the way this looks, this is an example of a failing test.

[00:02:14]
It's saying that Instead of in jQuery select or style, it looked for this element and then expected it to have a left padding value of ten and instead it found a left padding value of six. So, what's you're gonna do is work to pass these tests. If you look in the exercises folder and open one of these up, let's open up nesting, you'll see that you have two folders.

[00:02:42]
The public folder is what your browser is reading, so that's gonna include an html file and the css that your Sass generates. The source file, that's where you're gonna find your Sass. If you've installed the Chrome LiveReload plugin, which is a really quick install. If you Google Chrome LiveReload plugin.

[00:03:06]
If you have that installed, you should be able to change your SAS and save the file. And immediately see, those ramifications pop up as you make those changes. I had mine off, I'm gonna turn it back on. So I just saved and you can see that it went green and here it goes back.

[00:03:28]
So this is a really nice way that you can kinda have, the tests and the app running and just work on your SaS and just be, every time you save the file, you'll see that more test had passed. Some of the colors that you've applied have now been applied in the buttons that are here and so on.

[00:03:44]
Does anyone have a question about how this works? All right, feel free to put your hand up if you run into trouble here and with that let's look at the instructions for our first exercise
>> Mike North: So what we're trying to build is the thing I'm showing you on the right hand of the screen here.

[00:04:05]
We're trying to build some buttons where we have a primary button, a secondary button that sort of jumps out less in terms of color. And they both have styling for their disabled states. So, the buttons must have 10px padding on left and right. 2 pixels on the top and bottom.

[00:04:26]
There's some requirements for the colors of the border. And the colors of the backgrounds. These, so the way that the classes should end up being applied, is you should have both the button class and button primary. So this is sort of following the Twitter Bootstrap convention. Where button should have, teh btn should have the structure of the button, the padding and stuff like that.

[00:04:51]
And then button primary should have colors, things that distinguish primary from secondary. They should go in the primary and secondary classes. And then finally, just for now, when you disable a button using the colon disabled pseudo-selector, and you can search for that if you've never seen that before.

[00:05:13]
The opacity of that button should decrease to 50% or 0.0/5. And all the tests that are in place they should steer you towards this result so you have a bunch of really test waiting for you there. So I'm gonna give everyone ten minutes to complete this, and please let me know if you have problems with the setup.

[00:05:35]
I will do my best to unstick you.
>> Speaker 2: Like that plugin you were just talking about, was that the CSS triggers?
>> Mike North: Right, so let me be unambiguous about that. So the CSS Triggers plugin is a nice one to have. This is the one that I was referring to specifically.

[00:06:01]
It's called LiveReload. It's a really popular plugin. All it does is it sets up a web socket, and whenever you save a file, the browser is told that it should refresh. This is optional. It's what's gonna give you the auto refreshing capability. You don't need this, but it is quite nice to have.