2.1 Installing Reveal.js and Creating a Custom Theme File

Let's begin by installing reveal.js using npm and the command line. We'll do a full installation, because that allows us or gives us all the tools we need to quickly create new themes. There is also a much simpler way to install the framework. And I covered both of these installations in the Introduction course I made. So make sure you check out the link below. Now, let's go ahead and do a full framework installation. And we'll start right here on the homepage of reveal.js, reveal.js.com. We'll click the GitHub page, we'll go right here where it says clone or download and we're gonna copy this link here. So then we're gonna open up our terminal. In my case, I'm using an app called Hyper. And the first thing we need to do is navigate to our working folder. In my case, I have one on the desktop called Reveal Demo. So I'm gonna change directory to my desktop and then reveal demo. Now once I'm in here, I'm simply gonna say git clone. I'm gonna paste in that link, hit Enter, and the clones, that repository, right here. And it copied all the files that we need. Now the next thing you have to do is install all the npm dependencies, all the packages that are being used by the build system that comes reveal.js. For that, you would navigate to the reveal.js directory and you would say npm install. And once everything is done, you will see a node modules folder added here. This contains all the JavaScript, all the files required for this thing to work. So now what we can do is say npm start and that's gonna open up a new browser window at locahost 8000. And here we have the beginning slide, which is fully functional. All we have to do now is configure it. So let's close this and let's open our working folder and code editor. So let'st drag this and VS code. And here, we have access to all the files we need to create our presentation. Here's my Index HTML. This is the main HTML file that we see here. And the CSS folder contains all the CSS files we need for our themes. So that's where we need to start. Let's go in here, under theme, source, and let's select one of these. It doesn't really matter which one. For example, simple, I'm gonna copy, and I'm gonna make a duplicate out of it. And I'm gonna rename this two custom. So, because our command line tool is watching all of these changes, it already created a custom.css file. So let's open up our index.html and we gonna load where it says theme/black.css. We gonna load our custom.css file instead. So let's have a look. I've now changed the theme and it uses as a copy of that simple.scss. Now finally, let's have a look at the anatomy of this custom file. First of all, this is loading some mixins and settings that can be found under Template, which is right here. These we don't really wanna tamper with. It's just styling for the framework, so we'll leave those. Here the theme actually includes some fonts from Google. We'll get rid of these and we'll load our own fonts. This is where we can override the theme settings. And for a simple theme where you just changed the colors and maybe the fonts, these will be more than enough. But our theme will be a little bit more complex than that so we'll actually be writing a lot of custom CSS. And then finally, it loads a theme template, which looks something like this. It basically includes all the styles required for this to work. So the customization we'll be doing is in here, inside this custom SCSS file. Now, let's have a look at the theme we're going to build. I actually went ahead and designed this in sketch beforehand, so we can speed up the process a little bit. I'm not gonna show you the design process, that's not what this course is about. Instead we're gonna take that sketch design and we're gonna adapt it to our reveal framework, so that's coming up in the next lesson.