SECTIONS

</aside>

CONTENTS

Step 1: Remix Studio

Step 2: A New Project

Step 3: A New Screen

Step 4: Your First Visual Code

Step 5: Edit a Card

Step 6: Nodegraph Mechanics

Step 7: Meet the Essential Nodes

Step 8: Make Something Real

Step 9: Meet all the Nodes

</aside>

<aside> ✅

CHECK

You are editing a new Screen in your Project called people

</aside>

<aside> 🙏🏼

NOTE

With apologies in advance for dragging the wonderful Bret Victor and https://dynamicland.org/ into the user guide of a platform which occupies a far smaller philosophical footprint, but we just… wanted him here :-)

And speaking of rabbit holes, if you follow the link to Dynamicland, we’ll see you back here in a month or two!

</aside>

Create a Simple Card Design

<aside> 👉🏼

TASK

For this next step, you’ll need a Data node that has some Data in it. We’re going to show you how to hook this Data up to a Card, but let’s get you that Data node first.

Go here and hover over the Data (yellow) node (3. A Person) and select it using the select/checkbox in the top left corner. Cmd+C or use the Edit menu to Copy the Node. Then you can close the tab…

Now you can Cmd+V or use the Edit menu to Paste this Node into your new Screen.

copy_node.mov

You’ve just learnt one of the main reasons we’re called “Remix” — pretty much everything in our system that’s visible can be copy-pasted across Projects for re-use and re-mixing into your own work.

</aside>

<aside> 🔧

HOW

Now that you have a Data node with some Person details on your screen, let’s build a card to display it…

Designing a new Card using the Remix Studio Card Editor

Watch this carefully, pause, rewind, and build along step-by-step because we’re switching context into the Card Editor and moving fairly quickly through the entire card layout building process. Soon this will be second-nature.

</aside>

WHAT

A Card is a piece of User Interface.

It has a layout, it has basic elements like Text, a Date Display, a Text Input, and nested Groups and many more you’ll discover.

A Group is a layout container, and you control the layout via CSS flex-like properties in pre-defined Styles from our Themes [Rabbit Hole] more on this much later!

You will use the toggles/switches to turn ON data bindings for various Element properties and styles in a card, and you can bind to these in the Nodegraph view when editing the Screen

<aside> 🗒️

NOTE

Notice how you give yourself a way to bind or connect Data to your Card Elements.

Toggle ON the switch to make this value available for a dynamic Data Binding

Toggle on any bindpoint in your Card Editor, and you’ll see that it’s available in the Nodegraph to connect Data values. A wire will be drawn between the Data out value and the Card Element in value. This is a binding connection between bindpoints.

It could be the value of the Element itself, it could be a Style Property value, it could be an entire Data Object in come cases, but if there’s a value that can be bound in, you will see a switch to turn that on. [Rabbit Hole] more on this much later!

</aside>

Enhance a Card Using Theme Styles

<aside> 🔧

HOW

Use a Remix Theme to style a Card

</aside>

WHAT

Let’s take our rudimentary first Card and make it look a little better

Styles defined in a Theme in Remix Studio are almost like CSS Class Names.

The named Styles could define layout, or typographic styles, background colors, etc.

You can also add single Style properties to any Card Element of course, they all follow the CSS naming conventions

<aside> 💡

HINT

The order of the Styles matters a lot! Top to bottom, later Style Properties will override earlier ones, so your single props will always have the final say when used.

But you should be able to achieve most UI designs without relying much on these single one-off Style Properties.

</aside>

Find and Use a Card from a Library

<aside> 🔧

HOW

Find a pre-designed Card from a Library and use that on your Screen

</aside>

WHAT

It is much easier to select a nice pre-designed card from the Library via “Find”.

Instead of building and styling cards from scratch, it’s much easier to find one that fits your needs in a Library of assets and just hook up the data to its bindpoints

<aside> 💡

HINT

You won’t always find one that suits your purpose, but studying how existing ones are built and using them as a starting point is helpful to get you started designing your own custom cards for your domain!

Don’t forget that whole “remix” part, you can copy any Card you see, and paste it into where you’re working as a starting point. See something, take something.

Soon you’ll be creating and sharing your own Libraries for others to remix :-)

</aside>

Previous

<aside> ⬅️

Step 4: Your First Visual Code

</aside>

Next

<aside> 📖

Step 6: Nodegraph Mechanics

</aside>