Bedrock Layout with Travis Waith-Mair

Episode Description

Anthony Campolo and Travis Waith-Mair explore Bedrock Layout, a composable CSS layout primitive library, covering its origins, CSS attribute selectors, and live coding demos.

Episode Summary

Anthony Campolo hosts Travis Waith-Mair to discuss Bedrock Layout Primitives, a library Travis describes as "the Lodash of web layouts" — a set of composable layout components that handle common spacing and positioning patterns. The conversation opens with Anthony announcing his move from QuickNode to Edgio, a server-side-rendering-first deployment platform, before Travis joins to share the origin story of Bedrock Layout, which he calls "revenge driven development" after being shut down when proposing to open source a company design system. Travis explains how the library evolved from Styled Components to a pure CSS framework built on attribute selectors, inspired by Michael Chan's work, allowing the same primitives to work without JavaScript or React. The two walk through the relationship between Bedrock and projects like Every Layout and Open Props, with Travis explaining why he adopted Open Props' spacing scheme rather than maintaining his own. A live coding session demonstrates several primitives — Stack for vertical spacing, Inline for horizontal flow with responsive switching, Cover for viewport-height centering, and Center for horizontal centering — while revealing real-time docs issues that highlight the importance of accessible getting-started examples. The episode closes with Travis outlining plans for a Solid 1.0 release, internationalization efforts, and more recipe-style examples showing how primitives compose together.

Chapters

00:00:00 - Introduction and Announcements

Anthony opens the stream solo while waiting for Travis, taking the opportunity to share some personal updates including new glasses and the status of the Semantics stream hosted by Ben, which is on hiatus. He then pivots to a significant career announcement: he's leaving QuickNode and joining Edgio, which he describes as a deployment platform similar to Netlify or Vercel but oriented around server-side rendering rather than static-first approaches.

Anthony explains that Edgio is formed from three merged companies — Edgecast, Limelight, and Layer0 — and that the move represents a chance to realign his professional work with his longstanding passion for web frameworks and the Jamstack ecosystem. He reflects on how splitting attention between Web3 and traditional web development created a sense of fragmentation, and expresses excitement about consolidating his focus.

00:07:06 - Meet Travis and the Bedrock Layout Origin Story

Travis Waith-Mair joins the stream and introduces himself as a developer at Plex who is best known for the Bedrock Layout library. He and Anthony briefly discuss their shared enthusiasm for SolidJS and its growing community before turning to the core topic. Travis explains that Bedrock Layout Primitives are composable layout utilities, likening the concept to Lodash — individually simple pieces that become powerful when combined.

Travis shares the origin story behind Bedrock, calling it "revenge driven development." After being shut down in the first few minutes of a meeting where he proposed open-sourcing his company's internal design system, he used a Christmas break to begin extracting the layout utilities he'd built — particularly those ensuring consistent spacing — into what would become Bedrock Layout. He credits Heydon Pickering's Every Layout as a key influence on the patterns he adopted.

00:17:39 - Every Layout, CSS-in-JS, and Attribute Selectors

Anthony shares his screen to walk through Every Layout's website, exploring primitives like the Stack and Box. The conversation shifts to how Bedrock evolved away from Styled Components toward a pure CSS approach. Travis explains that while CSS-in-JS offered great developer experience, the runtime cost became a concern, and the ecosystem matured to the point where CSS custom properties and meta-framework build steps could handle most of what developers originally needed JavaScript for.

The discussion then focuses on CSS attribute selectors, inspired by Michael Chan's work, which became the foundation of Bedrock's CSS-only framework. Travis walks through how attribute selectors work — matching on the presence or value of HTML attributes — and explains specificity considerations. Chat participants contribute insights about the tilde and asterisk selector variants, and the conversation touches on performance differences between CSS and JavaScript attribute selection.

00:27:33 - Live Demo: Exploring Split and the CSS Framework

Travis begins demonstrating Bedrock Layout's components, starting with the Split primitive and its fraction-based sizing system. They navigate through Storybook to inspect the underlying HTML, showing how data attributes like "fraction:one-fourth" drive layout changes purely through CSS. Travis explains that the math for fractional layouts happens via CSS calc under the hood, requiring no JavaScript at all.

The demo reveals some real-time issues with the documentation site hosted on Netlify, prompting a pivot to running the docs locally. This detour sparks a practical conversation about the importance of having quick-start instructions in a README and maintaining clonable example repositories. Travis also discusses how the library ships individual primitives as separate packages to minimize bundle size, drawing a parallel to the tree-shaking challenges historically associated with Lodash.

00:39:42 - Spacing Schemes, Open Props, and Tailwind Comparisons

Travis introduces the concept of spacing schemes — consistent, predefined spacing values that prevent arbitrary sizing decisions and ensure visual coherence across an application. He explains that Bedrock now depends on Open Props for its default spacing tokens, adopting Adam Argyle's established sizing system rather than maintaining a custom one, since most teams with mature design systems would override defaults anyway.

The conversation draws parallels to Tailwind CSS, noting that one of Tailwind's key appeals is its curated set of design tokens that constrain choices in productive ways. Anthony and Travis discuss the terminology debates around what constitutes a CSS "framework" versus a library or utility, and how Open Props sits at a lower level by providing tokens that other tools can build upon. Travis also explains how users can easily override the default spacing scheme if their project requires different values.

00:47:43 - Live Coding: Stack, Inline, and Building a Hero Component

Anthony and Travis begin a hands-on coding session in CodeSandbox, starting with the Stack component to demonstrate automatic vertical spacing between elements. Travis shows how changing gutter sizes adjusts spacing and how nested Stacks can have independent gutter values. They then install the Inline component — Bedrock's horizontal layout primitive — discussing why Travis chose the name "inline" over "horizontal stack" to align with CSS's inline-versus-block mental model.

The pair builds toward a hero component by combining primitives. Travis demonstrates Inline's stretch property, its switchAt responsive behavior that transitions from horizontal to stacked layout at a specified width, and the minItemWidth setting for content-based sizing. He emphasizes that all of this responsiveness is achieved through pure CSS with no JavaScript, using an intrinsic approach rather than media queries.

01:11:51 - Cover, Center, and Composing Layout Primitives

Travis introduces the Cover component, which fills the viewport height and vertically centers its content by default, with options for top and bottom sections separated by configurable gutters. Anthony raises questions about the mixing of HTML-like props within layout components, leading to a discussion about the polymorphic "as" prop that lets developers control the underlying semantic HTML element rendered by each primitive.

The Center component is then demonstrated, showcasing horizontal centering with a max-width constraint using the "ch" unit — a CSS measurement based on the width of the zero character in the current font. Travis explains why character-based units are more meaningful than pixels for content-width decisions. The segment illustrates how composing Cover and Center together creates the classic "super centered" pattern, and Travis notes that centered text was promoted to a first-class prop on the Center component due to frequent usage in hero layouts.

01:22:30 - Future Plans and Closing Thoughts

Travis outlines his roadmap for Bedrock Layout, including reaching a 1.0 release for the Solid version, expanding internationalization with easier contribution workflows for translations, and building out more recipe-style examples that demonstrate how primitives compose in real-world patterns. He highlights a Spanish translation contributed via PR as an example of the kind of community involvement he wants to encourage.

Anthony wraps up by reflecting on how Bedrock Layout fits his own needs as someone who isn't a CSS expert, appreciating the mental model of composable primitives that produce professional-looking results. Travis offers to do a future collaborative stream where they integrate Bedrock into one of Anthony's projects. The episode closes with Anthony teasing an upcoming Storybook-focused episode and thanking the chat participants for their engagement throughout the session.

Transcript

00:00:23 - Anthony Campolo

Hello everyone. My name is Anthony Campolo, and we're going to be starting off with just you and me while Travis finishes up his last meeting. Today we're going to be talking about Bedrock Layout. Very excited about it. It's a project that I've been following from the sidelines, and I interviewed Travis about it for a podcast once. It's up on Ben's and he's been on a lot of other good streams as well, such as Semantics. So I'll start dropping links and stuff probably once Travis is actually here and we're talking about it.

But since we got some time to kill, I was wondering if anyone was going to notice, and someone noticed right away. I have some new glasses. I got two new glasses that I'm very excited about. These are transitionals also. So these are kind of like my outdoor glasses. Oh, thank you. And they'll be the kind of stuff I wear out on the town and things like that. And then I also got some work glasses that look fairly similar to my older ones with the kind of thicker rimmed glasses, and those have some sort of blue UV light protection.

[00:01:36] So it's like when you are looking at the screen for many hours a day, such as I do for both work and fun, I tend to stare at screens, so it gives a good way of filtering out stuff like that. I believe that is a dolphin with sunglasses on I believe, Brant.

So here we got a link right now for the Bedrock Layout Semantics episode. By the way, Ben, I just realized you had mentioned it, and I hadn't really thought about it, but Semantics is on hiatus for a little bit it sounds like. Hope you're getting some good rest. And hopefully I could help fill the Semantics shaped hole in people's hearts while you're away. Thank you, thank you. Yeah, I can imagine that's a big commitment to do a stream not only weekly, but sometimes twice a week. I know you're putting out quite a lot of content.

[00:02:36] So another announcement that I can make is that I am starting a new role soon at Edgio. Hoping to be back early next year with a bit of a different approach. Cool. Well, I am looking forward to that. I'm going to share my screen for a little bit and talk a bit about Edgio because this is something very exciting and is a big shift for me. I should also get up Twitch chat here. I did that backwards.

00:03:12 - Anthony Campolo

Do you see web dev chat? There we go.

00:03:19 - Anthony Campolo

So I have officially moved on from QuickNode. I have a lot of thoughts and things written in different pockets of the internet, kind of about it and about why. But I think the main thing for me is that I was feeling a constant pull and FOMO around basically everything else I was doing that was not Web3.

