Styling with SCSS & Bulma

[00:00:00]
>> Here is the next problem we have when it comes to styling, which is that well. A lot of us like preprocessors because they make our lives a lot easier when it comes to shared utility, shared variables, and that kind of stuff. So the question is, how do we use something like sass, basically the preprocessor of choice these days?

[00:00:15]
So let's go ahead and do that. So the first thing first is to understand is that nuxt does not come with sass pre-installed as a bundle. So in other words, it needs the ability to be able to read sass files correctly. And what we're gonna do is gonna run npm install --save-dev, cuz this is mainly only for the dev environment, right?

[00:00:32]
Pre-processes don't get passed up to production. And so we wanna install sass, and sass-loader, and currently the docs recommending @10. But for those watching this in the future, just check the nuxt ducs, if you want official check on what you should be installing. But basically, it's saying, hey, install my pre-processor sass, install the loader, again we're pinning it at specifically at version 10 at the moment.

[00:00:54]
In the future, that might just completely get eliminated. Okay, once that's install, you'll know you were successful, because why? Because your git log would tell you, hey, look at this, I see sass and sass-loader in my dev dependencies. Great, okay, so now I say can we actually use it?

[00:01:09]
Well, how do we use it? Inside of here, so let's go to app.view, let's say we wanna actually say we have a color that we wanna describe for the text. Well, I'm just gonna ahead and strip the module right now, I just take sort of revert things back to CSS to keep things a little bit simpler.

[00:01:24]
And let's say for the list and the title, we wanna have this class equals, let's call this heading, and we wanna have this color red, right? And so normally, what you do is you'd have a color that's red, you can have heading here, that's also color red, right?

[00:01:42]
And that should work if we go back to our app or let me start it back up, boom. Then, if I max screen this, while it's loading let's rearrange it a little bit, so it's a little bit easier to follow. All right, so interesting, I'm missing a semicolon, let's go right back to it, where did it get messed up?

[00:02:03]
Yes, clearly, I missed it here, you won't hear about that one cuz there's only one property. But now when we refresh, hey, there we go and we fetch the data, we'll see everything's right. That works, okay. So if you're a little more forward thinking, you're thinking, well, I know about variables, so CSS variables, so I can say yes, --text-color: red, I can do this.

[00:02:24]
And then from here, we can basically say var (--text-color) and var (--text-color). And to prove that this works cuz there will be no visual difference between the two unless I change this, will make this green instead, right? And then look, everything's green, looks nice. But pre-processors can help us especially with sass, especially, sometimes we are defining things that are maybe, we wanna use maybe or for example, if you're using something that doesn't have, you're supporting a browser version that doesn't have CSS variables, this won't work.

[00:02:56]
So in this case, all you got to do is you added language attribute, and for me, I prefer a CSS over sass. But same for those who haven't used it, it's basically the same thing. Some slight syntactical differences, but they're in the same umbrella. And then we could then just go well, we're gonna say, $textColor.

[00:03:12]
And this time, again, just to show that something's changing, we'll say blue. And what's nice is, I can then do $textColor like this, save, and so this syntax, to be very clear, this is sass specific, this is not CSS spec. And then we refresh over here. It didn't feed it in.

[00:03:34]
Let's check something real quick. TextColor, that's right, it needs to interpolate the thing, I forgot, that's a whole thing. Let's Google the syntax for that real quick. New window, please. Sass interpolation variable names, see, very common like tossing came up. [LAUGH] Because right now, what's happening to explain this real quick for those having you sass, this text color is actually reading this as a literal string, it is not trying to do any sort of compilation on it.

[00:04:10]
So what we need to do if I can't remember, yeah, it's this syntax. I think it should be this, is that it? I wanna say let's try this real quick, like this yeah, I already see some color syntax highlighting, this looks better already. There we go much better.

[00:04:26]
So as you can see, now you've basically paired a preprocessor along with the modern one. And then it's helpful because if things break, you have some progressive degradation. But now that we've done this though, the thing you're probably thinking next is that, okay, this is nice for my components, but I'm gonna have stuff that's shared.

[00:04:42]
How are we gonna do that? Well, this is where the assets folder finally comes into play, because assets are things that we want the compiler or the build tools to actually take a run at. So we're gonna create an assets folder. And so this folder should be an app actually, I extend credit in the root.

[00:04:59]
So you can see, here is our assets. And then typically, what I see on most projects is there is gonna be a folder for styles, and then we can create a file called main.scss. And so inside of here for example, we can go ahead and just take out this color blue, and let's just drop it in here.

