Tell Glide how you use CSS

And I got so addicted to CSS, that there is not a single element in that screen… originally from Glide…LOL. :wink:

Screen Shot 2021-06-04 at 12.35.46 PM

6 Likes

This is great, @Jason! But i have many as @ThinhDinh said. Where do I start from? :grinning_face_with_smiling_eyes:

1 Like

Just start posting. Go wild

1 Like

please post codes with proper targeting, so it will work on any device and OS, people are using them without releasing, that is not working for users on deferent devices than yours.

1 Like

They are, but they’re majority to use in mobile

1 Like

At the moment I really just need a large sampling of what people are using. I need the visuals and the code. I want to see what yall are doing, try to figure out how I can make it less prone to insane breakages, and provide better functionality, etc.

3 Likes
2 Likes

Oh yeah I have been digging into that :slight_smile: I was hoping to find even more from the rest of the community.

tones of samples and discussion there:

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

11 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;
}
26 Likes

NO CODE is the future of CODE :slight_smile:

5 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

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

15 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