Which is not to say I didn't enjoy Web3 or find it very interesting and educational and something that, despite the problems inherent to it, I still believe in. And that's something that I may talk at length about at a later time, but right now I just want to focus on how cool it is to be involved in the development of modern and future web frameworks.

Obviously, I'm someone who's been involved with Jamstack and frameworks for longer than I've had a legit technical job. I was on the Redwood team back in December 2020 and have been ever since, and that's something that has kind of remained consistent as I jumped from doing podcasts.

[00:04:32] That being the only thing I was doing, to then having a job and splitting my time between GraphQL and FSJam, and then switching to QuickNode and then splitting my time between Redwood, FSJam, and QuickNode.

And so I see Edgio in a lot of ways as kind of consolidating my life back together into some sort of coherency, where the things I can work on and the things that I do for fun can be a bit more aligned. And I think that's just going to make me feel better overall about how I spend my time and the things I choose to do with my time, and not feeling like I'm kind of trying to live in two separate worlds, or two separate tools and two separate leaders and competitors. It's a lot to keep in your head, even for me, someone who enjoys all this stuff so much.

So that's kind of where I'm at with Edgio. The way I have been describing it is it's like if you had Netlify or Vercel, but it was SSR first instead of static first, because they're more based around giving you an easy kind of deployment solution, but doing it in a way where you're not just building static assets, you actually have a server as well.

[00:05:42] So that's something that I found very interesting. And they are an amalgamation of three different companies, Edgecast, Limelight, and Layer0, that all kind of combined and formed this thing now known as Edgio.

And for people who do know me, you may have heard me speak on JavaScript Jam, which is a weekly Twitter space. It used to be a Clubhouse, and then they have somewhat of a legit podcast recording as well, where they just bring on people and show off tools and stuff. But I've been going to these now for over a year, and I very much enjoy the vibe.

And people like Sean and Scott are just two people that I have a lot of respect for and am looking forward to getting to work with. So this is Sean and then we got Scott. So these will be two guys I'll be working with a lot. And we'll be getting to integrate different frameworks into tools like Edgio and then work more with framework authors themselves, and then also just learn more about the CDN business and what does it mean to work on a very legit large scale CDN.

[00:06:57] So it's going to be really interesting. Very much looking forward to it. All right. So we got Travis here. So I'm going to go ahead and pull him up.

00:07:06 - Travis Waith-Mair

I made it. Hello.

00:07:08 - Anthony Campolo

What's up man, how you doing?

00:07:09 - Travis Waith-Mair

Doing well. I am so sorry. Life, no matter how much I try, I gotta go, I really gotta go.

00:07:19 - Anthony Campolo

No, it's all good. I got a little bit of time to get my whole spiel about Edgio, which was actually nice. I was not planning on necessarily doing that, but that worked out well. So yeah, dude, how you been? Tell me about how your last month or two has been, what your life is like. You haven't been laid off anywhere yet, right?

00:07:36 - Travis Waith-Mair

I'm still working.

00:07:37 - Anthony Campolo

Yeah.

00:07:38 - Travis Waith-Mair

I mean, we're in a hiring freeze. I think most places are. But no, things are going well. Plex is, in case you didn't know, this is where I work now.

00:07:52 - Anthony Campolo

Yeah. Why don't you introduce yourself? I think most people in the chat probably already know you, but for posterity's sake and the future people watching this video who have never heard of you before, what's the deal with Travis?

00:08:02 - Travis Waith-Mair

The infamous Travis Waith-Mair? Yeah, I currently work at Plex. I've worked at a couple different places, but I think what I'm probably most known for is actually my layout library, Bedrock Layout. And I also Twitch stream, which I haven't done the last few weeks because I've just been swamped at work. But that's where I do maintenance on it, do doc updates, things like that. And you can check that out at bedrocklayout.dev. I've also done conference talks around the web, just four or five, but actually probably like four conference talks.

00:08:44 - Anthony Campolo

Which one was your favorite out of the conferences you spoke at?

00:08:49 - Travis Waith-Mair

Actually the most recent one, just because of the subject. It was at Conf42 and I gave an intro to SolidJS for React developers, or anyone else, but really React developers. And just because I'm super bullish on Solid. I mean, Solid is, and I know you are too. You like Ryan Carniato, he's kind of...

00:09:09 - Anthony Campolo

Episode two of the stream was Ryan talking about Solid. So yeah, I'm planting a big flag in that framework as well. Right now I feel it's at a point where, especially with the meta frameworks all starting, that's where it's at. A lot of people are going to start using it that probably never used it before. And there's going to be a lot of people coming into the community, and it's going to be a fun time for the framework itself, but also a crucial time to make sure the right foundations are set, the right expectations are set, and things like that.

00:09:39 - Travis Waith-Mair

Yeah. And the community around Solid is super helpful. There's so many times where I'm making such newbie mistakes. And I'm like, hey, why isn't this working? And they're like, you're breaking reactivity. Oh yeah, but nobody's dissing you. They're just totally like, oh yeah, this is a learning curve. You're breaking reactivity. Here you go. Now it works, right? And I'm like, yeah.

00:10:02 - Anthony Campolo

Anyway, I'm grabbing some links for the chat, and it's Bedrock Layout, not Bedrock Layouts. This is something I always forget.

00:10:11 - Travis Waith-Mair

Yeah.

00:10:12 - Anthony Campolo

When looking it up.

00:10:14 - Travis Waith-Mair

Even I would say Bedrock Layouts sometimes because I want to, but...

00:10:20 - Anthony Campolo

But it's not Layouts because it's layout primitives. Exactly. Because it's a composable idea, right?

00:10:26 - Travis Waith-Mair

Exactly. That's originally the term. In fact, that's still technically the term, Bedrock Layout Primitives. Because yeah, I call it the Lodash of web layouts. The idea is these things aren't supposed to probably build individually, but once you compose them together, they're going to help you build lots of different things.

00:10:47 - Anthony Campolo

Well, this is me showing my relative newness as a developer. I know I've never used Lodash. For people who haven't used Lodash, what is Lodash?

00:11:00 - Travis Waith-Mair

I've never directly used Lodash either in a project. I've never npm installed Lodash personally either. And I apologize if you hear some barking in the background. I have a...

00:11:11 - Anthony Campolo

A...

00:11:12 - Travis Waith-Mair

New puppy that we just bought this weekend and we're...

00:11:15 - Anthony Campolo

What's his name?

00:11:17 - Travis Waith-Mair

Berkeley.

00:11:18 - Anthony Campolo

Berkeley?

00:11:21 - Travis Waith-Mair

Yeah. Well, this is my son who actually came up with the name. He was just like, okay, if we ever get a boy dog, we're gonna name it Berkeley.

00:11:31 - Anthony Campolo

And what's the breed?

00:11:32 - Travis Waith-Mair

Oh, he's a King Charles Cavalier Spaniel. Yeah, he's a beautiful dog. 15 weeks, and he sometimes likes to remind us that he's still in his crate. So if you're wondering...

00:11:50 - Travis Waith-Mair

Still. I'm still a dog. Over here. I'm a dog.

00:11:54 - Anthony Campolo

Yeah, I have a cat. So the cat is fairly quiet. She'll make very low purring sounds every now and then, but that's pretty much it.

00:12:04 - Travis Waith-Mair

Cats are pretty independent, so they don't need... They get the social gratification on their time, not when you want it.

00:12:14 - Anthony Campolo

So what I want to talk about with Bedrock is...

00:12:17 - Travis Waith-Mair

You asked the question, what's Lodash? We forgot.

00:12:19 - Anthony Campolo

About Lodash. Yeah, let's hit that.

00:12:21 - Travis Waith-Mair

So yeah, Lodash is exactly that. It's a utility library that allows you to... In fact, a lot of things that are in JavaScript proper were part of Underscore, which eventually became part of Lodash. But the whole thing is it allows you to do composable things where, yeah, individually these utilities don't do a lot, but when you compose them together, they can do some really powerful things and you can write apps around them.

There's a whole Lodash/Underscore debate. Lodash won. It was originally Underscore. In fact, one of my favorite books is called Functional JavaScript. And it's all written with Underscore. And I don't think many people use Underscore anymore, but it's still a really good book.

But that's what this idea of the layout library is built on. The same idea is that a lot of the web layout patterns we use can really just be broken down to just a handful of other patterns that we can compose up and build out your complicated layout patterns.

[00:13:29] And obviously it's never going to do everything, but it can get you 80% of the way and the 20% is probably going to be custom stuff that you were going to do anyway.

00:13:40 - Anthony Campolo

Yeah, I think that all makes a lot of sense. People, even if they haven't used Lodash, just this idea of common tools or just chunks of code or things you're going to pass around to do things that you do a lot in a project makes a lot of sense.

But what I find interesting is that it seems like this idea sometimes appears and reappears and then kind of disappears from styling, because styling can be something that you want to be really handcrafted, almost artisanal. So there's less of this idea of, well, we want everything to look the same. So we want to avoid kind of doing that.

But at the same time, there are very common things we do on the web in styles. And so it actually makes sense to do for that. And so this is what I found very interesting with your project, is that this idea of composable styles I hadn't really heard much of before I started hearing you talking about it.

[00:14:32] And now I've kind of gone back and I found other examples of it, but I would love to hear about what inspired this. Beyond things like Lodash, how does this relate to things like Every Layout, and what's kind of the history there? Because I find it very interesting. I didn't really know about it until I kept hearing people like you and Chan talk about it.

00:14:51 - Travis Waith-Mair

