mirdaki/revealjs-swiss

Swiss design inspired themes for the reveal.js framework

reveal.js Swiss Theme

Swiss design is one of my favorite design styles, so it naturally made sense to make a Swiss inspired design for reveal.js (a really cool web based presentation framework). You can checkout an example of it here.

Both the Jekyll Swiss theme and the reveal.js theme built by Myplanet were used as reference for this theme.

Usage

To use, copy the swiss.scss file and the swiss-colors folder from css/theme/source into your own reveal.js presentation.

To change the color style, update the @import "swiss-colors/COLOR"; on line 19 of the swiss.scss with respective color you would like and regenerate the CSS via npm run build -- css-themes.

Finally, update your index.html to use css/theme/swiss.css as your theme.

Optionally, grab a code syntax highlighter theme from highlight.js and include it as a stylesheet in your index.html.

Future Work

This is a first release, so expect it to be rough around the edges.

Contributions are welcome! Check out the 1.0.0 milestone to see what should be done first.

License

This project's code is licensed under the MIT License - see the LICENSE.md file for details.

revealjs-swiss's Issues

Better responsiveness

All of the layouts should scale nicely on different sized devices (phone, tablet, laptop, wide monitors, TVs)

• Title #4
• Section markers #5
• Single column #6
• Double column #3
• Code layouts #7

Title slide layout

Right now there is no specific title slide layout in CSS (just me choosing elements that make it look nice). One should be added for ease of use

Make using revealjs-swiss colors easier

Right now you basically need to download the whole Reveal.js code (on the gh-pages branch) and recompile to switch to one of the other Revealjs code options. I see two ways to improve this without making the source messy.

1. Have the SCSS generate separate CSS files for each color option, without having to copy and paste any of the SCSS. This way people just download the CSS file they want and update one line of HTML. This is the preferred way in my mind, though I don't know how to do it.
2. Have a separate SCSS/CSS file with just the colors that can be used with the default generated CSS file to update the color (so modifying two lines of HTML to import them both). I also don't know how to do this, as the SCSS variables aren't available at that point

I am certainly open to suggestions

Update authors in example

I would like to emphasize in the example that the specific theme is different from Reveal.js. Though it feels a little weird, the easiest way to do that is to update the author part in the first slide mentioning revealjs-swiss and myself.

Section slide layout

There should be a section marker slide layout option for ease of use

Switch to variable font

It'd be nice to take advantage of Inter's variable fonts (less files to load, a little bit more control). As of right now though it seems there is a lack of browser support. Hopefully in the near future we can set it as a reliable primary font though.

Resource: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Consider other color options

This is just to provide more options and maybe tweak some of the existing ones to be better. Always open for suggestions on this, as it's not my specialty

Two column slide layout

Just like it sounds, there should be a layout option to allow two columns (if the screen is large enough). Content on smaller screens should update to look nice accordingly.

Single column layout

This is sort of the default layout right now, but for consistency sake, a layout class should be set on each slide

Switch primary font to Inter

Inter is a really nice looking font similar to Helvetica (and feels very Swiss design). It's also open source, so it should fit right in.

Interactive code slide

I'm not sure how to arrange this, but it'd be really cool to have some JavaScript on a slide be run-able (and optionally editable) and have it update an example next to it (or on the next slide if it just doesn't fit)

Investigate graph and chart libraries

It'd be very cool to have graphs and charts in the slides (either taking up a full one or part of one). Bonus points for any built in animations. It should allow people to load data either directly from HTML/Markdown or separate files. It could be something that generates SVGs or uses JavaScript to render the graphs.

Provide examples in README

It should be easy to see the different color combinations and slide layouts by just looking through the README or having the README link to an example doc

Use Title for CSS classes

The current CSS naming scheme is kind of a mess. Title seems like a good option at keeping it organized and simple