30:T654,Guilherme Ranoya, 2024

## What's it? Slidelines Level Components create a scroll presentation organized into 3 levels of hierarchy within an HTML document, using tabular data, and which can be styled freely by CSS. ## Why 3 level hierarchy? Because the most part of presentations are structured this way, whether you know it or not: with a theme, a subtopic and specifics. ## How to use it? Load the library direcly from the web: ```html ``` Or download the file from [github](https://github.com/ranoya/slidelines/blob/main/slideslvmin.js). ( legible source code avaliable [here](https://github.com/ranoya/slidelines/blob/main/slideslv.js) ) Create or choose an element in your HTML code to accommodate the component, give it an ID, and run the `slidelvh` or the `slidelvv` functions to create the component inside it: ```html

``` You can use HTML code inside the data content.31:T654,## How to style it? This is the schema for the presentation:

You can change the position of each row by overriding the `grid-row` property of the three track classes: ```css .slidelinelvh_track1 { grid-row: 3 !important; } .slidelinelvh_track2 { grid-row: 1 !important; } .slidelinelvh_track3 { grid-row: 2 !important; } ``` Or you can change de height of each row by overriding the `grid-template-rows` property of the `.slidelinelvh` class: ```css .slidelinelvh { grid-template-rows: 20px 60px 300px !important; } ``` If you have more than one component in your page, you can use CSS selectors to specify in which one you are changing the style: ```css #mySlideA .slidelinelvh { grid-template-rows: 20px 60px 300px !important; } ``` Remember to always use the `!important` key, since you are overriding an existing property.

The vertical version uses the same classes, but with the "v" instead of "h" in the end of the class name, like: ```css .slidelinelvv { grid-template-columns: 120px 160px 1fr !important; } ``` For obvious reasons, in the vertical version you can change the order of columns, and not rows. It's recommended to use a constant row size in the vertical version, styling it like: ```css .slidelinelvv { grid-template-columns: 120px 160px 1fr !important; grid-auto-rows: 600px; } ``` Unfortunately, parent percent dimensions (100%, for instance) do not work in height properties.32:T9d5,

