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.1 Installing Nucleus

The very first step for generating a style guide is to install Nucleus. This is only available as a Node package, so if you’d first like to learn how to install Node and NPM, please check out the lesson notes. Now, let’s install Nucleus.

Related links

3.1 Installing Nucleus

The very step for generating your style guide is to install Nucleus. Now unfortunately, this only comes as a node package. And I unfortunately, because not everyone is comfortable using the command line. The upside to this is that it's cross platform, so it's gonna work on Linux, Windows and Mac OS. If you want more information on how to use node and mpm and how to use please check to the lesson notes where I've included some relevant links. Now, let's go ahead and install Nucleus. I'm gonna use the terminal built into the code editor that I'm using which is Visual Studio Code. And I'm simply gonna say npm i, for install, -g for install globally, nucleus-styleguide. Now, when installing globally, you might get an error saying we don't have enough permission. In which case, you've got to say sudo at the beginning and that's going to install it as an administrator. And by the way you can also install this per project. You would simply say, npm i nucleus-styleguide without the -g, that's going to install it locally in your working folder. Personally, i don't need it on my working folder, so i just leave it installed globally. Now once it's installed, the next thing you have to do is create a new configuration file. And nucleus has a separate command for this it's called init, so you would simply type nucleus init and this is going to open like a wizard here. [LAUGH] gonna see some nice artwork here. So, first it asks you which files should it look for. And by default it's gonna search for all the SCSS files in all the folders. You can leave this blank if you want, but if you have a different, funkier folder structure, you can specify the folders there. In my case I'm simply gonna say, look into app dash/scss dash all the files with the extension of scss. Then it's going to ask me where it should put the generated style guide. Right in my case it gives me the working directory which is this, and the default folder name is styleguide. If you wanna change that, go ahead, but I'm gonna leave it blank, so just hit enter. Then it asks me what's the name of your transpiled CSS file. Now, this is used for generating the previews for the components, right, the previews that you see here, for example. So if you have a CSS file that's compiled from your SAS files, you need to put that in. In my case it's under app/cssmain.css, so I'm gonna put that in. That's if should wrap the markup at a name space, the default is no so I'm just gonna go with no. It shows me the finished configuration, is this okay, I'm gonna hit yes. And do you want to do a run now? Well, not yet, so I'm simply gonna say no. And this actually created a configuration file here, called config.nucleus.json, all right, and that looks something like this. And you can edit this yourself later on, you don't have to go through the wizard from the command line and simply edit if you want a different folder for the style guide. We can put it here, if you have a different CSS for the preview, you can change this, and so on. All right, so with Nucleus installed, it's time to grab some SAS files, write the necessary comments and then run Nucleus and generate our style guide. We'll do that in the next lesson.

Back to the top