Skip to content

Commit 5ba9157

Browse files
Create README.md
0 parents  commit 5ba9157

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

README.md

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# WebSlides = Good Karma
2+
Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos)
3+
4+
### Why WebSlides?
5+
Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
6+
7+
### Features
8+
Version 0.1 (Jan 8, 2017):
9+
10+
- Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe.
11+
- Slide counter.
12+
- Permalinks: go to a specific slide.
13+
- Simple CSS alignments. Put content wherever you want (vertical centering...)
14+
- 40+ components: background images/videos, quotes, cards, covers...
15+
- Flexible blocks with auto-fill and equal height.
16+
- Fonts: Roboto, Maitree (Serif), and San Francisco.
17+
- Vertical rhythm (use multiples of 8).
18+
19+
### Markup
20+
21+
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
22+
- Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
23+
24+
<pre>&lt;article id="webslides"&gt;
25+
&lt;section&gt;
26+
&lt;h1&gt;Slide 1&lt;/h1&gt;
27+
&lt;/section&gt;
28+
&lt;section class="bg-black aligncenter"&gt;
29+
<span class="code-comment">&lt;!-- .wrap = container 1200px --&gt;</span>
30+
&lt;div class="wrap"&gt;
31+
&lt;h1&gt;Slide 2&lt;/h1&gt;
32+
&lt;/div&gt;
33+
&lt;/section&gt;
34+
&lt;/article&gt;</pre>
35+
36+
#### Vertical Sliding
37+
38+
<pre>&lt;article id="webslides" class="vertical"&gt;</pre>
39+
40+
### What's in the download?
41+
42+
The download includes demos and images (devices and logos).
43+
All content is for demo purposes only. Images are property of their respective owners.
44+
45+
```
46+
webslides/
47+
├── index.html
48+
├── css/
49+
│ ├── base.css
50+
│ └── colors.css
51+
│ └── svg-icons.css (optional)
52+
├── js/
53+
│ ├── webslides.js
54+
│ └── svg-icons.js (optional)
55+
└── demos/
56+
└── images/
57+
```
58+
59+
### CSS Syntax (classes)
60+
61+
- Typography: .text-landing, .text-data, .text-intro...
62+
- Background Colors: .bg-primary, .bg-apple, .bg-blue...
63+
- Background Images: .background,.background-center-bottom...
64+
- Cards: .card-50, .card-40...
65+
- Flexible Blocks: .flexblock.clients, .flexblock.metrics...
66+
67+
68+
### Extensions
69+
70+
You can add:
71+
- [Unsplash](https://unsplash.com) photos
72+
- [animate.css](https://daneden.github.io/animate.css)
73+
- [particles.js](https://github.com/VincentGarreau/particles.js)
74+
- [pt](http://williamngan.github.io/pt/)
75+
76+
### License
77+
78+
WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT).
79+
Use it to make something cool.
80+
81+
### Credits
82+
83+
- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
84+
- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :)
85+
- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

0 commit comments

Comments
 (0)