[00:05:17]
And let's give our html a background colour, shall we? What's the fun color we can do, let's see. Got to love the autocomplete on vs code for the colors. Let's pick something fun, not green, not red. Let's go with papayawhip, that sounds fun. Let's do the papayawhip, that should be hopefully enough contrast and be readable to you, I like it.

[00:05:34]
All right, so if we save right now though, we're gonna get some issues though, because why? Well, first of all, text color doesn't exist, right? You haven't imported it, so how does that work? Well, it's actually pretty easy, all we got to do is we go @import. And then we actually just refer to the actual path of where it is.

[00:05:52]
So since app.view is at the root, we can basically say './assets/styles/main.scss'. And in a colon oops, semicolon actually to be clear. All right, and look at that. Our sass styles are appearing and it looks good. And so this strategy can basically be used as you break your global size up into partials and stuff.

[00:06:21]
Again, we're not this is not a CSS workshop so I'm gonna let you all dive into that as it sees fit. But you have seen at least the basics of how to get your own sass file into now, the compilation step, everything was good, you know how to import it.

[00:06:33]
Now, the next step we're gonna do with this is we're gonna have you install an actual design like system. And so the one we're going to use if you've never used it before is called Bulma. And I actually, I would be curious to find out if it was named after the Dragon Ball, Bulma, but that'd be cool if it was, I think it is.

[00:06:50]
Excellent. And actually, now I look at the logo that kind of does look like a hair color, so for any Dragon Ball fans out there. So Bulma basically is an open-source CSS framework, think bootstrap, think material design, but I like to use Bulma because everyone uses material design and everyone uses bootstrap.

[00:07:05]
So something a little bit different and I just got some nice conventions that I do enjoy using. So gow does this work? Well, we're gonna, npm install bulma, right? And so what that will do is once again we can see, take, that's why it didn't work. So okay, this is where I got to love terminal hints.

[00:07:27]
If you'll notice, normally when I make a change to something, like if I make a change here and I save it, if you'll notice that I get this like exclamation mark that tells me something's changed on your branch. And the where I get this from just so that people can have this is something called I wanna say, it's rocket ship terminal.

[00:07:43]
I mess this up every time it's starship, I don't know. I tell you I've streamed this thing multiple times, and I mess it up, but it's starship. And so basically, it's a minimal prompt, and so that's why you see my prompt the way it is. It basically tells me the project, it doesn't know what branch I'm on.

[00:07:57]
But it tells me flags when something's changed on my git branch, and then it does things like node environments and stuff. But anyways, this is nice because okay, let me revert this real quick. I just installed, Bulma, but nothing has changed and that should be a red flag immediately because what just happened?

[00:08:12]
Well, what just happened is I'm actually in the root directory and my package.json is up in app, so I'm gonna switch over to app, run npm, install Bulma again. And this time, you'll see that it's flagged me. Yes, there is a change. And what's the change? Yes, here we go.

[00:08:26]
We see Bulma in our dependencies, and we see it in our package-lock, great. All right, so now that we have that the question is well, how the heck do we actually import the thing? Well, believe it or not, the strategy is actually very similar to what we just have here.

[00:08:41]
What we're gonna do is we're actually gonna say import, and then we're actually gonna go into the node_modules folder. And so just explore it a little bit. I know mostly, we tend to avoid this, but just for the sake of teaching you what's going on here. You can actually open up the package directly and if you actually look, Bulma is actually a pretty quaint little package, it's just a folder with a sass file.

[00:09:02]
So what can we do? Well, we can just grab that Bulma sass file and import it. And so when you talk to customization, Bulma lets you then dive in, grab partials and stuff. Once again, not a CSS workshop but gives you just enough taste, it could be dangerous with it.

[00:09:17]
And now, just to show you that this works, I'm gonna add because I know that this is gonna work, I'm gonna add a title, CSS attribute to this one. So now, if I refresh it, you already see some of the stuff is starting to change, and so the title is already looking better.

[00:09:30]
In fact, the typography already starting to look a little bit better. And so one thing I'm gonna do just to make this look even a little bit better is let me go ahead and wrap this thing in a div, div, and the div. I'm gonna add for this one I'm just gonna call this one I think it's containers the one I'm looking for I meant sections save.

[00:09:49]
That's much better. Okay, I wanted to see the drop here, and so we're already starting to apply some basic layout and stuff, and so there you go. Now, you have Bulma working, and you can basically poke through the docs and we're gonna use this as the template going forward.

[00:10:02]
So if you see me starting to add class, I will try to make sure to call it out that like these are Bulma classes. So that way, I'm not writing raw CSS because again, we're here to learn about nuxt, not CSS. And y'all can dive into that on your own.