mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-20 11:51:40 +02:00
207 lines
9.0 KiB
HTML
207 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WebSlides - Documentation 1.5.0</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="kss-node">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<link rel="stylesheet" href="kss-assets/kss.css">
|
|
<link rel="stylesheet" href="../../static/css/webslides.css">
|
|
|
|
</head>
|
|
<body id="kss-node" >
|
|
<header class="kss-header">
|
|
<h1 class="kss-doc-title"><img src="../../static/images/favicons/favicon.svg" alt="WebSlides - Documentation 1.5.0" /></h1>
|
|
<nav class="kss-header-nav">
|
|
<ul>
|
|
<li><a href="../../index.html" target="_blank" class="">WebSlides</a></li>
|
|
<li><a href="./" target="_blank" class="kss-menu-active">Documentation</a></li>
|
|
<li><a href=".../demos/index.html" target="_blank" class="">Demos</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="kss-sub-header">
|
|
<p>WebSlides - Documentation 1.5.0</p>
|
|
</div>
|
|
<div class="kss-container">
|
|
<div class="kss-sidebar kss-style">
|
|
<nav class="kss-nav">
|
|
<ul class="kss-nav__menu">
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link kss-nav__menu-link-active" href="./">
|
|
<span class="kss-nav__name">Introduction</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-forms.html">
|
|
<span class="kss-nav__name">Forms</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-landings-and-portfolio.html">
|
|
<span class="kss-nav__name">Landings and portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-layout.html">
|
|
<span class="kss-nav__name">Layout</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-longforms.html">
|
|
<span class="kss-nav__name">Longform</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-media.html">
|
|
<span class="kss-nav__name">Media</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-multipurpose-blocks.html">
|
|
<span class="kss-nav__name">Multipurpose blocks</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item kss-nav-has-children">
|
|
<a class="kss-nav__menu-link " href="section-typography.html">
|
|
<span class="kss-nav__name">Typography</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div role="main" class="kss-main">
|
|
<div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
|
|
<h1 id="webslides-create-stories-with-karma">WebSlides = Create stories with Karma</h1>
|
|
<p><a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"></a>
|
|
<a href="https://github.com/webslides/webslides/releases/latest"><img src="https://img.shields.io/github/release/webslides/webslides.svg" alt="Release"></a>
|
|
<a href="https://codecov.io/gh/webslides/WebSlides"><img src="https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg" alt="codecov"></a>
|
|
<a href="https://www.paypal.me/jlantunez/8"><img src="https://img.shields.io/badge/Donate-PayPal-green.svg" alt="Donate"></a>
|
|
<a href="https://twitter.com/webslides"><img src="https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social" alt="Twitter"></a></p>
|
|
<p>Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — <a href="https://webslides.tv/demos">https://webslides.tv/demos</a>.</p>
|
|
<hr>
|
|
<h3 id="download">Download</h3>
|
|
<p>Simply choose a demo and customize it in seconds. Latest version: <a href="https://webslides.tv/webslides-latest.zip">webslides.tv/webslides-latest.zip</a>.</p>
|
|
<hr>
|
|
<h3 id="what-s-in-the-download-">What's in the download?</h3>
|
|
<p>The download includes demos and images (devices and logos).
|
|
All content is for demo purposes only. Images are property of their respective owners.</p>
|
|
<pre><code>webslides/
|
|
├── index.html
|
|
├── css/
|
|
│ ├── base.css
|
|
│ └── colors.css
|
|
│ └── svg-icons.css (optional)
|
|
├── js/
|
|
│ ├── webslides.js
|
|
│ └── svg-icons.js (optional)
|
|
└── demos/
|
|
└── images/
|
|
</code></pre><h2 id="features">Features</h2>
|
|
<ul>
|
|
<li>Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.</li>
|
|
<li>Slide counter.</li>
|
|
<li>Permalinks: go to a specific slide.</li>
|
|
<li>Autoslide.</li>
|
|
<li>Click to nav.</li>
|
|
<li>Simple CSS alignments. Put content wherever you want (vertical centering...)</li>
|
|
<li>40+ components: background images/videos, quotes, cards, covers...</li>
|
|
<li>Flexible blocks with auto-fill and equal height.</li>
|
|
<li>Fonts: Roboto, Maitree (Serif), and San Francisco.</li>
|
|
<li>Vertical rhythm (use multiples of 8).</li>
|
|
</ul>
|
|
<h2 id="markup">Markup</h2>
|
|
<ul>
|
|
<li>Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.</li>
|
|
<li>Each parent <code><section></code> in the <code>#webslides</code> element is an individual slide.</li>
|
|
</ul>
|
|
<pre><code class="lang-html"><article id="webslides">
|
|
<section>
|
|
<h1>Slide 1</h1>
|
|
</section>
|
|
<section class="bg-black aligncenter">
|
|
<!-- .wrap = container 1200px -->
|
|
<div class="wrap">
|
|
<h1>Slide 2</h1>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</code></pre>
|
|
<h3 id="vertical-sliding">Vertical Sliding</h3>
|
|
<pre><code class="lang-html"><article id="webslides" class="vertical">
|
|
</code></pre>
|
|
<h3 id="css-syntax-classes-">CSS Syntax (classes)</h3>
|
|
<ul>
|
|
<li>Typography: <code>.text-landing</code>, <code>.text-data</code>, <code>.text-intro</code>...</li>
|
|
<li>Background Colors: <code>.bg-primary</code>, <code>.bg-apple</code>, <code>.bg-blue</code>...</li>
|
|
<li>Background Images: <code>.background</code>,<code>.background-center-bottom</code>...</li>
|
|
<li>Cards: <code>.card-50</code>, <code>.card-40</code>...</li>
|
|
<li>Flexible Blocks: <code>.flexblock.clients</code>, <code>.flexblock.metrics</code>...</li>
|
|
</ul>
|
|
<h3 id="extensions">Extensions</h3>
|
|
<p>You can add:</p>
|
|
<ul>
|
|
<li><a href="https://unsplash.com">Unsplash</a> photos</li>
|
|
<li><a href="https://daneden.github.io/animate.css">animate.css</a></li>
|
|
<li><a href="https://github.com/VincentGarreau/particles.js">particles.js</a></li>
|
|
<li><a href="http://michalsnik.github.io/aos/">Animate on scroll</a> (Useful for longform articles)</li>
|
|
<li><a href="http://williamngan.github.io/pt/">pt</a></li>
|
|
</ul>
|
|
<h3 id="dive-in-">Dive In!</h3>
|
|
<ul>
|
|
<li>Do not miss <a href="https://webslides.tv/">our demos</a>. </li>
|
|
<li>Want to get techie? Read <a href="wiki">our wiki</a>:<ul>
|
|
<li><a href="https://github.com/webslides/WebSlides/wiki">FAQ</a></li>
|
|
<li><a href="https://github.com/webslides/WebSlides/wiki/Core-API">Core API</a></li>
|
|
<li><a href="https://github.com/webslides/WebSlides/wiki/Plugin-docs">Plugin Docs</a></li>
|
|
<li><a href="https://github.com/webslides/WebSlides/wiki/Plugin-development">Plugin Development</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="credits">Credits</h3>
|
|
<ul>
|
|
<li>WebSlides was created by <a href="https://twitter.com/jlantunez">@jlantunez</a> using <a href="https://github.com/eudicots/Cactus">Cactus</a>.</li>
|
|
<li>Javascript: <a href="https://twitter.com/Belelros">@Belelros</a> and <a href="https://twitter.com/luissacristan">@LuisSacristan</a>.</li>
|
|
<li>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="https://twitter.com/jennschiffer">@JennSchiffer</a>.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SCRIPTS -->
|
|
<script src="kss-assets/kss.js"></script>
|
|
<script src="kss-assets/scrollspy.js"></script>
|
|
<script src="kss-assets/prettify.js"></script>
|
|
<script src="kss-assets/kss-fullscreen.js"></script>
|
|
<script src="kss-assets/kss-guides.js"></script>
|
|
<script src="kss-assets/kss-markup.js"></script>
|
|
<script>
|
|
prettyPrint();
|
|
var spy = new ScrollSpy('#kss-node', {
|
|
nav: '.kss-nav__menu-child > li > a',
|
|
className: 'is-in-viewport'
|
|
});
|
|
var kssFullScreen = new KssFullScreen({
|
|
idPrefix: 'kss-fullscreen-',
|
|
bodyClass: 'kss-fullscreen-mode',
|
|
elementClass: 'is-fullscreen'
|
|
});
|
|
var kssGuides = new KssGuides({
|
|
bodyClass: 'kss-guides-mode'
|
|
});
|
|
var kssMarkup = new KssMarkup({
|
|
bodyClass: 'kss-markup-mode',
|
|
detailsClass: 'kss-markup'
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
|
</body>
|
|
</html>
|