Put interfaces together like Lego blocks
Having fun with ViewsDX Preview release!
Before you go ahead and follow this tutorial check out our new updates here, some things might be already improved.
The goal of this post is to introduce you to:
- Different types of basic blocks
- Our layout system with proximity nesting and contextual hints
- Creative code writing
At the end of this tutorial you will be able to:
- Design and develop production quality front-end
- Recognise different types of building blocks
- Style anything with Cascading Styles properties
To try the syntax yourself go to our ZenGarden playground, sign up, and use code JOIN. If you have questions join our Slack community and post to questions channel.
All accounts are free, and no credit card is required. The ZenGarden app you will get Preview access to what an app looks like. We will open free app creation soon. Stayed tuned 👀
If you signed up and used access code successfully, you should see this site in Chrome. Yes, please, use Chrome for now. It’s on our list of tasks to debug other browsers (look for the full list at the end of this post).
OK, let’s get to it!
We will go on a little design quest, and in the process, develop a simple but functional layout. I will also describe ViewsDX interface as I go. Follow me step by step to understand first hand how Views language works and to get a sense how you can use it in your creative workflow.
Here’s the link to the Demo App that consists of three Views. I will design Mr’s Banana profile View as I build it, and do my best to take the smallest steps possible for you to follow.
The wireframe I came up with for you and me to work on is inspired by my son’s Oscar Lego models. He has a minimalistic and sparse, almost crude style. I like it a lot, and it works well as an analogy to blocks we will use.
First, I will click on “New view’s name” input, chose a name, and hit Return to add my new View.
My new view is ready. How about yours? OK, let’s find out what is this Lego wireframe about!?! 🤔
The layout shows a simple landing view enhanced with a social proof behavioural pattern to create a feeling of status and reputation and get MrBanana hired.
In a bit more detail and from the top:
- A menu bar with a logo
- A row of additional features, back, like, favourite…
- Content with happy MrBanana ready to join your team
- Action button with icon and label, I will make it clickable, add hover over styles, and even interaction animations
- A title to mark the beginning of the list of users who already took action, and hired MrBanana in the past.
- The list itself, made out of an avatar and a name of the user
- Some more or less identified footer blurb ✌️
Oh yes, introducing MrBanana amusing himself:
In this analogy, each Lego block will have an equivalent block in Views.
As an example, first (1) block (the long yellow one), could be of type Text. Here’s how I would add Text block in Views editor
Text
text MrBanana for hire!!!Great! That was easy. I will divide the wireframe into smaller Parts and ask myself, what types of blocks can I use to make each Part separately.
Let’s do that! Let’s start coding creatively and make this front-end ours 🐵!
✏️ I will change the text from default to something MrBanana would approve and feel proud of.
🖌 I will tweak the way that the top bar looks like using simple Cascading Style Sheets (CSS) properties. I can copy any CSS property on the web and paste it into Views editor.
You try it! Some magic will happen when you do that
background-color: #FFD300;
font-family: "Roboto Mono", monospace;
font-weight: 300;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;💖 Magically, the CSS syntax, full of dashes, colons, semi-colons, etc. changes to clean camel case Views code!! Big kudos to
for coming up with this magic of automation! Thanks to Designer — Developer Experience (DX) and continuous knowledge transfer he is a better UX designer than me!⌨️ Of course, I can just type the properties. In the time it feels like a second skin. Powerful and geeky!
💔 The Text block still needs some love! Here’s how I will style it but you can do whatever comes to your mind. Preview version is fully functional, so go crazy! Any CSS will work.
👓 Did I mention, Views makes all Google Fonts available to me by default. I only have to name them. I’m a designer; I can’t help it; I care for typography.
🎯 OK, I’m done here. Let’s step up the game and make the tools menu.
😎 Also, when it comes to colours I can use any of these values:
- Hexadecimal (HEX)
#FFDEAD- Red, Green, Blue (RGB), and (RGBa) with opacity as last value
rgb(255,222,173), rgba(255,222,173,1)NavajoWhiteAll colour code examples above will give me the same result.
👀 First, I assess the structure. Where I see a row of blocks distributed horizontally, one next to the other, I know I can write Horizontal, and place blocks directly below it to make them part of it.
Useful tip! Start from the smallest block in the group and keep wrapping it with Horizontals or Verticals, to get the top level. (as I demonstrate below)
⬅️ 😬 🔐 Let’s say yellow blocks will represent empty space separating two groups of buttons. The one on the left will be the back button, and the other two, like and favourite. It would be nice if each button had an icon, right?
🗡 Views work great with always sharp and animation ready Scalable Vector Graphics (SVG). In practice, SVGs are just a bit of code with a bunch of point values and other cryptic properties.
🍭 Fortunately,
made another magic trick possible! After making a custom SVG in Sketch/Illustrator, pasting its code into Views editor will automatically convert it into a Svg block. Sweeeet!!To add an SVG icon, I will use this step by step process:
- Open an SVG file in any text or code editor, i.e. TextEdit or Atom
- Copy the full code, including the document header
- Paste it in the view where I want the icon to appear
- Select the full pasted code and press cmd+p
- If nothing happens, it means I forgot to name my top block from within selection, so I add the name before the Svg and repeat step 4:
BackArrow is SvgAt that point, my new icon is automatically added as a Part, and I can find it on the Part’s list by its name. Isn’t making Parts quick and simple?! I did promise you a bit of fun, right?
Here, follow my steps!
🗃 You can think of parts as symbols in Sketch. They are small boxes with a little bit of “stuff” inside that can be put onto shelves. I can keep repeating and reusing one Part as many times, and in any Parts or Views, I see fit.
🗜 To tweak Parts at the point of use, I will select it by name from the dropdown next to the View name. I select “BackArrow” and change the width and height inside of the Svg Part to 100%. It will let me control its scale later on from other Views.
Another way to change the Part would be to go to Parts tab and edit only BackArrow on its own. If I do that, I get to see only the Part in the canvas
OK, let’s jump back to our MrBananaForHire View and finish the tools menu.
🛠 I will wrap BackArrow in the Vertical to turn it into an interactive button. At the moment, in Views, only Verticals and Horizontals can be actionable. I can use one of these interactive properties to make all nested blocks “clickable”:
- onClick — action is executed in the same view
- goTo — linked content opens in new tab
- teleportTo — linked content opens in the same tab, and according to Panels browsing pattern, to the right from the panel where the link was clicked on. We use this pattern in ViewsDX, and you can experience it by clicking on the EDIT button in the list of Views.
📂 For now, I start by adding Vertical as a wrapper directly on top of BackArrow or within one empty line from it
BackButton is Vertical
I hit return and add a background colour as a property of the BackButton
backgroundColor NavajoWhite
Awesome! It looks like a button now but it’s “waaaay” to big.
🔶 =>🔸 Since I want my tools menu to have more than one button of the same height I will wrap BackButton with a Horizontal, and give it some specific height. Again, I write directly on top of BackButton:
ToolsMenu is Horizontal
height 50
It’s better, but not perfect. I want the button to be a square. To do that I will specify the width as a property of the BackButton. I will position my cursor at the end of the BackButton line (after “is Vertical”), hit the Return key and write:
width 50
I’m almost there, now to scale down the icon within its “Navajo”🏜 container I use padding properties and add
paddingTop 15
paddingBottom 15
If you are following my steps, here’s what I have in my View:
🔃 Now, I will repeat the process and add two more icons, Like and Favourite.
🎁 You can use a library of over 150 ready-made line icons.
Here is the code for the icons I like, but as always, feel free to experiment!
☝️ Time to talk about our proximity nesting system and order blocks in the View. At the moment, two new icons are inside of BackButton, but they should be in ToolsMenu.
🔼 To move them out one wrapping level up I press Return, and add one more empty line.
✂️ I will copy the style of the BackButton and place it on top of each icon.
Can you think of what’s the problem?
Something is wrong with the icons, right?
👊 That’s right!
📉 I didn’t apply the 100% values to the icon’s widths and heights. I’m going to use the dropdown next to the View name and edit icons from within MrBanana View.
🤔 What should we change here, do you remember?
🗑 To keep things clean and tidy I will turn all buttons into Parts.
🚥 Now, our ToolsMenu just needs a bit of white space.
How would you put some space between BackButton and the other two? Would you add an empty block? That’s a good challenge!
I will be honest with you, I didn’t know either, but since Dario and I share the same DX mindset, I can always ask for help. Dario came up with the little hack, and now I know how things work.
It turns out, the concept of putting empty blocks is not the best practice. Instead, I push elements using margins. Margins are empty spaces outside the block they are part of.
And here’s the hack:
marginLeft autoWhere do I put it? In ToolsMenu or do we need an additional wrapper?!
🎉 Correct! We should wrap the two buttons we want to move, LikeButton and FavouriteButton, into a Horizontal
🏁 The last piece of this puzzle is to copy the yellow background colour from the above and add it to the ToolsMenu.
I will deal with Image block at the end. Constantly jumping MrBanana in the preview would drive me nuts 🌰🌰🌰 Would you agree?
Let’s get cracking with the action button first. We could keep it simple, as a text label only, but what fun would that be??!!
🔔 This button will be composed of two blocks. An icon and a label arranged one on top of the other.
💬 Can you guess what block am I going to use to make it happen?
A Vertical?! 👏 Perfect!
Wait!!! Remember the tip from the beginning of this post about starting from the most deeply nested element? So, instead of writing Vertical, I will add Svg icon and Text block first.
📦 Wrapping time!
First, I make the Rocket and the ButtonLabel one button.
🎏 Rocket and ButtonLabel need to be styled and aligned. Here’re the properties I will use, but you should experiment!
alignItems center
backgroundColor lightskyblue
marginRight 30%
marginLeft 30%
paddingTop 20
paddingBottom 20
🔮 Can you spot the difference between margins and paddings?
Yes! The % value in margins is calculated dynamically from the view width, and the one in paddings is a fixed, static value (it means exactly 20px).
As a reminder, margins push the content away from the other elements, outside the block, and paddings push it inwards the block edges.
OK, a new challenge!
How can I scale down the Rocket icon?
Using paddings? I could, but look what will happen to the label if I add big paddingLeft and Right to push the icon inwards and make it smaller…
💩 That’s not good.
😅 Uff… I know! Since I don’t want to change the height inside the icon, what about changing it the height of the Rocket’s wrapper? Let’s add it!
Vertical
height 40
I will finish up by adding couple properties here and there. Don’t wait for me, go creative, make it your own!
👾 Now, the cool part!
I will add some basic interaction layer to the HireButton. Check this out!
backgroundColorHover #24eecf
transformHover scale(1.1)
transition all 0.15s ease-out
borderRadiusHover 5
onClick props.hire
cursor pointerThat’s all it took to get this simple interaction happen
👻 There is also full animation layer we are working to be a part of the Beta release. We want to make sure the solution we will choose works on the native platforms as well as on the web. At the moment we are experimenting with VelocityJS, and it looks promising!
🖖 OK, I think I’m done here. How are you ding? Take your time to play with different transform effects. Basic but so much fun isn’t it?! 😜 Join me when you’re ready.
👯 According to my wireframe, this block is a Text title for the next section.
I can probably reuse the top bar to get it done quickly. Can I?
Good choice! 👇 Check this out
Before I move on, I feel like I should name the top Text block and this new subtitle something more meaningful, would you agree? It might be hard for Dario to find his way around the code when the block names are generic.
Can you tell how many empty lines did I have to put before subtitle Text block to make it part of the top Vertical?
😳 Hehe. The good news is that I don’t have to know. I just keep hitting Return key until the block gets in place watching closely what the “in…” hint tells me about.
It’s way more intuitive than the indentation pattern we were using before when we were following HTML, YAML, and others who set it as a status quo.
🎣 Oh, sugar! There is one catch. I just noticed this problem:
Blocks are stacked one below each the other but also one on top of the other, like layers in Sketch or Illustrator. I can move them up and down the stack using
zIndex 1to move the block one level up, or one level down
zIndex -1Also, “zIndex” value offers an almost infinite number of layers to my disposal.
✈️ OK, we had some fun, now the serious business!
🔩 First, let’s take it apart and find the smallest, most deeply nested blocks.
Like any list, this one too repeats certain pattern. Can you see it?
Sweet! 🍬
🤐 I’ve done that before, haven’t I? Awesome! The more I code, the easier it comes!
What has blocks distributed horizontally and craves ice cream?
Correct again! You “dessert” it! 🍦
I planned for this Horizontal to have a bit of padding on the sides, a user avatar and a name next to it. Should be straightforward, right?
👩👩👦👦
Time to wrap the row of blocks with a List and start repeating it based on some data.
Before I move on to Props, I need to pass on this simple truth about lists.
Lists have items. Items are repeated pieces of data, and together with other props come from the Props tab.
🔗 In fact, in the production app props will always come somewhere from outside components. Data added to Props tab is only a temporary layer, and it’s very similar to Craft from Sketch Labs.
OK, first I will model props in the Props tab, so follow me there.
📀 Props is another editor where I can add new States, Properties, Lists and List Items. Every time I name a State starting with a capital letter followed by “is State” I will create a snapshot of my app.
By default, there is a Main State added to every Props tab, but it’s up to me to fill it up with properties and other States.
Properties are constructed like CSS properties from a key and value.
Here’s an example of sample avatar images as Uniform Resource Locator (URL) to hosted files. I can host my files anywhere online, Dropbox, Box… Even grabbing pictures from Google Images works. Say, I have these to use as avatars.
https://files.usepages.today/learn.viewsdx/avatar1.jpeg
https://files.usepages.today/learn.viewsdx/avatar2.jpeg
https://files.usepages.today/learn.viewsdx/avatar3.jpeg
https://files.usepages.today/learn.viewsdx/avatar4.jpeg
https://files.usepages.today/learn.viewsdx/avatar5.jpegThis is how I will model a list of items containing an image for each user
📇 Time to add user’s names to each item
⏳ Still, nothing happens in the preview. And it shouldn’t. Not yet.
Before I can see avatars and names render in below HiredBy block I need to do two things:
- Add list name on top of the first item
- Link list and items to the blocks I want the data to be displayed in
Now, I can come back to the View tab, here called “MrBananaForHire”. I will add the Users List above the Horizontal.
from props.users
Still no change in the preview?
🔬 Wondering why?
Well, at the moment, I only connected the List block with the list Object in the Props tab. I still need to connect the items.
I can hard code one image and one name in the current blocks structure by adding one avatar’s URL and one name, but it’s not the effect I want to achieve. I want each avatar and name to be unique in the order I specified in Props.
🔌 Connecting items is pretty simple too, and there is a repeatable pattern to it. When you get once, you will know how the components get their data. Will it make you a better designer?!
It worked for me 😜 !
OK, I connect items by adding these lines to Avatar and Name blocks respectively
src item.avatartext item.name
Ta da!! 🙀
Woohoo! 💃 Success!
😵 But my list needs some styling now!
Feel free to play around with any other CSS properties or use the ones below
Users is List
from props.users
backgroundColor navajowhite
paddingLeft 10%
paddingBottom 30
Horizontal
height 80
marginTop 20
alignItems center
Avatar is Image
src item.avatar
width 80
borderRadius 100
Name is Text
text item.name
marginLeft 20
fontFamily Roboto Mono, monospace
fontWeight 700
fontSize 14It will give you this result. Make sure to replace the previous version of your list and fix the proximity nesting empty lines. Users List needs to be “in MrBananaForHire” top level block.
☝️Well, I’m still missing the main actor, MrBanana!
I will add his welcome image by passing it from Props because in the production it wouldn’t be hard coded (same as the name in the HearderTitle)
Where should I add MrBanana’s image?
After the ToolsMenu but before the ActionBar?
💪 Great! You are getting the hang of it!
WelcomeImage is Image
src props.welcomeImage
width 100%And here’s the code I will add in the Props tab
welcomeImage https://files.usepages.today/mrbanana.gifDo you see how I use “welcomeImage” key connecting Props and the block?
Could this post be any longer? 🔫 💣
Sure! 😂 For example, I could walk you in detail over different kinds of props, alignment tricks, keyframe animations, etc.
Instead, I will finish this post now, but I will write more tutorials shortly, so we can and keep improving the implementation, and dev skills.
After all, design like development is a continuous process!
You can check my latest version by getting the access code in general channel in our Slack community.
One more thing.
We call this release Preview mostly because we feel there is a couple of features and sharp corners we still have to polish before the Beta release.
Here’s the list of improvements we are working on now together with our latest, January update:
- Release user profile space (we call it “Me”)
- Enable setting up new apps from “Me”
- Add History tab to allow a rollback to previous/other versions of each View
- Finalise Command Line Interface (CLI) to sync Views with dev environment
- Morph to React Native
- Mentoring bot to answer questions as we code
- New packages for Parts library
- Simplified interpolation syntax
- Improved collaboration layer; it’s still a bit flaky
- Animation layer with slides, pushes and all
- Set runtime templates
- Enable themes
- Post more tutorials
Let us know what you think? Preview release is also an opportunity for you to give us your feedback and suggest new features or ideas for tutorials 💎💰
To get most recent updates follow us on Twitter. More experiments are on their way.
Click 💚 to spread the word!
