ideas for a new slide-building system…

goals.md

Vue Slides

I want to quickly write & edit slides using markdown & yaml…

Views:

• card grid
• full-screen slides (no forced aspect ratio)
• scrolling list-page

Other Features:

• homepage list of decks
• tags to search/filter slide decks
• shuffle option
• keyboard/remote control in full-screen view

Rules:

• A slide slide deck exists in a single file
• Creating a deck file, automatically creates the proper routing (Vue/Nuxt?)
• In order to animate/shuffle cards, individual slides need to be available in the data

Yaml/Markdown:

• the yaml-first approach creates that structure clearly, but requires indenting everything
• the markdown-first approach would require special parsing (e.g. split('\n...\n')) to get structured slides
• https://github.com/jonschlinkert/gray-matter to extract yaml data from markdown

Vue/Nuxt:

• Nuxt uses *.vue component files for routing.
• Nuxt "dynamic" routing should pass in parameters for loading proper data?
• From scratch? https://css-tricks.com/the-rise-of-the-butt-less-website/
• What's the best way to animate view-changes? In-page, or page-transitions?

markdown-demo.txt

---
public: true
title: '**Agile** Design Systems'
subtitle: '(with **Vue**)'
author: 
  name: 'Miriam Suzanne'
  link: 'http://oddbird.net'
  twitter: ['mirisuzanne', 'oddbird']
  github: ['mirisuzanne', 'oddbird']
---

Style Guides & Pattern Libraries 
are great tools for documenting 
the relationships between code and design, 
but beautiful docs are only half the battle. 
We don’t all have dedicated teams and budgets 
to build a centralized system. 
How can we incorporate patterns into our code, 
using templates and pre-processors to iterate and automate 
living design systems in an agile and integrated process?

<!-- slide -->

# Design *Systems*
## *Style* Guides + *Tool*kits + *Pattern* Libraries + *???*

<!-- slide -->

---
background: 
  src: 'https://dl.dropbox.com/s/98zl3nxde444otp/oddbird-w-logo.jpg'
  alt: 'OddBird siblings (Jonny, Carl, and Miriam) in 1994'
---

<!-- slide -->

![](https://dl.dropbox.com/s/76e55964w8nvx3y/oddbird.png)
# [OddBird](http://oddbird.net)
### est. 2008

<!-- slide -->

---
background:
  src: 'https://dl.dropbox.com/s/3oyfw1kdtz2qzih/lonely-planet-colors.jpg'
  alt: Lonely Planet Design System
---

<!-- slide -->

# Code Patterns *Add Meaning*

:::two-up
```scss
.grid-span {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}
```

```scss
.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}
```
:::

yaml-demo.yml

public: true
title: 'Agile Design (with Vue)'
author: 
  name: 'Miriam Suzanne'
  link: 'http://oddbird.net'
  twitter: ['mirisuzanne', 'oddbird']
  github: ['mirisuzanne', 'oddbird']
summary: |
  Style Guides & Pattern Libraries 
  are great tools for documenting 
  the relationships between code and design, 
  but beautiful docs are only half the battle. 
  We don’t all have dedicated teams and budgets 
  to build a centralized system. 
  How can we incorporate patterns into our code, 
  using templates and pre-processors to iterate and automate 
  living design systems in an agile and integrated process?

slides:

- h1: 'Design *Systems*'
  h2: '*Style* Guides + *Tool*kits + *Pattern* Libraries + *???*'

- background: 
    src: 'https://dl.dropbox.com/s/98zl3nxde444otp/oddbird-w-logo.jpg'
    alt: 'OddBird siblings (Jonny, Carl, and Miriam) in 1994'
  
- body: |
    ![](https://dl.dropbox.com/s/76e55964w8nvx3y/oddbird.png)
    # [OddBird](http://oddbird.net)
    ### est. 2008

- background: 
    src: 'https://dl.dropbox.com/s/3oyfw1kdtz2qzih/lonely-planet-colors.jpg'
    alt: 'Lonely Planet Design System'

- h1: 'Code Patterns *Add Meaning*'
  twoup:
    - body: |
      ```scss
      .grid-span {
        width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
        margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
        padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
      }
      ```
    - body: |
      ```scss
      .grid-span {
        width: span(3);
        margin-right: gutter();
        padding-left: span(1 wide);
      }
      ```