Transcript
10 years ago when I was just starting to work through bone rails, everybody was using Bootstrap. And Bootstrap is actually great. For example, if you want to have a button in your application, you would just type, uh, button, button primary. So you see there are these semantic names that are easy to remember and you don't need to write, uh, a bunch of custom, uh, styles, or you don't have to use, uh, utility classes as TNT proposes. Nowadays, everybody's using tnt. It is the most popular, uh, I think, uh, c success, uh, framework for Ribbon rails. And the, the approach with NT is that you don't use, uh, components. You have utility classes. Utility classes are basically, uh, more comfortable to write, uh, styles. So, uh, radio stem instead of both radios than pixels. So the syntax Verizon is much easier and you can quite easily remember the names of the ion utility classes. But the problem, the VIN is that if you want to create a button, you would need to write maybe like 20 utility classes. Whereas with Bootstrap, it's just a very nice API button button primary. So here you would want to reuse a button, you need to copy paste the classes, and it's so uncomfortable. Then there are all these Ribbon Rails component, uh, libraries, and they want to componentize the CSS so that, uh, you can reuse it in a more comfortable way. Let's see how different, uh, component libraries use buttons. Let's see here we have button. Uh, so nitric button, you have nitric button, the default one, instructed primary button, destructive button. So you would need to write less, uh, uh, less custom CSS. You would just use their buttons. Let's see how it is done by Polaris, for example. Let's see, uh, Polaris, uh, button. So you have, uh, uh, Polaris, uh, button. You have, uh, Polaris button, uh, variant, primary and Destructive. So you see they have their own, each of these libraries have their own APIs to more the same components and need to learn these APIs. Uh, but I think, uh, from my experience at least, the best, uh, of both worlds between, uh, the utility classes from VIN and the components from Bootstrap is offered by de ui. So these are, this is a component layer on top of VIN CSS and, uh, let's see how you would want to create a button with TA ui. So you see the API is more or less the same as bootstrap button button neutral button primary. So it is, uh, short, it is semantic, it is easy to, uh, remember, and it is just a layer on top of end. So you could still apply the classes like with full, and it is, I would say easier to remember than, uh, right in the, the like Ruby Nitric primary button or Polaris button. And, uh, add in the variance. So, uh, let's try using DA UI in RA's application. Um, here I have a new Ribbon Rails application running. Let's open it. Let's, uh, create a basic scaffold. Now, before I do it, I will show, so installed Tevin CSSI create this application that Tevin css by default using Rails, you my app, uh, C equals tailwind or Vin CSS. I don't remember one of these, but basically I already have VIN CSS installed. And now if I create a scaffold, let's say rail generates scaffold, post title body text, it is going to generate that scaffold with already some, uh, vin, the CSS here to style everything. I think this vin SS was, uh, approved by Adam Bean, the creator of VIN CSS. So, uh, if I go to the application, I go to Route and set Route to Post Index. You see it's already kind of styled with some VIN CSS and uh, let's look at this nt. So going to index, you see, for example, the links and buttons. It has a bunch of, uh, visibility clause for the buttons, and, uh, it'll be pain to copy paste it, uh, all around. Let's see, are these tool the edit and show the same? Yeah, this tool are the same, but Destroy is different because it's using different colors. And for this, we can try replacing these, uh, buttons with DA ui. So let's try to install DA ui. I'll go to DA UI install, uh, for Rails. So already having your Rails app, I already have a VINs installed by default. I'm going to cope with these tool scripts. It's going to add couple of Gs files into my application. So, uh, it'll add, uh, couple of Gs files, Daisy theme and Daisy, I, the Gs. And now I will go to application CSS in the tail folder, and I'm going to cope with this. I don't need this source, nothing just like that. And now I will restart the server just in case you see it says DA UI is running. And now let's try using some DA UI components. So I will cope with this. I'll go back to my application and I'll try adding this, uh, button primary here. And you see here we added a button primary and it already works just like that. So now I can, uh, try to reuse the, uh, buttons around my application. I will use, uh, button primary for new post B-N-B-D-N primary. And you see here we're using the, uh, component instead of, uh, just, uh, typing in the custom, uh, uh, the custom, uh, utility classes. Let's see what it offers us for links and, uh, destroy buttons. So it'll be just the default button here. We have button with the error variant. And you see, just like that we're already not using this long, uh, utility classes that they would want to copy paste, see what's the difference, which you can just use all components that have been created for us by people who know CS as well. And, uh, we can just reuse them. So, uh, another thing I would want to do in any application is set the default background color and text color. So going to application HTML here, I would go to head to HTML and set background base on hundred and text based content. So I refresh. You see, it's more the same. Nothing has changed, but, uh, uh, now it is going to work well in dark mode. So if I don't add these, um, why is it work? Okay, uh, maybe I have something, uh, cached, but uh, dark mode is not supposed to, uh, to work. Let's add background based on hundred. Let's try to see if it works. I will set it to 300. Okay, the color has changed. Yeah, so, uh, if you set the background and the color on the application, just like that, we already have basic dark mode working, and there's really a bunch of, uh, really nice AI components that you can use. For example, uh, doc, previously I created a wireless video about photo navigation on mobile and how to create this kind of fuer that would work nicely on mobile. And this Azure has this component doc that lets you create this kind of mobile, uh, photo navigation. Let's try cope with this, uh, element and put it in our application. So on the main here, I'll put the dock and let's see if it, uh, renders. So here, just like that we have a dock. We can use our own, uh, link. So, uh, link to posts. And Let's see. So now these are actual links in our application. Uh, we have only two real links that we can use, uh, posts and, uh, new post. Both of them are active at the moment because they have, uh, been given, uh, dog active. We can say it can be conditional. So now we have, uh, photo navigation. And you don't want this foot navigation to be there on large screens. You want it only for mobile. So we're just going to add the Devin CSS, uh, large screen hidden. And now you have foot navigation on mobile version, just like that. So you don't need to write your own custom. CSS need to reinvent the bill for this component. So I highly recommend you to, uh, get acquainted with the components, uh, that DGLI provides and use them by possible inside your application instead of writing the custom CSS. It helps a lot. Um, another couple of things that this UI offers is themes. So let's try adding themes. I will, uh, add this. Uh, so by default it is, uh, light for light mode and dock for dock mode. Uh, if I refresh the page now, uh, nothing is really going to change. Let's, uh, go to light mode. But, uh, let's see what themes, uh, this has out of the box. So it has a luxury theme. For example, it would be a quite nice dark mode theme. So I will set, uh, luxury for dark mode. Now going back to my application, I will set dark mode. And here you see I'm using already the s luxury theme. And, uh, for light mode, let's change the theme to something like, uh, uh, autumn Or maybe lemonade. No, let's, let's do autumn. So I will set autumn refreshing, and you see it's already a different theme. And just like that you can actually also create your own, uh, themes. So if you have your own, uh, Figma with your own colors, with your own board radios, you can set it all here, export it into application and use your own theme. And another thing I like doing was adding a prefix as du So it lets you, uh, have du button and du button primary. Uh, when I was just starting to learn Daisy ui, it helped me to, uh, know which component is, uh, a daisy component and which is not a daisy component. If you have your own components, uh, if you have your own CSS components in the app. So I will comment this out. You see, it's not using da UI anymore. Uh, okay. And another thing, so if you're using DA ui, they have, uh, an LLM helper. Let's search for LLM. So, uh, there's this instruction. Uh, press command shift, p command, shift P and uh, add new custom docs. And you would add the, this URL, uh, maybe just like this. So it'll add the Da U Eye docs. And now your lamb knows how to use DA U Eye. You see, I added a docs for D UI and for, and, uh, you can also when doing prompts, uh, reference, uh, DA Z ui. So it'll know to look in the DA Z-U-I-L-M prompts for the ZI components that it can use to create your, uh, CSS. So if you're not using DA UI yet, but you're using nt, I highly recommend you to try installing DA ui and step by step, try to replace your existing buttons and other components with Daze I components. And they're semantic, they've written really well, and, uh, they work well in dock mode and light mode.
0