Building RefactoringUI.com with Tailwind CSS

okey-dokey let me know if you're watching if audio and everything seems okay it's always iffy with a OBS when I haven't used it in a while well wait a minute or two just to make sure that anyone who wants to watch the whole thing is here but maybe in the meantime I'll do a little bit of talking abouts what we're gonna be doing so me and the Steve sugar who you might know from Twitter if you follow him for any of his design stuff have the site refactoring UI calm where we were originally just doing these sort of like case studies where we're showing people how to improve their designs turned out to be way harder to keep up with that and then we thought and we also have a bunch of other content that's not really just these case studies so what we wanted to do was kind of update the site and include a bunch of the content that we already have because right now it's just a like a landing page and you can't actually get to any of the content from here so yeah so Steve put together this new design here that kind of has some of the updated branding and stuff it's still mostly kind of a you know subscribe for updates sort of page but now we're going to include links to like some of the hot design tips on Twitter as well as the articles that we have and a bunch of the refactoring UI screencasts as steve has been working on so what I wanted to do today was basically build this new page from scratch using tailwind CSS and see how it goes so I'm hoping that we can do it in about an hour but I'm a developer so I'm always optimistic about estimates so we'll see cool so yeah let's get started by checking out some code so the way that I've got this set up is it is a jigsaw project which is a static site generator that uses kind of Larry Vols blade templating engine and a bunch of other Larry Valley stuff so if you work with laravel it's a really fun tool to use for building these static sites I'm insults toind and kind of scaffold it out just like some basic stuff getting some of the images in place I generated a tailwind config file and I've gone through and added the color palette for this site so something that not a lot of people seem to do with tell and that is you know something you should be doing and is highly encouraged is to sort of take ownership of this config file and make any customizations that you need to kind of build the site that you want so here I've deleted all of the colors that come with tailwind and I've replaced them with the color palette from sketch here so if you look at you know here you can see here's the document colors that's Steve used here so I've extracted all these and set these up and named them in toen so that we can use them without bloating up the site with a bunch of other stuff so so far I haven't written a single bit of HTML so let's just start I guess so first thing is let's make sure that we're viewing this at 1x so we have like a good comparison between the browser and the sketch file let's start with this header with this background pattern and like the logo and stuff like that so I've got this indexed upload a PHP file it extends this master layout the master layout is literally just you know your basic doctype skeleton boilerplate stuff no actual markup here so we're gonna build the whole site here basically so why don't we start with a div and inside of that div we're gonna have this h1 so let's just kind of get some of the content in here tired of relying on bootstrap and then underneath that there's just like P tag where we have some copy that we're probably gonna change but let's just get it in there learn how to create designs and are as beautiful as your code through specific tactics and actionable advice so we'll just kind of get that in there there's going to be like a section below that and where we have a form somebody will just drop in an input and a button and we'll make this a form I guess be semantic and all and let's just see what we have so here all right we're done looks great all right so let's get this actually looking the way it's supposed to look so first thing I do want to tell when sigh typically is set up a couple of default Styles on the body tank so right now we haven't set a default font family or color or anything like that so what I like to do is head over to the master layout and then add a class to the body where I say okay we want the default font to be the sans-serif font and we want the defaults text color to be our black and that's basically enough for now so that should make it things look slightly different so let's start by adding the background pattern so I have the background pattern over here in image hero pattern SVG it's just an SVG file so we're gonna add that as an inline style as a background image I don't really like creating classes for these sorts of one-off things makes a lot more sense just use an inline style in my opinion so we'll just have a inline style here that goes to image Hiro pattern done SVG and let's just see what that gets us okay so this looks horrible okay so let's give some of this stuff like a width so we can Center some stuff so if we look at like this border here Steve has it set to 940 that's kind of like his max width which is probably really like a 960 with some padding or something like that so let's check out our tail and config and look at our screen sizes because that's probably bigger than we actually actually need so why don't we get rid of the excel screen since we don't need to design for Excel because the the container never gets bigger than 940 currently and maybe we'll change 992 to 960 just to match what Steve has but we'll leave the other ones in case we need to make of those sizes so I think he has this 960 we can yeah it's kind of hard to tell that he's not using that layout feature you know let's just leave it as the defaults and we'll use maybe some more liberal padding than Steve was probably using okay so if we have a 992 thing here well then we can just give the we can add a container to the inside of this to keep everything kind of that size and if we add some auto margin and maybe like some pretty wide padding that should get things sort of centered although it doesn't look like it is actually happening in this case container max width 992 MX auto is not working oh you know what I made some changes to the tailing config file and I added some extra spacing because I think this is something we actually need to change in the to' and defaults as we don't give enough default spacing sizes but that means I blew out the auto value that was here let's add that back and with any luck things already build and kind of Center okay so that's correct although obviously we can't even see what we're looking at here so why don't we add the logo too so I have the logo as an SVG file here we'll just take this and paste it in as an inline SVG maybe well stick it in a div so we have a little bit more control over it and we'll give it a class of block and maybe a width of like 64 or something just to kind of see what we have here okay so there that is it looks like Steve has some pretty liberal padding at the top and bottom of this thing so let's add some padding to the top and bottom of this whole thing so why would class attributes here and why don't we give this some vertical actually you know what let's do it on the container class so we'll give it like py of like 24 something pretty aggressive and I messed up this inline style alright so let's add some styles to this h1 so it's going to be white and I think that this is gonna be six XL it's sixty pixels so I had to add a new text size key here so by default we only go up to five XL but Steve has this huge text here so I added another one so we'll call that six XL and the weight is a little aggressive here I think he's also using a different font here this harmonious ins which I've pulled in into our font families and I've called it fog display so we have kind of like a title font and then there's like a UI font so we'll give this a class of font display MX Auto is a tailwind class every single class that we're gonna be applying comes from telland okay so let's see if that's using the right font it looks like it is let's pull this open here yep okay so steve is using a font weight of semi bold here so let's give this a font semi bold alright so that's getting there he's got some padding under the or some bottom margin under this image so let's add a class of maybe like mb6 yeah that's looking pretty good and then for this text here this is 24 pixels which is text sizes that's two XL so let's give this P tag a class of text to excel and it's going to be text blue light if you look here it's like a light blue and it looks like what is the font weight of the regular text here just regular and then bold for the kind of highlighted stuff so let's bring this down so we can kind of see it more clearly and let's add a new line here since that's how it actually renders not that that's actually a new line in the browser but a little easier to mentally sort of map what we're seeing so these strong tanks are going to be class text white font bold and let's see what again now okay all this text looks a little heavy here so I think the thing that we're seeing is that sketch uses a different type of anti-aliasing so if we want to look just like the sketch file a quick way to do that is to just mimic that anti-aliasing on the whole site so we can just say anti-aliased here and that's going to set WebKit font smoothing and the equivalent Firefox one to use regular anti-aliasing instead of sub pixel anti-aliasing so it makes everything look a little bit thinner and that actually looks a lot nicer on dark backgrounds typically what it's Steve do for the color of the period I kept that blue okay cool okay so we need a little bit of space under that h1 so why don't we give that maybe like an MB for see what that looks like it's not too much it's pretty close I think we're gonna have to do this handle this stuff so I think what we're gonna do maybe is use a responsive line break so we'll just use a line break for now but we can hide it on smaller screens okay so it looks like the line height is a little off there too we're probably gonna want to set a default line height on the whole page so why don't we you letting tight and that'll give us a nice little default line height there and I think for this paragraph we might want to change this specifically to letting normal but for UI elements I kind of prefer the other value yeah that looks pretty close so Steve has font size 20 for spacing 36 so that is 1.5 okay so let's do this input now so so what Steve got here we've got a white input it's kind of attached to this button with the borders around like the whole thing so let's set that up so we'll give this we get rid of the type here we'll give this a class of BG white maybe like px 6 py 3 something like that give it a place holder which is enter your email and then this button is subscribed and we'll give this a class of I think it's BG let's see what do we said what do we name these colors come on where are you what colors all right there's indigo dark which is text and I think it's just this regular indigo so we'll set this to BG indigo now let's just see yeah so that's obviously looking terrible so do text uppercase actually I think it's just an upper case upper case text white what is the font-weight:bold okay font olds tracking wide Steve always does that on uppercase stuff okay we're gonna want this to probably be display flex I said everything kind of fits together probably gonna want to have similar padding on the button as we do on the form so maybe six and three or on the input I mean we're gonna want rounded corners so maybe we can just do rounded on the entire thing and set overflow:hidden it's kind of like a nice little cheating way to do that although it doesn't seem to be affecting the the button I have to turn off this fridge one sec why would that be so you can see this is okay because got it got it got it got it it's full width so let's set the width of this hole mm maybe we don't want to do the rounded on the form yeah that's not gonna work so we'll just do rounded left on the button or on the input and rounded right on the button okay so that's looking pretty good already we're gonna want some hover States for this button but so let's add a hover BG indigo light I kind of picked this color myself because Steve didn't mock it up that's probably too much too light let's fix it because it's the only place that color gets used so will enable hover state here we'll look at this color here and maybe we'll set this down to like there and then let's just see what does that look like no that's not enough needs to be more saturated and lighter so let's pull it up to the top maybe something like that how does that look it's pretty subtle maybe we could go a little bit lighter yeah like that so let's use this color and our config so indigo light will become this color all right so let's see what we get if we refresh yeah that looks pretty good to me okay so we need some spacing under that paragraph so do you want it directly under the paragraph or do we want to add like a wrapper to this content I think that feels better to me so maybe we'll do like an MB 12 that's probably going to be too much but we'll see and you know what that's probably actually pretty close all right so let's see what font size Steve is using here 18 and is he doing the same for this 16 okay so we're gonna want to set the text to be large on the input itself and he's got it wider so maybe we can give that a fixed width of something like I don't know what is he at the width of it set to he doesn't even have it selectable with 64 it's probably gonna be too big maybe not where does that go to actionable I mean so we could make this a little bit wider but doesn't really have to be bang on I don't think we actually have anything bigger than that anyways without changing the config so I think we'll just roll with that now this logo is not quite the right size either he's got it a little bit smaller so maybe we'll try out some ideas here so that's it's actually closer but it's still too small so let's look at it twits width I gotta standardize on whether we plural eyes or singular eyes these annoying keys so if there was gonna be something between 64 and 48 I mean what would that be probably like 56 and that would be 14 I think 56 divided by 4 yeah let's add what's at it why not kind of a weird number but I'm okay with it yeah whatever that'll do that's looking pretty good I think okay we're gonna have to think about like responsive stuff at some point too like already you can see this line this is gonna be too aggro but let's just move on to the stuff down here because I think we've got the bulk of this stuff done up here like I'll have to figure our focus states and stuff but in general I think that's looking pretty good maybe maybe a little bit less horizontal padding on the input actually so instead of px 6 here let's try PX 4 and that looks closer to Steve's design I think and yeah cool all right let's try this bottom section so we'll start with these are all basically just gonna be copy and pasting the same thing we really only have to build this now and this footer and then think about some responsive considerations and then like we're basically done okay all right so what do we got we got a kind of this header bar section with like a left bit of left tax but a right tax with a bottom border so let's do that first so underneath this div we'll throw in another div inside that div will have another div inside this will have a probably a span that says design tips and then a span that says view all and this will have to be flex justified between two space things out and let's just see what that gets us so it's gonna be in the wrong place so we're gonna have to throw a container on this too so we'll say class container Amex Auto px6 to match the one above all right cool and let's add the bottom border so let's think about how that's gonna have to work so the span has a bottom border this has a bottom border so I think that flex container can actually have border be I think it's too pixel borders let's check that out all right and that might actually already be the right color steve has it - looks like it's this DfE 47 color which if we look at our colors DfE 47 is gray light so let's be explicit and give that a border gray light just to make sure it might already be the same though yeah it's fine okay let's do the styling of this text so this is going to be font display bold alright so class equals font display font folds tracking wide because it's uppercase and okay we're gonna want some padding on this what is kind of eyeball it I think it's probably gonna be something like py4 I mean that's looking not far off really and then we're gonna want some space underneath this header so let's just do that right now so on a class here with maybe like an MB 8 because I think it's pretty significant space that might not even be enough that's pretty close let's do we have a 10 yeah let's roll with that this text needs to be baseline aligned with this text so down here we'll do items baseline to do a line items baseline so now the bottom of this text is aligned with the bottom of that text centered might look better we'll have to experiment Stevi using the same font size on each of these 1616 okay so view all is going to be a link it's going to be indigo dark and it's gonna be semi bold so let's set this to be semi bold text indigo dark yeah cool maybe we'll do like a hover underline or something on that and we'll give it a no underline by defaults and maybe we'll just make it a anchor tag instead of a span yeah seems okay okay let's get this bottom border happening this indigo border which i think is just the regular indigo I think it's the same color as the button so you'll see that if we do something like border b2 border indigo that we're gonna get like a double border that's like stacked which is obviously not what we want so the way to fix that the easiest way to fix that is using a I think probably a negative margin on the on this element let's just see if that works before we do anything because we're gonna have to create a new config on for that so if we say margin bottom here is negative the size of the border two pixels yeah now they overlap perfectly so by default we only have if you look at negative margin we only have one pixel but since we're using two pixel borders a lot I think it's gonna be valuable to have a two pixel version of basically all this stuff I mean we can use purged CSS to strip it out but I tend to keep the padding scale consistent across all of them okay so here on this element let's do MB sorry negative MB - what did I do wrong here hmm negative MB 20.5 REM 2 pixels duh all right so that's looking pretty close there so the next thing is going to be these cards so let's just start with one they're gonna be kind of like a grid so I think we're gonna want to do like a flex flex wrap if they ever needed to wrap we're probably gonna wanna have a negative mx6 margin so that the items go all the way to the side and then each one of these is gonna have a px six and then we'll do the actual card inside of this so the card has an image at the top which we can either make an actual image attribute or our actual image tag or we could use a background image I think we might want to make it a background image so let's just make it a div for now now underneath this we're gonna have another div and it's gonna have a link in it so I think maybe we'll make this like an h3 I don't know and we'll use think outside the database okay so that's obviously not looking great yet but if we give this a background white we give this padding of like probably six P six hmm oh you know what we need to give this section down here an off-white background actually too so you can see we've got this off-white background here which is why setting this to a white background didn't show up as anything so I think we're gonna want to set that as the default body background color so let's do BG gray lighter I think it was yeah okay so now we can see that we have like a card here okay and it looks like he's got some pretty serious rounded corners on here ten weird number Steve that's okay so let's give this a rounded LG and Shadow I deleted all the default shadows in Thailand and just pulled in the shadow from Steve's design so underneath this heading we're gonna want probably like some bottom margin here it's not enough nope needs to be more probably like 10 yeah that's pretty close and then he's also got this Twitter comm telling you where this is gonna take you sort of link thing these are all bottom aligned which is actually going to be kind of an interesting thing to figure out so maybe we'll start with the image and then tackle that so let's give this an inline style background image and this will be a URL to image slash I think tip Oh tip labels he called it and we're gonna want to give this a fixed height probably so let's just give it a class of like H 48 to start and just see where that gets us and we probably want to do BG cover and yeah it's not turning it exactly the way Steve wanted but maybe it's just because I have to set this to smaller age 32 yeah was it row with the H 48 for now and figure it out later if we want to really fine-tune that size okay so I think I'm also going to put this stuff in an extra div because this is kind of like a repeating section and I'm gonna add instead of this where's that M b10 let's get rid of this class and we'll use a vertical padding on this container instead because we want some padding at the bottom too so it should look the same but now we have a little bit of space at the bottom okay so let's do steve's little twitter comm thing here so let's add a div with an anchor that goes to somewhere and it's just gonna say twitter calm and there's going to be a little link on the side so we'll probably throw that in there too and let me see where Steve has that I think it's in Dropbox here okay so we've got Dropbox refactoring UI assets I got an external link so let's just pull this in okay so we're just going to use this inline SVG and he's got a color on it already but we don't need that we can just say fill on the whole SVG will be current color and we'll give it a class of I think it's like text gray light let's just see what we get just nice huge icon here perfect so we'll probably want to give it a height and width let's wrap this in span so we can style this separately we'll give this a class of text gray is that correct looks a little too light so we'll try text gray dark and text gray on this one shift the scale by one that's probably closer to what he has here I think this font is pretty small text SM so we'll set that here we might have to change the height of the icon to feel more balanced with it too let's get rid of the underline on this so we'll say no underline will make it display flex inline flex yea inline flex that it doesn't take up the full width will say items center and we'll give this a margin right of like for two so why didn't I use the fill current class you can use that I when I created the fill current class originally I didn't realize how easily you could just say fill equals current color on the SVG so it kind of makes that class almost pointless I mean this is a little bit more typing but it works fine if you need to change things like responsively or stuff like that then definitely use the class so what I'm saying is like based on what someone's saying in the chat here we could do this instead which is fine maybe we'll use it that way okay all right so one thing that we're gonna want to do here is like I mentioned briefly these links are supposed to be bottom aligned right so all these cards are supposed to be the same height but if some of them have multiple lines we want this Twitter comm thing to always be at the bottom so let's just create three of these cards and figure out how we're gonna do that and by figure out I mean I'll show you how to do it with Flex box so we'll just have three of these here I think this one is use fewer borders and this is going to be overlap images to add depth depth so this is going to be tip borders tip overlap okay so of course in this case it doesn't actually wrap so we don't actually have any problems and actually we should make sure that we add widths to these that's what that's the problem that we're seeing so each one of these should be with one third okay all right so you can see here these are not the same height right so let's solve that problem first so the containers for each of them are going to be the same height you can see here this px six container is the correct type so to make the contents fill that we're gonna have to set all of these to be full X I think okay and now this let's set it to flex flex call and we'll set each one of these cards to be flex one so that they grow and then to position these links at the bottom here we're gonna want to set each card to also flex flex call and then we're going to want to set this p6 container to be flex one and then also flex flex call and then justify between there okay so now everything is lined up properly flexbox magical we need some spacing underneath this so let's add some bottom margin to these h threes and b6 may be too much and before I never know if I'm looking at the sketch file or the real thing I guess that's a good sign it's too bad that this looks so grim we need less padding that's why so here where we've got this with one-third px6 we'll change that to be px4 and we'll change the negative margin on this to be four as well so the columns stay balanced so that's still - no is not as tight as steve has them here so let's try three screw it let's get crazy I mean yeah that's pretty good whatever it's fine and these are not rounded at the top okay we need to add overflow:hidden to each one of these cards okay so how the the flexbox stuff is working to get this stuff lined up basically what we did is we sent each column to be display flex I with a flex direction of column and the the reason I did that is because when a parent is set to display flex the child elements will fill the parents height by default so that's kind of like a quick trick to get things to all be the same height we did flex call because if we didn't have a flex call here then items we're not going to fill up the full width so there's two solutions to that problem we could either do flex flex call or we could do flex flex one which is going to work fine as well although that gives you this weird thing where this is actually defeating our width here so in my opinion is probably smarter for us to just use flex call then the next step is making the actual cards themselves display flex and flex column as well so that's basically setting this to be a Flex container it's got two children which is the image and then the content section so we're saying the Flex direction should be column so those are laying out stacked on top of each other the real secret here now is saying the content section should be set to flex one which says fill all the available space so the height of this section here is always going to be the same in each one like it's reported internal height and then we're saying set that section to also be flex with a flex direction of columns so that these items are stacked on top of each other but justify them on their main axis between so basically try to spread them out evenly so since there's only two items this will get pushed straight to the top and this will get pushed straight to the bottom you could also do MT auto on this instead of justify between and I'll only do it to one of them and we should see that both look the same yeah so you get the same effect that's another way to do it I use justify content for everything so it's fine so what were we doing are we done this part I think we're probably done this part this would probably be a link but that's just a minor detail that I can change after the fact okay let's do the let's just duplicate this twice and change some content alrighty so here's the container that we want to duplicate so I'll have three of those total the second one is going to say articles instead of design tips and that's gonna be spelled correctly and it is only gonna have two items instead of three and the content is going to be seven practical tips for cheating at design is the first one seven practical tips for cheating design and it's gonna be a medium I'll put in the real links after but just kind of get it in place this is going to be article tips this is gonna be article laravel I oh and this is I think it said case study redesigning laravel io something like that are you designing laravel dot io this also be on medium let's just see what we got okay so we need some space between them so this is why I'm glad that we added this extra wrapper here so we can give this like maybe mb8 and you just start pressing my quote key harder or my shift key I think we might want more yeah might want like 1212 looks pretty good I think 1612 you know let's go let's go bigger 16 yeah yeah all right so let's do the same thing down on this one and b16 do that same problem with the div being on the wrong spot here get going now this bottom one is going to be screencasts and everywhere where it says Twitter comm all three of those is going to be youtube.com and the first one is redesigning WP pushers check out page we designing WP pushers check out page and this is going to be s C WP pusher and then I think it's SC bad about and then SC resolute and what is this one redesigning bad about its product page and redesigning Resolute's internal app cool looking pretty decent it's pretty decent so let's add this little footer to the bottom here so all we need to do is add a another section with probably a border t2 border gray light and it's just gonna have a project by Adam Wilin and Steve sugar cool so let's give this a margin top of probably like 10 more 16:12 and will Center the text will give it a vertical padding of like six or eight maybe and more let's go with it eight at least and what do we got for font color here so it looks like that's gonna be text gray this is gonna be an anchor this is gonna be an anchor and they're gonna be styled the same so let's just do these both at once I think it's text indigo dark font semi bold still 16 so that's okay no underline that's probably gonna be basically it this needs to be text great dark not text gray cool so I mean that's basically this site you know what I think we actually have to change these titles the font because those are supposed to be using the display font so let's just grab all these h3s I want to say font display cool so maybe we'll make these cards [Music] links to you know what I don't know is in HTML is a valid to have a link inside of a link we have this link which is gonna be inside of this maybe I'll just make the image a link and then this title a link that seems like a smarter way to do it so just start with one of them and once we get it working well kind of back port that's to all of them and maybe we'll try and be bold and do it all at the same time see how many things I break here block no underline okay so those are links and then we'll do the same thing here so inside this h3 we'll wrap that with an anchor that says class no underlying hover underline yeah that's probably enough Oh text black yeah decent let's give those indigo links at the bottom hover style oh all right however however yeah sweet so there's a site more or less done so why don't we take a little peek at some mobile stuff so you can see that it's kind of feels like didn't necessary that it breaks there you know hard hard to say let's do some work on it at this size though so I think we're gonna want to change these width one thirds to only be with one third on large screens and maybe on medium screens they can be with one half okay so now we got half now we're gonna need some bottom margin under each one of these two so let's do like an MB 3 you would keep the grid even but it might feel wrong oh no sorry 6 would keep it even it feels like it should be more because of the shadow 12:10 just kind of got an eyeball it 8 yeah that feels pretty good and this text up here I think we need to reduce the line height so let's go wedding none may be really aggressive yeah that looks pretty good and what happens when we get even smaller here so now that we're down to this size now we're just getting random stuff because we don't have a width set when we're not on medium screens so let's change all these to have just a width of full by defaults and you know what I think that looks kind of basically fine so let's try using Chrome's kind of inspector thing here set it to responsive I'll just kind of click through does this seem fine I think so does this seem fine the text is maybe like too large but in general I think it does look okay if we get down to like tiny-ass iPhones then we have a problem with the the form and we actually have it at slightly bigger screens - okay so we need to figure out a way a different treatment for this format this size I think probably we'll just do like a stack two input so let's do that so this form will just make it flex on small screen sent up and this will be rounded rounded r0 rounded around it l0 so we get the rounding full default sizes but then as it goes up it doesn't work hey imagine I knew how to use tail and my own tool rounded is rounded oh you know what I you know what the problem is I keep thinking it's zero but it's none which means I need to change it to zero that's weird so this isn't display flex right now so something funky is happening I think that's because I need to set this input to be display block this should be SM what am i doing and this will be with full SM with 64 and this button will also be with full SM width:auto something like that and probably we want some margin at the bottom of this button like MB for SM mb0 something like that too I mean I can get Steve to tell me what he wants to do here but that's pretty decent so yeah I don't know I think I'm pretty happy with that I think we can just kind of maybe call it there if anything like I might want to change this text so let's play with that a little bit maybe we'll do like text for Excel and then on medium screens or go to six Excel something like that and then I think we only want this responsive line break on medium screens so a little trick a lot of people don't know you can add classes to be ours we can say it's hidden by default but block on MD I think it's blocked let's double check what is the default display on a be our inline so we can have a nice little responsive line break there so by default it'll just wrap as normal but once it gets like a medium screen we have like a enforced line wrap just kind of cool maybe we can make this text smaller too so maybe it'll just be text XL and then on small screens will do text to XL something like that maybe this will be on small screens text 5xl it's probably - mmm I think it's okay the logo we should probably do like a width 48 and only go to 56 on bigger screens we can fine-tune that after I mean the cards I wouldn't make component classes for because what's actually gonna happen is they're gonna be partials eventually right you know so like we could even I could even show you how I would do that we can have like a partials folder here and this could be like content card blade PHP and now if we grab the actual content card which is this here I think no it's this image URL this is going to be the title this is going to be the I don't know what would you call it like the the site that's hosting it you know you mean like the external site external URL external domain something like that and then inside here basically what I would do is I would just change all these to be include partials dot content card and then we just passed through an array of data so we could just say image grab this image this is going to be title think outside the database has any external domain it's gonna be Twitter com I mean you have to pass through the full link as well obviously but we don't actually have that set up to be dynamic or different for each one yet so we have a problem this is getting set to undefined variable image URL okay image URL not image so this is how I would actually do the componentization so now we just have a partial all the inline utility classes are in the partial and then I would just reuse that partial everywhere passing in the other stuff as just data so here you know we could just change this to tip borders this is gonna be used for your borders it's gonna be Twitter comm as well and you know as we go through and replace all of these well now there's not going to be any duplication of those styles anyways because it's it's componentized but it's componentized at the template level instead of the CSS level reduce the padding on mobile okay let's do it let's set it to py 12 and then maybe like MD py 24 or something like that I think that's a good suggestion you know we might even be able to go smaller there maybe like SM P Y 16 defaults to py 8 something kind of like that yeah looks pretty nice I think cool alright so yeah I think that's basically everything that I wanted to do I think it took us about an hour so that's pretty cool so we built the whole site out I'm going to finish off a couple little details like actually adding the right links and stuff like that and hopefully we're gonna deploy this this afternoon so you can go check out the real thing when it's done and tell me about all the sweet bugs that you find in all the different browsers that you test it on so anyways I hope that was a informative and educational or at least fun and thanks for checking at the stream looking to do some more of these going forward in the future so subscribe on YouTube if you haven't already and you'll get notified anytime I do any more of these thanks everyone I'll see you on the next one [Music]

Channel: Adam Wathan

Views: 30,972

Rating: 4.9405942 out of 5

Keywords:

Id: 17OBlxY2C_0

Length: 60min 5sec (3605 seconds)

Published: Thu May 24 2018