Building a Pricing Grid with Tailwind CSS

okey-dokey so I've done a live stream in a while but I thought today since I needed to do some work on some stuff Steve's been designing I thought it'd be fun to livestream some of this stuff and I'm gonna try something quick here I forgot that I bought this like fancy light that kind of makes things look cool I don't know well test it out see how it looks see if it looks better once the lights on okay so I think what I'll start by doing is giving you sort of a brief introduction to what I'm even making and then I'll sort of show you what we're gonna be working on so me and Steve have been sort of hacking on this idea of a tail wind component directory as sort of a way to you know monetize tail wind a bit and help make development of it sustainable something commercial that we can actually charge money for on the side of tail and it's sort of related so that we can still keep doing all the open source stuff and being being able to afford to invest a lot of time in that so we've been working on this prototype of a tool that we're calling toe and UI which is basically sort of like a membership portal where you can find all sorts of really well-designed pre-built examples of different talent components so a lot of this stuff is grayed out because it's not done yet but like for example you can see in the forms section we've got sign-in and registration forms so here's like an example of a sign-in form you can flip over and grab all the code or whatever and it's all like responsive so you can see like what it actually looks like when you you know try out all the different sizes got a bunch of different examples here's like a full-screen one with like an image maybe I'll zoom this out of it so we can kind of see a little bit better since I'm on a smaller screen resolution here yeah so you know all sorts of like responsive examples that are sort of designed by Steve which is nice because I know a lot of people are fans of Steve's design and yeah so then we got stuff like you know simpler stuff like headers so here's like you know simple responsive header with a little like card popover sort of thing and or like this one it has kind of like we ripped this off a digital ocean we have to change a bunch of content still but you can see it's kind of a got little like announcement section and stuff like that or even like really complex stuff like like kind of big form layouts with like a sticky sidebar and like a sticky footer at the bottom with all these kind of different you know control layout ideas that you know it's fully responsive and stuff as well so a bunch of different options for those so and this is kind of what we've been working on so what Steve has been working on recently is a bunch of pricing table stuff so he's been kind of building out all these different responsive pricing table options and yesterday my friend Justin Jackson messaged me asking if we had built any of these yet because he needs one for the new transistor on FM marketing site so he actually needs one like that's sort of like this style where you have sort of like a feature table with a bunch of different options so I told him that I would try and build one for him this morning so that he can try it out in his site and see how it actually works out for him so today we are going to try and build basically this Steve is actually like as we speak we can like watch him here's this cursor he's making some tweaks and stuff to support like an annual monthly billing slider and some stuff like that so he's actually making changes as we'll be going but we'll probably start was just like the mobile thing and see how far we get as far as like the timeline we want to do like an early access by the end of the year Steve says having another baby in November so that might throw a wrench into the gears but yeah we're hoping like in December to be able to release what we have so far with the intention of still adding some more stuff and sort of have it feel really flushed out and complete by probably I don't know the end of the winter sort of thing all right so um let's start so I don't know if I've got everything I need to do this so I have like this this whole thing is built as like a lair by lap and I've got this custom artisan command for making a new component so we want to do in the marketing category and it's going to be a pricing example and we'll just call it we're gonna do it with four tiers so maybe we'll call it like four tiers in four tiered table in card something like that and what this does is it it creates a new file in this components directory so you can see here that's just kind of empty it's it's kind of like a markdown frontmatter format so we have like a UUID for each component so that we can do up certs to the database and I'll give it a published out of today so that I can actually see it in the UI so it's not hidden and then we just kind of like build everything in the markdown section of this markdown file but just using HTML and then we can kind of see everything so the way that this kind of works if we want to kind of work on it is we can just grab the file path and then I have like a special URL set up just for local development where I can it's called this like workbench URL or I can just paste in the path to a component and live preview it so here's like what we have to start with which is nothing so since we're doing like a mobile version maybe we can I just yep we'll pull up like a dev tools here give ourselves something that's like 375 it's kind of like a good size and maybe will pull us down so you can play with it a little bit but still want to have some room to work and we should be able to just get like some live updates here and now actually one thing that I just thought of is we're gonna need to make a new window for figma now what what on earth is going on here did that break this setup no okay so that's good but now I cannot get back to that other window maybe using my trackpad okay all right so if we go here should be able to find where we were at we fist a load up and find our pages for our pricing sections I want to scroll down to where Steve is over here and I'm gonna hide the multiplayer cursors so we can focus on what we're trying to look at here okay so we'll go to a full-size here and yeah all right so starting with some content we'll just maybe drop in like these two pieces so I'll just copy this pricing builds for businesses of all sizes most of this content is probably stolen but that's okay so we'll throw in an h1 here and then under that well how like a pizza egg and this is gonna be rough that I can't easily tab to this other window what is a good solution for that - I have another version of Chrome is there way in chrome to this I can always show tabs I think I'll just use the stupid trackpad to swipe between screens when I need to and I'll just put it somewhere where I can easily reach it okay so try for free and this is gonna be font size 24 so let's see what that would be that would be like text Excel is 20 so to excel I think and it's semi bold and we'll try and remember that semi bold and Oh black what if that's intentional there's no least even fat to be black he would never do that okay so we'll go font semi bull then we'll go text gray 900 and this one is text gray 616 regular so we only have to really set the color text gray 600 okay we got 100% here this seems oh you don't like we have to just zoom out here I think I swear we had there we go all right so we're gonna want to tighten up this lighting this line height so let's go with like letting time Amy yep and I want some space between here probably like a mt6 or something like that sure that gets us for maybe the top is cut off from the editor window yeah I think that's not intentional well it's kind of intentional cuz I was trying to cut off like the menu bar here so maybe what I'll do is I'll just get out of full screen mode and that'll make my life easier in general honestly anyways so we just won't use like this split screen view we'll just maybe do like a 2/3 sort of thing this will be like good enough okay cool yeah so we need some space up here so maybe we'll do this was just like vertical padding on the div that kind of holds everything so we'll do like maybe like py 12 or something how's that mm-hmm maybe 10 and then it looks like we got some horizontal padding here so we can kind of go dude dude dude so that's eight eight four twenty divided by four is five kind of a weird number for padding maybe we'll go with like px6 a little bit more than Steve is using but I think it'll be okay and for the background color he is using gray 200 so maybe we'll do the same thing for this it feels like that's probably already 200 I don't know what we had set for the body yeah but I'll just keep it there anyways cool now this line height should feel fine but it kind of feels off to me okay now Steve has this little like planned picker here but I think we are going to not do it this way I mean see we're talking about this before I started this dream and I think we decided that what a better approach is going to be to just show the entire card for each one stacked it's gonna make the responsive stuff pretty hard cuz it's gonna be inevitable that we have to duplicate like these labels for example but I don't think that's gonna be the end of the world so we're just gonna start by trying to build out sort of this view so let's think about the contents we've got like I've got a title for the plan and then we've got like the price and then like the sort of frequency of the payment and then like a P tag and then a button which will probably be a link so let's just do like a div maybe for like all we're all the pricing sections are gonna go and they'll have a cat div for the actual card and then that's gonna have to have a div inside of it probably for this padded area and then inside that we're going to have basically this title this text this text and this link so I think we can now just do like basic and then I guess for this we will just do like a div with nine dollars a month and we're probably gonna want to wrap this in like a span oops and the other one in a span too so that we can style them independently I don't think I'm gonna worry about this currency thing okay and then we got like a description of the plan underneath here all the basics were kind of like I don't think it makes sense that a period at the end there I mean this dude didn't have one and then with this link and we've set by basic sure sublime in it's still the best editor but like notice how this indentation as soon as I hit enter like why does it go here should it not go here irritating no problem alright so maybe we can do like a split screen view here and get some of this stuff a little easier okay so maybe we'll do the card first so it's got like a medium channel on it so we'll do like shadow MD it's got like rounded LG corners and we'll probably give it a background color of white and then we'll just override that for like these headings and then padding in here one two one two three four one two three four one two again with the twenty pixel padding so I mean maybe we'll just do what steve says so px five and that vertical padding he's got one two one two three four same thing so we'll do px5 py5 I do these separately most of the time instead of just p5 because almost inevitably I end up wanting to change one of them slightly anyways so then I just have to change one instead of adding a new class alright so this is gonna be text gray 900 and font medium in terms of ordering class names that something people ask about a lot some thing I've been trying to do lately which I think has been working well is trying to put stuff that changes the size or layout closer to the beginning and stuff that's like more superficial towards the end so in this case where we only have to have two classes font medium which that's the font weight that's actually gonna change how wide this text is right so if I have to choose like which one of these should I put first I put font medium first cuz that one actually has an impact on the layout whereas the color doesn't actually have an impact on the layout you can hold alt s-- so if I click this so it's 19 pixels on the edge or I can click this and then hover here and see 20 that's cool that's useful thanks for that tip alright so here we got 30 so that's gonna be text like three XL font semi bold text gray 900 and then this is going to be regular so just the color we need to worry about here text gray why have the padding on the child if we put the padding on this element that is this whole card right now when we went to build this block that had features in it it would be this wide by default right like the the gray background would be relegated to this area because the pounding would be on the parent so since we want to be able to go full width for certain sections inside of here we can't put the padding on the card itself we have to kind of create these padding blocks inside of it all right so 600 in text size 14 so that's gonna be text small text gray 604 this button it's got a background color 800 it's got some vertical padding let's see so what does this trick tell us in this case I won't tell us probably we'd have to zoom in so what does eyeball it we'll just start with like py2 maybe and I'll just say px 3 even though there is somebody necessary to have horizontal padding because the text like doesn't hit the edge and it's supposed to be full with still think it's actually it probably makes sense if it's there and then once you look around at LG probably and we're gonna want text white and the text is 14 and semi bold so we're gonna want text SM font some eyeballs and I guess we'll just see what we get I guess we'll just like pull both these into uh alright so not quite what we want right so go block with full on this text Center so we'll put that and maybe here mmm where do I want tech center to go I don't know doesn't really matter okay and all the basics were starting a new business so that wraps in this case so we're probably gonna want to do a max width on that so maybe we'll do like max with excess MX auto and see what happens is that going to be small enough probably doesn't matter hmm so we could just give it a width of like 56 see what that does all right so that's like a little bit closer to how Steve wanted it to wrap and we'll do like the text Center thing here too okay and [Music] then for this stuff you text Center and then for the basic stuff will also do text Center and then we're gonna want to do some spacing so a little bit more space above the description probably a little bit more space everywhere like this is probably only needs to be like one this probably needs to be like two this probably needs to be like four just kind of just see what we get that's pretty close really close enough that I'm okay with it all right so we're gonna want some padding or some margin above this whole block so maybe a true like empty six here and I'm probably like empty ten something a lot more significant yeah that's probably okay all right we don't have a harbor style on this button so maybe we'll just like make one up it will do like hover BG gray 700 just like just make the background a little bit lighter something like that and then we'll work on this sort of table stuff below that so I'm trying to decide I don't want to thank too much with the desktop layout I kind of just want to build the mobile one and then once we're doing the desktop one we'll just kind of figure it out so let's start by adding a div here to keep the table stuff in and I guess we'll just build it as like a legit table and I never remember all the fancy table markup mdn tables specifically for like when you want to do this sort of thing where you've got like um to kind of header rows is they look at a table group or something like that [Music] HTML table group can you have multiple tea bodies table multiple tea head let's see it's kind of a quirky how this is done really because these are kind of like the real table headers you know when you think about it yeah you can just do like a th with a call span but I don't think you're allowed to do like a th here and a th here th is supposed to go in a T head and there can only be one T head so you could do it as like two tables I guess it's just that like this doesn't really make sense as the head like the th cells anyways cuz but the table header cells are meant to be like labels for the items right when in this case like the labels are actually on the left not above so a little bit tricky I wonder what we should what's the best solution because it certainly is like a table it doesn't have to be a table yeah I mean that's kind of what I'm thinking right now should we just do it as a kind of boring divs the nice thing about tables is that everything kind of like adapts in terms of width which is generally nice like things that work a little bit more flexible but yeah I don't know maybe we won't even make it a table so I'm suggesting do like a definition list but yeah okay let's let's just try doing two tables I guess it's some I don't know if it's semantically right for us to do it this way it's my only fear but that's okay so we'll do like a th we'll do like call span too and we'll just say features tbody TR DD limited storage space and then we're gonna get this check box so I'm going to export this check box Steve made so let's see it's 14 by 10 is that gonna work and like at 24 by 24 our board seems okay I mean yeah let's just make sure that we have a line that stroke and delete the thing and copy the SVG and SVG oMG paste it in grab whoa the output and it's invisible but it's probably still okay get rid of this I don't think we need the fill rule clip rule because it's such a simple path let's just do you like h6w six just see like does this even show up yeah so there's our check mark this is probably one of the Tailwind colors too I hope Green 800 green 700 will go with green 700 we'll get rid of this one so I'm not just using random colors and get rid of this fill attribute here all right so that's something so let's just I get some more of these in place I guess I gotta grab this SVG - okay and outline delete copy optimize copy duplicate this row replace this SVG with this one get rid of the fill go to the background get rid of the fill rule and clip rule get rid of this fill add some classes and did he use a proper color for this one let's see cool gray 400 I don't need any of this stuff leave okay all right so we got our two icons there I think there is a plug-in for sketch for this I just I'm so used to doing the SVG oMG online that whatever it's fine still doesn't really slow me down all right limited uploads so I'll actually move this down here if we want to be true to Steve's design what am i doing get rid of that copy this based on it then additional team members and API access by the way this is the most important this shortcut is the reason that I use sublime instead of code being able to like have my mouse like anywhere here and do command shift a and select the text inside of an HTML element so useful I use it constantly MVS code there's no way to do this you can select either the inside of an element or the outside but you can't just like always select the inside no matter where your cursor is it's very frustrating I don't know how anybody raised HTML without that keyboard for guys all right so features is gonna have a background color of gray 100 we're probably gonna have like PX v py 2 or something like that we're gonna have we'll probably do like the I guess we could do this stuff here we can do uppercase tracking wide probably and then the text is 12 so it's really small sort of a text excess font semi bold and it's gray 700 and we'll probably got to do text-align:left kiss it's like centered by defaults here and we got also gonna have to make this table full with so that's two texts left and then for this table let's do class equals with full okay and we're gonna have a top and bottom border on this probably maybe just a top order to pixel grade border so this BG grade we should move maybe like here so we'll be border t2 border grade 200 I'm still figuring out my rules for ordering things but it kind of makes sense to me that like yeah padding affects the layout so that goes at the beginning border teach you affects the lid so that goes at the beginning now border color doesn't affect the layout but I kind of want the Board of stuff to be grouped together so I'm gonna put that here this I probably want to put here I don't know I don't really care about the order that much but everyone asks me all the time so I'm trying to force myself to think about it a little bit more decide what I actually believe alright so now we're gonna have to do a bunch of gross stuff because tables are evil and you can't just add classes to table rows or table bodies or any of that horrible stuff so we're gonna have to do all this awful border stuff on all these individual things so let's just do border t2 border grade 200 this one will probably have like a border r2 as well and then this one live border t2 border gray 200 this is gonna be a monotonous stream folks now how are we gonna get this padding to be how we want it all right so let's do some stack styling hair so this is gonna be text extra small gray 900 every editor sucks again with this indentation problem why why did it go there and not there there's at least one show-stopping bug with every single text editor I've ever used none of them are good alright okay so we're gonna need a bunch of padding so probably px5 on this one maybe like py4 I don't know just kind of play it by ear it seems pretty close maybe it's py5 too and then for these ones I guess we're just gonna do like really aggressive left and right padding because I don't see a sane way to actually I guess it's like this width is really gonna be driven by the padding on the elements with sort of like the longest content so maybe we just do the same thing on all of them and just see what the result is before we before we get too carried away with trying to do really kind of specific stuff it's already not that bad really all right so let's get these classes duplicated now if I was building this like for my own project I would probably be using view so I probably construct this table a lot more dynamically but because I'm trying to build something that anyone can use what if they using blade or whatever using reactor ER B templates or whatever I'm trying to I'm trying to not like build everything with view or something and then have people not know how to translate that to what they're doing or kind of make things too complicated so alright so kind of odd that these are that they don't feel centered I wonder if that's just because of how table layout works so I guess on all these SVG's we can do MX auto to kind of Center those yeah cool and then for this next table I guess guess always duplicate this whole table so just select us a bunch of times duplicate hit up enter alright so now we should have two of those yep so we'll change just want to be payments and we'll call this fraud analysis this is probably taken from Shopify or something you will probably have to go through and change a lot less content it's one of the hardest things with designing components and stuff for people is coming up with fake content is so draining mentally I know Steve hates it so he usually just finds like some design inspiration from somewhere and then just so you can focus on the design he'll just use the existing content and then we always can ever remember did we customize this content yet or is this still like the exact same content that we got from somewhere else okay so this is the same styles basically as this one okay so let's just do some stuff here so we'll say 2.0% and this is like I don't know if I actually said this out loud but I was thinking before about whether or not the text styles belong on the TD or if all the text should be in a span this is kind of a good argument for doing it in a span because the styles on the TD are never gonna change no matter if we put an SVG inside it or if we put text inside it but the text inside it has like a certain color and a certain font size and stuff like that now I guess you can make the argument that this stuff doesn't actually affect the SVG's either so maybe we could just keep the styles up here I think that's actually not unreasonable so if we did this that should look like what Steve had alright cool and then we'll do the same thing here so I'll just copy this and paste over this I guess we don't need the span now so this is gonna be 2.7 percent plus 0 how do I hit the sense character HTML entity sense cool and scent okay so this is kind of weird that that's wrapping I wonder this is like a table layout thing again I'll have to figure this out and then we'll do the same thing up here 2.9% plus $0.30 column spacing got messed up with the text vs icons oh yeah so this is the thing that sucks about using two tables by the way notice how this column is a tiny bit narrower than this column that's the beauty of using a real table normally is that like everything it kind of locks everything together right so I do think that we're gonna want to be it build this as like a single table it's just kind of grim so I think I'm gonna get rid of this get rid of this get rid of this get rid of this get rid of this and this looks like we're missing a TR for these two by the way and we can maybe figure out like what is the semantic solution to our problem that's a separate step just gonna move the tbody stuff up here and we'll just do it all like this so now that we have one table these wits should match yeah so you like that all locks together properly so now what I want to figure out is how can I make this stuff not wrap like if we just say [Music] white-space:nowrap that'd do it yeah so we'll do that for all this stuff now it's kind of sketchy because sometimes you might want stuff to wrap like if you have a really long content in there but that's okay we can think it through that as a separate sort of thing so I'm just gonna make sure that we text Center this stuff because I think that's how Steve had it okay so that's kind of like the start of something I think and looks like we got like a button at the bottom re emphasize the buy stuff so after this table maybe we just add that there and we'll copy this button I was afraid I copied some weird white space there all right so we can get rid of this we can do border t2 border gray 200 and it's probably like PX v py 5 maybe that kind of a Steve had yeah all right so here's kind of like the first one and obviously like when we get wider things are gonna be a little bit funky so what I usually do here is I look at like okay I like 640 that's like the next default l1 break point is this still fine or is this like stupid and in this case I would say that maybe this is just like a little bit too wide or maybe even just like the buttons is too wide so maybe we want like a max width on the button or something like that let's duplicate this entire thing though and flush out these other cards and then we're gonna have to figure out how do we turn all this into like one unified table so I think Steve's design only supports three cards but Justin needs four tiers so I'm gonna try and build this as four so we're just gonna sort of adapt what Steve's done a little bit as necessary all right so now we've got this essential plan okay so we got by basic I never do this but I'm going to do it in this case collapsing things in my editor everything you need for a growing business by essential essential so looks like we get an extra checkmark so let's copy this check mark and will override this one and then we've got some better rates 2.6 percent 2.5% 1% and now for the next one which is premium at 59 advanced features for scaling your business this one gets green checkmarks across the board so get those in there and slightly better rates again so two point four two point four zero point five okay so we're gonna want some space between each one of these so let's find where we first use the word essential we'll find the start of that card I want to do like an empty six or something maybe and maybe even more eight you kind of want to notice when you get to a new plan when you scroll through let's go to eight Steve can tell me if he wants it different later I'm just gonna duplicate this one actually and delete the one that came after it so that I don't have to do all that annoying SVG stuff again and this last one we'll call something else oh we got some by basic stuff that forgot to replace so maybe we'll call this last one like an enterprise or something and we'll make this like I don't know $2.99 a month or something and maybe we'll add like a an extra feature let's make it the same but after API access may be wide like dedicated support wrap or something and then we'll add this once all the other ones of course but we'll grab the - icon which i think is this one and then we can paste us up here HTML man just slinging HTML making a mess how did I miss it yep alright so let's see what we got we got basic you know dedicated support wrap essential a dedicated support rep premium no dedicated support rep Enterprise dedicated support rep oh we forgot to change one button at the bottom here Oh two buttons Enterprise by Enterprise enterprise okay where all the other buttons right so we got basic basic basic essential essential essential premium premium premium Enterprise enterprise enterprise alright so if we were only building it from mobile we could say that we're done but this isn't great at this size so why don't we try this in a in the old Suzy now I'm ready use Suzy that much for my actual work I find it's really good for my screencasts because it's I really love this like Zen mode which is awesome when you're trying to have like not use up any unnecessary screen real estate but I haven't quite gone to the habit of using it for my day-to-day okay so it's good though cuz I got like I'll tell ones breakpoints built in so we're go to Zen mode anyways you can see if we jump to the small size Oh crazy that it like synchronizes the scrolling even with like this window that's not even built into Suzy that's kind of crazy I don't even understand how it's impossible okay so is there anything that we'd want to change at this breakpoint that's kind of like the question I'm usually asking myself and usually the the solution is usually what I want to do is I either make like this whole card narrower but because in this case we have these tables that can have like white a bit of content in them I kind of feel like maybe that's not the best idea or maybe I just want to make certain content narrower so maybe I want to make this like by button narrower but then you get to like the medium screen size and it's like okay well should this still keep going to full width or or now is this actually so wide that it's actually making it harder to read because you have to read this label and then go all the way over here to read this so we might be better off like deciding like you know what I think like we should constrain the width of this to something more reasonable so let's sync that through so say we were just gonna try that let's see like how it feels so we're gonna say like a max width of MD or something I wonder what happens all right so here's like a it's kind of like constrained right so even on large screen sizes it stays kind of like reasonable I think that's actually like not bad I would argue that this button could maybe be smaller so maybe if we just find all these buttons I mean he's only four selected that's not doesn't seem right let's grab just this stuff and we should have eight okay so let's do like a max width X s MX OTO on the button all right so now the buttons are a little bit narrower they're still gonna be full width like here but yeah I don't know maybe this is better maybe it's not I'll have to defer to Steve's expertise all right so what about like the headings here they're like left aligned everything kind of wraps I think that's fine what do we want to do here at this width I kind of feel like everything kind of feels centered right so but we also should test just like responsively when you get to like just below 640 even here it kind of feels like you want things centered like 639 that's like another break point I'll often check it's like the one pixel before like the biggest one would I want anything different here and yeah I think this alignment actually looks kind of kind of crappy so honestly I'd be tempted to to do text center for both of these just all the time even though that's not what's in Steve's design but I bet you he would agree after I showed him sort of the situation I was trying to resolve I kind of feel like this is too much space yeah this feels a little better to me now we only really need to worry about like at the very smallest is like 320 this is like an iPhone se or iPhone 5 size so then at 6:39 like this still seems totally fine 640 still seems kind of fine medium screen sizes I don't think we're at a point where we could fit all four tears yet so I think we kind of just have to keep things the same but a large screen size is I think of this is where we can try to make something happen here alright so let's think this is gonna be one of those like gnarly components because as I honestly can't think of like a really sane way to reuse a lot of the markup in both layouts like I think I think we're going to inevitably have a lot of duplicated content but maybe we can just like hide it's tricky because like now we actually want like we kind of want this whole thing to be implemented as a big giant table right what is Steve doing for grids he's not he's not following at grid here so I was thinking if he had deliberately you followed a grid maybe we just try and build this with like a bunch of columns where we were saying maybe this is like maybe this is like two thirds or something for the plans and then like one third for the descriptions it's gonna be interesting it's going to be interesting and we also have to account for four plans now instead of instead of three all right so why don't we just try and first get things like lining up next to each other so we use flexbox for that so we're gonna say on lg screens we're just gonna say max with full so like there's no real max width problem anymore and then we're gonna say LG flax okay sucks that these don't fit it's not because the buttons have a width or the P tags have a width okay so let's find these width fifty sixes select everything in the quotes go to the end to do LG with full and hopefully that will prevent things from overflowing yeah okay so now everything fits okay let's get rid of the MT eights on the cards of those sizes so we'll select everything will go LG empty zero okay so everything's kind of next to each other now I think we want to hide this features thing how do we want to do this okay we'll just see what see what we come up with here let's let's get rid of the shadows on this stuff too and like the rounded corners LG rounded none LG shadow none so we just have like everything next to each other I think we're gonna want to do like LG border l2 LG border gray 200 not quite though because of this this is the part that's gonna be hard cuz like what I'm trying to do right now is I'm trying to figure out can I like just like reuse my cards to dig to get this mark up and then only worry about like sort of duplicating the stuff to fill out this section but I'm a little concerned that that's not going to be super straightforward to do I think it's I think we can figure something out but it's gonna be sort of gnarly okay so maybe what we need to do is just add a left border a left and bottom border to here maybe just a left border here at top border here and then left borders to all these lakes all right let's see what we can do let's grab like this much so we have that card and we'll just do algae border L to algae border gray 200 all right so now we got like the left border for each one of these now down where we have features I think we're going to want to how are we going to want to do this one thing I'm trying to figure out is like okay we're gonna we need to like hide this table sell right but when we do that we're going to need to make this take up two columns but maybe not maybe if we hide all of them it'll just become a one column table okay let's grab all these wrap this in a span give it a class of LG hidden this is gonna be a disaster because that's gonna lose the height we could do like LG opacity:0 this is like really dark territory because now like the text is still still in there I can't seem to selective with the cursor but it is technically still there and we'd also have to do like LG pointer events none you know we can add another table to the left but like the biggest problem we're trying to solve here is like we actually want one table so that everything stays like kind of the way we needed to stay like in a perfect world I would just have this be like a th or a TD with a call span of four or five in our case right and I can't really easily do that because of how everything is sort of setup it's one of those situations where it's one of those situations where like using a front-end framework you might not even use media queries and just like listen for resize events on the window and just render different HTML entirely based on the size of the viewport or or where you might just like literally duplicate all this content completely and just conditionally show like here's like all the markup for what we show on mobile here's all a markup for we show in desktop that's probably honestly like the simplest way to do this but it's it's hard to resist trying to be as efficient as possible with the markup right but you do have to try and weigh that against like how how much that hurts are the maintainability of what you're trying to do because in a lot of cases it is way simpler to just have like okay here's like really clean markup for mobile here's really clean markup for desktop we just toggle between them and you just have to if you want to add a feature you have to add it into places like sorry that's like the cost you know there's that option or there's like what we're trying to do right now which is like be very clever in reusing elements and all this kind of nasty stuff because like another thing I'm worried about honestly is creating this section because I'm gonna need this to be the same height as these sections and these aren't all groups together in a div so I can't use like flexbox to have this be automatically the same height I'd have to do like something really nasty like set and explicit height on this so that I could match that explicit height here or yeah and then another thing is like say some of this text wrapped and I would want these columns to get taller like there's no way to like make that just happen so if I'm being honest I think it's completely impractical to try and build this using the same markup I think the only sane way to build this is by basically building two completely different implementations and toggling between them so that's what I'm gonna do so let's undo a bunch of stuff here basically anything that says LG - we want to get rid of so we're just back to like this video alright and then we're just gonna make this LG hidden we're just gonna do this sort of like the the awesome way dead and then underneath we're gonna build the desktop view and we're just gonna have that be visible only on desktop because it's just not realistic to do this in any other way okay so here we're gonna have a div we're gonna say hidden algae block and this is gonna be the desktop pricing table so now we can just do whatever we want okay so let's uh let's figure this out then so now we're gonna start by making a table probably with a class of with full I don't think we're gonna have like a proper table header because again it's not semantically a header and these aren't like labels for the columns so I think I'm just gonna do like a tea body and we'll just kind of do it this way so we'll have a TD like an empty TD for the section on the left although I think Steve kind of was designing possibly some content we could put there like he kind of had this idea of maybe doing with this monthly annual billing picker over there no big deal though and then we're gonna have TD T DT DT D for our four plans and I think what I'm gonna do is I'm gonna try and just copy this stuff and see what we can fit in there so let's see is there gonna be like a clever way I can grab all the say grab all these and then I go do doot doot doot doot and then we go through the mm-hm paste we indent save that didn't do what I wanted sad okay no problem I was hoping that we could paste all those divs in some smart way but it's sublime is not cooperating normally if you have multiple things in the clipboard and you have the same number of cursors equal to the number of entries in the clipboard it'll paste one at each cursor but in this case it didn't do that it pasted all of them everywhere which is not helpful text editors are okay let's go back to Susy okay so we've got to do that thing with the button width get rid of that and I guess we don't really need this MX Auto wasn't the button with sorry the paragraph with okay now we're gonna do white on where should we do the white maybe just do the white here LG rounded LG what shadowed it's devious for this LG okay alright so that's something now we're gonna want some borders it's maybe we do like a left border on each one of these so grab like this mark up order L to order a 200 slow on there reload today okay that's okay that we have that weirdness there that's kind of expected so it's out another table row under here and this is where we're gonna have like our TD that has like a call span of five and basically we're just gonna copy the styles for wherever we had this like features thing now we might have to look like Steve might have done the oh I shouldn't make sure I replace those ths with TD is to th because we don't have like a table that get the right things okay okay so now this is gonna be a cost man of five and the finished code I'll think about what to do with it like it's going to be part of this tell and UI project which is like a commercial project and we'll definitely be having giving away some of it for free like for people to test out so maybe I'll do this one I talked to Steve about it so yeah he thinks but you can always meticulously follow along with the video too if you wanted to okay so we got our five column thing here let's double check that Steve is using the same stuff here very likely as okay so now we're gonna do like all this other stuff like this is gonna be so easy compared to what we're doing before basically just need to grab like I think I can probably just literally grab like the from here maybe down to here paste that here and then like duplicate this two three four two three four two three four two three four oh yeah you watching my wrestling belt someone check this out so this guy I know Austin he's like the director of engineering at the WWE and they use laravel at the WB and they've like benefited for my courses and stuff so a couple months ago he hooked me up with free tickets to go to W F raw and send me the set of replica belt I sort of like a thank you which is awesome because uh as a kid I was so obsessed with wrestling and this is like the one from like the bid 90s like era replicas which is perfect the most like nostalgic thing ever so it's pretty cool pretty stoked about it alright I'll put this down over here alright so this like is getting us places here I'm surprised it is you know what's the issue is like this stuff is so we're getting this um really narrow column over here because of like the width of these columns so we might just have to do some trickery with like a a min-width on like the columns on this side to get things working all right so let's get like our borders and stuff in place and then we'll figure out like how can we get things to be sort of the size that we want so it looks like we're mostly just missing like left borders on a bunch of table cells so let's kind of just check here we did a right border here so I kind of think we should get rid of these right borders and just do pure left borders just so like we're consistent so I'm just going to select all these get rid of that and then here we'll do the border l2 what is kind of like paste those in what am i doing that's the wrong spot here here here here hopefully I didn't do that somewhere else I'm gonna have to go look now I should probably be able to see it in the okay I think we're think we're okay all right okay so now pull this open here so we can kind of do some dev tools stuff so what this is the only thing I kind of don't love about Susy is like the dev tools interactions are just like kind of shitty compared to real Chrome which I don't think is the fault of the tool just kind of a limitation not probably there I don't know choice but to deal with so let's go to like 1024 which is like the smallest screen size where this is affected and we'll talk it on the right here so we can see a little bit more and I'm just trying to understand so is this because the word starting won't fit I guess so let's see this TD is 204 pixels wide this TD is 215 pixels wide so I think the design kind of calls for all these to be equal right which is gonna be an interesting challenge but we can figure it out so okay here's something I can never remember MDN call group this is like how you how you can like specify widths of like columns without just like putting it on an arbitrary TD if I remember right this is interesting I didn't know you could do this so if you put a class on a call group that applies to like the columns I guess I mean I knew that for width but I didn't think about that for like background color that's kind of cool interesting okay alright and hover over basic I'm not sure you're talking about alright let's try and where are we here okay so if we do like this we've got our plan is to have five columns right two three four five so if I was to do like class like width 64 on this column is that gonna do something yeah sweet okay so maybe what we do is try some like gritty stuff here so let's think like what's a good way to divide up six columns or five columns we could do like let's try this one viii for four of them that's not going to be enough let's do like one-sixth and then 2/6 for this one 1/3 ok so this is kind of not terrible in terms of I kind of want them to be a little bit wider what is a good option for wider than 1/6 3 over 12 which I guess is 1/4 but that's not really what we want I mean maybe a quarter actually is fine I don't know no that's not gonna work what am I talking about we have five things math math math math math if we have 12 and we wanted to give four of them equal the best I think we could do is fifths now let's just try one fifth for everything and see what that gets us this isn't terrible like Steve is using like a much bigger screen size here right like this is like he's got like an extra hundred pixels that we don't have but this isn't the worst layout I've seen we'd we'd have to figure out how to prevent this text from wrapping awkwardly which i think is more of a you just have to be tricky with your copy so let's think here for a second is if we get rid of like the inspector and we write like full width here I don't think we're ever gonna want to let it go to full width like we probably want to have let me see I have a good tailwind i frame config here so I have these like max widths that I added which I think will kind of be useful probably max with screen excel is probably what we want for probably for this like whole thing next with screen Excel MX Auto so it's kind of like a container we'll put like that py 10 and px 6 here and we'll just like make this like a background color container cut this go to the bottom out of div grab all these indent these a little bit okay so now like everything's kind of limited to tell ones like biggest screen size okay so this screen size is kind of crappy but like I can't see really a better option all right so let's think what we could do here I feel like this is not the widths that's I mean okay so if Steve had to fit an extra group or an extra plan he would probably be forced to do the same thing as me but I do think there's maybe an opportunity to do like something where we go a little bit narrower like Excel with 1/6 and this one's 2/6 like maybe on biggest screens we can kind of do this you know so you have a little bit more space over there which I don't think this is that crazy of a little scheme okay so let's um let's add this second row of like feature things probably the easiest way to do it is going to be to duplicate this section like it's a question have what do we do placate that will lead us to the least amount of things to need to change and then I think we're still gonna have to like fine tune like I got this size right here we get some awkwardness with wrapping and stuff right so we'll have to think through that a little bit but this is generally okay so I'm going to try and fix up some stuff up here god there's a lot of markup in here all right so all green at the top then I think it was like this one should be a dash so if we just grab like the one from dedicated support wrap that icon then we can just kind of go through and so this should be a - I think this should be a - no now it's not a - let's see look brain okay API access should be a dash for the first two so no API access no API access and then we want to grab the check mark and we want to do the dedicated support wrap for the enterprise plan okay and then down at the bottom we're going to make this say fraud analysis online credit card rates yeah I can make the text smaller for the paragraph that's one thing that I was considering once I get all this kind of mock data updated we will explore like what our kind of options are for keeping everything looking consistent their additional fees using all payment providers okay and then I guess we got to go and make up a bunch of data for this crap yeah okay let's just grab one and copy it because it's like this style so if we paste that in I wonder if that's gonna like throw everything off or if that's gonna be kind of close so we're missing our left border so what's this look like okay so do the same thing for one two three four oops don't need that space HTML man what a riot one two three four HTML is not it's an underrated skill I don't know building out new eyes and stuff front-end development okay so I guess I can just look here and we can kind of copies guys over oh I couldn't tell someone's knocking on my door or not 2.9 plus $0.30 2.6 2 y 4 I'll just keep that the same for the other ones and then we got 2.7 + 0 2 point 5 2 y 4 and then you got 2% 1% point five percents yeah cool I want to do the same thing for this all right now we probably want like bump up the font size like Steve did here so he went to 36 so maybe we'll go like LG text was out for Excel let's see on size 36 yeah and then for this one he went up to 30 which is three Excel all right and then it looks like we got some pretty heavy margin in between there so all we need to do for that is find this desktop layout do you like LG MT 16 or something crazy like that how's that maybe doesn't need to be quite as big 12 all right and then we did have a button at the bottom too so let's add another another row I think I'll actually copy the first row for this I think that'll probably little the path of least heading and then we can grab like this delete delete delete delete delete delete and get rid of this and I think we need a boarder top on these and likely even on this one and how's that button spacing down there I think that's probably good okay so I think that's kind of a table it's been long stream so I think we'll just try and get get the rest of this stuff kind of looking decent at the smaller screen size the thing that's tricky is um in a perfect world I would want this to sort of be like you know what maybe my perfect world solution is achievable okay this is what I want to be able to do which I think actually might work I want to just be able to stick claret of lycée like this button should go at the bottom no matter what and I think we can do all this with flexbox because I think the Flex container will grow to fill the height of the div or to fill the height of the TD so let's just see for example say I was to do like display flex and then flex Direction column and okay so this is not full height yet but now say I was to do height 100% please tell me it grows didn't grow I'm very disappointed that I can't make something a hundred percent the height of a okay let's just say I was going to do like BG red five hundred okay and I wants us to fill the entire cell first question is like why is there like a one pixel padding on the edge if I say W full H full now using stretch is not the solution the problem here is like it looks like there's no way to make a div fill a table cell CSS make div fill table cell might be squared here yeah using a separate row for the buttons is a totally valid idea actually that's a pretty good idea I like that idea I like that idea a lot so like say I was to go to all of these table cells and I was to do a line top just really not going to work where's my align top class didn't I've typed it didn't I oh I'm on the wrong thing okay no problem no problem this one say we're gonna hear dude dude dude blind Tom okay so now everything's top aligned which is good and the suggestion is to I don't think you can do like display flex on a table so a table cell needs to be display table cell right like if you look at the display value table cell like that's kind of what I wanted to do I want it to be able to say like okay well make this flex and you know then we'll do a flex call and whatever but now like you can see like this border is screwed up because like the the table cell has a display of flex which it needs to be display table cell like you kind of wish there was like a display like table flex you know what I mean but for tables to work the table elements have to be display display table so no but we can't change the display type on TRS or TDs or any of that stuff without like making the table just not even work properly that was a not an option but what we can do is we can duplicate this row where we just have the buttons and we can go up here select this row paste the buttons in below and like was suggested by Miko who is the true hero of the day we can put the buttons in a separate row get rid of the borders and then they'll be at the bottom it's just like good old table layouts from back in the day so that's pretty exciting so if we get rid of this Studer Durer and then we get rid of this one too don't need any classes on this one and then we get rid of all those buttons now the only thing I would be nervous about which it's just like something we'd have to explore is how does this affect like the order that content is read on screen readers because you kind of want like this by basic button to feel like associated with this you know but what can you do we'd have to figure that out kind of would take some experimentation so I'm going to change these to just have a PT of five so now everything kind of stays where it's supposed to yeah so there you go that's like this insane pricing table in only almost a thousand lines of HTML yeah cool all right so we've been going for like close to two hours so I'm going to shut her down here I think I'll probably talk to a couple friends of mine and get some tips if there's anything I could do to improve this maybe test out screen reader stuff see if we can do do you find it a little odd have this one wraps but I guess if it doesn't fit there it doesn't fit there right yeah this works so there you go so thanks to everyone from for checking out the stream and hopefully I'll stream some more of this type of content in the future as I keep hacking on these components all right see everyone

Channel: Adam Wathan

Views: 11,777

Rating: 4.9653678 out of 5

Keywords:

Id: E_jc3iwAeAg

Length: 100min 21sec (6021 seconds)

Published: Tue Sep 24 2019