---
# SlidelineSAAS
### Slideline as a Service If you just want to show a presentation, without writing code, there is **Slideline as a Service**. There is 3 different modes for SlidelineSAAS: **level**, **simple** and **timelineh**. **simple** is the simplest. It will show a Title and Subtitle in the top of the screen, and arrows in the bottom; **level** will show two hierarchy levels on the top, and arrows somewhere (depending on the theme). The slide will change background color of all three elements based in the data provided; **timelineh** will show the levels on the top, arrows (somewhere) and a timeline in the bottom. Like level, it will change background color of all three elements based in the data provided. With any of them, you will only provide the `url` of a Google Spreadsheet, and a full screen presentation will be built. There are some examples below: - [Creative Technologies](https://slidelines.vercel.app/timelineh/?pattern=true&timelineheight=60px&startvisible=true&allowverticalscroll=true&timeheight=110&followbg=true&theme=https://slidelines.vercel.app/styles/architect.css&file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=783231707&) - [GUI Evolution](https://slidelines.vercel.app/timelineh/?timeheight=110&followbg=true&file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=81325473&theme=https://slidelines.vercel.app/level/small.css) - [Generative Art](https://slidelines.vercel.app/timelineh/?startvisible=true&allowverticalscroll=true&followbg=true&timeheight=190&file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=1569220645&theme=https://slidelines.vercel.app/level/arte.css) - [Point & Click Adventures](https://slidelines.vercel.app/level/?allowverticalscroll=true&s=2&startvisible=false&file=https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit?gid=1815289217#gid=1815289217&theme=https://slidelines.vercel.app/styles/minifit.css) - [Scrollytellings](https://slidelines.vercel.app/level/?s=init&followbg=true&file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=283938098&theme=https://slidelines.vercel.app/styles/minifit.css) - [Digital Narratives](https://slidelines.vercel.app/simple/?allowverticalscroll=true&file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=922513999)33:T6ec,## How to use it First, you will have to structure your data in a Google Spreadsheet with a predefined model (columns). To take a copy of the model, with data used in the examples, click at this [link](https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/copy). **Your spreadsheet must be "visible for all" to be accessible to SlidelineSAAS.** This is the full structure that work in any of the 3 modes. You can add more columns to the spreadsheet, but not remove the existing columns (except for `customcodeforcomponent` that is used for the Slidelines Level Components) You can see this data loaded on the 3 modes of SlidelineSAAS: **simple**
[https://slidelines.vercel.app/simple/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0](https://slidelines.vercel.app/simple/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0) **level**
[https://slidelines.vercel.app/level/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0](https://slidelines.vercel.app/level/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0) **timelineh**
[https://slidelines.vercel.app/timelineh/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0](https://slidelines.vercel.app/timelineh/?file=https://docs.google.com/spreadsheets/d/1aZ7zU_DnhI5lbj9A9Cfaa0IhsnoLyggUuqXb279-Jyg/edit?gid=0#gid=0)34:T6d5,## The columns in the model | column | what is it | type of value | details | |--------|------------|--------|----------| | id | unique identifier | any value, like numbers or texts | useful to start the presentation in an specific point with `s` variable | | ano | timeline structure for timelineh mode | any short value, like numbers or texts | used only in timelineh, and shown in the bottom of the presentation | | titulo | higher hierarchy level | any value | information that will be shown at the first/top row of the presentation | | titulofrente | foreground color of the row | hex color | the hexadecimal registry for a foreground color in this row | | titulofundo | background color of the row | hex color | the hexadecimal registry for a background color in this row | | subtitulo | second hierarchy level | any value | information that will be shown at the second row of the presentation. not present in simple mode | | subtitulofrente | foreground color of the row | hex color | the hexadecimal registry for a foreground color in this row | | subtitulofundo | background color of the row | hex color | the hexadecimal registry for a background color in this row | | topicos | third hierarchy level | any value | information that will be shown at the third row of the presentation | | frente | foreground color of the row | hex color | the hexadecimal registry for a foreground color in this row | | fundo | background color of the row | hex color | the hexadecimal registry for a background color in this row | | tipo | type of the content | literal | use **imagem** keyword if the link is an image (PNG, SVG, JPG, WEBP) | | link | url for the content | url | link to an image or an html document to be embeded in the presentation | 35:T5a8,In **level** and **timelineh**, colors are part of the data provided. Styling is limited to the size of rows and fonts used. You can write your own CSS and point the `&theme` url variable to it, or use some of the predefined themes. | theme | description | |-------|-------------| | &theme=https://slidelines.vercel.app/styles/fit.css& | small rows | | &theme=https://slidelines.vercel.app/styles/minifit.css& | second hierachy hidden | | &theme=https://slidelines.vercel.app/styles/pixelart.css& | pixel art fonts and controls at top right corner | | &theme=https://slidelines.vercel.app/styles/ontop.css& | large rows and controls at top right corner | ## Other variables `&timeheight=[pixel size]&`
changes the size of the timeline at the bottom of the **timelineh** mode. `&followbg=true&`
extends the background color to the timeline of the **timelineh** mode, and extends the content through the control area of the other modes. `&startvisible=true&`
make the timeline already visible at the start in the **timelineh** mode. `&allowverticalscroll=true&`
allow the vertical scroll of the mouse to move the scroll horizontally. Example of an customized presentation: https://slidelines.vercel.app/timelineh/?file=https://docs.google.com/spreadsheets/d/1Hja-7ozKTpcfhVX9sc3FkDH-NLj_RXllFIDTO8EIFV0/edit#gid=81325473&theme=https://slidelines.vercel.app/level/small.css&timeheight=110&followbg=true&allowverticalscroll=true36:[] 2e:{"title":"Slidelines Level Component Documentation","cells":[{"id":0,"value":"# Slidelines Level Component Documentation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"## Two versions\n\nThere are two versions, the horizontal version, and the vertical version.\n\nThe horizontal one uses the function `slidelvh`, and the vertical, `slidelvv`.\n\nThe two receive the same parameters. The last one (`true`) turn on the Snap-To-Grid feature. It will only work correctly in the vertical version if the space between each row is always the same. If you plan to use variable row sizes, you should turn it off (`false`);\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"## Show less information\n\nIf you don't want to use, or show, all the 3 levels of hierarchy, you can easely turn the `display` of the class to `none`, and remove the column or line from the `grid-template-columns` or `grid-template-rows` definition:\n\n```css\n.slidelinelvh {\n grid-template-rows: 40px 600px !important;\n}\n\n.slidelinelvh_track1 {\n display: none;\n}\n\n.slidelinelvh_track2 {\n grid-row: 1 !important;\n}\n\n.slidelinelvh_track3 {\n grid-row: 2 !important;\n}\n```\n\nor\n\n```css\n.slidelinelvv {\n grid-template-columns: 120px 1fr !important;\n}\n\n.slidelinelvv_track2 {\n display: none;\n}\n\n.slidelinelvv_track2 {\n grid-column: 2 !important;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"## Why use it?\n\nSince the slides are structured in tabular data, you can fetch it from a Google Docs spreadsheet.\n\nYou can also filter the content in real-time using DataT Omnifilter.\n\nSee this example of a presentation loading data from a Google Spreadhseet and using a real-time filter for the content.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"The url to load your data to SlidelineSAAS, as shown in the examples above, is:\n\n`https://slidelines.vercel.app/ [simple | level | timelineh] /?file= [full URL to your Google Spreadsheet]`\n\nThere also other url variables you can add to the url, like `&s=[id]&` to start the presentation in an specific point (id), or `&theme=[url]&` to load CSS style file for the presentation. This will be explained in the end of this document.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"## Styling","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"$35","pinned":false,"hidden":false,"mode":"md"}],"files":"$W36","stdlib":"1","titling":"auto"}