Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
BlocksComposition1.jpg
BlocksComposition2.jpg
README.md
atomic-design.jpg
containers.jpg
containersFinal.jpg
containerscontent.jpg
contentblocks.jpg
nesting1.png
nesting2.png
reuse1.png
reuse2.png
reuse3.png
reuse4.png

README.md

Views Composition Model

Atomic Design

Views uses Atomic Design Composition Pattern to ensure interface consistency across all views.

What is Atomic Design Pattern?

Views composition model is a collection of embeddable blocks.

Composition model1 - embeddable

Every .view file is a self contained component with a top level container block and content blocks. As a component it can be used inside of any other .view file and styled at point of use.

Composition model2 - point of use

The power of the atomized composition model allows components to become reusable templates as the app's functionality and the design system grows.

We use Yoga layout engine

Containers and content blocks

Containers wrap other blocks, displace, and align them. Containers and Content

Containers

  1. Horizontal distributes blocks inside next to each other.
  2. Vertical distributes blocks inside on top of each other.
  3. List repeats one block based on the amount of passed data. Containers wire-frame

Examples of final interface Containers final interface representation

More on containers

Content blocks

  1. Capture block lets you capture user input as data.
  2. Image block displays graphic files, like JPGs, PNGs, GIFFs, and more
  3. Text block renders text in the view.
  4. SVG block renders vector graphics. Content blocks

Examples of basic blocks

Proximity nesting and Composer

Proximity nesting (when you use code editor) is how we do composition inside a view. You can think about your view as a stack of blocks where new lines set blocks apart.

Composer is a composition tool, and comes with Views Tools.

Example #1 In Composer

Nesting Levels 1 - Text inside the Second level container

Example #1 In Code

FirstNestingLevel Vertical
SecondNestingLevel Vertical
Text

In the example above, the hierarchy is:

  • FirstNestingLevel
    • SecondNestingLevel
      • Text

Example #2 In Composer

Nesting Levels 2 - Text inside the First level container

Example #2 In Code

What if we want to have the text at the same level of InsideTop? Our code would look like:

FirstNestingLevel Vertical
SecondNestingLevel Vertical

Text

Our hierarchy now looks like:

  • FirstNestingLevel
    • SecondNestingLevel
    • Text That new line before Text separates it from InsideTop.

Each new line will move blocks below one nesting level higher, and since a view can only have one top level block, you can remove blocks from the view by adding enough empty space before.

Top Vertical
Text


Text

In the example above, the second Text is outside of the top level container therefore it won't render in the view.

Save and re-use .view files

Views can be used as part of other views by referencing their file name.

Common use case: Say you have a View that contains a button with a text label and you want to choose different label, or the fontSize depending where you use it.

Here're simple steps to extract blocks and re-use them:

  1. Save the button code to separate .view file and give it a name starting with a capital letter
  2. Replace the previous button code with only the name of the extracted View, in our example it's Filename
  3. From now on Filename.view is your Custom block and you will see it being updated across your app upon any new changes.

Use case one - change text at the point of use

This is a simple View with one Text block BEFORE using it as a Custom Block:

Button with Text block as part of it

before

Button Vertical
backgroundColor #009fff
borderRadius 8
Text
padding 20
color white
fontFamily Montserrat
fontSize 16
fontWeight 700
text BUY NOW!

Take all the lines of the Text block and paste them to a new document. Save it within your project as Label.view. If you want to reuse the Label in many places with different text, turn it into slot by adding < before the value.

Label Text
padding 20
color white
fontFamily Montserrat
fontSize 16
fontWeight 700
text < default label

And here's how it should look like AFTER saving Text as Label.view file and using it in the Button.view file:

Button with Text block used as a Custom Label block

after

Button Vertical
backgroundColor #009fff
borderRadius 8
Label
text BUY NOW!

Use case two - change the size of the font in one place

Back to our example. To change the font size in all instances of Button.view change the fontSize value directly in the Label:

Button with Label block embedded from Label.view file and small font size

before

Button Vertical
backgroundColor #009fff
borderRadius 8
Label
text BUY NOW!
Label Text
padding 20
color white
fontFamily Montserrat
fontSize 14
fontWeight 700
text < default label

And here's how it should look like AFTER saving Text as Label.view file and using it in the Button.view file:

Button with Label block embedded from Label.view file and bigger font size

after

Button Vertical
backgroundColor #009fff
borderRadius 8
Label
text BUY NOW!

Notice that we've changed the fontSize value in the Label.view and the Button.view is affected but doesn't "know" anything about that change, since it happened in self-contained Label file.

Label Text
padding 20
color white
fontFamily Montserrat
fontSize 20
fontWeight 700
text < default label

Reach out with questions via our Slack Questions Channel. Mention @tom or @dario to make sure that we get your notifications.