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

2.1 What Is Nucleus?

Nucleus is a style guide generator which will parse your Sass files and compile HTML pages based on the components found within. Let’s have a closer look.

Related links

2.1 What Is Nucleus?

Let's have a closer look at Nucleus. It's a style guide generator that will basically parse your SaaS files. And will generate some HTML documents based on the components found in those SaaS files. Now Nucleus is based on the principles of Atomic CSS, which is basically a guideline for writing modular styles. So if you have ever wondered how to better structure your style sheets, well, Atomic CSS might be the answer for you. Now this course is not about Atomic CSS, that's a discussion for another time. Nucleus, It has four major components nuclides, atoms, molecules, and structures. This is what it uses to categorize and organize all of the components found in your Sass files. Now by using Nucleus, you can generate something like this. This is a style guide, it's the actual official demo style guide by Nucleus, right? So you can find the nucleotides here, we can see colors. A lot of information from the colors, and this is grabbed directly from Sass. So you don't have to do anything except write some comments, as you'll see in just a little bit. You'll find mix-ins here, also atoms, you'll find the basic components. Buttons, and typography components, and stuff like that. Molecules, these are the more complex components. And finally structures, they are the biggest components, like, for example, entire headers. What's nice about this style guide is that you can also search for stuff. Color, for example, gives you a quick result here. We can also go to that particular color when you click the result. All in all, very, very cool. Now let's see an example of how you can write comments and define such a component using Nucleus. So I'm gonna open my code editor here. And for now, I'm simply gonna create a new file, I'm gonna call it test.scss. Right, and let's say you have a component. Or let's not actually call it body, let's say container here. And you have some styling for it, like for example, width and margin, Like this. Well, the way to use nucleus is by using comments just like you would in JSDoc. If you have ever worked with JSDoc, you know that you can write a special style of comments in JavaScript. And those comments will be parsed by a piece of software. And will generate documentation for JavaScript. Well, Nucleus is exactly like that instead it generates documentation for SaaS. So the style for that comment is something like this. And in here you would write descriptions. And you can put annotations to mark different elements as nuclides or atoms and so on. So to create a description for the item, you wouldd simply type the description. And then you would mark that item with an annotation. So you can use the following nuclide-atom-molecule structure. I'm gonna call this atom, and you would give it a name. For example, container, right, this is a very basic example. Now once this is saved and Nucleus is run, it will go over this Sass file. It will look for comments like this, it will find description. It's gonna find the atom annotation. It will know that the element immediately following the comment will be an atom. So it's gonna grab its name, and it will grab other parameters that you might put below this, right? Because, as we'll see, there are many more options to Nucleus. So it's gonna take that, it's gonna run a few scripts. And it's gonna generate HTML pages based on this. Now this is not the only software that can generate a style guide like this. An alternative would be SassDoc, very similar. It's also free, you can install it using npm. And it also has, if we take a look at the demo here. Let's see, theme gallery, it also has a bunch of themes for you to choose from. You can also generate your own theme if that's what you want. You can see a preview here. The thing with SassDoc is that it is more complex than Nucleus. And it can be integrated into your automated workflow using Gulp or Grunt. I did not see that in Nucleus, maybe there will be in future versions. But the way it is now, it's a stand-alone component. So you cannot tie it into an automated system like this. But nucleus is better for simple tasks, right? If you take a look at SassDoc, you will see that it has many, many more options than Nucleus. But this course is about Nucleus, so this is what we'll cover. With that said, let's move on and learn about the building blocks of Nucleus. That's coming up in the next lesson.

Back to the top