Well, if you want to go to the history of Bedrock, I call it my RDD, my revenge driven development. And you know this story a little bit, but for the viewers who don't know, I was basically working on a design system for a company. This was two, three companies ago, and it was all internal, which is pretty typical. But it was getting to the point where I'm like, this would be really helpful if we could open source this and use just public npm, things like that, and just have that available open source.

Not that we even really thought that it was going to be picked up, just even partly as a check like, hey, let's go put this out there and see if we can get a community built around it. And I knew that was an uphill battle to climb. I knew that they were probably going to say no.

[00:15:46] But when I went to the meeting, I didn't even get a couple minutes in. I had all this presentation of what the benefits are and all that, and they're like, no, we're not. I basically said, hey, we want to open source this, right? And they shut me down in the first three minutes before I could even say the benefits.

And so I had a Christmas break kind of shortly after. So I started the original foundation, started planning that. And I think it was later the next year that I officially got it out on GitHub and got it going. But basically I just took the things that were in our design system that I really loved, and was building out, that I kind of felt was my own baby.

The thing that wasn't really part of the design system proper, but more of these utilities to help create consistent spacing, because that was the biggest deal for our designer. He just wanted the spacing to be consistent all the time.

[00:16:47] So people weren't putting in hacky one rem margins everywhere or whatever, just to get things to look almost right. He wanted the precise things, and he wanted an easy way for people to do it the right way.

And so that's what I started building on. I started using things that had been learned from Heydon Pickering with Every Layout, as well as just some other patterns that I've gotten used to. And I was really proud of that. And so I'm like, I'm just going to take that part out. That part isn't really design system specific. They're just utilities. We could put any spacing scheme in there and it doesn't matter. It's not related specifically to our design system. So I pulled just that part out. And that's where Bedrock kind of evolved from.

00:17:39 - Anthony Campolo

I'm going to start sharing my screen a bit so that we can show some of the things we're talking about here. So this is Every Layout. And so we look at some of the things here and we'll see a lot of this with Bedrock Layout. We have things like the Stack, which is like you want to stack stuff on top of each other. Exactly. You know, this is one of the examples I know you always give. It's really basic and kind of easy to think about. And then you have the Box. Oh, I need to pay for the Box. The Box must be important.

00:18:14 - Travis Waith-Mair

The Box is... In Every Layout you have to... He has a book in there and the website actually has it behind a paywall. And that's cool. He's done a lot of work. That's fine. And I think it's worth the money for anyone to go out there to check it out. Yeah.

00:18:29 - Anthony Campolo

Yeah, I mean, I'm never going to tell anyone they're not allowed to charge for their services, so.

00:18:34 - Travis Waith-Mair

Oh, yeah, 100%.

00:18:36 - Travis Waith-Mair

All right.

00:18:37 - Anthony Campolo

So this is the Ava method. So what is this?

00:18:42 - Travis Waith-Mair

So originally Bedrock was, like I said, because it was ported, our design system was built on Styled Components. So that became part of the original part of Bedrock. But as I was going through, hey, that meant everybody who wanted to use Bedrock had to both want to use React and want to use Styled Components, and that's fine.

CSS-in-JS kind of gets a bad rap. It's not as bad, in my opinion, as some of the people kind of make it out to be. But it does have a runtime concern. And if that's something that actually starts becoming a problem, you can't take Styled Components into your library.

00:19:23 - Travis Waith-Mair

I think the things...

00:19:23 - Anthony Campolo

That people wanted from CSS-in-JS, we've now figured out a lot of different ways to accomplish, which is the idea of...

00:19:31 - Travis Waith-Mair

Exactly.

00:19:31 - Anthony Campolo

You just want to be able to not have a whole CSS stylesheet that's a separate file where you write 10,000 lines of CSS. You want to just have components or pages or whatever, and then your CSS is kind of just coupled to that component or that page, and then also usually lives in the same file and lets you work on them in tandem with each other and then scopes it. That's what we want. How do we achieve that doesn't really matter that much. And do you agree with that? [00:20:00] - Travis Waith-Mair Yeah, I agree. When it really took off, things like CSS custom properties really weren't standard across all the browsers. Now everybody's doing it, and a lot of the things that you couldn't get easily in just plain CSS, like styled components and CSS-in-JS, bridge that gap.

There's some things you still can't get, things like type safety. I know there's some other libraries that still address that, things like Vanilla Extract. So you can still go down that route and get some TypeScript integration into your things.

00:20:47 - Anthony Campolo

What Ben's saying here is really true, is that a lot of this comes down to things that are always being kind of built into the browser and built into things like CSS. We're getting closer and closer to not needing as many weird, hacky, custom JavaScript kind of solutions to do lots of different things. This being one of them.

00:21:07 - Travis Waith-Mair

The developer experience I still get with CSS-in-JS that you can't imitate in any other way is that I can have my CSS — well, in React I should clarify — the CSS can live in the same file as your component, and that makes it really easy. So you're not flipping back between files and adjusting that kind of stuff. I really like that experience.

But when we get to a point where we're trading off user experience for developer experience, it's probably not worth it anymore.

00:21:45 - Travis Waith-Mair

The way you can —

00:21:46 - Anthony Campolo

Do that by breaking it into the build step. So you end up with something optimized that isn't going to include a bunch of client-side JavaScript, but that lets you do a bunch of stuff in JavaScript.

00:21:58 - Travis Waith-Mair

Exactly. And so we're also maturing to a point in technology where it's really easy to bring in styles and stylesheets from other things. The other thing that styled components and CSS-in-JS gave you is you didn't need a build step to make it work. Because it was all runtime, you didn't have to worry about making all that work before it got built. When it got deployed, it just worked.

But honestly, people aren't setting up their own builds anymore. They're probably using Next or Remix or whatever.

00:22:32 - Travis Waith-Mair

Or if you have a —

00:22:33 - Anthony Campolo

Meta framework that sets it up for you, then that's really nice because then you can still get the DX and not have to worry so much about fiddling with build tools. But that's because there's a team of people who have a framework that figured that out for you.

00:22:48 - Travis Waith-Mair

Exactly.

00:22:48 - Anthony Campolo

That's one of the main values you get from a framework. So let's dig into this.

00:22:53 - Travis Waith-Mair

So yeah, that was a long way to get to — I wanted to build a CSS framework around Bedrock. It took a while. I had found some different things, and then I watched Michael Chan, Chan-tastic, on the web. He's got a whole YouTube video. I initially used it to find a solution for something when I was still using styled components, using these data selectors.

But it was seeing that these data selectors really have a lot of value and really give this really cool component-like atmosphere. We'll go into details of why.

00:23:36 - Anthony Campolo

This is where a lot of my ignorance of CSS comes through because I had never used this or really even would say I knew much about it before I heard about this. So just define, what is an attribute selector exactly?

00:23:52 - Travis Waith-Mair

Anything that's on an HTML tag — any of those things like href, src, whatever — those attributes are something you can select for in your CSS. So you can look for all your anchor tags with an href, which all of them should have. But that's just a very simple example.

00:24:15 - Anthony Campolo

I forgot I did that. I was like, do I have any mods? Of course. Sorry.

00:24:21 - Travis Waith-Mair

Go ahead. So you're seeing right here, these are some examples. If we want to find any of the anchor tags with a title element, we can select for that. We can color it purple here in this example.

Or we can also select on what the value is given to those attributes. So not just do they exist, but what is their value. Depending on the wildcard selector, we can check for exact value. So attribute equals certain value — it will look for that exact value.

00:24:56 - Anthony Campolo

And what is this one?

00:24:59 - Travis Waith-Mair

The tilde, or whatever that one does — I don't know what the actual word is — but it's going to look for strings. It will delimit the strings space-separated, kind of like how you would do class names. And if one of those delimited strings matches the value, then it will select.

00:25:19 - Anthony Campolo

So hello Fuzzy Bear. We're talking Bedrock Layouts here and data selectors. I was asking about that because I'm actually seeing that here in Chan's examples specifically.

00:25:31 - Travis Waith-Mair

So yeah, if we look here in —

00:25:33 - Anthony Campolo

The attribute selector, and then you have a value. And so how does the —

00:25:38 - Travis Waith-Mair

So in this case it says "mention." But if he has some other strings like "mention space Bob's your uncle," whatever — even though that string says "mention space Bob space your uncle," it's going to still select because the word "mention" is in there.

Now, if "mention Bob your uncle" is all one word, it wouldn't match. Or if you had that whole string in there and you didn't do that little tilde, it wouldn't match because without that tilde it's going to look for the whole string to match. But as long as you have that tilde, it's going to say, "Do I find the string 'mention' in there?"

And I think it's important to understand that with specificity rules, data selectors are at the same specificity level as class names. So if you still want to select by ID or whatever, IDs will win.

00:26:38 - Anthony Campolo

We got some comments here in the chat. Ben is saying tilde says, "Is this a word in this list?" Asterisk says, "Is this a substring in the whole list?" And then Fuzzy saying, "I'll say this, using attributes in your document query selector is pretty slow compared to IDs and CSS selectors."

00:26:58 - Travis Waith-Mair

So if you're in JavaScript doing document.querySelector, it is slower than the original getElementById or getElementsByClassName. But we're not really going into JavaScript at this point. This is the CSS, so it's more optimized around that.

00:27:20 - Anthony Campolo

Interesting.

00:27:21 - Anthony Campolo

Yeah. So he can drop a link on that if he's got any. Cool. So is this how Bedrock Layout is set up, or was this something that influenced Bedrock Layout?

00:27:33 - Travis Waith-Mair

This definitely influenced Bedrock because what I wanted to do was build Bedrock with just CSS and prove that it could work without any JavaScript, without styled components, and without React.

But I still wanted that developer experience where you're passing in props, where you can pass in different things and it will just work. You don't have to try to do anything.

