7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 41 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Applying Nucleus to a Project

Welcome to the final lesson of this course, where we’ll put all the theory we’ve learned to good use by generating a style guide from a bunch of Sass files. Let’s begin.

3.2 Applying Nucleus to a Project

Welcome to the final lesson of this course where we'll put all the theory that we've learned to good use by generating a style guide from a bunch of Sass files that I created for this course. So let me walk you through those Sass files. There are a couple of them, these with underscores are called partials. And they are loaded in this main.scss file. So we have a file for buttons, one for a couple of components like logo, navigation and called actions. A file for some simple inputs. Layouts where I have header, main, features. Then I have a few mix ins. And settings for some image paths, colors and typography. And finally, a typography partial where I just set styles for font sizes, paragraphs, heading and so on. Basically files that you would find in any web project that's powered by Sass. Now, let's take each one of these files and add the appropriate comments for nucleus. And we're going to apply the four components, nuclides, atoms, molecules and structures. Let's begin with buttons. And buttons are stand alone components, right? They're the very basic components, so these fall into the atoms category. We're gonna do it like this. I'm gonna place my comment in here, and I'm gonna say default button, the description. I'm gonna mark this as an atom. I'm gonna give it the name of button. And then here's something that I haven't shown you yet. Another annotation, if you wanna call it, that's called section. And section allows you to categorize these elements, and you can name the sections however you want. Just know that when you specify a nuclide, as a color or a mix-in, those have their own separate categories, so you don't have to do it yourself. In my case, I'm gonna say section elements. Again, you can call this whatever you want. We also have a modifier for the button in the form of the secondary class, right? So I'm going to say modifiers, secondary and secondary button. And then let's go ahead and include some markup. Here I just specified the normal use of a button and also how we would use it with the secondary class. And finally, let's say that this button relies on some JavaScript to perform certain actions. Well, we'll apply a script and we're gonna include some JavaScript code, something like this, very, very simple. And that's it really for button. Let's move on. Components, let's see what kind of components we have. We have a logo and the logo can be very simple. It can be an atom, or it can be a molecule, depending on what elements you put in it. If you put just an image, it can be an atom. But if you put an image plus text, it can be a molecule. So we're gonna define it as a molecule. So I'm gonna say, logo, as a description and then mark it as a molecule. Give it a section, let's say, components, and give it some demo markup. Notice here that I used substitutions to generate a dummy 60 by 60 image. Next is the main navigation. Now this is a list made up of multiple list items. So obviously, it's a molecule. Let's mark it as one. All right, so I added a description, marked it as molecule, gave it a name. Set its section to components just like my logo. And then applied some markup. Next up is a simple call to action. And the way I imagine the call to action is that is has a button and a heading. So obviously, two atoms put together, that's a molecule. Again, description, set it as molecule, give it a name, give it a section, and then give it some markup. Now, I'm gonna go ahead and just put all of the necessary comments in their place and just walk you through them. So, we'll begin with the feature. The feature, just like all the other components. Again, description, we give it a name, set it's section and gave it some markup. Then this is the default call to action. As you can see it extends the simple one but changes a couple of properties. Same thing, setting all the other elements the same way. Now let's move on to forms. These form elements, inputs, are considered atoms, because they aren't made up of anything else. They're just basic components. Again, setting all the necessary information, setting a section, and then giving markup for both of these. Next up, let's talk about layouts. Now, layouts is where it gets a bit trickier, because these are structures, they are the most complex elements of our page. So, the first one its called header, as you can see in the markup example here, it includes a logo, it includes a navigation. And logo and navigation are both molecules. So, obviously this has to be a structure. We're marking it as structure, giving it a name, setting the flag to full width. So, it is going to display as full width on our style guide. Setting a section for it, and of course, setting the markup. Next one is the main element. Also setting it as full width, this is also a structure, and it has this markup that you see here. And finally, we have features which is a list of features arranged as 4 per row, as you can see in the description here. Mark it as structure, give it a section, and giving it some markup. Now, in the markup, notice that we included the feature. And the feature is actually grabbed from our components. And we defined it right here, so what nucleus will be doing, is is gonna replace this bit with this bit. And it's gonna do that four times. Now, let's move on to mixins. The first mixin is for border-radius. It's exactly the same example that I showed you in the previous lessons, it just has a different name. Setting it as a mixin, giving it a name, setting a section for it, also measuring the parameter and setting an example. Another mixin is called ClearFix, basically a hack for setting clear both on any element. Also setting it as a mixin, giving it a section and an example. Next up, the settings. Now for the settings, we start with paths. This is the path to the image folder, right? So this is a nuclide. We're setting it like so, giving it a name, and then setting the section to Settings > Paths. Now, by setting a section like this, we're basically creating subcategories. So this is the main category, or the main section. And this is the sub-section, this right here will basically allow you to do that. Doing the same thing for the fonts folder, setting it as a nuclide, and setting the same section. And then for colors, we're using the color annotation. Also setting a section for it. Now what you'll see in the final result is that these colors are under their own separate section. But we're, by defining a section here, we're basically creating a sub section. We'll do the same for the other colors, as you can see, white, accent, gray, and a dark gray to which I applied deprecated. Finally, we have some new clides for typography, just a base font size that goes into settings typography. And a line height that goes in the same category. Finally, typography currently looks like this. But after we apply the necessary comments, it looks like this. Now, here we can see that you don't have to apply these comments to all of the elements. You just apply them to the ones that you care about. In my case, I want to mention the paragraphs. So this is an atom. I give it a section, also entered some markup. And then, I applied comments to all of the headings. I gave it a name, set it to pass an atom, setting the section and the markup. And this goes for all of them. Finally, I have done the same thing for a small element. All right, so these are all of the necessary comments for these Sass files. Now let's go ahead and generate our style guide. And I'm gonna execute nucleus here, by doing this, nucleus, config config.nucleus.json. So I'm basically running it using the configuration that we created earlier. So I'm gonna hit Enter. It says that it found 8 files in my scss folder. And in about a second, it created this style guide in this directory right here. And we can see that it generated a bunch of HTML files. We have an index and then a file for nuclides, atoms, molecules, and structures. So now if we're gonna open that index file, it's gonna take us to our finished style guide. On the left, you'll see the table of contents with the categories that we've set, right? So we have mixins, settings, paths and typography, these are the sub sections we created. And the default color scheme is the subsection that we created here, let's see, this one, default color scheme. So you can see all of these, we have the mixins, we have the code for them. You can see all the parameters are here. Nicely laid out, the clearfix. And then we have the paths, we can copy the variable if you want. And then stuff for typography. And then, finally, the color scheme. The colors are nicely laid out like this with their names, the variable names, hex colors and RGBA values, very nice. Now, let's check out the atoms. Yeah, we first have the buttons, the default and the secondary. You can also see the button modifiers here. And if show an example, you'll see the HTML markup along with the JavaScript code, very nice. Text input, paragraphs, heading, everything basically. Molecules, here's the logo with the generated image from on splash, the navigation. And finally the structures. Now, you can see the main header here, the main content, features. One problem that I noticed here is that the style guide actually is not using the CSS I told it to for the elements preview. All right, so these buttons should have been styled. So let's see what's up with that actually. Let's see style guide. Let's have a look at this index HTML they generated. So it uses styles/apps.css, and then it links to app/css/main.css. Now it should be here, I mean the correct CSS is present, so I wonder why it's not behaving properly. So, app/css/main.css. All right, I think the path, actually, isn't correct. So, hold on. Let me open this config file and we are simply going to run nucleus again, hit refresh and there you go. Yeah, I forgot that style guide and app are exactly at the same level. So index HTML in order to use this main.css file, it needs to go one level deeper. So that's why I added this extra bit, all right. So now all the elements are styled correctly. You can see the buttons, let's go over to the molecules. Yeah, you can see the menu here is now styled correctly. That call to action, the features. Let's see their structures. Yeah, All right, it looks good. Now I just wanna show you one quick thing before we wrap this up. Notice how I, when I run nucleus I just say nucleus--config, well, if you don't want to do that every time there is an alternative method. You can simply go into your package.json file if you have one. If you are using NPM or Node, then you're most likely to have one. You would go under scripts here and you'll simply say, let's call this style guide. And I'm gonna add another entry and I'm simply gonna copy this bit and I'm gonna paste it right here. Now just make sure you put a comma here after the first key-value pair. Also if you don't have scripts, your package.json file doesn't necessarily have to look like this. But just make sure you have scripts here. And you would put this line. It doesn't have to be called style guide, you can call it whatever you want. But the idea is you would simply do npm run, and you would paste in whatever name you set here. In my case, it's style guide, and it's gonna do exactly the same thing. And that's it for nuclide. I think it's a very interesting project, definitely, very helpful if you're looking for a simple way to generate style guides from Sass. Thank you very much for watching this short course. I'm Adi Purdila, and until next time, take care.

Back to the top