# Beautiful Design App

**URL:** https://community.glideapps.com/t/beautiful-design-app/16191
**Category:** Project Showcase
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")
**Posts on this page:** 20
**Page:** 8

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [November 21, 2020, 2:40am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/142 "2020-11-21T02:40:25Z")

</div>

Other option:

- Tiles Layout
- 3:2 Ratio
- Tag becomes faux button

 ![Screen Shot 2020-11-20 at 9.39.11 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/a/0a07207deda55cd978eb4789e9dc39b43cfd01ca.jpeg)

```auto
<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-image-area {
height: 170px;
}

```

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 21, 2020, 3:27am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/143 "2020-11-21T03:27:41Z")

</div>

Beautiful.

---

<div class="post-metadata">

### Author: ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)
#### Post date: [November 21, 2020, 2:56pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/144 "2020-11-21T14:56:20Z")

</div>

This is the view I am waiting for. This is the default view for singles/matrimonial sites. Wish Glide could make this view available. Then maybe we could all deliver some proper matrimonial/dating sites.

---

<div class="post-metadata">

### Author: ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)
#### Post date: [November 22, 2020, 12:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/145 "2020-11-22T00:12:28Z")

</div>

Actually, this one is not bad at all; when it breaks, it does not affect anything around it, and the layout reverts to original.

Edit  
Sorry, I was wrong: it affects only Glide generated images. Probably just on mine.

---

<div class="post-metadata">

### Author: ![abirtanjinadnan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abirtanjinadnan/32/16839_2.png) [@abirtanjinadnan](https://community.glideapps.com/u/abirtanjinadnan)
#### Post date: [November 22, 2020, 8:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/146 "2020-11-22T08:21:28Z")

</div>

great UI

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [November 22, 2020, 6:12pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/147 "2020-11-22T18:12:28Z")

</div>

Thank you @abirtanjinadnan!

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [November 23, 2020, 4:07am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/148 "2020-11-23T04:07:11Z")

</div>

It’s a very beautiful code.  
Thank you @Robert_Petitto

I think it would be even better if Details could be specified with the same code as the title.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [November 23, 2020, 4:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/149 "2020-11-23T04:24:02Z")

</div>

Good call. Try this:

```auto
<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 2rem !important;
}

.tile-text-container {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
}

.tile-image-area {
height: 170px;
}

```

 ![Screen Shot 2020-11-22 at 11.23.50 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/974b8bf817677554d7acd43422cf06d8323f580c.jpeg)

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [November 23, 2020, 6:03am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/151 "2020-11-23T06:03:27Z")

</div>

Thank you @Robert_Petitto.  
I tried it on the cake shop menu.

```auto
<pre><span>
<div class="background"></div>
<style>
.background {
position:fixed;
margin-top:0;
background:#FF9800;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
.tile-image-area :nth-child(1) img {
height: 130px;
width: 130px;
border-radius: 5%;
margin: 10px;
}
[data-test="tile-item"] {
border: solid 1px #fff;
background:#fff;
}
[data-test="app-tag-overlay"] {
position: absolute;
right: 113px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 5px 10px 5px 10px;
text-transform: unset;
border: solid 1px #fff;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 1.2rem !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-size: 0.8rem !important;
line-height: 1rem !important;
color: #000 !important;
margin-top: 10px;
}

.tile-text-container {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 180px;
}
.tile-image-area {
height: 150px;
}

```

 ![スクリーンショット 2020-11-23 14.53.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33c9062d00cf03caebbdae8422a10a425158c869.jpeg)

 ![DSC_0077-removebg-preview](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/4316e5e90b08289948069ccdeada50e264774d03.jpeg)

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [November 23, 2020, 12:51pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/152 "2020-11-23T12:51:12Z")

</div>

I’m going to try this.

That looks really cool!

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 24, 2020, 5:23am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/153 "2020-11-24T05:23:24Z")

</div>

I created a kiosk for the automotive industry. It works on a Kiosk location and customers that dont want to have physical contact with others due too Covid-19 can access it from there car as well as request a LYFT from the app (the dealership pays for LYFTs). Here’s some screenshots of the flow of the app. The app also houses the backend of the app that is used by employees who access the kiosk submissions as well as a custom chat for the employees. The chat doesn’t use any forms and filters by who they are talking to and the messages they shared. It also uses current vehicle mileage to determine the best services for the vehicle.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a3f2c869dba1978b60d24a51ea00a5a7587ac7bc.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3dce87520ed4d12580237a6c0f1e20558630b4c3.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6a86ae140dec772acc71f1fa9aabb043156dcc9c.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/4/e4e1e51932fa40eaa253fcc664721f4011692bef.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fab7cdc705f870dfdd51b33d1c87655576827109.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/0/40c7bfe136f61ac5f0b6f7f68f4e4d918c6c1048.jpeg)  
This is customer view

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 24, 2020, 5:26am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/154 "2020-11-24T05:26:24Z")