So if we go into Bedrock Layout and look at the CSS — and this better work — down on the left, these are all the React components. If you scroll down on the left, a good one is Split, to show an example of this.

00:28:19 - Anthony Campolo

This one?

00:28:20 - Travis Waith-Mair

Yes. Wow, I need to fix something because the white has disappeared.

00:28:28 - Anthony Campolo

Also, I've got a bunch of different browsers, so sometimes other ones will work better than others. My whole deal is all messed up. Okay.

00:28:39 - Travis Waith-Mair

Interesting. I'll have to go back and fix this because that's not very legible.

00:28:43 - Anthony Campolo

That's funny.

00:28:44 - Travis Waith-Mair

That sucks. But anyway. Oh, this is weird.

00:28:51 - Anthony Campolo

But the content in the back though, that's correct in terms of what it's showing, in terms of how the sizes relate to each other and whatnot.

00:28:59 - Travis Waith-Mair

On your screen, if you could hit D, just the letter D on your keyboard.

00:29:07 - Anthony Campolo

D? What does that do?

00:29:09 - Travis Waith-Mair

It should open up the docs. Is that not loading? The docs are not loading properly here.

00:29:19 - Anthony Campolo

Where is this hosted on?

00:29:22 - Travis Waith-Mair

This is hosted on Netlify.

00:29:26 - Anthony Campolo

Might be issues of some sort. Do you want to share your screen if it's working on yours?

00:29:34 - Travis Waith-Mair

It is not working on mine.

00:29:36 - Anthony Campolo

All right, well, that answers that mystery.

00:29:39 - Travis Waith-Mair

Let's see here, docs.

00:29:42 - Anthony Campolo

Hello.

00:29:46 - Travis Waith-Mair

Well.

00:29:48 - Anthony Campolo

I don't think —

00:29:49 - Travis Waith-Mair

I'm going to put a GitHub issue anyway. So maybe you're not going to be able to see what's going on. Okay, so what — can we go back?

00:29:58 - Anthony Campolo

Go back to — if we —

00:30:00 - Travis Waith-Mair

Go back to Split. We might have to look at that. And if you go up into — this is an annoying hack — but back in the URL, you'll see "docs." Change that to "story" right there like that. And so we'll go back to seeing the examples there. And then right-click on just one of these examples. We'll get the divs under the hood here.

00:30:33 - Anthony Campolo

Okay, this one right here, right?

00:30:42 - Travis Waith-Mair

This is all Storybook stuff. I use Storybook as well because I get visual regression testing through Chromatic, and then I also don't have to rewrite my docs multiple times with the same examples.

I don't know, maybe if you click on your div selector thing, part of the tool, and then actually click. I know, it's also an iframe.

00:31:12 - Anthony Campolo

Right?

00:31:13 - Anthony Campolo

Yeah.

00:31:17 - Travis Waith-Mair

Wow.

00:31:18 - Anthony Campolo

There it is. There's the iframe.

00:31:20 - Travis Waith-Mair

Okay, there we go. Into the iframe. One more, in the body, into the root.

00:31:31 - Anthony Campolo

Oh, there we go. Okay.

00:31:33 - Travis Waith-Mair

So in this —

00:31:34 - Anthony Campolo

Example. Okay.

00:31:39 - Travis Waith-Mair

Oh, this is just showing the gutter. This wasn't going to show you the example I wanted, but okay, let's just mess with this. So right now, where it says "data-bedrock-split true," just change that word "true" to —

00:31:53 - Anthony Campolo

False?

00:31:54 - Travis Waith-Mair

No, to "fraction," the word "fraction."

00:31:57 - Anthony Campolo

Like that?

00:31:58 - Travis Waith-Mair

Uh huh. And then colon.

00:32:00 - Anthony Campolo

Oh, and then colon. Or colon?

00:32:05 - Travis Waith-Mair

And then "fraction colon one-fourth." So 1/4.

00:32:11 - Anthony Campolo

Like that? Yeah, okay.

00:32:14 - Travis Waith-Mair

And then when you change that, you should see — it's hard to see.

00:32:18 - Anthony Campolo

Let me try and make this a little bit. Do this. Yeah.

00:32:23 - Travis Waith-Mair

So the idea is you can provide the string that says "fraction:one-fourth" and it will automatically know to split it one-fourth in the first value and put the remaining amount in the second item in the list.

00:32:40 - Anthony Campolo

There we go. Okay.

00:32:43 - Travis Waith-Mair

We're on the gutter example, so that's why.

00:32:46 - Anthony Campolo

But it was a colon. That's right.

00:32:49 - Travis Waith-Mair

Oh my gosh. [00:32:50] - Anthony Campolo I should double check.

00:32:51 - Travis Waith-Mair

Check the whole website. Make sure it was working great before.

00:32:53 - Anthony Campolo

That's all good. So what I wanted to do originally was just spin up a React project and just do that.

00:32:59 - Anthony Campolo

Anyway.

00:32:59 - Travis Waith-Mair

We could do that. And this is where I was going with this. Once I got this working and I got this attribute selector working with CSS, it didn't make sense for me to continue to maintain a styled-components version and then the CSS library.

So recently Bedrock had a breaking change. And now everything uses the CSS framework under the hood. It does all this attribute selecting and all that stuff under the hood and you just pass in props.

00:33:25 - Anthony Campolo

So I'm not sure if I can get the getting started thing to load. Maybe this still needs to be Storybook or should I change it?

00:33:35 - Travis Waith-Mair

No, no, docs.

00:33:40 - Anthony Campolo

But you forgot your docs, bruh.

00:33:44 - Travis Waith-Mair

It was working. I updated some stuff last night.

00:33:48 - Anthony Campolo

Do you have an old preview link or something that we could just use?

00:33:52 - Travis Waith-Mair

Could what? I almost wonder if Netlify maybe needs to be redeployed or something. Clear the cache or something.

00:34:02 - Anthony Campolo

Yeah, when in doubt, clear the cache. This is also why I would recommend just having some sort of quick getting started instructions in your README on your GitHub.

00:34:14 - Travis Waith-Mair

Yeah, that's a good point.

00:34:16 - Anthony Campolo

This might be a bit of fragile docs.

00:34:19 - Travis Waith-Mair

Well, it wasn't... but no, that's valid.

00:34:23 - Anthony Campolo

It's all it is, you know. That's why you gotta be decentralized, bro. Decentralize your life.

00:34:31 - Travis Waith-Mair

Does this make my life easier? Let me see. Sorry.

00:34:36 - Anthony Campolo

See, I'm gonna stop screen sharing for a second.

00:34:37 - Anthony Campolo

Do do do.

00:34:38 - Anthony Campolo

Also, if people notice, now I have my stream background that we got from Ben's first stream in the background. So you got a little bit less of a just forever black infinite background. Although I do like this guy a bit more.

Hey, what is up with everyone out there in the world? How's your Monday going? What do you got coming up this week? Someone tell me how you're feeling.

I am gonna be off for the next month, which is pretty sweet. So I have lots of time for podcasts, editing, and making of the streams, so hopefully gonna do this every Monday. If I get really bored, I might even throw in some actual ones every now and then, just kind of solo work.

And for people who aren't following me all over the place, I should probably share my SolidStart tutorial that I recently wrote.

00:35:42 - Anthony Campolo

Let's see if I can.

00:35:44 - Travis Waith-Mair

By the way, I'm going to pull this up locally because I know it was working locally on my computer, and we can just go through it on my computer locally and I'll figure out why the site isn't working after.

00:35:55 - Anthony Campolo

Okay. I'm going to switch to you in a quick second. Let me first do this.

So we got Saban said working on a series on testing and Prisma. That's really great. I have not ever had to personally test Prisma stuff.

Let's see. "Any fun plans made? Make sure to have some fun." Oh, I have all the fun. I have nothing but fun.

Astro, Astro, Astro. And here is my blog post for anyone who wants to check it out on my Astro site. Cool.

Okay, are you able to share your screen, Travis?

00:36:34 - Travis Waith-Mair

I should be able to. Let's share.

00:36:38 - Anthony Campolo

Screen. Okay. And then let me close some work stuff.

00:36:48 - Travis Waith-Mair

So this is what it's supposed to look like.

00:36:52 - Anthony Campolo

Right. Yeah. And I've seen it before, so.

00:36:56 - Travis Waith-Mair

Yeah. So if you want... here is what I was trying to show you.

00:37:08 - Anthony Campolo

Bump up your font quite a bit.

00:37:10 - Travis Waith-Mair

Oh, yeah.

00:37:11 - Anthony Campolo

And for now, you can probably just block off your code editor also.

00:37:15 - Travis Waith-Mair

Yeah, if I make the whole screen here.

00:37:18 - Anthony Campolo

Yeah. And then do it like 3 or 4 more times up the font. One more.

00:37:25 - Travis Waith-Mair

Is that better? One more. There we go.

00:37:29 - Anthony Campolo

All right. So what's going on here?

00:37:34 - Travis Waith-Mair

Okay, so this is what I was going to show you. You can see here's the gutters and then here's a way to do all the fractions. You would just say fraction one-fourth, one-third, one-half, for example, and so on.

00:37:49 - Anthony Campolo

And so the fraction stuff with the fraction colon then actually giving the fraction, that is Bedrock Layout specific syntax because you have written something that's kind of an attribute selector.

00:38:00 - Travis Waith-Mair

Exactly.

00:38:03 - Travis Waith-Mair

So it's looking for this. And then it's got that tilde selector and it's looking for this. And if it sees fraction three-fourths, it's going to apply styles specifically to this div or whatever you put this on.

00:38:17 - Anthony Campolo

So my question for you is then where is the math happening? Is that math you did yourself through custom logic? Or is that because now CSS has stuff built in that makes it easy to just throw fractions in places?

