Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne mirisuzanne/goals.md
Last active Jun 12, 2018

Embed
What would you like to do?
ideas for a new slide-building system…

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:

---
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);
}
```
:::
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);
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.