Whassup my peeps, Maheen over here.
Quite often than not we often overlook those of us who are starting out in the field. We were all beginners once, and there are many beginners out there right now. I consider myself a beginner as well because I have this personal belief that if you take yourself for a beginner, the learning potential is unlimited. Once you’ve hit that whole I-know-enough mindset, it puts a cap on your capacity to take in new information. So, yeah, beginner over here talking to other beginners. Howdy do?
Today we’re going to do something that professional programmers and developers and designers are going to consider relatively simple, but, hey, we’re keeping in mind all of the demographics over here because that’s what TUK is all about. And also because, well, providing something valuable to those of you who are starting out is going to make me feel happy. I like feeling happy.
What we’re going to do is take a component, just one component, from TUK’s catalog of 350+ components, and edit the code and everything so we can get the most out of the UI kit. Now, you might wonder why I’m devoting an entire article to this topic, and I’ll tell you this in return: I’m not exactly what you might call a veteran programmer. I’m new to TUK, and as you can tell from my previous articles, I’ve only just begun to have fun with it. I intend to keep having fun with it. So when I edited my first component after delving into all that multicolored code and everything, I felt like a fucking wizard. A wizard, I tell ya! Or rather, a witch, but that has some negative connotations to it, but oh well.
Before we begin, let’s just do a quick recap of TUK, shall we? It’s a UI Kit with more than 350 ready-to-drop, beautiful, awesome, amazing, bespoke, accessible components, and around 10 templates that you can use to jumpstart the hell out of your UIs, front-ends, and just about everything design-wise that you can imagine.
So with that said, let’s just take a look at a component and start editing it. Which component? Okay, so there are a ton of categories of components on TUK’s website. Go check them out here. I’m gonna go with grid cards because I hate grid cards and I have this habit where I tackle the things I hate head-on. Here’s this grid card that I’m going to change.
Sexy, right?
To access the code and everything, you’re gonna wanna buy a developer’s license. Costs just around $189. That’s chump change for us, ain’t it, friends and neighbors? Sure it is. I mean, at least for me. Flex? Sure.
Anyway, I’m gonna share snippets of the code and all to show you how I can change this component into something that I want. Again, this is going to be a cakewalk for those of you who’re into development and design. This is for the beginners, the ones just starting out. I was one of you not a few months ago. Now here I am, all well-versed in Tailwind CSS and JavaScript and front-end lingos.
Okay, let’s just jump right into it, shall we folks?
If you’re still uncertain about what grid cards are and what they do, here’s the description from TUK’s own website: “Grid cards are pre-defined cards that can be used to create dashboards and web-app pages. The cards have certain UX that can be modified to fit the needs of various use cases.”
Clear on that? Good. Now let’s start editing the code.
The first thing you’re going to do is go to the TUK site’s documentation page. Once there, copy the CDN link. Or you can just copy it from here:
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet”>Okay, so we’ve done that. Now we’re going to create a folder where we can create our HTML file in which we’ll paste the code for the component that we’ve selected. Oh, yeah, so the component title is Full Width 3 Section Project Card. Pretty self-explanatory, ain’t it?
Click on Show Code, copy the code, and now let’s create an index.html file in our folder. I mean, that’s just one of the many ways you can do that. This is how I did it. To each their own.
Open up the folder using the IDE of your choice. I use Visual Studio Code. It’s got this great extension-plugin-thing called Live Server that you can use to fire up the page you’re editing on the localhost and everything. It’s great.
Okay, here you go, a basic boilerplate before we paste the code in:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"><title>Component Editing</title></head><body><div class="container mx-auto py-8"></div></body></html>
I used this line
( <div class=”container mx-auto py-8">)because I wanna add some margin and add a container to the component we’re going to use because otherwise, it’s going to look like shit. Just change the py value to 64 if you want it to drop all the way down to the middle of the screen for your convenience. Whatever floats your boat.
Now let’s copy the code for the component in. I wanna share the code and all, but it’s a paid component, I think, and I think it’d be really unfair to the guys over at TUK if I just willy-nilly shared their code without their consent. You can check out the free components they offer in their Community License if you’re not feeling like taking a $189 plunge.
Okay, once you’ve copied the code for the component in between the <div> tags, fire up Live Server and see the basic component in your browser. It’ll look something like this:
And now I’ma get started on editing the component. In the words of the great Michael Jackson (I mean, it’s questionable if he was great or perverted, but let’s just separate the art from the artist for a second and focus on what really matters here), it’s as simple as ABC. Just start editing stuff in your IDE and soon you’ll have something that looks like this:
It’s literally the most simple thing in the entire planet, changing colors, backgrounds, text, headings, whatever else, and because TUK is made using Tailwind CSS, it’s even more simpler. How? I’ll tell you how in another post. For now, I think I’ve spread enough knowledge germs.
Hope you have a great one, peace out!
PS: More than anything I wanna share the code and everything with you, but it’s a paid product and all and it’d be really unethical to do something like that. If you wanna try it before you buy it, do it here: TUK
