Lessons Learned Building Tailwind UI

Automatic TRANSCRIPT

Basically telling you I is like a hosted kind of like component directory Full of a bunch of different stuff designed by Steve and myself built By Steve and myself will most Obama helped by tuning the designs and stuff like that We can just kinda browse around different component categories and Find something that is close to what you need and grabbed the html for it and dump it into your project and then you own it and you can tweak it as much as you want so it doesn't add any lake bootstrap style classes or anything like that. Where you know. You're you're pulling in a library that we've installed give anything. There is like a dependency currently. But it's sort of just like wow. We're in early access kind of fine tuning things. There's some things that we needed to add To tell when some values and stuff that we needed to achieve the designs that we wanted but generally the idea. Is that like you? You copy the code and take ownership of it and tweak it as much as you want which. Yeah that's important for folks to understand and just you know when you all launched last week and seeing some people who maybe weren't telling users or who've been kind of vicariously following along like utility CSS but don't use it themselves yet. There's definitely that that gap because they're coming from a context of something like a bootstrap or material and that is like a dependency. You add to your project and you know if you have to override styles from bootstrap you are working against bootstrap in a sense. Yeah this is for folks who use like React an example here would be like installing a reacts US measure dependency in the new import like US measure from the library. And it's a dependency of your project. Which is good and bad. Because it's done for you but like those dependencies can break. There can be bugs in them. They CAN UPDATE. It's something that you are responsible for maintaining versus finding a gist of like that. Hook copying and pasting it which is actually a great way to get started with a lot of stuff because you have to understand it and now you can tweak it to your use case and you don't have to worry about it being an external dependency so I kinda see tell when you I To bootstrap and material the same way where you can just literally copy in a component. And it's all there. You don't have a new dependency. You don't have to worry about things breaking you can put it in one part of your APP without changing the design of the rest so I kinda see that analogy. Yeah Yeah for sure and I think the other benefit of it has been We don't have to. We don't have to sort of anticipate every sort of piece that you might. WanNa change right and figure out. What's the perfect? Api for this component to make sure that you can customize because inevitably we're going to not anticipate some change that someone wants to make and now they're gonna WanNa just copy it own anyways. So exactly I mean. How often does that happen whether you're doing stuff from bootstrap or even you are components? Withdrawal Script built-in from libraries. I mean that's like the whole story you install it does ninety percent of what you need and then you open issues wait for. Pr's to do the last bit so This is a nice. It strikes a nice balance. So Yeah Yeah Yeah So. That's where we ended up going with it anyway and we launched last week was like to Kits or packages. We had hard time going up at the right term analogy but we decided to split up based on what we've done so far into like stuff for marketing sites and stuff for like application. You is so. The marketing sites has categories for like heroes feature sections contact sections Testimonials all sorts of stuff that you would like kind of like those stackable sections would stack on top of each other to build like a landing page. We always call them. And there's a bunch of different like Examples in each category in a lot. More to come since we did do this as like an early access thing then application you is stuff is is where you have like your sidebar. Layouts you're stacked layouts your form layouts your tables tables your you eye lists drop downs or buttons all that sort of stuff Yeah so that's kind of like what we What we put together in launched with Last week and we have a lot more to do but so far So far it's been going pretty good so I felt kind of fun to talk about. Today is just kind of kind of the some of the interesting things that I personally weren't building this about working with Ellen and about I to build More robust user interfaces. Because there's something interesting about Trying to build stuff that's meant for other people to consume that Forces you to consider things that normally you would just sweep under the rug. If you're just doing it for yourself. You know exposes any cracks in edifice. They might have. Yeah because you really need to make things like as resilient to content changes and stuff as possible so like a common thing that I'll do on my own sites is You know like oh I have these like four items in this list and if the texts gets too long it ruins the layout so. I'll just make sure the text doesn't get too long right but I can't make those sorts of assumptions as often. When I'm trying to build something other people have to have to use a lot of interesting things that you have to do to try to make things says as non brittle as possible right so this is pretty interesting experience In that regard for sure cool. Are you still a fan of talent? I am still fantato and for sure. Definitely yeah definitely things like opportunities that I see to make it better now though which is Which has been interesting and most of it in a non breaking way which has been good. So yeah I don't know why don't you start? We can start with I think just some of the more interesting things that you were learning about I know the white space stuff was was an interesting one. I know the grid layout stuff was was interesting in the line height stuff. I mean those are the ones that kind of just off the top of my head. Yeah okay so the line. Hey One maybe start something pretty interesting so by default tail and includes like these leading utilities right for setting line high and we include. I think five or six maybe seven by default that are all just using the unit lists relative line heights so we have like letting none which is line high one so matches the font size exactly letting loose which I think is to letting normal which is one point five like leading tight which is one point two five and all this is good and it's nice and it sounds like a great idea. I because you have decoupled your line height system from like everything else right so it's like no matter what font size I sat. I know I can make the techs tight or loose or kind of like normal just by using this multiplier essentially so like if you had a five page essay in highschool you double space demonstrates triples everything these same big margins out of space you know around the period so it pushes it out. Yeah all those little tricks. Basically it's you can change the font size and it's still going to be double space. That's how it has worked up until this point all works. Yeah and not is sounds like a good idea in principle but we ran into some situations where this was the cause of a lot of pain for us so the the real issue is For All of our application you I components us kind of like a tenant's default font size you like sixteen pixels which is with browser uses but fall. We just have. I think it's like taxed. Base is one ram so sixteen pixels unless the user is like configured that in their user agents style sheet or whatever in their chrome preferences and But for the actual application you I stuff even though we still use one ram as being sixteen pixels for a lot of the content. We're using fourteen pixels So text like form inputs. We do fourteen pixels buttons. Do Fourteen pixels copy that you would see in an application you. I maybe have a form. And there's like a heading for section of the form and then there's like a paragraph explaining what that piece of the form is four weeks fourteen pixels for basically all that stuff and And the read about from. There's precedent for that. Yeah YEAH SO Steve. Just has always done that And he likes how it looks and I always push back on every decision that he he wants to make whether to take. I'm always the one who's like okay. Well I think that looks good but like I don't really just I don't want to just trust it. I WanNa make sure that if we're making something that like we're putting out of there for other people that there's a examples from other companies who have really thoughtful. You teams have made the same decision just because that just gives me peace of mind feeling like well if like shop if I use is fourteen pixels for like their application you. I tech size generally Then we're probably going to be safe doing that too. Because if it was a horrible idea they would have changed that by now because it's a huge gap with tons of smart people working on it used by millions of people. Yeah

Coming up next