Tell Glide how you use CSS

This is fabulous.

1 Like

Summary

One the Most important and used
  • Styling a Component by the order in the Screen
<span/>
<style> /* Replace # for the number of the component in the screen */
div[id*='screenScrollView'] > div > div:nth-of-type(#) { 

[here I set what I wanna change]

}

Nav bar, Background image, Moving up some components..
  • Icon in Nav-bar
  • Transparent Nav-bar
  • Hide Nav-bar name
  • Bringing Image (2nd component) up
<span/>
<style>
[data-test="nav-bar"] {
  content: "";
  display: flex;
background-image: url(https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Hyc06jcwxpwF0p3GNTZi/pub/EpMfBYoYysfDFBqRaLA5.png);
  background-size: 45px 45px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}
#app-root div[opacity='1'] {
  color: transparent;
}
div[id*='screenScrollView'] > div > div:nth-of-type(2) {
z-index: -2 !important;
opacity: 1 !important;
margin-top: -145px !important;
}
div[id*='screenScrollView'] > div > div:nth-of-type(3) {
z-index: 1 !important;
margin-top: -95px !important;
margin-bottom: -65px !important;
}

</style>

Color of 2 items independently - Inline Card Style
  • Changing colors of Avatar Text dynamically by profit (green or red)
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(1) .floating-overlay-text {
color: #COLOR1;
font-weight: 800;
}
div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(2) .floating-overlay-text {
color: #COLOR2;
font-weight: 800;
}

Title Color - Inline List Style
  • Blue Subtitle in a List style Inline list
<pre><span><style>
[class="textContainer"] .textDetailStyle {
color: #08A8BF;
    font-weight: 800;
}
[class="textContainer"] .textCaptionStyle {
    font-weight: 600;
    font-size: 0.95rem;
}
13 Likes

cool tutorial!

2 Likes

Hello @Jason

Personally I use CSS to supplement or create objects that I need (or at the request of some Glide users).

Here are my few observations (with my small level in CSS):

  • it is quite difficult to make a “responsive” CSS (rwd?!) for the 3 screens: phone, tablet, desktop

  • I also often have surprises between rendering under the editor, desktop or on the mobile, probably a lack of knowledge on my part on the problems of cross-platform PWA.

  • It would be nice to publish a guide to good or bad practices (so as not to disrupt the entire application).

  • Finally The Most Important (for me): As now we can name the components,
    is it possible to have class or id names in relation to the names. it would then be easy to identify.

Here are some recent examples:

Calendar

Message box

Edit text

Choice

multi choice

Date picker

other

That’s all for the moment !!

9 Likes

Summary


Full Mobile/Destop Background
<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(30%);
background-image: url("https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/xmLP8vaObRbgV6VTggV0/pub/28Q2XMiX1jNfyFWbL0l0.jpg"); 
background-size: cover;
background-position: center center;
}

Modal/Pop-up (gradient stylish)
/* Blurry */
<a style="top:180px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding:100vh;
background-color: rgb(0 0 0 / 70%); 
backdrop-filter: blur(4px);">
</style></div></a>


/* Box */
<div style =" position: fixed;
top: 250px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:190px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;">
<br><br>
<h3><font color=#fff>Perfil Enviado</h3>
<div style="white-space: break-spaces;"><font color=#fff>Seu perfil será analisado e em breve você poderá acessar nossa plataforma.<br><br> <b> Equipe LíderNegra
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: .4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

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

No Nav-bar Title
<pre><div><style>
[data-test="glide-app-bar"] :nth-child(1) {
    backdrop-filter: blur(1px);
    background: transparent; 
    -webkit-backdrop-filter: blur(1px);
}
#app-root div[opacity='1'] {
  color: transparent; 
}

Stylish Header - Rounded Border
<a style="position: absolute; width:100%; top: 105px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
<div style="background-color: #f5f5f5;  padding-bottom: 90vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div></a> 

<a style="position: absolute; width:100%; top:-120px; right: 0%; z-index:-2; opacity: 1;">
<div style="background-color: #101010; margin: 0%; padding-bottom:330px;">
<pre><span><style>
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}/*----- hide nav bar ------*/
#app-root div[opacity='1'] {
  color: transparent; 
}

10 Likes

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

NO CODE is the future of CODE :slight_smile:

4 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

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

14 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

7 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!!!