Wolfr

Design document: Bedrock 2.0

Version 1.0. Sunday, May 3, 2020 / Johan Ronsse

Bedrock is a prototyping tool to empower designers to help ship real software. It focusses on the design perspective while at the same time providing an immensely helpful deliverable for development.

Nature of this document

This document is intended as a design document to talk about the reasoning behind the Bedrock 2.0 project.

Wolfr

Hi everyone. It's wolfr here. I am helping with Routify's community.

It's been about two weeks since we released the 1.5 version of Routify. You can read all about that in our previous blog post here.

Our release was met with a positive reception. We've had lots of people make the jump and give Routify a try, as evidenced by Github's dependency graph which shows over 100 repos using Routify now.

We've also gotten some excellent bug reports, with pull requests and ideas coming in. Open source as it should be! In this post I would like to summarize what happened. Here's some highlights:

• The latest version of Routify is 1.6.4, which includes bug fixes. The 1.6 release added a new feature: an afterPageLoad hook. You can check out all the releases here.
• LegionOfOne created a Routify starter that works with Firebase

Wolfr

Note that is a draft post. NOT checked by the full Routify team yet. Any feedback welcome! (You are looking at a major rewrite, this used to be more about Routify vs Sapper)

What's the difference between Roxi, Routify and Sapper?

We are getting got a lot of questions about how Routify is different than Sapper. Rather than going into long comparisons about the differences with Sapper, I would like to explain the project goals of the Routify and Roxi projects. I hope this will make it clearer where things are going.

Now that we have released Routify 1.5, it's time to talk about Roxi.

In any non-trivial project, there is a need for a project structure. You've got routing, asset pipeline (CSS, images), data handling issues and more to deal with.

Wolfr

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;

Wolfr

<script>
    // Possible icon types
    import IconDelete from './Icons/16/actions/delete.svg';
    import IconQuestion from './Icons/16/actions/question.svg';
    import IconAdd from './Icons/16/actions/add.svg';
    import IconRemove from './Icons/16/actions/remove.svg';
    import IconClose from './Icons/16/actions/close.svg';
    export let icon;
</script>

Wolfr

Svelte Resource List

Resources that go beyond the official documentation. To learn Svelte or to find things to use in your own projects. If you have nice resources to add, please comment below.

Official resources

• Main tutorial https://svelte.dev/tutorial/basics
• API https://svelte.dev/docs
• Main repo: https://github.com/sveltejs/svelte

Wolfr

<script>

    import ButtonInnerLayout from './ButtonInnerLayout.svelte';

    // type="button" or type="submit"
    export let type = false;
    export let classValue = null;

    // if it contains a link
    export let href = false;

Wolfr

<ul class="c-menu" aria-role="listbox">
  <li class="c-menu__item" role="option">
     <span class="c-color__swatch"></span>
     <span class="c-color__label">Color name</span>
  </li>
  <li class="c-menu__item" role="option">
     <span class="c-color__swatch"></span>
     <span class="c-color__label">Color name</span>
  </li>
  <li class="c-menu__item" role="option">

Wolfr

<ul class="c-menu">
  <li>
     <span class="c-color__swatch"></span>
     <span class="c-color__label">Color name</span>
  </li>
  <li>
     <span class="c-color__swatch"></span>
     <span class="c-color__label">Color name</span>
  </li>
  <li>

Wolfr

'use strict';

let colors = [
  {
    "name": "Gray 1000",
    "code": "000000",
    "category": "Grays"
  },
  {
    "name": "Gray 900",