00:38:29 - Travis Waith-Mair

It's actually just doing it under the hood. So for example, this three-fourths, it's actually giving the first value, doing calc and all that stuff, and using CSS to figure out exactly how big it should be with the calc method.

00:38:45 - Anthony Campolo

Okay.

00:38:46 - Travis Waith-Mair

Yeah. So all these things require... the CSS framework requires no JavaScript. Which means because of that, there's a couple of the primitives that exist that don't exist in the CSS-only version that do exist outside of that.

One of those, for example, is the masonry grid. Because what it does is this Pinterest-style layout where it will optimize based off the height of the content where it should live.

00:39:20 - Anthony Campolo

Should use Hipster Ipsum.

00:39:22 - Travis Waith-Mair

Hipster Ipsum. And so yeah, like...

00:39:24 - Anthony Campolo

Ipsum.

00:39:26 - Travis Waith-Mair

Yeah, that's a good point. Or like Bacon Ipsum. That's a pretty good one.

00:39:32 - Anthony Campolo

Cat Ipsum is a good one too.

00:39:35 - Travis Waith-Mair

Bob Ross Ipsum is actually... that kind of makes me feel good. But yeah, you can see as it changes, it automatically... this requires JavaScript.

00:39:42 - Anthony Campolo

So I had a question about something you said back there about the CSS-only version. So how many versions are there and what are they?

00:39:50 - Travis Waith-Mair

Okay, so there's the CSS framework version. I really want to bring this as more of a first-class citizen in the docs. It kind of feels like a second-class citizen, but I don't know exactly the best way to handle that.

00:40:05 - Anthony Campolo

See, right there, you referenced the method by Michael Chan. That's why we went through that whole preamble about that.

00:40:13 - Travis Waith-Mair

And then it goes into how that works. Then there's the React, the actual React components. So for example, that same split component, you can see it has basically the same API, but instead you're wrapping everything in a split. And then you say gutter fraction one-fourth instead of doing fraction colon one-fourth. It's just a proper prop that you put on there.

And then this is still in development, but I'm hoping to get a 1.0 version really soon, a Solid Bedrock Layout. And you can see the docs are still kind of...

00:40:57 - Anthony Campolo

Is this...

00:40:58 - Travis Waith-Mair

This is SolidJS. This is not Storybook. This is all Solid. This whole website is running on SolidJS. Yeah.

00:41:09 - Anthony Campolo

I was curious about that. That's another thing I was going to ask. I remember you saying you were rewriting something in Solid, and I'm like, Bedrock is a CSS library using some JavaScript and styled-components. What is being rewritten to Solid? I was very confused by that.

00:41:25 - Travis Waith-Mair

So really, what made this possible?

00:41:28 - Anthony Campolo

And Solid, but Bedrock Layout itself has nothing to do with Solid.

00:41:32 - Travis Waith-Mair

Correct. So what made it possible is by making this CSS framework, it now made it easier to just create a Solid wrapper around that. Because now the props really are just all about putting the right attributes and values under the hood. [00:41:50] - Anthony Campolo Can you bump up your font some more on this one?

00:41:52 - Travis Waith-Mair

Oh yeah.

00:41:55 - Anthony Campolo

A couple more.

00:41:55 - Travis Waith-Mair

So for example, there's a couple things I want to make sure before I say this is 1.0. So bring it in, have fun, but it's still not a 1.0 version.

You can see I'm going for the same API, split, get, or none. This is my original spacing scheme that I just branched off of. But what I've recently done with this new Bedrock is I've adopted Open Props sizing schemes because it just didn't make sense. This is already out there. This is a really good spacing scheme that Adam Argyle has created. So let's not make yet another spacing scheme out there for people to use.

The idea is if you don't want to use the built-in one, you're probably going to overwrite it anyway. So it just made more sense to use the Open Props spacing scheme rather than create my own.

00:43:02 - Anthony Campolo

Can you bump up your font a couple more times?

00:43:04 - Travis Waith-Mair

And then.

00:43:05 - Anthony Campolo

And then also, what is the spacing scheme exactly? Intuitively I think I understand what you're saying, but can you kind of lay out that term?

00:43:14 - Travis Waith-Mair

So in any design system or style guide, you want to have a consistent spacing scheme where you're not just putting arbitrary values. You want to have the space between elements and the space inside of elements, your padding, all those different sizes. You want that to follow a pattern throughout your whole app.

That's what having a spacing scheme gives you. Instead of coming in and saying, "Well, I think this is about one rem, or maybe it's one and a half rem."

00:43:48 - Anthony Campolo

And these are the things where inconsistencies across a website, even people who don't know anything about design, they'll look at it and they won't be able to say what's wrong, but they'll be like, "This looks wrong." It'll feel janky and weird and they'll say, "This website just looks bad," but they won't know why exactly.

00:44:07 - Travis Waith-Mair

And so that's what having a spacing scheme gives you. It gives you a limitation which actually empowers you more because then you're like, "It's gotta be this. I need a large value and it's got to be bigger than three rems. So my only values are these ones."

You're not trying to go, "I think it looks about this, that looks right." You're like, "I'm going to put one rem... that doesn't look right." You can go to, "I'm using size three. Nope, that doesn't look right. We need to go to size four or five." And then you get to where it looks right and it's still consistent across your app.

00:44:55 - Anthony Campolo

Yeah. And so were you saying you're going to integrate Open Props specifically, or what is the relationship between Open Props and Bedrock Layout?

00:45:04 - Travis Waith-Mair

So Bedrock Layout will now depend on Open Props, which you can npm install. If we look up at the Get Started, they have a JSON of all their design tokens and it pulls in those design tokens. And then when you use Bedrock, those design tokens automatically work with the same names.

00:45:28 - Anthony Campolo

That's a really interesting way to package that. Cool. Yeah, Open Props is one of those things I hear about constantly. And I've seen Adam Argyle speak on podcasts a bunch. Very cool dude. But I haven't really got my hands on it, so I don't have a super strong mental model around it yet, but seems like it's...

00:45:47 - Travis Waith-Mair

One of those things.

00:45:48 - Anthony Campolo

People are hyped on it. I will say that.

00:45:51 - Travis Waith-Mair

And there's a lot of reasons why people like Tailwind and other things. One of the things that people like about Tailwind that makes it really popular is it's got a really good set of design tokens. A lot of good choices that limit you but make your website just look good automatically.

00:46:10 - Anthony Campolo

Yeah, and that's something I definitely felt once I finally did start using Tailwind for a couple projects. I liked that it kind of bounded things in a way where stuff like spacing was simpler and things like that. So it sounds like Open Props is an attempt to start bringing in some of those benefits.

00:46:27 - Travis Waith-Mair

Exactly. It allows you to bring in those benefits, but still, it's one lower level. I mean, it's what Ben just said. What did he just say?

00:46:35 - Anthony Campolo

He was saying, "You know how hard it is for me to get excited about CSS frameworks." So okay, Open Props is a CSS framework. I don't know if I've ever necessarily heard it called that.

00:46:45 - Travis Waith-Mair

For lack of better terms, it is. It's just a framework that limits itself to really just giving you tokens and then allows you to build your own framework on top of it. So is it a framework? What's the definition?

00:47:02 - Anthony Campolo

Sounds like it's at the very least a CSS library. Maybe not a full-blown framework, but it's a utility.

00:47:10 - Travis Waith-Mair

It's like...

00:47:11 - Anthony Campolo

Like Bedrock, it's a dependency you install into your project.

00:47:15 - Travis Waith-Mair

Exactly.

00:47:16 - Anthony Campolo

Yeah. Okay, that makes sense.

00:47:18 - Travis Waith-Mair

But chances are if you're working in any mature system, you're probably using your own spacing schemes or whatever anyway. And so the whole idea, and we can go into the Get Started, but this is where I get into it. I try to provide an easy way for you to override the default spacing scheme that is in Bedrock.

00:47:43 - Anthony Campolo

What I'd like to do with the time we have left is just spin up a project, get at least a single Bedrock component into it, and then just see where we can go from there.

00:47:55 - Travis Waith-Mair

So we can follow this introduction. Actually, let's just... the introduction kind of goes into more of the... okay.

00:48:03 - Anthony Campolo

So it looks like I need to open a PR and migrate you to Vite.

00:48:08 - Travis Waith-Mair

Yes, yes.

00:48:09 - Anthony Campolo

Which is fine because I was the first one who told you to actually put the Create React App part in there in the first place. I said you should have an end-to-end example, or you can just run some commands and that works. So I'll take the hit on having Create React App in here in the first place. It's on me. But now would be the time to migrate that sucker to Vite.

00:48:26 - Travis Waith-Mair

I think that's a good point. In fact, Bedrock is built using Vite. It's now its build library. The Storybook is using the Vite builder. I am 100%.

00:48:36 - Anthony Campolo

So that looks like from there you're going to add in two dependencies: Bedrock Layout CSS and Bedrock Layout Stack. Is each individual primitive its own dependency?

00:48:47 - Travis Waith-Mair

It is. All of the primitives can be individually installed, or you can install all of them at once using Bedrock Layout Primitives. But this allows you to really pare down. If you're only using three primitives, you only need to install three of them. You don't have to worry about the rest increasing your bundle size arbitrarily.

00:49:12 - Anthony Campolo

And that's because all this stuff is going to be client side. It's going to be stuff that's delivered to the user's devices. So if you're able to... and this is what I've heard about things like Lodash, that part of the problem with Lodash is it would give you maybe you use one or two utilities and then you get 20 along with it.

00:49:29 - Travis Waith-Mair

Exactly. And it's kind of good in the sense that if you're using a lot of them, then it starts making sense. But yeah, I wanted people to really pare down or use all of them if they wanted.

