# 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:** 7

<div class="post-metadata">

### Author: ![Roberto\_Salim](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roberto_salim/32/6861_2.png) [@Roberto\_Salim](https://community.glideapps.com/u/Roberto_Salim)
#### Post date: [October 19, 2020, 7:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/122 "2020-10-19T19:10:30Z")

</div>

😲👏👏👏👏

---

<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: [October 19, 2020, 9:50pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/123 "2020-10-19T21:50:02Z")

</div>

Same as what you all have said, but I have only 1-2 apps where I apply HTML to this much extent because it’s a long-term client so I do keep an eye on all possible problems on a daily basis 😉

I really do hope we can do many of these things natively soon, getting this to work is already a challenge with all the different class names on all devices.

Gotta have something to make it different through, and keep myself motivated to improve 😉

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [October 21, 2020, 6:46pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/124 "2020-10-21T18:46:39Z")

</div>

Hi @ThinhDinh, @Lucas_Pires, @planetzero, @Robert_Petitto, @Deena, and many others I’m sure,

It’s impressive how you and others are pushing the limits with great design with custom html and css.

For the maintenance of your apps, especially if paid customers are involved, **aren’t you concerned with your html/css breaking at some point**?

(As an example, before we had the separator component, I believe @Jeff_Hager was using another component, possibly a progress bar, to create separators. At one point the workaround broke down.)

---

<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: [October 21, 2020, 7:05pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/125 "2020-10-21T19:05:11Z")

</div>

Thank you @nathanaelb!

> [@nathanaelb](#):
>
> **aren’t you concerned with your html/css breaking at some point**?

That’s why, as I said, I try to use the class of the code I’m sure 99% wouldn’t break, and 1% glide changes or update the class name.

---

<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: [October 21, 2020, 7:35pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/126 "2020-10-21T19:35:25Z")

</div>

☝ What he said.

I won’t use CSS for a client unless it leverages a named class. Even then, I give my clients a disclaimer that it may break.

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [October 21, 2020, 9:21pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/127 "2020-10-21T21:21:31Z")

</div>

Food for thought. Thanks.

---

<div class="post-metadata">

### Author: ![Troy\_Ashman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/troy_ashman/32/11839_2.png) [@Troy\_Ashman](https://community.glideapps.com/u/Troy_Ashman)
#### Post date: [October 28, 2020, 7:49pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/128 "2020-10-28T19:49:51Z")

</div>

I’ve begun building an employee onboarding app - designed to ensure new employees are set up for success from day one. It’s a work-in-progress and playing around with some different styles, concepts, and ideas… I’ll share a working version once it’s completed. But here are some images from the build thus far.

 ![Page 2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/e/e559882c30af4a1cb8339d09122553f532f08f22.jpeg) ![Page 3](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/7196b293d2111b2321bbf4e94dfe8b0e0b7fbdd7.jpeg) ![Page 4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/10aad09f7b18a3d4d044b21f1d00a9da872e07cb.jpeg)

---

<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: [October 28, 2020, 7:57pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/129 "2020-10-28T19:57:57Z")

</div>

Very nice, black and yellow = good combination

---

<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: [October 28, 2020, 8:06pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/130 "2020-10-28T20:06:21Z")

</div>

Beautiful indeed!

---

<div class="post-metadata">

### Author: ![Thibault\_Milan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thibault_milan/32/4970_2.png) [@Thibault\_Milan](https://community.glideapps.com/u/Thibault_Milan)
#### Post date: [November 1, 2020, 4:30pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/131 "2020-11-01T16:30:50Z")

</div>

I really love it. Good job 🦾

---

<div class="post-metadata">

### Author: ![Gerard\_Fernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gerard_fernandez/32/1183_2.png) [@Gerard\_Fernandez](https://community.glideapps.com/u/Gerard_Fernandez)
#### Post date: [November 3, 2020, 6:09am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/132 "2020-11-03T06:09:58Z")

</div>

Like taxis un Barcelona 😀

---

<div class="post-metadata">

### Author: ![Pedro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedro/32/15325_2.png) [@Pedro](https://community.glideapps.com/u/Pedro)
#### Post date: [November 4, 2020, 9:36pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/133 "2020-11-04T21:36:49Z")

</div>

Seu app é uma maravilha, parabéns!

---

<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 18, 2020, 3:15am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/134 "2020-11-18T03:15:38Z")

</div>

## Beautiful “Our Team” screen with Card View CSS transformation:

 ![Screen Shot 2020-11-17 at 10.13.30 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/4/74c66befd538bc765a1b075094e6c3608d82faa5.jpeg)

```auto
<pre><span><style>
[data-test="card-item"] {
width: 40%;
overflow: visible;
margin-left: 20px;
margin-bottom: 20px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 25px 10px !important;
}

.bottom-area {
position: absolute;
height: 100%;
margin-left: 115%;
text-align: left;
width: 120%;
background-color: transparent !important;
}

.card-title {
padding-top: 50% !important;
font-size: 1.2rem !important;
line-height: 1.5rem !important;
overflow: visible !important;
white-space: pre-wrap !important;
font-weight: 700 !important;
word-wrap: break-word !important;
text-transform: uppercase;
}

```

---

<div class="post-metadata">

### Author: ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)
#### Post date: [November 18, 2020, 3:17am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/135 "2020-11-18T03:17:05Z")

</div>

Jesus Christ this is incredible

For clarification to other users: You need to put an inline list with the card layout BELOW the rich text

---

<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 18, 2020, 4:01am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/136 "2020-11-18T04:01:48Z")

</div>

@Robert_Petitto

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfe0b882282e54d779096498d055aaad29c0fdc8.gif)

---

<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 18, 2020, 7:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/137 "2020-11-18T07:06:27Z")

</div>

Thank you for the very beautiful CSS.

I applied your code to the tile style.  
This is a test of the table of contents page.  
By the way, if you know the id name / class name of the character part of the tile style, can you tell me?

 ![スクリーンショット 2020-11-18 15.47.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e13dc6ba5be57d0a65632be39d3aed35e9d815ac.jpeg)

```auto
<pre><span><style>
[data-test="tile-item"] {
width: 100%; height: 70%;
overflow: visible;
margin-left: 0px;
margin-top: 10%;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 5px !important;
}
```

---

<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 20, 2020, 12:42am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/138 "2020-11-20T00:42:45Z")

</div>

It’s everything ok here…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/0/00b423598d99b0ec7688ef753a573549ab28815e.jpeg)

---

<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 20, 2020, 1:52am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/139 "2020-11-20T01:52:16Z")

</div>

You forgot  
`visibility: hidden;`  
😅

---

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [November 20, 2020, 3:43am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/140 "2020-11-20T03:43:39Z")

</div>

Thank you for this

---

<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 20, 2020, 4:34am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/141 "2020-11-20T04:34:25Z")

</div>

I don’t have a wish list as such but how I sometimes wish for Glide to give us these beautiful layout views!

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

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