Tell Glide how you use CSS

Hi all,

I’ve been starting to look into CSS usage in Glide and how we can better serve you. I would love if y’all could help me with this task by doing a few things.

  1. Give me a description of what you are using CSS for.

  2. Give me some before and after screenshots of what your CSS does. If it adds motion an movie would be amazing.

  3. If you are open to it, include your CSS snippet as an inline code block.

  4. Keep it short! I want to gather a large gallery and it will really really help me actually understand and better service everyones need if everyone really tries to keep things on topic and pithy.

Jason

16 Likes

@Lucas_Pires and me have a library of codes on Notion. If Lucas hasn’t sent it over by morning my time I will include it here. Thank you for taking the time to look into this!

5 Likes

You should find more than you need here thanks to @Uzo

2 Likes

Thank you!

oh wow, @jason you’re really opening a HUGE pandoras box here :rofl: :rofl:

gee, where to start… :thinking:

  • I use CSS a lot for tables. Here is a recent example that I posted (includes a short video and the CSS/HTML used):
  • I also use CSS a lot for hiding stuff and controlling user flow. Hiding the back “button”, etc

  • I’ve also used CSS for generating a customised calendar view for displaying a shift roster (thanks to some awesome help from @Jeff_Hager)

That’s just a couple of examples off the top of my head. This is going to be a really long thread :joy:

3 Likes

Oh man… this would be awesome if we could use CSS the right way. Super exciting to hear that its being looked at!

  1. I use CSS mainly to style buttons, implement full background images, change the color of fonts, change padding/margins. In addition, I give users the ability to modify their color choices for their buttons and background opacity.

Before:

After:

<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
height: 100%;
width: 100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
opacity: .3;
background-image: url("URL"); 
background-size: cover;
background-position: center center; 
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div > div {
color: #FFF; }

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left; 
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div  {
color: #FFF; 
}

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 1px;
margin: 0px 16px 0px 20px;
justify-content: left;
}

<pre><span><style>

.hUuORH.hUuORH {
color: #TEXT !important;
background-color: #BACKGROUND !important;
border-color: #BORDER !important;
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left;
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}
[data-test="app-tag-overlay"] {
background-color: #BACKGROUND;
color: #TEXT;
}
10 Likes

If everyone could do their best to emulate Joes format that would be amazing.

3 Likes

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

2 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;
}
8 Likes

cool tutorial!

1 Like

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

5 Likes