00:49:42 - Anthony Campolo

I think in this world also where we're getting back into heavier MPA usage, and you have frameworks now that are allowing multiple pages, you really want to think about what is needed for just this single page. What can I ship to that?

The single page app mindset of putting everything into a giant thing that gets shipped is a bad idea. We're able to do better now. So this feeds into that and fits very well with that kind of narrative.

00:50:09 - Travis Waith-Mair

Exactly. Let's make it easy for the bundler to chunk out your library and do all that.

And then yes, it depends on Bedrock Layout CSS as a peer dependency. I wanted to keep that as a peer dependency, separately installable. So if we fix a bug, you don't have to reinstall the entire thing. You can just get that peer dependency upgrade without having to worry about reinstalling or upgrading all of it.

And then the same thing, you can get all of the CSS for all of the components, or you can individually import them. If you just need the Stack or just the Center, you can bring those in.

00:50:56 - Anthony Campolo

Do you have a repo somewhere of something like this that would be clonable and instantly runnable?

00:51:01 - Travis Waith-Mair

There is a CodeSandbox that we can do.

00:51:06 - Anthony Campolo

So no.

00:51:08 - Travis Waith-Mair

No, I don't. And in fact...

00:51:10 - Anthony Campolo

That would be a good thing for me to contribute. For you to just have a single example that you could clone down and use, because in this exact situation that would be nice to have.

But this is good. Bump this up a couple times. Also, Ben is saying here he is on hiatus. He will be back soon. In the future. When? Don't know. You'll find out.

00:51:35 - Travis Waith-Mair

Sweet. Got it. How do I close this? So as you can see here, in this case I'm installing all the primitives just to make it look right. But let's pull this out and we'll follow what we were doing before with Bedrock Stack. We'll just make that a div for now.

In fact, we could just go through this Getting Started here. Let's do this. Let's just get rid of all this. What is Istanbul, not Constantinople? Why does it think we need that? Am I doing something? Oh, because I'm doing something else in some other page. Yeah, there we go.

00:53:13 - Anthony Campolo

Coco.

00:53:17 - Travis Waith-Mair

Coco LaBelle. This was whatever pulled up. What is it? Okay, so you're like, "Okay great, I'm not really seeing how this is doing anything."

00:53:34 - Anthony Campolo

So hold on. Let's pause. Explain what's happening here. Now we have a React component, right? Just a root App component, and you have a single Stack and you have a gutter set to size three. And then that just has a header with an H1 in it.

00:53:47 - Travis Waith-Mair

So right now we don't see anything. But if we were to add in a paragraph and go "hello," you can see there's already a space right there. And that's all dependent on this. So I could go size one or size zero.

00:54:09 - Anthony Campolo

Make the browser window a little bit bigger, or just make all of it bigger I guess. Yeah. All right, that's probably enough. And then just kind of zoom that over a bit.

00:54:20 - Travis Waith-Mair

Can I close that?

00:54:22 - Anthony Campolo

There we go. That looks great. Yeah, just close the file thing for a second.

00:54:27 - Travis Waith-Mair

There we go. Okay. So we can see this is automatically putting in a space between them.

00:54:37 - Anthony Campolo

So why is size zero zero not just size zero? What are the size ranges? Is it like 0 to 100?

00:54:47 - Travis Waith-Mair

That's all coming from...

00:54:50 - Anthony Campolo

Okay. So do you point back to these docs in your own docs, or do you document all that yourself?

00:54:56 - Travis Waith-Mair

I do document it all myself as well. There are places where it points back, for example in the spacing section.

00:55:05 - Anthony Campolo

Also for people in the chat, if you have questions while we're doing this, we're getting close to the hour. Do you have a hard stop at the hour, Travis?

00:55:11 - Travis Waith-Mair

I do not. So we can keep going.

00:55:14 - Anthony Campolo

Okay, cool. We'll keep going for a little bit then. People have questions, please feel free to ask them. We'll kind of just keep messing around and looking at different things and different components from here on out, I think.

00:55:24 - Travis Waith-Mair

But yeah, you can see I can throw in a whole bunch of things and they're all going to stack.

00:55:30 - Anthony Campolo

Mess around with that.

00:55:31 - Travis Waith-Mair

So size four.

00:55:34 - Anthony Campolo

Okay.

00:55:35 - Travis Waith-Mair

Nine. You can see.

00:55:36 - Anthony Campolo

So for me, when I look at this, I can think of a specific use case already on my blog. I have a homepage that displays my five most recent blog posts. Exactly like five hellos. Imagine those are blog posts with a title, a date, a description, and then the cover image for it. And it has that five times.

So I would be able to change that. And right now I'm using, I think, Tailwind because it was just a starter that I pulled out. And so I would just change the margin top to get those to do a similar thing.

00:56:12 - Travis Waith-Mair

So yeah, the idea of this kind of styling and layout is that it follows this principle that I follow. I like to call it encapsulated CSS, where the layout, meaning the position, the margin or gutters or gap, whatever you want to call that in between elements, and the size of the elements... these individual elements don't choose that themselves. The parent is the one who has that context of what all that spacing and layout is. And so that's where it needs to come from.

So you notice we're not coming in and putting margin on all these paragraphs. We're putting a Stack around them, and the Stack goes, "Okay, I now know what size gap should be between these elements."

00:57:03 - Anthony Campolo

So what's the reason to have a stack within a stack?

00:57:06 - Travis Waith-Mair

Oh, I was going to show you that you can have different gutters. So I can have size six in here. Yeah, I know how to write React. Size six. So you can see the first one has a bigger, different spacing.

00:57:25 - Anthony Campolo

So it's not just all hello, hello.

00:57:27 - Travis Waith-Mair

That's a good point.

00:57:28 - Anthony Campolo

The inside one's different.

00:57:29 - Travis Waith-Mair

Inside. Hello. Bob's your uncle. Yeah.

00:57:41 - Anthony Campolo

And so also, what is a gutter? [00:57:45] - Travis Waith-Mair So this is one of these things where it gets gutters and gaps and margins, and it gets kind of confusing.

00:57:51 - Anthony Campolo

Where do the terms come from?

00:57:54 - Travis Waith-Mair

I don't know, to be honest. I don't know where they came from. I've heard designers use different terms for different things. Some people say gutters are just...

00:58:02 - Anthony Campolo

You kind of name your own just from your own experience and the other things you've built and what you've seen in your own intuitive ideas of what's the best word for a certain thing.

00:58:11 - Travis Waith-Mair

Exactly. These are all just words my designers have said anyway. And honestly, the word gutter is a holdover from that original...

00:58:26 - Anthony Campolo

This I find interesting about design, though. It's a very emergent practice because you can't make a top-down system that defines all of this. It's impossible.

Everyone has built up their own combinations of different things that are important to them and their own ways of describing them. There are meta concepts that are shared across them, but everyone has their own way of explaining it. And no one ever creates a single system that explains all of it.

00:58:52 - Travis Waith-Mair

And there's a lot of it that gets left over. There are words that came from print media and they still exist. In some of the original CSS, you can see some of those properties are there because of print media.

00:59:13 - Anthony Campolo

Websites as a newspaper page or a magazine. We would port these older print mediums to a web page, and we would think about it the same way.

This is why a lot of semantic HTML, when I was at least taught semantic HTML in boot camps, they would talk about the article and how you would think of it like it's an article. That would be a way where you could make all the parts of the page semantic, because it's like a blog post.

00:59:39 - Travis Waith-Mair

Exactly.

00:59:40 - Anthony Campolo

But I was always like, if you're building one-off components, then those terms don't make any sense. It's a chunk of functionality contained within some sort of abstract idea that's decoupled from the idea of physical print medium at all.

And that's where you get this whole breakdown. You used to have good strong mental models around this stuff because it was just a page. Everyone's held a magazine before. Everyone's held a newspaper before.

01:00:11 - Travis Waith-Mair

And that's why...

01:00:13 - Anthony Campolo

Components is totally different.

01:00:15 - Travis Waith-Mair

Things are confusing for engineers, and it still comes in there. For example, flexbox on the main axis, when we talk about how it's going to go, we talk about justify content. Well, that comes from the term justification, which comes from typography, and that was on that main axis.

01:00:37 - Anthony Campolo

I never knew that. That's really interesting.

01:00:40 - Travis Waith-Mair

But personally, maybe this is just me, I would think of that as just main alignment or vertical alignment.

01:00:48 - Anthony Campolo

The term justified never made any sense to me.

01:00:52 - Travis Waith-Mair

And I think they've kind of moved away from it a little bit. Even with flexbox, it was still left over. As they keep adding more and more CSS, they're like, we really need to add something that makes sense for designers and developers because they're both using these terms.

So I think the best example of something that's pretty good is grid.

01:01:11 - Anthony Campolo

The grid is an idea that is very clear. Everyone's seen grids before. It conjures up an image in your mind that is probably similar for most people when they hear that word.

01:01:24 - Travis Waith-Mair

And I've debated it. It would be a breaking change switching gutter to gap because that's more the terminology used in CSS.

01:01:36 - Anthony Campolo

Yeah. So when I hear gap, that makes sense to me. When I hear gutter, I think house gutters. Water being drained from a gutter and I'm like, what?

01:01:42 - Travis Waith-Mair

Yeah.

01:01:47 - Travis Waith-Mair

And potentially, I guess you could support both, but then you have to create more. It just adds that extra layer.

01:01:53 - Anthony Campolo

Of padding that you're giving yourself headaches. Yeah. No, that makes a lot of sense.

01:01:58 - Travis Waith-Mair

