2.2 Basic Usage

Now that we've installed the reveal framework, let's have a look at the folder structure, the HTML syntax, and the basic usage. So this is the framework that we downloaded in the previous lesson. We can see a couple of files here. The one that you're interested in is index.html, because this is what will be displayed in the browser. You also have a demo HTML. Just so you can see the kind of slides and all the functionality that he can get out of reveal. So this is a good file for reference. The other files are really tied into the other installation method which eases grant of and node to create a local web server, we will touch on this in the next lesson. As far as folders go you have a CSS folder which contains the CSS and SCSS files for your presentations. So you can either edit the CSS file, or you can edit the SCSS provided you have some sort of compiler that will render the associated CSS file. Here we have a folder for theme where you have all the CSS files for all the different themes we'll touch more about this in a future lesson. And here you have a print folder which contains the CSS for print and PDF export. You can export your presentations to PDF and this is the CSS file that is being used. We'll talk about this in more detail in the future lesson. You also have the reveal.JS so you don't really need to make any modifications to this. Inside the library you also have some additional CSS. This is for code highlighting, here you can see the fonts that are being used and also some additional JavaScript files that are needed. And also have some additional JavaScript plugins right here. Now let's see about the HTML syntax. You can get started by creating a container and usually a div with a class of reveal, this is very important. And then inside, you would create a container with a class of slides and then inside that you would create a section for each individual slides. So if I wanted to create another slide here, I would just duplicate this, I would put in my content and then going back to my browser, we now have three slides. It's that easy. So inside these sections you can put any kind of HTML you want. So for example you can have some headings, you can have a paragraph or you can have your own custom elements like for example div with a class of custom element with a paragraph inside. Or maybe an anchor tag, which you can turn into a button using your own classes. So a class button, right? So there is my first slide we have headings, paragraph and button and then to add your own custom CSS, well, you would just go to CSS reveal.css and you can go all the way down here and you can target those elements. For example the custom elements you can say for example background blue and color white. And you can target the button, and you can say, background green, for instance. Save that, refresh, and now you have this very ugly button. But it's that easy. Add your own CSS, add your own code here, and you're good to go. Something else that's very cool about reveal is that you can create vertical slides. So for example, I'm in slide 3 here and I'm gonna do this. By nesting sections, you can create a vertical slides, all right? So let's create two of these All right, so now in slide 3, right? We have vertical slide 1. Notice we have now vertical controls. So I have vertical slide 1, vertical slide 2. That is pretty cool. You can also use your arrow keys. So left arrow key to go back, right arrow key to go forward and then up and down to cycle through the vertical slides. Really cool, can also use the space bar to go through each slide. So that's a very quick look at the folder structure, the HTML syntax and also the vertical slides. Now, as I mentioned previously, there are two ways you can install the reveal framework. There is the simple way, which I showed you in the previous lesson, but there's also a more complex way which involves node and the creation of a local web server. So that's a little bit more complicated but it gives you access to some more advanced tools. And we're gonna have a closer look at that in the next lesson.