janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add introduction to usage of css in GettingStarted

Browse Source
This commit is contained in:
Janis Hutz
2023-07-06 20:51:30 +02:00
parent 9475720f42
commit f80b6d1762
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
GettingStarted.md
View File

@@ -50,7 +50,7 @@ Now, create a new file called *index.html* and create the basic HTML structure:
</html>
```
Now, head into a file-manager, navigate to the file you just created (*index.html*) and open it. You should end up in a browser where you should see "My first Slide" displayed. As this is not really exciting, we are not gonna change anything about that and are gonna look at what you just typed. What do these lines mean?
Now, head into a file-manager, navigate to the file you just created (*index.html*) and open it. You should end up in a browser where you should see "My first Slide" plus (in case you omitted the *impress-common.css* file) the fallback message displayed. As this is not really exciting, we are not gonna change anything about that and are gonna look at what you just typed. What do these lines mean?
Well, first things first, you should probably give your presentation a title. You may do this in normal HTML fashion by changing the *title* HTML tag.
@@ -62,7 +62,23 @@ Finally, we load the ```impress.js``` script from your local copy (if you have o
```
impress().init()
```
to initialize impress.js. Now, let's continue on to explore more and more features of this amazing tool!
to initialize impress.js.
If you have omitted the *impress-common.css* file, you might want to hide the fallback message. This can be done by creating a CSS file called *style.css* in the same folder you've created the *index.html* file in. In the *index.html* add the following line inside of the *<head>* tag:
```
<link rel="stylesheet" href="style.css">
```
This will load the *style.css* file in the HTML.
Now open up the *style.css* file using any text editor. To hide the fallback message, you should add the following lines to the CSS file:
```
.impress-supported .fallback-message {
display: none;
}
```
Now, let's continue on to explore more and more features of this amazing tool!
## Creating slides
Creating slides is fairly easy. You create a *div* that belongs to the class ```step``` and you are off to the races! Let me give you an example:

3
README.md
View File

@@ -22,9 +22,6 @@ You can include this link directly inside of your HTML file in its header. If yo
- V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js
- Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js
### Getting Started Guide
Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project!
### Checking out and initializing the git repository
git clone --recursive https://github.com/impress/impress.js.git