Tell Glide how you use CSS

Thanks for taking the time to address this, @Jason. I’m sure this thread will become pretty long, pretty quickly.

CSS Use: More efficient use of space

Every component takes up visual real estate. I use CSS often to adjust the margins/paddings/locations of components to make better use of space so that content isn’t “below the fold”.

Before:

After:

<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
background: transparent !important;
}

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }

#app-root div[opacity='1'] {
      color: transparent; 
    }

[data-test="app-summary"] >:nth-child(1) {
height: 150px !important;
}

[data-test="app-summary"] >:nth-child(1) >:nth-child(1) >:nth-child(2) >:nth-child(1) {
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3)) !important;
}

//[data-test="app-summary-title"], [data-test="app-summary-subtitle"] {
text-align: center;
}

.tile-inner {
width: 50px;
}

.tile-image-area {
border: solid 4px white;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 40px;
}
.inner {
grid-template-columns: repeat(10, 25px) !important;
}

[data-test="app-button-view"] {
margin-top: -50px;
position: fixed;
right: 0;
padding: 0 20px;
min-height: 35px;
}
26 Likes

NO CODE is the future of CODE :slight_smile:

6 Likes

Almost two years ago when I met Glide I had already met and seen some other platforms no code but what did they sin? Design. In other words, today your platform is one of the most beautiful in terms of mobile design because I know that in the future it will also be for the desktop.

As you said Jason, you still have a lot to improve and we understand that. You are not doing anything wrong.

I started using some CSS on my own, which to improve the design of the apps, and also because of some requests from some customers, I started researching how to modify and use Glide’s own features so we can improve the user experience even more.

And as I developed more apps for more clients, I started to realize that always using white backgrounds with the same design, it gets a little tiring.

Remember that at the beginning of Glide I pissed you off about various things and one of them was asking you to have actions in images? You asked me why, and I showed you that I used images to make the app even more “beautiful”.

But as I showed above, many times these images or colors other than white or a dark gray (dark mode), would need to occupy the space of the Nav bar too, or stay as a background.

And even if it sounds like it, I’m not a CSS user - since I have over 150 apps on my account, and not even 20% have code. I currently use these apps to improve these little details, and also to build unique apps! This is why I use them the most.


Before | After

Before | After

Before | After

19 Likes

Background rocks here , i’m happy !

1 Like

I think @Manu.n and @Lucas_Pires have covered a lot of what I have stolen borrowed, so I’ll just share a few of the other modifications I have done.


This is to apply a gray background color to the cards in the log history list:

<pre><span><style>
[data-test="card-item"] .bottom-area {
background-color: #dddddd;
}

This is to apply a shadow behind the tile with the vehicle image:

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

This is to create the separator with the curves between the chart and the log history. Similar to what @Lucas_Pires has done with the curved background at the top of the screen:

<a style="position: absolute; width:100%;  right: 0%; z-index:-2; opacity: 1;">
<div style="background-color: #960000; margin: 0%; padding-bottom:100px;"></div>
</a>

<a style="position: absolute; width:100%;  right: 0%; z-index:-1; opacity: 1;" target="_blank">

<div style="background-color: #ffffff;  padding-bottom: 30px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-origin: content-box;"></div>
<p>
<div style="background-color: #ffffff;  padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>

 </a>

This is what I’m using for the modal popup:

<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Is this the correct amount?</h3>
<h1>{amount}</h1>



<pre><span><style>


[data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
max-width:180px;
}

.fab-target >* {
display:none;
}

</style></span></pre>

Here is a hint component that that I've modified to become fixed so it's always visible in the same position while scrolling.

image

<pre><span><style>
[data-test=app-hint] {
position:fixed;
 top: calc( var(--safe-area-inset-top) +75px);
 background-color: rgba(0, 0, 0,.2) !important;
 backdrop-filter: blur(8px);
width: 92.1%;
text-align: center;
z-index: 1}
</style></span></pre>

This one is completely gross and is some massive manipulation on a cards style list to get more columns. I think if we had the option for more tile or card columns, then this could largely be avoided.

<pre>
<span>
<style>
.inner {
    grid-template-columns: repeat(7, 53%) !important;
    column-gap: 0px !important;
    padding: 0px 0px !important;
    width: 27%;

}
.card-title {
    text-align: center;
}

.card-title:nth-child(even),
.card-title:hover {
    border-radius:20px;
    background-color: #58656F;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
}
.card-subtitle {
    margin-left: calc(10px+10%);
    margin-top: -25%;
}
[data-test="app-horizontal-list"] {
padding-top: 1px;
padding-bottom: 1px;
}

[data-test="app-avatar-wrap"] {
font-size: xx-small;
}

.card-title-container {
    height:5px !important;
    margin-bottom: 10px !important;
}

.bottom-area {
    padding: 0px !important;
}


.sts-row {
    height: 20px !important;

}

[data-test="app-button-view"] {
min-height:0px;
height:0px;
margin-top: 0px
}

