Beautiful Design App

:astonished::clap::clap::clap::clap:

2 Likes

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 :wink:

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 :wink:

6 Likes

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.)

3 Likes

Thank you @nathanaelb!

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.

5 Likes

:point_up: 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.

4 Likes

Food for thought. Thanks.

1 Like

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.

23 Likes

Very nice, black and yellow = good combination

5 Likes

Beautiful indeed!

2 Likes

I really love it. Good job :mechanical_arm:

1 Like

Like taxis un Barcelona :grinning:

Seu app é uma maravilha, parabéns!

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

<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;
}


16 Likes

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

3 Likes

@Robert_Petitto

2 Likes

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?

<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;
}
5 Likes

It’s everything ok here…

12 Likes

You forgot
visibility: hidden;
:sweat_smile:

9 Likes

Thank you for this

1 Like

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

1 Like