Tell Glide how you use CSS

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

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

1 Like

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

Tab Horizontal

Tab Vertical

This is a great great initiative @Jason !

I want all the things I read here without css :wink:

7 Likes

First I want to say this is amazing what the guys here are doing and @Jason this is awsome initiative.
second, mt 2 cents on things I’m doing

  1. align text right, for everything, basically, beside the action text component which is working correctly in RTL (comma, question mark etc. are in the right place and not align left even when aligning the text to right). So, using CSS for aligning all the components.

  2. Pop-up box with image to clode the pop-up:

  3. sticking choice to the top as a selection menu:

and then:

  1. Turning choice to bottons:

  1. Changing size and design for input components (would love to be able to put 2 next to each other and also input + text component next to each other)

  2. Design buttons:
    image

  3. Change inline list to fit more items and decrease size etc.:

  4. tables:
    image

  5. Padding components like map, video etc.

  6. Replacement for the Hint:

9 Likes

see here

1 Like

thanks!!! found it few min before you sent. you do amazing stuff with CSS

2 Likes

another example for your collection :wink: