Building Websites with CSS Frameworks like Bootstrap

[00:00:00] Aurooba Ahmed: You are listening to viewSource, a conversation around tech, web development, and WordPress with hosts Aurooba Ahmed, that's me and Brian Coords.

[00:00:10] Brian Coords: Aurooba, I've got a really good question for you today. Are you ready?

[00:00:14] Aurooba Ahmed: Never, but okay.

[00:00:16] Brian Coords: Let's just say that you had to make a decision in your development career, and you had to pick between JavaScript and CSS, and you had to get rid of one and only focus on the other as like your career path. Which way would you go? Would you say like, I'll never touch JavaScript again and work in all the fun CSS, SASS, all the cool stuff that's happening, or I will set CSS aside, let the designer and front end person do that, and I will go JavaScript, react, node, whatever, however back front end you wanna get with that.

[00:00:53] What do you think you would pick?

[00:00:55] Aurooba Ahmed: Oh my God, that's a hard question.

[00:00:58] Brian Coords: Yeah.

[00:00:58] Aurooba Ahmed: I think that if I was thinking about what I would feel the greatest at, if I was an expert in, that would be CSS. But if I wanted to pick, if I was thinking what is a thing that lets me really experiment and go wide, even though I'm going narrow and deep, that would be JavaScript. Because I feel like with JavaScript like frameworks and the fact that you can use it in the backend and the front end in so many different ways means that JavaScript, learning JavaScript is a more flexible thing, but CSS is one of those deceptively difficult things to like become an expert in and that would be like a challenge I would love to like just go dive deep into, yeah, so it depends on what I was feeling, like how I wanted my career to go. I guess.

[00:01:51] Brian Coords: Yeah.

[00:01:52] Aurooba Ahmed: I didn't answer your question, but I don't know how else to answer.

[00:01:54] Brian Coords: I don't think you gave me, I'm like, I was sitting there in my head going, is that an answer or did you just get away with not answering my question? I mean, you don't have to answer it. There is no answer. I have an answer, but you, you don't have to have an answer.

[00:02:07] Aurooba Ahmed: I feel like I would, for my career, I would enjoy JavaScript more. If I could give up CSS, I don't think I would miss it because I care more about the functions than I do about like being perfectly styled.

[00:02:20] Brian Coords: Yeah, I think that that's where I feel like I'm much less of a visual arts person as much as I love, like the functional engineering of JavaScript and the problem solving and like logistical puzzles of JavaScript versus some people who do things with CSS. It just like, it's like my brain can't comprehend what they just did.

[00:02:46] Like, it's just people who do those, like one div like insane artwork things on CodePen. just like, yeah. I'm like, Nope, that's, I, that is that is not for me. That is too, too far beyond my skills.

[00:03:00] Aurooba Ahmed: I agree. I, I guess I think that CSS, like people who are extreme experts in CSS, I inherently find that more impressive because I have a really great appreciation for how deeply difficult CSS is. But

[00:03:16] Brian Coords: Mm-hmm.

[00:03:17] Aurooba Ahmed: JavaScript is more fun, you know, doing like logical things and functional problem solving is far more... I care, maybe I'm more passionate about that than anything else really.

[00:03:28] Brian Coords: Yeah.

[00:03:29] Aurooba Ahmed: Yeah.

[00:03:29] Brian Coords: Well, it's a good segue into today's topic, which is the ever ominous, you know, love it or hate it, room splitting component framework, design framework that is Bootstrap. That's our topic today. It's the perfect combination of CSS and JavaScript, which it has strong opinions on both. How, how is your familiarity level with Bootstrap?

[00:03:54] Like is that something you kind of like came up using or is that one or were you like nose in the air about Bootstrap on your developer journey?

[00:04:02] Aurooba Ahmed: I wasn't noses in the air about it at first. I tried Bootstrap on one project in 2013 or maybe 14, 13 or 14, so it was still, it wasn't like old, but it wasn't, it was pretty young at the time, right? I think it came out in 2010 or something like that, or 11, but I tried it and I was like, nope, this, nope, I, I don't like it.

[00:04:26] I don't like how this thing works. The way the grid is is great, maybe, but not for the design I'm working with. And I never looked back. And after that I just didn't ever touch another CSS framework ever. So my familiarity with it is very low. No framework.

[00:04:42] Brian Coords: Roll your own CSS every time you start a project?

[00:04:45] Aurooba Ahmed: Yeah. But then once you've done that a long time, you end up with a framework of your own, kind of, a language of your own, I suppose. Yeah. So what about you?

[00:04:54] Brian Coords: Yeah. Yeah, I mean I, you know, I think I came to it relatively early and I had that feeling of like, like, oh, I don't have to write my CSS, like, unless I need to? Like, to me that, that seems like a no-brainer. I think I probably came to it first for its grid. Like most people I think did, you know when it became very, like when responsive design really kicked in and like everything was 12 column grids and you know, it was a good necessary like evolution in web design and you know, there were a lot of grid things out there, and Bootstrap was probably the best. But like, yeah, I think the first times I used it, it to me was like, it was like, oh, cool. Like why do I need to write a button every time? Like, I'll just take this button. Like a button is a button. A button looks like a button.

[00:05:39] And that's definitely, you know, not true for most people with like a design eye. But to me, I was like, oh, it's a button. I don't have to write that code. Move on to the next thing. It seemed like a time saver to me. Then I think I did sort of see that it was not always like the most well looked upon. I mean, what do you think are like the, I don't know, what I would say to you is like the biggest thing that made you just go like, no.

[00:06:06] Like the, what made you feel like rolling your own CSS was like, the better?

[00:06:09] Aurooba Ahmed: One. I think that. It's not true of every single part of Bootstrap from what I've seen, but there are parts of it where it's a little inflexible. Like it's hard for me to take something and say, hey, this has good bones. Let me go and, you know, flesh it out a little bit or change a small part of it. You can't do that without unintended side effects.

[00:06:32] That's what I found. I really hated that. And because it is such a large framework that you, especially like for me when I'm don't, I'm not familiar with all of it. It was like, I don't know where this unintended side effect happened and I have no way of detecting where it happened, you know? And that can be really frustrating.

[00:06:51] And the other thing is, I think that just, yeah, like it, I think it just does too much and it does it too strongly. Like it just has way too many opinions, which is totally great if you're just gonna style with Bootstrap. But if you're not styling with Bootstrap and you're trying to take a custom design and use Bootstrap to make it, I think that it's more trouble than it's worth. Yeah.

[00:07:14] Brian Coords: Yeah. Yeah, I feel that. Let's, should we take a step back and then like, kind of look at Bootstrap? Maybe I'll share Bootstrap's like website and we can kind of talk a little bit about like what, you know, what it's really even trying to solve and like also whether we feel like it is the things it's trying to say.

[00:07:34] Aurooba Ahmed: Yes, let's do it. And also, I did read up on the history a little bit.

[00:07:38] Brian Coords: Can you give us a.

[00:07:39] Aurooba Ahmed: Well it started it's Twitter Bootstrap right? Like Bootstrap came out of Twitter and it came out of their desire to create a UI for their backend at first, and then later their front end too, that was consistent.

[00:07:52] So, you know, it was really built for this very specific, like it was built for UI developer or backend developers so that they didn't, they could create things on the front end without having to think about them, and I think that it solves that problem beautifully.

[00:08:06] Brian Coords: Yeah, I think that's actually like a key point to like the history of Bootstrap, the fact that it came outta Twitter, but also the fact that, like you said, it's, it's really for backend people who just need components and they just need, you know, a common language. They just need everything to be consistent and to not really spend time on that.

[00:08:24] And like, you know, it's funny how it's like Twitter, because Twitter really is like the purest form of a social network. Like it's, you know, every social network is just Twitter plus something else. Twitter with photos, Twitter with videos, Twitter with longer posts. It's, you know, and ignoring like TikTok and algorithmic type stuff, but like the kind of core social networking, like the Fediverse and everything, it's really just like Twitter and I feel, feel like it's kind of makes sense that they would come up with that sort of like application component design system. Where a lot of the best examples of Bootstrap stuff really are doing like dashboards, you know, doing tables, things like that.

[00:09:08] Aurooba Ahmed: It does do those really well. And it's that part is like really well thought out and it's super easy to modify. That's what I found.

[00:09:15] Brian Coords: Yeah. I'm gonna just screen share a little bit. This is like the homepage of Bootstrap. From its history until now. I think like, this is, as we're talking version five is the latest version. And like that's what's actually really cool about that is they got like jQuery completely out of it. So like if one of your hesitancies of Bootstrap was like, oh, and I need jQuery and it's not, you know, 2008 or whatever year, jQuery was big.

[00:09:43] That's, that was probably a bad guess. You know. It is pretty cool that it's pretty like vanilla JavaScript nowadays. I know a lot of people really like using it with Vue. That's like a pretty common one is like Vue and Bootstrap together cuz you kinda get like components and you get that sort of like, Vue thing.

[00:09:58] So like that's kind of a, a place where you see it a lot more. But on the other hand, you know, I do sort of take the, the criticism that like, you know, when you look at Bootstrap, when you look at something built with Bootstrap, you can kind of like smell that it was built with Bootstrap. You know what I mean?

[00:10:16] Aurooba Ahmed: Oh yeah, it's definitely, I mean, I think that there's people who like modify it so heavily that you can't tell, but then if you have to modify something like Bootstrap's so heavily, was it worth it to use it in the first place? That would be my question, you know?

[00:10:32] Brian Coords: Well, I think there's good. Let's talk about the pros of Bootstrap though, because this is the first thing, I'm gonna pull this up. This is the documentation.

[00:10:39] Aurooba Ahmed: Yeah

[00:10:39] Brian Coords: To me. The first number one pro of using Bootstrap is its documentation, because if you're gonna roll your own sort of like internal design language for your company or a project or something, you know, you really need it documented so that multiple developers can collaborate on it.

[00:10:58] And so to be able to go to your team and say like we're going to use Bootstrap, and you can come here and I'm gonna pull up the little search icon. It has like one of those like command K, like search palettes. And we're going to pick like, accordions I think is like a good kind of like frame, you know, component, accordions are a popular component.

[00:11:18] They need CSS, they need JavaScript. They need HTML. The fact that you can come here, come to the documentation. You can see it working in front of you. You can see the exact markup. You don't have to like think about it, you can just do it and like move on in your job. And everybody's doing it the same way.

[00:11:35] Like to me, I think that's kind of like the place where it, it, it like becomes the most useful component that I'm just like, I'm just, we're all speaking the same language.

[00:11:45] Aurooba Ahmed: Oh, I agree. I mean, I think that that's, the core idea of a framework that, or a design language that is common to multiple people, that is a really important thing that is really applicable everywhere. And you know, the fact that Bootstrap has a documentation to make that easy, that's really nice. Like I love that.

[00:12:05] And the way they do documentation is frankly a great example for everyone on how to do documentation, right?

[00:12:11] Brian Coords: Yeah. Then you look at the actual code of the accordion and I, I get where you maybe find it a little inflexible. Like if you're looking at the code, it's like definitely a little div heavy there. You know, there's a decent amount of divs making up, you know, the the elements of the accordion.

[00:12:33] There's like a wrapper, there's a wrapper free item, there's a wrapper for the header, there's a wrapper for a button, and there's, you know, the actual content of the accordion. Each one needs like two divs to like pull it off, like, yeah, you know.

[00:12:45] Aurooba Ahmed: And these are just the classes and things you need for a basic one. Not even like, oh, I had to make this customized to match this particular design, and I need to add the padding and the margin and the color and the everything else that you need to add. Like, I mean, it creates ugly code.

[00:13:00] Brian Coords: Yeah, I, I don't think you're wrong, but let's go down. So like, we're looking at the documentation. It's first you're seeing like the HTML of it. As you go down, there's like some other like. You know, modifier classes that you can add that kind of change it a little bit. There's some you know, Bootstrap is very big into like data attributes on HTML, so everything is like a data attribute that kind of handles a lot of this stuff. What?

[00:13:27] Aurooba Ahmed: I love data attributes. I think they're so smart because you can target them with JS, you can target them with CSS. I mean, it's a really great approach for a lot of like behavioral work that you have to do in the front end.

[00:13:36] Brian Coords: Mm-hmm.

[00:13:37] Aurooba Ahmed: Yeah.

[00:13:38] Brian Coords: And Bootstrap. Does not really ever target their data attributes with CSS I find, like an accordion button still needs this accordion button class, even though it has a data-bs, you know, toggles and targets and things like that.

[00:13:55] Aurooba Ahmed: Yeah, but they could, you know, they could, and I can

[00:13:57] Brian Coords: They could

[00:13:58] Aurooba Ahmed: When I use use it, it.

[00:13:59] Brian Coords: Yeah, but if you go down, down the docs, what, when you get to the bottom, basically what you find is that, when you wanna style a component in Bootstrap, you get. your like eyes glazing over at these like massive list of CSS and SASS variables. So, so well, the fact that they use CSS variables now, that's actually really new. The, the fact that like, things get kind of transposed into CSS variables. But even if we keep scrolling past that to like the original, so to style our accordions, I mean, what is this like 25 different SASS variables that you can pick?

[00:14:40] Aurooba Ahmed: Yes.

[00:14:41] Brian Coords: Accordion, dash padding y accordion dash padding x, accordion dash background color, accordion, border width, accordion board rate.

[00:14:50] You know, it goes through and so everything you know gets its own SASS. And how do you feel about this?

[00:14:56] Aurooba Ahmed: right? It's deeply scoped. Like if I have a common like, oh, border radiuses, border radiuses are just this, I can't just change one and be like,

[00:15:07] Brian Coords: No, that's not true!

[00:15:08] Aurooba Ahmed: It isn't?!

[00:15:09] Brian Coords: That's not true. That's not true. Yeah. So let's, let's actually jump into like SASS variables and how they work, because I, I think this'll, this will maybe make you feel a little bit better about because. because we've been, this is a little bit of a tangent, but we have been playing around with theme.json in WordPress, which is essentially the same thing, a giant list of CSS variables that you're defining.

[00:15:35] And you do kind of hit this point where you go, okay, a border radius on my accordion should be five pixels, but actually a border radius on everything, my buttons, my pop-up modals, my, you know, should be five pixels. Form inputs, all that. Right? So actually, if you are looking at this, the accordion border radius pulls its value by default from a default border radius value.

[00:15:58] Which means if you set a default border radius for your SASS at the very beginning, all of your elements will pull it from default, like by default. So like it will cascade down through the CSS and then you can go back and say, no, I want to go to my accordion border radius and change that.

[00:16:16] Aurooba Ahmed: right? I mean, that's how, that helps. But like, okay, where do I find the ginormous list in docs?

[00:16:25] Brian Coords: Yes. Oh, I, I, well, let me open a separate tab and I will show you, I don't generally go to the docs for this. What I do is I'm gonna click on the GitHub link and I go to their GitHub. And I'm on like Bootstrap's main GitHub. I just wanna get to Bootstrap's repository. So GitHub slash twbs/bootstrap is their kind of main repository.

[00:16:48] I go into their SCSS folder where everything is generated and this is like the SASS of Bootstrap and it's pretty nicely organized. You have like, you know, folder for like mixins, utilities, those sorts of things, right? And. Separate files for everything like accordions, alerts, badges, breadcrumbs, so on and so forth. All the way down.

[00:17:09] Aurooba Ahmed: I'd like to see even more organization there, but like it is pretty good though.

[00:17:12] Brian Coords: Yes, yeah. I'm gonna win you over to Bootstrap. No, I'm just kidding. That's I'm gonna win you over to this 10 year old design framework. I'm opening their like variables.scss. So essentially this is a file that's 1700, that's 1,700 lines of, of SASS variables that

[00:17:31] Aurooba Ahmed: Wow. Oh my god.

[00:17:33] Brian Coords: Right? But half of this is like colors, I promise. Like, like as we're scrolling down, it's like gray. Everything from like gray 100, gray 200, gray 300, gray, all the way down. And then there's a full color palette. There's a map of grays and separate variables.

[00:17:53] Aurooba Ahmed: Why? I mean, I get why, but like why.

[00:17:56] Brian Coords: Yeah, I, a lot of it has to do. So what, so to step back when we when I use this, what we typically do is we'll pull in like, a separate variables file where you can sort of define your own variables and then you can pull in Bootstrap like as a dependency from Node. And then essentially you'll have like your variables will override Bootstrap's, but with the colors and anything that's in these maps, it gets a little dicey cuz you can't declare one if you don't declare the other and things like that.

[00:18:28] So there's like kind of logic to that.

[00:18:30] Aurooba Ahmed: What happened with me when I was trying this was I decided that I wanted to take the bs-primary variable of Bootstrap and set it to the primary color but the CSS one and that would do it for the SASS one, but then it didn't. And then the same thing happened with a gutter variable. And I was just like, I thought they were connected, but I guess they're not.

[00:18:50] And I was so confused. I, I was just like, what is happening and where can I find out what is happening? And eventually I did. But like it was a process, you know?

[00:19:01] Brian Coords: Yeah, you, I've never tried messing with the, the CSS variables cuz that's actually really, really new. What I typically do is, is override them in SASS and then I think it generates them as CSS variables when you compile it. So that's one place to start. You have to get past all the colors. There's a lot of colors.

[00:19:20] I'm just gonna scroll through lines and lines of colors, and then the colors go into maps.

[00:19:24] Aurooba Ahmed: Yeah, and we've like covered about a quarter of the screen like according to the scroll bar and we're still in colors.

[00:19:31] Brian Coords: Yeah. And then the colors go from being colors to being theme colors. So like you're like, red goes from being red 100 through a thousand to being like danger 100 through, you know, it's like it keeps okay. But I think we're, yeah. And then there's like the subtle variations and

[00:19:48] Aurooba Ahmed: The transitions.

[00:19:49] Brian Coords: boom. Yes. Then you get to SASS variables for turning things on and off.

[00:19:55] So like you can actually tell Bootstrap like, turn this on, turn this off. Don't use containers, don't use CSS grid, don't use Flexbox. That sort of stuff. Have you ever tried this? Have you used it?

[00:20:07] Aurooba Ahmed: I didn't even know it existed..

[00:20:08] Brian Coords: Yeah, see? Is this in the documentation?

[00:20:11] Aurooba Ahmed: I don't know if it is, I didn't find it, or at least there was no reason for me to go looking for it because I didn't know it existed.

[00:20:18] Brian Coords: We'll keep going through this. This is where we're gonna get into utilities. So like, this is the other piece that I think Bootstrap has that I feel like a lot see? Can I, can I do like a tangent rant about this? This is like, it's, it's like, when people come to you with WordPress, which I think we should go into like specifically like a WordPress conversation about this, but like things like WordPress, things like even Tailwind, do a lot of these same things.

[00:20:48] And it's like, to me, for some reason, Bootstrap always gets this kind of like bad vibe, which I don't know. Like I get it. It's a huge, it's a big file. You, if you just pull the whole thing in, that's a big waste. It brings a kitchen sink approach. And if you don't go, like, comment out like a lot of imports and recompile, then it's, it's, it's a lot of wasteful code.

[00:21:10] But like at the end of the day, what you end up getting is, and I'm gonna switch back to the documentation for a second is all of these variables show up in utility classes. So let's take like spacing, margins, and padding. With Bootstrap, you end up with very similar classes. So I'm showing like on the screen, like the documentation where if you want a margin-top, you do like the classes, like mt hyphen and then a zero through five scale.

[00:21:37] You know, like that's Tailwind. That's like Tailwind does that. That's like you're just doing like a ton of these classes, like everywhere, utility classes.

[00:21:47] Aurooba Ahmed: Yeah, and I think utility classes are really handy when you have to like wireframe something or when you have to like create something really quickly. My preference wouldn't be to use them directly in the html, but I definitely, and I don't like the !importants everywhere, you know, the important flag, which we'll talk about.

[00:22:04] Brian Coords: Yeah.

[00:22:05] Aurooba Ahmed: But as a concept, util utility classes are a core concept of CSS that everyone employs, whether they realize it or not. And it's, it's, it's core. It's, important. Yeah. So, and nothing wrong with it, so I didn't realize people gave it flack for that, when it is probably the best part about it.

[00:22:23] Brian Coords: Probably, yeah. Yeah. Cuz when I look at this, I see Tailwind, I see WordPress. Like when you add a color in WordPress and you get that like has-primary-color and I think you pretty sure you get an important on that as well. Yeah. Yeah. Well, yeah, WordPress is definitely not like they're definitely a big offender in important tags at this point in time in the block editor. Yeah. So I guess going back to sort of the variables, I, I'm just trying to show you that like a lot of this stuff is like, I feel like they have harnessed a lot of the best practices of a lot of these things where like, you do see it here and it's been in Bootstrap for a while, like, a lot of these things are pretty well thought out.

[00:23:04] Granted, there's a lot of it and there's a lot of opinionated stuff, but like I can set, so like they have like a spacer CSS variable where I can set my like zero to five spacing scale and then that's going to like affect everything in the design. Those like margins and paddings will be super consistent in the design, in paragraphs, in, you know, accordions, everything.

[00:23:27] It's gonna pull from these values and I can set them like once pretty globally. And I do think that's like a nice touch.

[00:23:32] Aurooba Ahmed: Yeah, no, I agree. And also, you know, WordPress theme.json has this whole spacer thing where you can, you know, set the scale as well. And. I have no arguments or any fight with Bootstrap's wordpress aspect. I think it's the opinions and maybe the, even though the docs are really, really good, I feel like. missing like a, here's everything you should know about, like overall sort of page, you know, I went through their docs as much as I could, but there's just certain things that, like you're showing me and I'm like, awesome. If I had looked at the ginormous file, I would've seen it, but I had no reason to think that I needed to go see it.

[00:24:08] And nobody indicated that I had to go see it, you know? And so.

[00:24:13] And if I, when I, when you're working with Bootstrap a bunch, right? Like I've only done one project with Bootstrap, so once you're doing multiple projects, you just naturally will discover a lot of this stuff. There is an, there's an aspect of discovery with any framework, especially as large as this one.

[00:24:27] But I just feel like it doesn't need to do this too much, this much or it does, but then the use case for it is not what we've been using it for. Yeah,

[00:24:38] Brian Coords: Yeah, so that's, that's also a part of the conversation, you know, cuz like I said, I think there is a use case for it. And the use case is generally like very like app interface, you know, quick prototyping, that sort of thing. You know, it's not maybe the best tool for bespoke pixel perfect designing. Maybe? You know, that said,

[00:24:59] Aurooba Ahmed: Lots of people make it work, but then if it's like those designs were made with the intention that they would be built with Bootstrap, you know?

[00:25:07] Brian Coords: Yes. And I think that's like, kind of like, that's not a thing that will, is really even Bootstrap specific. That's like a, that's like a design language, just like a big open question, which is like when you sit down to make a website like you, there's going to be a sort of like onboarding, like educational process to get from what the designer was thinking, to what the developer is thinking, to understanding where choices are made and how choices cascade throughout your entire, like design language.

[00:25:39] I think all of that is the same no matter what you're dealing with.

[00:25:44] Aurooba Ahmed: Yeah. But when you like Bootstrap, then instead of saying, Hey, I can create those, those understandings and choices without like all of this baggage, you have all of this baggage and sometimes. It is literally baggage. Like it is a con and not a pro. Right?

[00:26:00] Brian Coords: Yeah, I, I mean, I don't think you're wrong, but like, what about like, Isn't it nice sometimes, like say you're like halfway through a project, say you're building a WordPress site and you're halfway through a project, and then it gets to a point where they go like, oh, and turn the comments on, on the blog, and you go like, oh, shoot, we didn't talk about comments, but like in a Bootstrap sort of environment form fields are gonna look pretty nice because they're gonna be like matching your design because they're gonna match the border radius, they're gonna match the color palette. They're going to pull in a lot of that stuff. So like it is baggage. I agree. Cuz you're like, just leave my form inputs alone. But sometimes it's nice that it's like, hey, we did do some of the work for you and we did kind of bring this to you.

[00:26:41] Like, doesn't that kind of sound a little nice?

[00:26:43] Aurooba Ahmed: Yes. But I feel like you can do that without necessarily having such a big framework with you. There

[00:26:50] Brian Coords: You? You're saying I don't need 300 kilobytes of CSS to do this.

[00:26:53] Aurooba Ahmed: no, of course you do. I mean, how would you, how would you create any site without 300 kilobytes of CSS? That's just not possible. And build tools and SAS variables and maps.

[00:27:03] Brian Coords: Yeah, so I like half agree with you, but I also feel like there's a separate part of this, which is like, how different is this from like building with WordPress? Because I think, I think, I think we, we have to do like a whole separate like WordPress version of this conversation. Cause I don't think we have time for that.

[00:27:24] But like, don't you feel like like anytime you come into a system that has made choices, like we're just looking at the HTML for an accordion in Bootstrap and saying, man, that's so opinionated and it has all these classes and it has all these divs and all this stuff. And it's like, well, what happens when I pull in, you know, some of the WordPress blocks, like I don't get to define that HTML, I don't get to define those classes. I don't get to do that. And. The things that I thought I could set and theme.json don't even apply to the rest of my site. Cuz I thought, they only apply to blocks. They don't even apply at like the foundational HTML level. So like, is it, it's, is it that different than, than, you know, block editor development?

[00:28:07] Aurooba Ahmed: no, I I don't think it's about that different. Like if you were talking about classic WordPress, you're not using the block editor, bootstrap work is gonna work with it really well. Right? But we're not talking about that, or at least I'm, I'm looking at it in the concept of like in the perspective of modern WordPress, which does use the block editor, and now we have a clash of two different design systems and that is not worth the trouble.

[00:28:29] Like it's better to use the existing design system of the CMS that you have chosen to use and extend that and make that better, rather than say, oh, I'm gonna slap on yet another design framework that's gonna conflict with this existing design framework and find yourself in a hot mess. Right?

[00:28:45] Brian Coords: Yeah, no, I think you're totally right. I think, I think in like sort of a wrap up of this, we should do a full separate, like, what is it like using Bootstrapped specifically with WordPress now that we've kind of like gone over this? I mean, I do hope you feel like you maybe gained some appreciation where like things where you're like, I feel like your biggest complaint was that you just didn't read all the documentation.

[00:29:06] I'm just saying it feels like you're, you're a big complaint is that you didn't do your homework.

[00:29:11] Aurooba Ahmed: That's definitely part of it but like I also don't think that it would be realistic for me to have read all of the documentation or know all of the nuances of it in one try, you know? So my complaints are complaints of the moment. They're not complaints in general, I guess you could say.

[00:29:29] Brian Coords: Yeah. And I will be honest, like, you know, I didn't choose the Bootstrap life. The Bootstrap life chose me, you know what I mean? Like , it isn't, it's just sort of like a thing that's happened . So I don't, I was, I'm trying, I was trying to play like cheerleader for it just cuz I knew that it would like, push you a little bit, but like I you know, it took me a long time to get to this variables.scss file and like actually parse this and it's not, it was not intuitive. I will say that. And I still find myself, you know, I think once you really get into it, you do find like it's a lot easier to get like 80% of the way there and like just tweak a few variables and that's super fun. And I think that theme.json and WordPress is trying to do that thing as well.

[00:30:18] Tweak a few variables, get really close. That said like, yeah, let's talk about modern WordPress development with Bootstrap on a future episode. What do you think..

[00:30:28] Aurooba Ahmed: Yeah. I mean, thank you for walking me through this though, because this was super helpful and I feel like I really needed that. Why? Why didn't you do this with me before? That's my question.

[00:30:36] Brian Coords: All right, next week.

[00:30:39] Visit for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.

Creators and Guests

Aurooba Ahmed
Aurooba Ahmed
(she/her) Developer building bespoke #WordPress solutions, tools, and blocks. My name is pronounced "oo-ROO-ba" — Default to kindness, folks.
Brian Coords
Brian Coords
WordPress developer and writer blah blah
Building Websites with CSS Frameworks like Bootstrap
Broadcast by