.ReactVirtualized__Grid__innerScrollContainer {
height: 100px;
}
</style>
</span>
</pre

I also create dynamic html tables with some mild css styling, but I'm not sure if that applies to this thread.

16 Likes

Use CSS to reveal hidden text.

I’ll often use CSS to reveal text that’s cropped in Basic Tables, Tile Titles, etc.

Before:

After:

<pre><span><style>
[data-test="app-st-item-label"] {
white-space: break-spaces !important;
}

.sts-row {
    height: auto !important;
    padding: 10px 0;
}

@Jason

14 Likes

I like how @Robert_Petitto did these overlapping icons using CSS.

users

I think the code he used is

8 Likes

The tag styling, tab functionality, button anchoring and offsetting of lists in this image is pretty slick too. In YELLOW…

Here are some CSS design goals that I thought were really good:

Hi again, @Jason.

Above is the link as promised. @Lucas_Pires has posted some in this thread.

We started this a while ago and plan to integrate more things in here (let’s say sharing Integromat scenarios, how to use them and attach the blueprint) so the community can learn and use them in their own apps.

At the moment, each CSS card has a code snippet and a sample image of how it looks like.

We have also added an Inspiration list, those are nice designs I took mostly from Dribbble that I plan to try and implement at some point.

Edit: Forgot to update it to public, if you can’t access it please tell me.

22 Likes

I like the principle of using the notion.so as a memo for CSS :clap: :clap: :clap:

5 Likes

I’m using it , planning to be honest , for having an animated background , i would like also to color the audio player , not the background of it , using the faboulous code book but now its not working for me. Would be so great to have a css section on all lists and components to give life to Glide or at least a background option.

ps.Thanks to Uzo for pointing me out with the initial code

This way I can have an array of audio players


[data-test="app-audio-wrapper"] {
position:  ;
background-color: #8FE147 ;
color:yellow;
width: 100%;
max-width: 700px;



flex-shrink: 0;
bottom:80px;
text-indent: 0;
padding: 15px 5px 5px 5px;
box-sizing: border-box;
z-index:1;
}

ps.sunday's experiments!!!! ;) 

this way you can have only the play and pause button ( no download ? I hope so....seems so ,uiiii :slight_smile: )


[data-test="app-audio-wrapper"] {
position:  ;
background-color: rgba(255, 255, 255, 0) ;
color: #8FE147 ;
width: 0%;
max-width: 700px;



flex-shrink: 0;
bottom:80px;
text-indent: 0;
padding: 15px 5px 5px 165px;
box-sizing: border-box;
z-index:1;
} 

changing the padding and the hex color you can have something different and you can also put another rich text editor together and put a makebackground.io ( loading.io) ( spread guys !!they deserve it !!! ) as i told first for having beautiful svg there !!!!
And if you use the great sirv.com and reach their support ( very very gentle ) you can remove the download option as server side so if someone tries to download your files will get a 403!

ps.
3 main issues : 1.this way all players can play together , if you press all play buttons ; 2.if you put an image on top it disappears ( appears only on mouse over, didn't check the real beahviour on the phone just on the editor loaded in Safari-Catalina) if the background svg in the rich text editor is there ;3. without transports you have no controls so when it pauses it doesn't step back to the beginning , its tricky but its a beginning , maybe we could enlarge till main disappear the three dots needed for the download outside of the screen ( yes I hate the download option ! )

Have a nice Sunday , @Jeff , @Uzo , @FabioLeanzi and @Manu.n  , thank youuu !!!!!

ps.sadly is not working on the mobile side ( Android and iOs...) ps.2 i made a new tab with only the audio player ... no rich text no css and the player doesn't show up..., as far its not a pro component I don't know then ( by the way guys I hope it helps ! )
2 Likes

For use in arrays. remove position and bottom from the code, so they don’t overlap each other.

1 Like

Thanks, I will .Can you try ? On my devices now I can’t see any audio players at all , maybe mine its just a mess and the player just declared WAR to me ; ) !

here you go:

LINK

2 Likes

Uzo and Manu masters of Css on Glide!!!

Hi Lucas,

Would love to better understand how you set css for specific component on the page.

Can you share an example of how I should use the css you posted?

Thanks

3 Likes

That CSS targets the component by its order number on the screen, top-down, visibility conditions taking into account. The best use case is you want to change a component on the screen, but not its other siblings (let’s say the 1st hint text but not the 2nd or 3rd).

Assuming you know the specific characteristics of the component you want to edit already, and it’s at first place, you can be confident putting number 1 in there and it will never fail to do its work when it’s visible.

However let’s say you want to change a component at number 3, but your component number 2 has a visibility condition. When it’s visible your specific code will work, but when your component number 2 is not visible then your “3” will become “2”, thus break the logic.

So please think through about all the possibilities to construct the right rich text components and its visibility conditions.

2 Likes

Thank you. I think I understood. Will play with this and see how it works

2 Likes

@Jason another little sugestion/variation of separator component

5 Likes

Thank you all, please keep these coming.

4 Likes