[Tip] Helpful CSS for custom layouts

[SuuntoPartnerTeam]

Here are four tips that might come in handy if you’re trying to create a dashing custom look for your application. You can paste any example as-is and view it inside the SuuntoPlus simulator in VS Code. Feel free to ask for clarification or share your tips in the replies

---

The outermost div

---

Let’s start with a simple one: the first div under uiView will by default fill the whole screen instead of being the size of its contents. Therefore, we recommend having one ‘‘superfluous’’ div right after uiView. You then put inside this div all the other elements which you want to position in an exact manner. You can see examples of us doing this in the html snippets below!

---

Fully utilizing ‘‘e syntax’’

---

Block elements, such as div, have the CSS property position: absolute. To help lay them out precisely on the screen, SuuntoPlus offers a custom ‘‘e syntax’’, of which you can read more in the extension’s documentation. To summarise:

The non-standard %e unit can be used to shift an element’s anchor point inside calc(). The following example illustrates this:

<uiView>
  <div>
    <div style="top: 40%; left: 50%"             >Right of center</div>
    <div style="top: 60%; left: calc(50% - 50%e)">Right at center</div>
  </div>
</uiView>
<!-- 
	-----------------------------
	
	              Right of center
	       Right at center
	
	-----------------------------
-->

Now for the trick: %e is useful for more than just centering! It allow you to emulate the properties right and bottom, which are not supported in SuuntoPlus. Example:

<uiView>
  <div>
    <div style="left: calc(50% - 50%e);  top: calc(50% - 50%e)"  >Center</div>
    <div style="left: calc(50% - 50%e)"                          >Top</div>
    <div style="left: calc(100% - 100%e);top: calc(50% - 50%e)"  >Right</div>
    <div style="left: calc(50% - 50%e);  top: calc(100% - 100%e)">Bottom</div>
    <div style="                         top: calc(50% - 50%e)"  >Left</div>
  </div>
</uiView>
<!--
                   --- ¯¯¯ ¯¯¯ ---
               ---       top       ---
            ---                        ---
         ---                             ---
       ---                                 ---
     ---                                     ---
    ---                                       ---
   ---                                         ---
  ---                                           ---
  ---                                           ---
 |--  left              center            right  --|
  ---                                           ---
  ---                                           ---
   ---                                         ---
    ---                                       ---
     ---                                     ---
       ---                                 ---
         ---                              ---
            ---                        ---
               ---      bottom     ---
                   --- ___ ___ ---
-->

---

Positioning with borders

---

At present, it is difficult to precisely lay out elements inside a box with a border. This is due to the layout engine not calculating the content box as starting from the inner edge of the border. You can deploy the following example to your watch to see the issue:

<uiView>
    <div>
        <div style="
            width: 50%; height: 25%;
            top: calc(30% - 50%e); left: calc(50% - 50%e);
            background-color: blue;
            border: solid 10px red;
        ">
            <div style="
              width: 10px; height: 10px;
              top: 0; left: 0; 
              background-color: yellow;
            "></div> <!-- This yellow square shouldn't be inside the border, but it is -->
        </div>
        <div style="
            width: 50%; height: 25%;
            top: calc(60% - 50%e); left: calc(50% - 50%e);
            background-color: blue;
            border: solid 10px red;
            box-sizing: border-box; /* Note that box-sizing works */
        ">
            <div style="
              width: 10px; height: 10px;
              top: 0; left: 0; 
              background-color: yellow;
            "></div> <!-- Same problem here -->
        </div>
    </div>
</uiView>

The trick: when you want to have an element with thick borders and precisely positioned child elements, we recommend instead creating a larger div with the background color of your desired border color. Then center another smaller div inside of it. The inner div will be your content box and left or top will work as expected:

<uiView>
    <div>
        <!-- The border-->
        <div class="p-m" style="width: 50%; height: 50%;background-color: red;">
            <!-- The content box with a 4px border -->
            <div class="p-m" style="
              width: calc(100% - 2*4px);
              height: calc(100% - 2*4px);
              background-color: black;">
              Lorem ipsum
            </div>
        </div>
    </div>
</uiView>

---

The screen is a circle

---

Round displays introduce a design puzzle: how to make sure all elements are inside of the circle? For example, text will be outside of the visible area if you set it at top: 0; left: 0; under the first div.

If you wish to work within a safe rectangular area that is bounded by the display, you can derive the size of that area easily. As an example, if you wish for an area that is 50% of the height of the display and maximal width, you calculate sqrt(1 - 0.5^2) ≈ 0.8660, where 0.5 means 50%. This works the same way if you have a desired width instead. Example code:

<uiView>
    <div class="p-m" style="height:50%;width:86.60%;background-color:purple">
        This box touches the display's edge
    <div>
</uiView>

Note that (a) the translation of percentages to pixels may have the rectangle be a pixel off of the display’s edge and (b) the simulator may show this one incorrectly, but on the watch it works

---

The end

---