And when I was doing the breaking change, I really debated whether to change that from gutter to gap. But I decided to keep it because I wanted to make it, even though it was technically breaking things, I wanted to still make it as easy as possible to transition. So maybe a future breaking change. I may switch this to gap.

01:02:17 - Anthony Campolo

Can we look at a couple components aside from the stack? What are some other things? If you were to give someone starting with Bedrock Layout, what are the first three things that someone should learn first? Aside from the stack, what are the next two things someone should learn?

01:02:31 - Travis Waith-Mair

I think a really good one is... Yeah, let's just go. We'll skip a couple lessons. We're going to build a hero. So you'll see.

01:02:44 - Anthony Campolo

So we're going to go on the hero's journey.

01:02:46 - Travis Waith-Mair

The hero's journey.

01:02:48 - Anthony Campolo

We're going to start from a point of ignorance. We'll go out and venture into the world. We will face a challenge. We will learn something, and we will return to our point of origin to share that knowledge. The hero's journey framework.

01:03:05 - Travis Waith-Mair

So I'm going to get rid of that, and we're going to need to install this inline component. Where is this? Oh, there we go. Bedrock Layout Inline.

01:03:23 - Anthony Campolo

So what is inline?

01:03:26 - Travis Waith-Mair

So inline, we can go over here. In a way, you can think of this as the horizontal stack. Some people, when they make layout components like this, they call it the stack or a horizontal stack. I prefer to call it inline. That fits more with what's actually happening under the hood as far as right-to-left and all that stuff. It's going to be inline.

01:03:55 - Anthony Campolo

But I mean, horizontal makes a lot more sense to me. Horizontal stack versus vertical stack.

01:04:01 - Travis Waith-Mair

But that's coming from the perspective of an English user who reads left to right.

01:04:10 - Anthony Campolo

Well, you're in English no matter what though. That has nothing to do with left to right. That has to do with horizontal versus vertical.

01:04:16 - Travis Waith-Mair

Well, no, I get it. But how do the words flow on a page? In a vertical or inline context, it's actually top to bottom and things stack, maybe right to left. So that's why.

01:04:33 - Anthony Campolo

You're using the term inline in terms of inline versus block on the web.

01:04:38 - Travis Waith-Mair

Exactly, yes. So that's why I prefer to use inline.

01:04:41 - Anthony Campolo

Then if you're using it within that context, I get where inline comes from there. Yeah, that makes sense.

01:04:47 - Travis Waith-Mair

So we're using inline because yeah, it's horizontal, but it's actually inline.

01:04:52 - Anthony Campolo

Yeah, it's more about that. It's not breaking the flow of an individual element. It's allowing elements to stack next to each other.

01:05:03 - Travis Waith-Mair

Yeah. And then we need to import. And that's the other thing. Part of this breaking change, I did this consistently: I use only named exports now. Let's get rid of some of these other things.

01:05:23 - Anthony Campolo

Why do you only use named exports?

01:05:24 - Travis Waith-Mair

It's a lot easier, I think. I feel it's better developer experience. Because if you need to go find where you're using your inline, you go search in your VS Code.

What if this was a default export? I could have called this anything and it would have worked. And VS Code is so helpful, this would have proliferated through the whole component and I would never even notice potentially.

With the default export, this just works. If you really want to have a different name, then just take advantage of "as inline," if that's really what you want to do. I know it's a little bit more verbose, but if you want to find all the uses of inline, you'll still find this.

01:06:17 - Anthony Campolo

Okay. Yeah, no, that makes a lot of sense.

01:06:23 - Travis Waith-Mair

And also it's nicer on my build tools. But if it was just for that, I wouldn't do it. I just feel this is a more consistent and easier developer experience. If you want to go find your uses, this will make sure you're doing the correct thing.

So we got to this point. Let's go back to that lesson. Let's build this hero component. Let's say we want to have multiple buttons here. You can see they're all going inline.

01:07:12 - Anthony Campolo

So you keep doing it, it's going to wrap around if you add a fourth one.

01:07:16 - Travis Waith-Mair

By default it will not. It'll actually keep going off the screen.

01:07:20 - Anthony Campolo

Oh wow.

01:07:21 - Travis Waith-Mair

Okay, so this is where the inline has... Well, it depends. This is where inline gets complicated because do I want it to always wrap around? How do I want to handle when I've got too many things?

01:07:41 - Anthony Campolo

Yeah. And that's a philosophical question of how you feel about wrap. I always turn on word wrap because I just don't like ever having to scroll to the right, but I'm sure there are people who disagree with that.

01:07:53 - Travis Waith-Mair

So there's a couple other things inline lets you do. You can also come in here and go, hey, I want this first one to stretch. And then we can go start.

You can see this first one stretching to take up available space. And then this other one is just taking up its regular amount. So that's the other thing that inline lets you do. But the other thing, you can go individual.

01:08:33 - Anthony Campolo

Each primitive has its own kind of API in terms of things you can pass it to modify it.

01:08:41 - Travis Waith-Mair

Exactly. So the idea is things inline are going to be... Maybe you want to stretch all of them. You want some things to take up different spaces.

And then there's a switchAt property which lets you go, hey, at a certain width, once this inline gets to a certain width, I want you to start stacking. Let me find a bigger one. Or let's make it a little bit more obvious. Okay.

01:09:25 - Anthony Campolo

You've just by default built up a fashion design website by the way.

01:09:32 - Travis Waith-Mair

I was just like, why not? Elegant, feminine.

01:09:35 - Anthony Campolo

I've never seen it before. It's unique.

01:09:37 - Travis Waith-Mair

And then you're like, hey, I still want my...

01:09:42 - Anthony Campolo

Responsive. It looks like.

01:09:44 - Travis Waith-Mair

Yeah. So that way you decide what type of responsiveness means. And this is where Bedrock also tries to go with intrinsic responsiveness. So you're not creating media queries, you're not trying to do that. You're basically trying to set hints and tell the browser, hey, when we get to this point, just kind of move into this responsive way.

So it's not really like, hey, at this minimum width, do everything. You're trying to say, hey, when the container gets to a certain width, start stacking or doing things like this.

Fit content. So you can see what this is doing. The inline, I'm saying hey, at 50 switch to a stacking layout. But I still want each item to at least fit their content.

[01:11:00] So the minimum item width means each item inside needs to at least have a minimum width that fits the content. And this could be anything. You can say I want it to be at least 100 pixels, or whatever. And then I want the first one to stretch, and then I want a gutter.

So with these little configs, you can see this first item stretching, this other one's fitting the content. And then when we get to a point where I've deemed it no longer makes sense to be inline, which is at the switchAt, it will automatically go to a stacking layout.

And the cool thing about this inline is all of that's done with just CSS. There's no JavaScript that made all that work. [01:11:51] - Anthony Campolo So is this the hero part or is there more to make it a hero? So heroic.

01:11:58 - Travis Waith-Mair

The part that we're going to do to make this heroic is we're going to use what's called a cover component. So bedrock layout cover. And I'll just do this inline. The idea is that it covers the whole view height by default. I know how to do my own library.

01:12:33 - Anthony Campolo

You need your at.

01:12:36 - Travis Waith-Mair

Yep, I do. Then I'll get the autocomplete. Okay, nice. And then instead of this stack, I'm going to make this a cover.

01:12:57 - Anthony Campolo

You got an error still, I think, on your...

01:12:58 - Travis Waith-Mair

Yeah. Cover.

01:13:03 - Anthony Campolo

You have an error on the dependency import. I think there's...

01:13:06 - Travis Waith-Mair

Oh yeah. Undefined.

01:13:10 - Anthony Campolo

Yeah. You clicked it but for some reason it didn't actually fill it in.

01:13:13 - Travis Waith-Mair

So you see what you...

01:13:15 - Anthony Campolo

Get on StackBlitz, brah?

01:13:17 - Travis Waith-Mair

I know, actually, that makes a lot of sense. So you can see it's still working, but you can see what it's done is this cover is taking up the entire view height and then it's vertically centering the content inside.

But sometimes you want a top section. So let's put that up there. I'm just going to put a paragraph tag for now. I know this isn't great. Ben's probably like, this is horrible semantic HTML.

01:13:54 - Anthony Campolo

So you're just straight up inlining HTML into this guy.

01:13:58 - Travis Waith-Mair

So this says, hey, this section should be on top.

01:14:02 - Anthony Campolo

Whoa.

01:14:03 - Travis Waith-Mair

And then you're like, well, if it's centered, what do I need this gutter for? Well, if you're vertical...

01:14:11 - Anthony Campolo

This is where stuff starts to wear me out though, because right now you're putting HTML into your CSS. And like, I can put my CSS in JS, that's fine. But putting my HTML into CSS? Something's gone horribly wrong here and I don't know what's happening anymore.

01:14:26 - Travis Waith-Mair

So technically this is not putting HTML in CSS. This is using React and under the hood it's injecting this above.

01:14:35 - Anthony Campolo

Yeah, I don't know. It makes me uncomfortable.

01:14:41 - Travis Waith-Mair

And then if you want to have a... I'm just going to go "hello." You can see it just through this text here. And then at the bottom, this gutter is forcing a gap in between this item and this item. And I can go size zero again. Anyway, you can see you can get an idea of what this is doing. Cool.

01:15:18 - Anthony Campolo

So this is the hero image then?

01:15:21 - Travis Waith-Mair

Yeah. Now, the thing about this is it's all divs all over the place. And I know Ben Meyers is cringing, but I can come in here and I can go as="main". And now it's using semantic HTML under the hood.

01:15:40 - Anthony Campolo

Yeah. So the as is what turns into the actual element.

01:15:45 - Travis Waith-Mair

Yeah. So I can come in here again and... this isn't a nav but whatever.

01:15:49 - Anthony Campolo

Interesting.

01:15:50 - Travis Waith-Mair

