Beautiful Design App

Do you have any how-to videos?

I believe @Lucas_Pires has some of them on his channel. Do you speak Portuguese?

1 Like

Yes. I can speak Portuguese. Thank you.

You can start with this video, he hosts his videos on this channel.

8 Likes

Thanks for the shoutout @ThinhDinh :facepunch:t3::grin:
@StephanGarcia hope it can help you

4 Likes

Obrigado Lucas! Trabalho com Glide hĂĄ mais de um ano e fiquei surpreso com o que vocĂȘ faz nele. Quero aprender.

1 Like

(I’ll keep in English just to others also understand)

Amazing bro! We have the same time working with glide! Follow me there, and if you want, I have also a Telegram group where we share tips, apps and so on

Hope see you there!

4 Likes

I’ll forever be grateful to Lucas, @Robert_Petitto and @Deena for pointing me to some great ideas for design.

Today I make a kind of weekly menu for a client and was very satisfied with how it come out. I also managed to wrap a title text inside a card!

13 Likes

Oh wow! That looks amazing! :clap:t3::star_struck:

What about the hover in inline list?

Here’s my whole settings.

<div><div>
<style>
.bXffxp {
backdrop-filter: blur(10px);
background:transparent;
-webkit-backdrop-filter: blur(10px);

}
#app-root div[opacity='1'] {
  color: transparent; 
}
.glbESi {
padding-top: 10px;
}
.jznirz {
color: white;
font-weight: 520;
}
.giqIon {
background-color: white;
}
.hWmmck {
background-color: white;
}
.builder .hWmmck.interactive:hover {
background-color: #00CC66;
}
.hWmmck.interactive:hover {
background-color: #00CC66;
}
.builder .giqIon.interactive:hover {
background-color: #00CC66;
}
.giqIon.interactive:hover {
background-color: #00CC66;
}
.fCkJVF {
background-color: ##00CC66;
}
.fakQng .card-subtitle {
padding-top: 5px;
-webkit-line-clamp: unset;
overflow: visible;
white-space: break-spaces;
font-size: 0.25 prem;
}
.fakQng .card-title {
text-align: center;
color: #00CC66;
font-size: 1rem;
font-weight: bold;
align: center;
}
.fakQng {
border-radius: 5px;
}
.gNSqMT .card-subtitle {
padding-top: 5px;
-webkit-line-clamp: unset;
overflow: visible;
white-space: break-spaces;
font-size: 0.25 prem;
}
.gNSqMT .card-title {
text-align: center;
color: #00CC66;
font-size: 1rem;
font-weight: bold;
align: center;
}
.gNSqMT {
border-radius: 5px;
}

The “interactive:hover” part was it.

9 Likes

That’s is gorgeous!!! Great job!!!

1 Like

Thank you brother, have a nice week!

1 Like

Amazing. Obviously a lot of time and care went into the design of your app. Love the floating action button and the recipe cards. Well done.

3 Likes

Thank you master. Will update more when I find out new concepts. I have been searching on Dribbble a lot recently. Do we have more sites for those concepts, like Behance etc.?

1 Like

Dribbble is my go-to.

1 Like

It’s beautiful. Well done sir. I do wonder though if we should be wary of using this much customisation? I am really keen to get some of these ideas into my own public deployments, but what happens if (when) Glide make changes that cause them to no longer work, or worse to adversely affect the app’s UI in other ways. What’s the general consensus here? @ThinhDinh @Robert_Petitto @Lucas_Pires?

2 Likes

Kind of with you there. I’ve seen CSS stop working for me. Probably a class name that changed with a glide update. I do use HTML and CSS very sparingly, or I at least have a back up plan if something stops working. I’m not opposed to it’s use, as long as people are aware of any possible repercussions.

2 Likes

Ditto. Unnamed CSS class names can change on a dime. If you’re using the named class names, it’s probably more future proof:

eg.

<pre><span><style>[data-test="app-markdown-view"] {
}

targets a rich-text box.

6 Likes

@V88 I’d say exactly what @Robert_Petitto said above!

3 Likes

All of you all are amazing! Yet to try something cool with app designing.

2 Likes