</div>

Here’s the employee side of the app:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/800ba1f7ded4f6ea3b44e2372052ab79608f53aa.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/100d283b56f44ec187d9060cd7bae0b956bd9a31.png)

Heres the chat. It required quite a few workarounds but it lists current chats you are in on the left, and on the right is the chat/person you selected, it lists most recent chats from top to bottom to avoid scrolling, you type the response at the top and click the button and it submits the response and notifies the person.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dc1a44f2817cab9fff781ab18663d9744f6461de.png)

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 24, 2020, 5:28am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/155 "2020-11-24T05:28:19Z")

</div>

This chat is nothing like any of us have on here. it’s live and distinguishes the chats you are involved in and only yours without a form submission. It identifies the last message sent from the opposing user posts it in the left list.  
Phone view

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/3/838069227d6debaa69d909c31f540f0af7154aed.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b75fe70be1e0943a7073e98daa893220397d79ff.png)

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [November 24, 2020, 6:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/156 "2020-11-24T06:21:18Z")

</div>

Using the code created by @Robert_Petitto  
I tried to decorate the tile style view.  
★ This is the table of contents page for staff introduction.  
★ Limited to 2 rows.  
★ The tag is a fake button.  
★ The background cropped image is used.

```auto
<pre><span>
<div class="background"></div>
<style>
html { font-size: 14px; }
.background {
position:fixed;
margin-top:0;
background:#5498dc;
width:100%;
height:100%;
top:5.5em;
right:0;
z-index:-1;
}
.tile-image-area :nth-child(1) img {
height: 90%;
width: 90%; left: 5%;
margin-top: 0.2rem;
border-bottom: solid 1px #fff;
}
[data-test="tile-item"] {
border: solid 1px #fff;
}
[data-test="app-tag-overlay"] {
position: absolute;
left: 0.7rem;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 5px 10px 8px 10px;
text-transform: unset;
background:#000;
color: #fff;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1.5rem !important;
line-height: 1.4rem !important;
color: #fff !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-size: 0.8rem !important;
line-height: 1rem !important;
color: #fff !important;
margin-top: 0.2rem;
}

.tile-text-container {
position: absolute;
top: 16.5rem;
left: 0.7rem;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 80%;
}
.tile-image-area {
height: 24rem;
}

```

 ![スクリーンショット 2020-11-24 14.46.59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/9242a01e18d15ed77da209761cf20e2bbe191481.jpeg)

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 24, 2020, 6:28am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/157 "2020-11-24T06:28:43Z")

</div>

I have an onboarding app that after you select the position it lists all 30 days of training as well as the tests and videos are in the app, the app grades the tests and submits emails to managers with grades. You cannot move onto the next day of training until the previous is done and tests are passed. When you start the onboarding it timestamps the day so if an employee gets behind it notifies managers when they are anymore than 3 days behind.

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 24, 2020, 6:47am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/158 "2020-11-24T06:47:37Z")

</div>

Ok, last image for the messenger app, I realized I didnt have but 1 person listed so i added another user and created a 2nd chat instance.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f566d28775902a1fa591bfff549a8d2e5a21c83f.png)

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [November 24, 2020, 7:05am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/159 "2020-11-24T07:05:47Z")

</div>

@Drearystate Looking good 👍

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [November 26, 2020, 8:14am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/160 "2020-11-26T08:14:25Z")

</div>

Do you like Japanese kanji?

Vertical writing using \<writing-mode: vertical-rl;\> gives the following.  
However, except in the Japanese environment, you need to upload Kanji as an image.

 ![スクリーンショット 2020-11-26 16.59.35](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f2cb5973d99b7aff0c6bd91fcd928c094a940ccb.jpeg)

---

<div class="post-metadata">

### Author: ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)
#### Post date: [November 28, 2020, 5:14am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/161 "2020-11-28T05:14:22Z")

</div>

So, as I mentioned before I made a messenger app similar to the messenger part of the kiosk app I made a few days back. Here’s a quick video and just want to say up front, it’s not in any way intended to compete with Robert’s Messenger app, in fact its 2 completely different approaches to the app idea.  
I hope you guys enjoy it and it will be listed as a free app 😁

[![]( " - YouTube") ](https://www.youtube.com/watch?v=XhJTSccUbFg)

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [December 6, 2020, 12:03pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/162 "2020-12-06T12:03:22Z")

</div>

Amazing work @Drearystate. I can’t seem to find it on the template store ☹

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=7)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=9)