Okay, cool. If this really was my navigation, I can make this a nav. And that's the thing. There's no way for me, the developer who's made this library, to know what this inline is going to be, because in different contexts it's going to be different elements. So that's why each one of these components actually do this.

01:16:15 - Anthony Campolo

But that control over markup is good. Yeah, no, I agree. Giving those kind of escape hatches is really important because...

01:16:24 - Travis Waith-Mair

Otherwise you'd be doing annoying things like wrapping it in a nav or putting it inside. And then you always run into situations where it doesn't work the way you want.

01:16:36 - Anthony Campolo

Yeah. Great. Do you have any other final components you want to show, like a last one before we close it out?

01:16:45 - Travis Waith-Mair

I'm trying to think of a good example. Oh, here's a good example of composing. So this is vertically aligned, this cover label. But let's say, hey, I want to not just have this part vertically centered, I also want to horizontally center. So I'll bring this in here in just a moment.

01:17:13 - Anthony Campolo

So you're telling me I can center divs with Bedrock Layout?

01:17:18 - Travis Waith-Mair

You can, and you can do... In fact, I'll show you. Maybe we'll just show you this. There are some examples, and this is where I really need to build out as well. I'm trying to create some recipes and things like that. And one of the ones that already exists out there is this web.dev layout patterns. Yeah.

01:17:48 - Anthony Campolo

web.dev is a very great resource for a lot of things.

01:17:52 - Travis Waith-Mair

And so when this came out, I was like, I bet I can create most of these. And so I did. The one I don't like, this clamping card, doesn't exist. I'm open to suggestions. I don't have a primitive for clamping because you kind of need to live one level lower. And I haven't found a good API that really makes sense.

But there's a super centered where you're like, hey, I want to vertically center and horizontally center, and you can do that with Bedrock using cover and then center with center children.

01:18:35 - Anthony Campolo

Very cool.

01:18:36 - Travis Waith-Mair

But let's not have too many things open. Let's add that. Center. Center. Center. Oh, I guess it didn't install it properly.

01:19:10 - Anthony Campolo

Looks like I have an error again on your import.

01:19:13 - Travis Waith-Mair

I think it's because it hasn't installed it yet.

01:19:16 - Anthony Campolo

Oh, gotcha.

01:19:18 - Travis Waith-Mair

There we go. And then I can go and check what the center will do by itself. The default is that it will go...

01:19:29 - Anthony Campolo

Yeah. See that? That looks nice. Yeah.

01:19:32 - Travis Waith-Mair

So let's do this and I can go max width equals 20ch. You can see if I take this off by itself.

01:19:54 - Anthony Campolo

Sorry, what is ch?

01:19:56 - Travis Waith-Mair

ch is basically, for lack of better words, 20 characters of your font.

01:20:03 - Anthony Campolo

Okay, I see.

01:20:05 - Travis Waith-Mair

Technically, if you want to go into it, it's not exactly that, but basically what they do under the hood is it's a good proxy for a character. It stands for character.

01:20:19 - Anthony Campolo

Okay. Interesting.

01:20:20 - Travis Waith-Mair

So you're like, hey, this should be 20 characters. Or maybe we'll bump this to 30 characters, so it'll take up the entire width. But once you get to a certain width, it will max out there and it will center itself.

Yeah, I knew Ben would know the answer. Technically, the zero.

01:20:41 - Anthony Campolo

Zero character, the font. See, I don't even know what that means.

01:20:47 - Travis Waith-Mair

Zero is pretty much a good proxy for what a character width is, because sometimes you have your W's which are really wide, and then you have your I's which are really small. But if you average that out, zero is pretty much a good proxy for what the average character width would be in any font.

01:21:03 - Anthony Campolo

Oh, so you mean the width of a zero? Like a zero printed on screen?

01:21:07 - Travis Waith-Mair

The actual technical pixel width of the zero character.

01:21:10 - Anthony Campolo

So that is used as a unit of measurement.

01:21:14 - Travis Waith-Mair

Yeah. So basically that width right there is a unit of measurement. And it's really good, especially when you're thinking about content. Does 40 pixels or 60 pixels make sense? What makes more sense?

Now that we have these character units, it really makes sense. So you can say, I really don't want this wider than 40 characters. Whatever that happens to be in your font, I don't want it to be wider. If you have a really small font, it adjusts accordingly.

01:21:46 - Anthony Campolo

Okay. So there's different proxies that people use to define widths.

01:21:52 - Travis Waith-Mair

Yeah. And these are all part of the CSS spec.

01:21:57 - Anthony Campolo

Very cool. Great. Okay.

01:21:58 - Travis Waith-Mair

So you can do this. And if you want to center the children, I also put in here center text, because this is one of the few times that you might actually want centered text. So it just made sense to have that as an option.

I used to keep that separate, but it just happened so often that I decided to bump this to a first class citizen on the center component. That's one of the few times that centering your text actually makes sense, when you're doing the centered thing on a hero. Anyway.

01:22:30 - Anthony Campolo

Cool. Awesome. So we're going to close it out here in a bit, but I was just kind of curious what the future of Bedrock Layout looks like and some things you're thinking about right now. Sounds like you said there's a 1.0 possibly coming up, so yeah, we'll hear more about that.

01:22:47 - Travis Waith-Mair

So I want to get Solid Bedrock to a 1.0. The other things I want to do, as you can see here, I've got this locale switcher. Somebody came in and gave me a really cool PR and translated the landing page.

01:23:06 - Anthony Campolo

Page.

01:23:07 - Travis Waith-Mair

In Espanol. Yeah, exactly.

01:23:10 - Anthony Campolo

In California.

01:23:11 - Travis Waith-Mair

Exactly. And it was great. And I got a little bit of help getting some of the contributing page in Spanish.

01:23:19 - Anthony Campolo

Awesome. This is very cool.

01:23:21 - Travis Waith-Mair

One thing I'm working on, I finally kind of got it down, is I want to make it a lot easier for people to contribute and translate this page. So I've got the foundation. I just now need to start adding it to the doc site to make it easy for people to come in and just go straight to the translations and fix them and go, "Yep, this sucks, and this is a better way," and do a PR for it, maybe without having to clone the repo. They can just go straight into GitHub and make an edit and update it.

So I want to do that. I want to get more and more of these pages translated. And the other really big thing is I really want to create more of these examples, create a lot more recipes, really show how this works. And I think what you're saying, Anthony, like get an official repo that people can bring down, just provide as many more examples so people can see how it works.

01:24:19 - Anthony Campolo

Yeah. What I tend to do is I like having example repos and they can connect to documentation somewhere. But I find just having something someone can easily clone down, run a command to install dependencies, run a command to start it up, and then bam, you got it. Then you can start playing with it, editing it, doing whatever you want. That's a really great way to just get started with any tool, I find.

01:24:43 - Travis Waith-Mair

And apparently I need to get rid of Create React App and move to Vite. [01:24:47] - Anthony Campolo Yeah, and get whatever is happening with your Storybook maybe figured out. Is the Solid thing going to replace the current docs? Is that the plan?

01:25:00 - Travis Waith-Mair

As of right now, the Solid one is just for Solid because I need a Solid application to make all those components work. Storybook, I'm still really tied to it. It made it really easy to do this big breaking change, because I can make sure that the regressions didn't happen as I moved away from the styled components into the Bedrock CSS.

It's still really tied to it, but I really... [01:25:28] - Anthony Campolo Saw that you're getting benefits from it.

01:25:30 - Travis Waith-Mair

Yeah, it does. The negative side is it's kind of hard to add things to the doc side outside of what Storybook supports, as well as the doc feed on my own.

01:25:45 - Anthony Campolo

By the way, for listeners, the next episode coming up is going to be fantastic. Talking about Storybook. If people want to know more about Storybook and Chromatic, that's on deck.

01:25:55 - Travis Waith-Mair

If I was a group of maintainers, like React, and people pay me to do this, I would still keep Storybook, but I would do Eleventy or something, Astro or something, to build my doc site separately.

01:26:09 - Anthony Campolo

It seems like a bit of a weird fit for a doc site.

01:26:13 - Travis Waith-Mair

It worked for me because I'm, as of right now, the only maintainer.

01:26:19 - Anthony Campolo

Starting to head out. See, everybody, we're closing it out. Thank you so much for being here. Really appreciate all y'all.

01:26:25 - Travis Waith-Mair

So that was a long-winded way to say everybody keep helping me, start contributing. Tell me things suck and I'll put your picture on here. This is how Anthony got on here. He told me my site sucked.

01:26:37 - Anthony Campolo

I didn't say it sucks. I said it could use an end-to-end example is what I said.

01:26:42 - Travis Waith-Mair

"It could use some things that made it better" is what he said. But he basically was like, "Your site sucks."

01:26:49 - Anthony Campolo

Awesome, man. Well, thank you so much for this. It's been a super great episode. I'm going to have to go back and rewatch this one, because there's a lot of stuff in here.

I'm very curious to actually possibly integrate Bedrock Layout into one of my projects going forward because I like this idea. I like it as a mental model. I like having these kind of on-hand, easy-to-use type components that make my website look a bit more professional.

Because I am not a CSS wizard. I am quite terrible at CSS in many ways. So I think I'm one of the target audiences of this. And I very much appreciate people like you building stuff that can help me ship things that look a little less bad.

01:27:30 - Travis Waith-Mair

No worries. On a future stream, we could do it together, if that's what you want.

01:27:34 - Anthony Campolo

Yeah, totally. This is great, man. Thank you so much. I think we'll call it here.

01:27:40 - Travis Waith-Mair

Sounds good.

01:27:41 - Anthony Campolo

All right. Thank you, everyone. We'll be back next week with something. Find out soon.