Transcript

00:04 Okay. How's it going everybody?
00:14 Okay. Um, having some issues with the chat, but I can load it in the browser,
00:20 but man, their app isn't isn't wanting to log me in. The heck
00:28 kind of sucks.
00:52 Uh, there we go. At least I have the chat open on the browser. Okay, sweet. How's
01:00 uh audio and visuals all all good everybody?
01:16 All sounds okay. Okay, sweet. Uh yeah, it's been a while since I've uh
01:23 since I've streamed this way, so just want to make sure all the all the cobwebs are uh are all good. Okay. Um
01:31 let's get cooking. I I kind of miss having the the chat app. That was nice,
01:36 but it's not working, so not much I could do about that. Okay.
01:45 So, if you saw or not, um I posted on the community. Um I haven't sent out the announcement email. I asked you that's
01:51 going to go out tomorrow. Um and probably this afternoon, uh I will I'll record a short a short video. I mean,
01:58 you're all watching this now, so you probably won't need to watch that video, but um we'll record the the quick little
02:03 here's what Columnist is video and whatnot. But um yeah, so Columnist 3 is
02:09 out. Pretty cool. Um, Columnist is uh one of my older stacks. Um, it's been
02:15 around for a long, long time. Um, actually, I'm just curious. Let's see. When did Columnist version one ship?
02:22 That's, uh, let's have a look in the, uh, everyone have a guess. Hey, everyone
02:28 have a guess in the chat right now while I look this up. What year? And guess a
02:35 month, too. Like, when was Columnist released? Let's see who gets closest.
02:41 Maybe it'll Maybe it'll give a prize. We'll see. All right, let's uh I got to look up. Oh, I decommissioned it. Let me
02:47 go to my decommission folder. Everyone look in the chat. I'm going to
02:53 I'm going to check in the chat. I'm almost there.
03:05 We got Where is Where is it? There it is.
03:20 Oh. Oh, man. Wolf wins.
03:26 Good job, Matias.
03:32 2014, man. 12 years ago got shipped.
03:39 Did you Did you cheat, Matias? You He probably like, I got I got all my receipts. Let me just search my email.
03:47 October. He even knows the date. Yep. October 2014. Good job. Either that or
03:53 or he went to the product page and look at the release notes. It's okay. Good job, Matias.
04:00 Okay. Um yeah, let's let's let's jump into the uh web page. Let me get go ahead and share my screen.
04:08 Okay, here we go. And oh, I am I need to open up a new
04:14 browser window because I have new window
04:20 work. There we go. All right. Um, if you weren't at the hangout on Friday, hey,
04:27 small little tangent everybody. I'm I'm using a new web browser. As you probably
04:32 know, I I used Arc for a long time and cuz I loved the sidebar, okay, the the
04:38 the way they did tabs and um it got sold off and kind of abandoned and the
04:45 company that created Arc created a new browser called GIA. Um and initially it
04:51 didn't have any of the features of Arc and I think the backslash um from from their users was hey um we need all these
04:58 features from Arc. So they at least they now have I'm using GIA. Uh it's DIA. Um
05:05 and uh yeah, they've added um their kind of the bookmarking system almost. It's
05:10 almost like the bookmarking system in Arc. It's close enough that I'm happy now. Um
05:17 yeah, I'm pretty happy with with with GIA. Um I'm glad that I can I'm actually
05:22 using a supported browser now. Arc was starting to get a little buggy and it was bugging me. So, I'm glad that I'm on
05:29 a uh a browser that's actually supported now. So, um it's called GIA. Um again,
05:35 DIA and uh that's what I'm using. Um maybe uh I've only been using it since I
05:41 think Friday. Okay, so less than a week. Um I've been on it. Um there's some
05:47 quirkiness. Um but yeah, um it's it's just getting used to some things, right?
05:53 So, let's go ahead and um let's head over to Columnist. It has like a built-in chat thing, but I don't know. I
05:59 I don't pay for the browser's built-in chat because I already pay for Claude and Open AI. And so, yeah, I'm not I'm
06:05 not paying for um the browsers uh thingab bobber. So, anyway, let's do um
06:12 all right, let's do wags columnist.
06:19 And yes, as Chris said in the chat, yeah, um it's G has come a long ways since its initial launch. So, it is
06:26 nice. One thing that that drives me nuts is I tend to want to move my my um
06:31 windows from the top and like the entire top now is like the URL bar and I always
06:36 click it and it opens up the URL bar and it's like no, I just wanted to move my window. You know, you can get the little
06:42 sliver up there, but I always a lot of times I always click over there. So, I'm trying to get in the habit of clicking.
06:48 If I want to move my window, you can move it very easily from grabbing anything over here. So, um, yeah, if you
06:55 do use GIA, I'm trying to train myself to move the window here instead of going up to the top. Um, cuz sometimes it
07:01 works in the top. It's just a lot of times I'll accidentally click in the URL bar and drives me nuts. So, anyway,
07:08 that's my my my biggest annoyance with it so far. Um, okay. But more
07:14 importantly, let's look at Columnist. If you're not familiar with Columnist,
07:19 um, it is a text layout tool. Okay. Um, and uh, yeah, the product page, it's now
07:25 green. It was like a a maroon before, but here we go. Now it's it's got new and green. Okay. Uh, let's go down into
07:33 the demo here. And this demo is kind of like um it's kind of like the kitchen sink demo, right? I I created, you know,
07:41 a very large a lot of various um, features into here. I crammed them all
07:48 into one little space. Okay? Okay. So, you're probably not going to use all these features in such a small little
07:53 space, but we'll kind of go through them and then we'll dive in to see um how to actually use it and work with it.
08:01 So, here's just a quick rundown. Here I have an eight. Now, this I have to say this entire text area right here is all
08:07 done with one markdown area. Okay. Um and yeah, so this H1 kind of goes full
08:14 width. It breaks outside of the um the columns here. But then the H2 right here
08:19 does. And then we have some nice little drop caps. Okay. And with OB, as you see, I should note one thing that's
08:26 different about columnist is that the way the text flows is um up
08:36 and down, right? So this one, it's going to go here and then it's going to continue reading over here and then it's
08:41 going to continue reading there and then it continues down here. Okay? So it does
08:46 read. Now it these this particular area this is a block quote that breaks the columns. So
08:52 it kind of goes that way, right? So um one way you you can also break columns multiple ways either with a header, this
09:00 is a block quote. Okay. Um this is a little fancy divider. Okay. So there's
09:06 many different ways to kind of break up your columns um to make them smaller.
09:12 Um there is a just a little sidebar. Um there is a new experimental feature in
09:17 browsers where um you can actually define the maximum height of a column
09:23 but no browser actually supports it yet. So um I didn't add that feature in. Um I
09:30 will keep my eye on uh browser how browsers implement that feature and I
09:36 will implement it once it's supported by browsers or if at least once it's supported by at least one browser um
09:42 fully then I'll add it because it'll be sort of a an enhancement. So um you can add it and if browser supports it it'll
09:49 just work. If the browser doesn't support it you'll get the current behavior. Okay. So, um hopefully I think
09:55 um Chrome should have it this year and um I don't know where it is on Safari's
10:01 road map. Um but I I know it is a an experimental flag in Chrome right now.
10:07 Um so yeah, hopefully one day we'll get that feature. Um which I think will be it'll be very nice, right? But anyway,
10:14 let's talk about what features we do have. Sorry. Um, so yeah, we have nice little we can uh break things up with
10:20 the divider and um there's other things. Oh, let let me go back to the other things. So, um, here's just like what an
10:27 inline code little thing would be. So, you can see this this word's a little accented. As I said here, this is a
10:33 block quote. And there's different styles for block quotes and all this stuff. And we'll play with them live.
10:38 Okay. Um, as you see here is a heading that is inline. It doesn't break. Okay.
10:44 Um, this is a divider. Um there's different styles for dividers as well. Um this is kind of a like an I
10:50 think this called ornament. Okay. Um and here's just a little code box. Okay. And
10:56 then here's a bunch of inline code um examples where it just kind of has inlined um accented words. Okay. Um so
11:05 yeah, uh there's a lot of really nice features here. Um, imagine using this
11:10 for, you know, blog posts or a really nice way of reading, you know, a long
11:16 piece of article, right? Because our eyes tend to read better on short lines
11:22 of text rather than super long wide text, right? So, this is a a really nice
11:27 way to to display and consume text. Um, also just talk it does work out of
11:34 the box with Total CMS as well. We'll dive into that. Now there there is another stack in the
11:42 mix and this called columnist grid. Okay. And you might think why do we need
11:49 another grid stack? Well, this one behaves a little bit differently in that
11:54 the order of the content goes from top to bottom. So it flows the flow of the
11:59 columns. So when you order your items out here, again, just like the text columns, it goes from top to bottom and
12:05 then it goes to the next row and then it goes to the next row. Okay? So
12:12 that's how this behaves pretty much uh you know slightly differently than other things where other grids tend to go from
12:18 left to right. So the way again the way the content is oriented it will go top
12:23 to bottom. Okay. Now, what's interesting about that is that
12:29 this can give us a slight masonry style layout, okay? Because um the height of
12:37 the the items isn't dependent on the things in the other rows, right? So, um
12:44 unfortunately, I I ch this particular demo, all the the variable height ones
12:49 are in Oh, let's here. Let's shrink it down a little bit. Let's see what happens here. Let's go down. Oh, did I
12:57 not make that ever go to two columns? Oh, here we go. Okay. So, as you see here, this gives us a kind of a a um a
13:05 masonry style layout um with this grid.
13:10 Now, what's nice is this is 100% um CSS. There's no JavaScript. Now, as you if
13:18 you're familiar with my Bento stack, there is a Bentomasonry stack. Now, that has a lot of really amazing features,
13:25 but all the magic for that happens with JavaScript. Okay, because um yeah,
13:31 native Mason like true masonry layouts aren't supported with CSS yet. There's
13:37 another thing actually browsers are working on hopefully by the end of 2026 actually all brows all newest browsers
13:43 will support it. Hopefully, fingers crossed. Okay, that'd be really nice. Um, but for now, if you want a true
13:49 masonry layout, you need to use JavaScript. So, this gives us this gets us really close to to what a true
13:56 masonry layout is. And it is pure CSS, so it's super lightweight. Um, and
14:01 pretty cool. So, yeah. Um, just another grid for you guys to play around with. And, uh, hopefully, yeah, you like that.
14:08 Um, there, as you see here, there are some nice hover effects that I added, um, to the stacks. Okay. And then
14:15 um this demo here is also using columnist but really um there as we if
14:20 we look at the stack the stack has actually a lot of settings and I I'll I'll chat about that but um there's a
14:26 lot of secret hidden settings now. Okay. Um so for there's a lot of these like
14:31 these little effects and I don't have controls for every single itty bitty
14:37 thing inside these effects and whatnot. Um but there there are little there's
14:42 easy way with a little bit of CSS or some swatches that you can actually um target those. So um yeah, we could
14:49 probably dive into some of that today. Um talking about how you can use these secret settings. Okay. Um so these are I
14:57 believe uh everything that you're seeing here should be the default settings. Okay. For example, here's a simple
15:04 example here is um as we saw above here, this little ornament in this uh divider.
15:11 Okay. Um it's the ornament setting is hardcoded to this. Okay. But you can customize that. It's just a character,
15:17 right? So you could just say columnist HR content and then you can put in your glyph or your uh font ID in there. Okay?
15:25 And whatever you want that to to be. Okay? Okay. So, if you wanted that to be um a heart or uh whatever you want, an
15:33 emoji maybe, right? You could put you could plop the emoji inside of that this little CSS variable. We'll play with
15:39 that a little bit later. But, um yeah, um those are some secret settings um
15:44 that we can access. Um this new idea that I haven't done before, or I haven't
15:51 promoted before, I should say. Um a lot of my stacks do have these little secret settings, but uh I don't necessarily
15:56 promote them. So, um, this is the first time I've kind of made it a thing. Um, it'll be interesting to see how you guys
16:03 like that. So, let me know. Um, if you guys think that's really cool, um, an interesting way to kind of maybe take
16:09 stacks to a slightly different level. Um, it allows me to simplify the stack a
16:15 little bit while not having, you know, I don't know, here's probably 20 different settings, right, that that would be
16:21 inside the stack again. So, it makes the stack a little bit less um, confusing.
16:26 And for those that really need those fine grain controls, there's some secret settings for you. Okay. Um,
16:35 all right. Let's dive into the stack. Um, let's go ahead and let's open up uh this is the demo
16:42 project that comes with um the project.
16:47 Okay. And uh we'll leave that. Close it. It's fine. All right. So, this
16:54 is the demo project. and it it is the demo that you ju we were just looking at.
17:00 Now I I will add while you can make tweaks um inside
17:05 obviously inside edit mode um if you notice here um this is the the
17:12 same content right here's the markdown that we had. Okay. Um edit mode it edit
17:18 mode this some pretty advanced CSS going on for especially for some of the fixes that I had to do. And um Matias here um
17:26 everyone thank him. He he definitely um helped me find some weird odd issues
17:32 like this little hanging like the text from this line shows up up here. Um I
17:39 fixed that on the on the published page and it works in all browsers. Um but
17:44 inside edit mode um my fix was had a little bit advanced CSS that edit mode
17:50 didn't support yet. So, um yeah, edit mode edit mode CSS for some of the fixes
17:56 that I had to implement. Um use some use some very crazy um CSS properties that I
18:02 don't really use that much and I've actually learned quite a bit about these little edge case issues for uh rendering
18:09 things. Um yeah, it's very interesting. So anyway, edit mode has a little bit of
18:14 um weirdness going on, but as you see if I preview um yeah doesn't have that.
18:21 Okay. Um this is uh yeah this and the demo file it uses uh it uses a default
18:28 theme just to show you it will work in anything not just foundation. Okay.
18:38 Um, okay. So, let's look at the settings here. Okay. Um, I have to say like
18:45 I'm I'm a little conflicted. This this stack, if you notice stacks that I've been releasing in the past few years,
18:51 right, I I like to keep the settings like as small and minimal as possible, just what you need. Okay. But
18:57 unfortunately, like with columnist, um, columnist contains a bunch of text,
19:03 right? So, you throw in a bunch of text in it and we kind of need controls to control all of that text and um yeah, so
19:11 I I went for uh it has a a lot more settings than some of my stacks normally
19:16 do um in the past few years, but um yeah, I think they're all necessary. And just imagine if I had settings for all
19:23 those extra secret settings, right? It'd be this would be a very crazy stack. Um
19:29 it'd have a lot of settings. So, but let's go through it. Okay. Um,
19:34 so by default when you add columnness to the page, it is a markdown area. Okay? And you can add markdown into here. And
19:41 we'll review this markdown. Okay? Uh, in a little bit, but right now I just want to give you a tour of the settings,
19:47 okay? Um, so right now the default is markdown. You can also support it
19:53 supports total CMS. So if you go to the CMS, you can then put in your macro.
19:58 Okay? Um, your macro for whatever. And if you've ever used total CMS, I'm sure
20:04 you guys have ran into if you try to use macros inside of a markdown area, a lot
20:09 of times it just doesn't work. Okay. Um the markdown parser conflicts with the
20:14 macro syntax. And um yeah, so just to not have any of those issues, we just
20:20 have this um uh the CMS option. You could just plop in your um your CMS
20:26 macro in there and uh you're off to the races. Okay. Now there is also a stacks
20:33 drop zone. Okay. Now um I don't recommend. Okay. Now what some
20:40 people were have done um is you know they're like oh I'm oh this is a drop zone. I'm just going to add text into
20:46 there. Adding a text stack into here um actually won't
20:52 it'll it'll almost look like it should work. Okay. But if you preview this page, a lot of stuff isn't going to work
20:59 properly. Okay. Um so yeah, this the reason I added this was
21:06 primarily of well what if someone wanted to use like a total CMS um stack instead
21:12 of the macro, right? So that you can go into where's my content? Let's say I wanted to add in style text, right? So
21:20 that this will work great. Okay. Um, and but yeah, um, I'd recommend if you just
21:27 want text, okay, um, you know, use the mark the built-in markdown, okay?
21:33 Everything will work better. It's well tested. Um, and there's, again, all those little stylistic um, or rendering
21:40 issues across browsers. Um, works great here. It will also work if you use the CMS macro and if you use the stacks, but
21:48 you just place in, again, I designed it so you can add in your total CMS stacks as well. It'll also work with things
21:54 like if you wanted to add um it's edge case things. I I yeah, very
22:01 edge casy stuff. Like if I wanted to add in uh where's my where's my text? Where's my header stack? Header. Like if
22:07 I added header in there, that will work. It'll work 100%. Actually, that work does work. Um, but the tech stack won't.
22:13 Okay. So, anyway, um, I'd stay away from the stacks thing and you know, the one
22:19 use case I think is if you're chucking in total CMS style text stack or whatever works great. Okay. But, um,
22:27 yeah, unless you understand the underpinnings, I would use either markdown or CMS. Okay. Just saying. All
22:34 right. Um, let's talk about how this column sizing
22:40 works. Okay. So as you see here as I just uh you know change the width of
22:45 edit mode it goes from um from two columns and it a I have more space so it
22:51 goes to three columns. So here um what you do is you define the
22:58 maximum number of columns that you want. So in this case three if you wanted you can go more. Okay. Um and
23:06 then here you define the minimum width that each column should be.
23:12 So um once it can fit uh so at this point once it fits let's say if I made
23:18 this here let's do the math easy. If I made this 250, okay, once uh the browser
23:23 is 500 pixels wide or that space is 500 pixels wide, it'll then increase to
23:28 three columns, right? Or I'm sorry, it'll increase to two columns, right? Because it can fit 250* 2. And if I if I
23:36 set this to 250 and then once the width is set to 750, the brow the stack says,
23:42 hey, you know what? I'm at 750 wide. That means I can fit three columns now.
23:48 Okay. So it it is it's a way of doing responsive design without having to set
23:53 individual break points. However, okay, um I know there are maybe
24:00 some use cases where you really want to make sure that at there you change the maximum number of columns based on the
24:06 break point. So if you click on this little plus button here, you can then you can then define the maximum columns
24:13 for small, medium, and large. Okay. Um, so I'd recommend sticking with this. I
24:20 think this is probably the better way to do it, but there could be some edge cases where you might need more granular
24:27 control, and we do have that. Okay. Um, I think web design, I'll be honest,
24:33 going forward, a a lot of stuff is going to be um like this where we're basing
24:40 things based on the content side size and then morphing the content based on
24:45 that rather than the device screen size. Okay. So, yeah, as web, you know, there
24:52 still will be breakpoints there. Breakpoints are useful, but I think um you know the move is the web is kind of
24:58 moving towards a way of not having to rely on breakpoints for everything. And
25:03 this is a perfect example of that where um the number of columns is fluid based
25:08 on the the parameters we define on the size of the content, the the minimum size of the content. Okay, so there we
25:14 go. Obviously, the column gap is going to be the gap between the columns. Okay.
25:20 Um I think maybe for the rest of these we should probably Um,
25:26 I'm going to skip the behavior and the and the headings for right now. Maybe. Yeah.
25:33 Okay. I we'll kind of I guess we'll kind of go through those. Um so
25:40 behavior this is how um the column behavior how they break like how the
25:46 browser decides um what columns or you know how many
25:51 columns to define and where does this does this text belong in this column or this column right um and so one thing is
26:00 column fill okay and balance is the default value here because it's going to
26:06 try to um make the content even. Okay, but we could set this to be auto. And
26:11 actually, you know, I'm going to move to um preview just so because preview tends to work a little bit nicer. So, I'm
26:17 going to move this to balance and let's see how that changes. Uh I'm not sure that actually changed
26:23 much in this particular layout. It didn't in this particular layout. Um
26:33 there are there are going to be some most of the time you're going to want balance, okay? But sometimes you want you want to let the browser um you know
26:41 choose for you. Um so I would say you know throw out an example um preview
26:47 your content. Okay. And then kind of play around with these settings to get it kind of how you want your text to
26:53 flow. Okay. Um break inside this. What
26:58 this says is let's say for example I'm going to do auto here and
27:06 if we of course this example here doesn't have that let's let's just
27:12 peruse see how this breaks
27:23 trying to get all this I don't think that's ever going to happen. Um, or I'm going to make
27:33 I'm going to make this heading super long just as an example. Okay. I'm going
27:38 to go ahead and I'm going to edit this. Okay. Just to show you um what this
27:43 does. All right. So, now I've made that really long. Okay. Let's preview that. Now, if
27:51 we shrink this down. Okay. Um, oh, of course it goes all the
27:56 way down to one column. Darn it. Okay. Um, here. Let's Let's make it even
28:02 longer.
28:09 I should actually a bullet list would probably be a good example. All right. So, as we shrink this, it
28:16 should The browser is not letting it do it. There are there are cases okay where um
28:25 break inside means can this one element aka a header can it span
28:32 between basically make it so part of the content is in this column and the other part is in this column do I want to
28:39 allow that to happen okay most of the time you want to avoid that okay so do
28:46 you know because a lot of times you don't want this header or maybe it's a bullet list or maybe it's a block quote.
28:52 Okay, do you don't want that to to break between columns and you want to avoid that. Do you want to break inside of
28:59 that? Now, the only thing that that is allowed to be broken inside all the time is a paragraph because you want your
29:06 paragraph content to be flowed across your columns. Okay, so break inside
29:11 says, "Hey browser, are you am I going to allow you to basically sever this header in half in order to um you know
29:20 make it go across multiple columns. Okay, so that's what that is. By default, this is avoid because most of
29:25 the time you you don't want your headers or things of that nature to break across columns. Okay. Um but I I couldn't
29:34 replicate it right now, but I have made it happen. Um, and yeah, so that I think is a good thing to do. Okay. Um, let's
29:41 go ahead and uh fix this header.
29:48 All right. Oops. I'm in the wrong setting. Let's
29:54 click on that. Okay. Um, next up is orphans and widows. Okay. Now, this is
30:00 interesting. If we look at Okay. If you see here, okay, I have three um three
30:06 lines of text here. Okay. And um I'm going to reduce this down to two.
30:12 Uh based on shrink,
30:21 I will make it larger. So right now this is three lines. I'm going to if I set
30:26 this to be four. Okay. Okay, if you notice now this has four lines here. So
30:33 basically what an orphan says is hey if you're going to split content across two columns okay how how much is the minimum
30:42 that I should have at the beginning okay and so that is what orphan is and
30:51 then widow is how many lines I should have at the end okay so um if I were to
30:58 set this let's say let's set widow to be four as well And let's kind of go around.
31:07 Let's shrink orphan to two.
31:12 Okay. So, in this setup here, um, the browser obviously some of this text does
31:19 fit here. Okay. But I set widows to be four. So, it made sure that there's one,
31:24 two, three, four lines available. Okay. So um so yeah these are very granular
31:31 rules. Okay I know some of you are who are like text um you like
31:41 very I can't think of a uh nitpicky. Okay. Um and yeah you're just like I
31:48 need it every little bit perfect. how is this going to break when I do this and do you know for those people that want
31:54 all that extra granular rules you're going to love these things or it's going to make you go baddy because you're
32:00 going to play with it and and get it what you think and then you find another width and you're like oh in this
32:05 situation it's different it doesn't work exactly right so you're going to have to come up with some rules for yourself
32:10 okay um so anyway we have next up we have uh some stuff for headings and this
32:16 is how headings will um will react react. So, for example, here um this
32:23 heading here. Okay, I'm going to set this to be break. By default, these are set to auto all the time, right? And
32:29 let's go ahead and Okay, so as you see here, um at this width,
32:36 this header is on this line. But, you know, in this case, I I think it doesn't
32:42 really make sense to have a header and then have the content for that section on the next column, right? Um so if I
32:48 set break after and again these settings here are only for headings. Right. I
32:54 want to avoid breaking after. Um right. So now
33:02 Oh wait
33:08 let's refresh.
33:16 Um, still does it there. Maybe it's uh or if we avoid that. Oh, there we go.
33:22 Sorry, it was break before avoid. Okay, so yeah. So, these rules will allow you
33:28 to to define whether or not um you can break a header before or after so that
33:34 it kind of stays with its content. Okay. Uh the next setting here is span
33:41 headings. Okay. And right now it's set to H1. So any H1 that I have in here um
33:47 it will make it go full width. Now I can say let's go if I did H1 to H3
33:54 that will completely change the layout because now this is an H3 and it broke the layout. This one is an H4 so it
34:01 remains in line. This is an H1 and an H2 so those go full width. They're not a
34:07 part of the column. Right? So we have a lot of really interesting rules to kind of break out and you know um define kind
34:15 of new columns, right? Um and then if you want there's also all headings. So all headings will break, right? Um so
34:23 yeah, I thought that was kind of an interesting way to do it where you can have either H1's H1 and H2 and then H1
34:29 through H3 or all headings. Okay. Um so yeah, pretty pretty interesting uh
34:35 functionality there. So you can kind of naturally break your layouts with headings.
34:42 Um really really simple some typography settings. So obviously we have alignment, how do you want your text
34:48 wrap to look? And then hyphenation. Okay. Now normally I I don't like
34:54 justifying text. Okay. However, inside a column layout, I think justifying text
35:01 could actually be a nice thing. Well, maybe not for headers. Interesting. You know, I hadn't even tested that. Maybe I
35:08 should have some settings that only justify paragraphs. H, interesting. Um,
35:15 I hadn't I hadn't looked at that before. So, yeah, I should probably add something so that uh headers don't get
35:20 justified and maybe only paragraphs. So, um, that's something I can add. Um, but yeah, so justification, I I do think the
35:27 way that text flows, um, it does work. Normally I don't like justification, but
35:33 in a column layout I think it works pretty well. And then uh hyphenation, whether or not you want a manual
35:39 hyphenation or no hyphenation at all or auto. Okay, so that's hyphenated words.
35:48 Um, okay. Next up is um some editorial styles. Let me let me pop that back up
35:54 to auto.
36:07 Okay. Um, so editorial styles, these are um various things that we can do such as
36:13 um this is for block quotes. So as you see this is a block quote. Let's set it to none for now. And what you'll see
36:20 there is this block quote now is apparently I have block quotes styled very boldly in the in this theme.
36:28 Um, and so that's set to none. It's basically just a part of the text. If we
36:33 set this to be in line, um, it actually will then, um, apply some extra styles.
36:38 As you see, it has a little extra border there. Okay. And then we also have then pull. And pull will basically make it
36:45 full width. Pretty nice. And then it adds dividers at the top and the bottom. Okay. Drop
36:52 cap. Um, obviously that is um by default your text is just going to be like that.
36:57 Okay. But if you set to be drop cap simple, it'll use it'll use the same
37:03 font as the um as the text. Okay. But it'll make it big. Again, it's the first
37:09 letter of the first paragraph. Then um and then we can also do fancy
37:16 which then makes it gives it it its own custom font. Um, so it kind of stands
37:21 out from the normal fonts.
37:26 Um, horizontal rule. So if we look at this guy right here, okay, um, that is
37:32 if we set that to be none. Okay, if you notice with none, it's right here. Okay, so it just it adds a divider in there,
37:39 but yeah, um, it it's just a part of the content. Okay, but if I go ahead and set
37:44 that to be a line, it will break the content, but put a line. If we set it to
37:50 be um an asterk, okay, um it puts uh it breaks the line, but then it does uh
37:55 three little asterisks. And then we have ornament, okay, which is uh what we saw earlier.
38:03 Next is going to be code blocks. So this is a code block and um you can set it to
38:09 be none, which basically means it'll take whatever the default of a theme is, which wow, that doesn't look very great.
38:14 Okay. Um or you can set it to be styled which um you can apply columnists style
38:20 but it stays in line. Okay. And then you can also have the ability to set to be wide so that way the code block breaks
38:27 the the text layout.
38:33 So some nice options here. Um and what's really cool about all of this is it's all done with straight up markdown.
38:40 Okay. Um well let's finish the settings here. So in column dividers um obviously
38:46 these are the dividers for the columns okay the vertical dividers in between the columns and you can set that to be
38:52 whatever you like okay so you can set it to be uh this the width and you can also set the style so if you want it let's
38:59 say dotted I think dotted looks quite nice as well okay so that is the dividers for uh the
39:06 columns in between the columns now through uh if you wanted to to find
39:14 your own text. Let's say a paragraph or something that also breaks out. You can just apply this column span. Um here
39:21 I'll just go ahead and copy this and um we will add in
39:27 let's edit this content. I'm going to add in right here. Right. So I'm just going to
39:34 add that little snippet in there. And what we'll notice when I preview is now
39:40 where is it? Oh, it's right here. Right. This um I pro you probably could style
39:45 that differently, right? But this pretty this little sentence right here, which is just that snippet basically causes
39:52 the break in the columns and this now goes it stretches full width. Okay,
39:59 so that is just a little snippet. If you wanted to break anything out with your own little snippet, there's that little
40:05 stored snippet for you. Okay, right there in the settings. And then obviously this will um this span margin
40:11 is just the margin at the top and the bottom so you can have some spacing in there and obviously a class setting. Okay. Um
40:20 let's look at the markdown here now. Um I'm going to go ahead and I'm just going to let's copy that and let's do a new
40:27 window here so we can really look at the window.
40:34 And all of a sudden my machine got really slow. There we go. Okay. All
40:40 right, let's turn on wrapping. Okay, and
40:52 there we mark down. All right, let's look at this page a little bit here.
41:01 So, let's look at this markdown. Okay, because this is just all markdown again.
41:06 This What we see here is how I did all of that. Now, I'm not going to do a full
41:12 markdown tutorial, okay? But obviously headers, okay, that's an H1. So, in this
41:18 case, um if I wanted again, I I knew I wanted that particular that first header
41:24 to um break all columns. Okay, so I made that an H1. Okay, so it's just an H1
41:30 there. Here we have the H2, okay, which shows up uh within the the the layout.
41:36 Okay. Uh, and then we just have straight up paragraphs. Here's another paragraph with some italic text. And then here,
41:45 this is that block quote. And you do block quotes simply with a greater than sign.
41:51 Okay? So, just by adding this greater than sign, you can create a block quote, which creates this little goodness right
41:57 here. Right? Um, and if we continue down, then we just have another
42:03 paragraph with some italic words here. We have an H4. Okay, because there's
42:09 four hashtags. As you see, that just shows up as an H4 and it flows within
42:15 the content. I don't necessarily want to break. We could we could if we wanted to in the settings, but we don't want to do
42:21 that. And then here, this is three dashes. This three dashes is our
42:26 divider. Okay. Then we have a paragraph and these
42:33 little um if you put back ticks around your your content. That is how you do this inline code
42:40 style. Okay. So if you want to create these little tag looking uh bits of content. So maybe you wanted to accent a
42:47 word or you wanted to give a little bit of attention to a particular word, you could do that really easily with these
42:52 little back ticks. Okay. Then this is the code block that
42:57 we're looking at. Okay. And you do that with these three back ticks. Now I put in CSS. That's an optional thing. You
43:04 you don't have to do that. You could just do these three back ticks. Okay. Um
43:09 so yeah, and that will create this um this code block here.
43:17 And then um below that we just have another paragraph. And then here we have another H4. another paragraph with some
43:24 accented characters. Okay, some accented tags.
43:29 Okay, so as you see, I mean, very powerful. This just some simple text and with just a little bit of markup. Okay,
43:35 I think my my favorite one's the pull quote. Um, I think that's just a really awesome way to do that. Okay, and you
43:41 can really make you know a nice different differentation
43:48 um, you know, to your web pages with that. So, any questions? I I don't see a lot of chatter in the chat, so let me
43:53 know. Um Matias said, uh yes, he recommends at least two lines for both
43:58 orphans and widows. I recommend uh that as well. You probably want to have two at least. Um yeah. Um and I think two is
44:07 the default there. Okay? Because you don't want to have one line kind of going up there, right? So anyway, and
44:14 I'm sure over time we'll I'll you know, we're going to come up with a little bit more rules like that justification. I
44:19 probably shouldn't be justifying headers. just doesn't look good. Okay, so I'll make sure that that is uh updated. Actually, let me go ahead and
44:25 make a note for myself because I will forget that
44:36 no justify on headers.
44:42 Okay, cool. Now I won't forget. Um cool. So that is uh that. Let's see
44:49 any questions on either markdown or kind of the settings that we use here.
44:55 Um, yep. Now, there is Okay, I know a lot of us here are foundation users.
45:00 Okay, so there is a swatch available as well. So, if we go
45:08 ahead and use columnist, where is it? Oh, it's at the bottom.
45:17 Okay. um all the same settings. Okay, so all you have access to all the same
45:22 settings. Obviously up at the top you're going to have your selector, right? So you're going to put in either your class or choose your element or whatever.
45:29 Okay, and then um you can put that class on a text stack or whatever you want.
45:34 Okay. Um so super powerful there. Um yep, the swatch is uh is there. Although
45:41 I I mean I think the way I've structured the columnist stack itself, especially with
45:47 the with the ability to have total CMS um you know I I think probably how I
45:53 would use it most of the time is going to be this way um rather than swatching everything. But with that said, with
46:00 that said, if I'm using that a particular layout in throughout many pages on my site, maybe the swatch is
46:06 easiest because at that point I only need to maintain it one place, you know. So that's one benefit of using a swatch
46:13 is where you can define these layouts in one place, have one place to manage it, and um yeah, then you can just apply
46:20 your settings globally, right? And that's just one of the beauties of having swatches. Okay, one thing you
46:26 note is um there I still I kept columnist 2 in here. So when you look at
46:33 this there's a columnist and columnist v2. Yeah. Um v2 is the old one. The
46:40 columnist is the new one. Okay. I that's how what I tend to do with stacks. Um so
46:46 if we look at columnist in the in the here, you'll notice that the columnist
46:52 is that's the latest version. And then I always put the version number when it's kind of old. Um, also if you had version
46:59 two, um, you'll probably see that I updated the icon to make it look like an old newspaper, right? So, um, you can
47:05 differentiate. The icon didn't change, but, um, I made the version two look like an older newspaper so that uh, when
47:12 you're looking at it, it's pretty apparent which which one is the new one, which one's the old one. Okay. Um,
47:18 so there we go. That is, um, yeah, that's how that works.
47:24 Okay, let's have a look at columnist grid now. Okay. Um, I think this going
47:31 to be super simple to use um and very powerful. Okay. Um, I I like the
47:36 simplicity of it. Okay. Um, the settings are going to be pretty much identical to
47:41 what you've kind of seen um in the columnist stack. So, the way the the columns are done, you have your max
47:47 columns, a minimum, and a minimum width. You can also define this the sizing for
47:52 small, medium, and large if you needed that level of detail. Okay. We have the balance as well. I think most of the
47:58 time column fill balance is going to be what you want. Okay. Um and then uh now
48:04 if you don't want to apply any styles to cards, you can turn off all styles, but there are some nice styles here. So um
48:12 as you add in um columnist cards okay um
48:17 it will apply the style to that card. Now uh here you can have background
48:24 obviously padding border radius blah blah blah and then here's some uh some animations. So we have you know shadows
48:30 and then hover effects. Okay lift is kind of my favorite. Um if
48:35 you do grow um let's look at what grow does. Um, need to make sure I have overflow
48:42 hidden enabled. Uh, well, that's probably in this theme, but um, grow just kind of makes it grow a little bit.
48:47 Um, I do like lift. I think I think lift is quite nice. Um, so there we go. Um,
48:54 and again, there's some style parameters for these in secret settings. Okay. Um,
49:00 funny enough, uh, actually did use some secret settings in this in this demo file, and I'll show you those in a little bit. Um, then let's look at the
49:07 columnist card. Um, obviously this is just a single card and you can add as many as you want. But if you wanted to
49:13 have specific styles just for this one card, you can do that. You can update that as well. Okay. Now, um, where this
49:21 becomes super powerful, if you use this with like total CMS or feeds, you can, you know, create a loop in here and loop
49:27 and dynamically create columnist cards with feeds or total CMS. Okay. Um, and
49:33 you can add whatever content you wanted in here. I just have a few headers just to give this super simple kind of
49:39 feature card um you know design. Okay,
49:47 so there we go. Um yeah, there's not much. I think
49:52 columnist card is pretty simple. Um, I think it's very easy to use and again, uh, if you guys need any, you know,
49:59 demos of how to integrate it with loop, you'd use it just like you would use block grid or any other sort of grid
50:05 based layout with with total CMS loops or feed stacks. Okay.
50:13 All right. Let's look at the secret settings. Um, so this demo actually have
50:18 a a little bit of custom CSS in here, but if you notice in here I have Oh, I
50:24 didn't turn on my mouse thing. Okay. Um, here I have this here. Um, if you notice
50:29 the drop cap size, okay, I set it to 2.8 pixels or 2.8 m. Okay. Um, so yeah,
50:37 let's show you how uh I have this in CSS, but let's show you how you can actually potentially override these things um with a swatch. Okay, because I
50:46 know a lot of you um probably want to do that. So, I'm just going to go ahead and let's add a swatch to the page. And um
50:54 let's do that that drop cap size. Okay. So, um I'm going to go ahead and do um
51:00 font if I can type uh font style.
51:06 Okay. And uh let's go ahead and over here. Uh
51:13 we're going to do interesting if I do.
51:20 All right. There's a couple things that we could do this. Uh you can now if you want it to be page wide. Okay. You could
51:26 do body. Okay. Or there's something in here called page color definition. Okay.
51:32 That is um probably where I would tend to do this. Okay. Um, it actually isn't
51:37 color. We're not defining colors here, but it's I I added this for some color definitions in site styles, but it's the
51:42 same thing. Okay. So, you can use either body or page color, or if you wanted to scope it to a particular columnist
51:49 stack, you could do that and add a a class here and then put a class on your columnist stack. Okay? So, for example,
51:56 I have editorial here and I could uh put editorial there. Okay. Um
52:05 then uh oh wait
52:17 interesting I I had a slight brain fart.
52:24 Um, and yeah, this this isn't necessarily going to work uh with
52:30 setting these custom variables. Okay, I'm sorry. Uh, we're going to have to uh in order to use set these custom
52:36 variables, okay, we're going to have to use the CSS builder swatch. Okay, and in
52:42 here, you can then go ahead and choose this uh this page color definition.
52:48 Okay. Then um what we're going to do is we're going to use the CSS variable um
52:56 uh stack. Okay. And if we look at scroll
53:01 down here, uh let's go ahead and copy here. Actually, let's do this. I'm going
53:06 to I'm going to customize this HR content. And let's do something different than the drop cap. So, I'm going to go up there and I'm going to
53:12 paste that variable in. Okay. Um, so there we go. And actually what what
53:19 you're going to do is you're going to remove the two dashes. Okay? And we're going to put in a a value here. So the
53:25 value here I'm going to put in uh in quotes I'm going to put in I don't know. What do we want? Um
53:32 let's see if we can use an emoji. That could be interesting. Let's see. Let's do um
53:42 let's do a a swirling star. Okay. Um, this particular one, it needs
53:47 to be inside quotes. Okay. So, it should look like that. Um, and uh, yeah, let's
53:53 let's see how that works. Look at that. It worked. Okay. So, quick easy way uh to do those.
54:01 Um, here, let's do let's check out some of the other uh secret secret things here. Um,
54:09 let's do uh, let's do the drop cap size. Okay. So, we're going to do um
54:17 do columnist drop cap size.
54:23 Uh we're going to add in a new CSS variable. I'm going to paste that in. And then the
54:29 value here, let's do I'll make it I'll make it stupid big just to just to show you. So, we're going to make it 5m. And
54:36 now when I preview this drop cap is super big. Okay. I wouldn't do that for this particular layout, but as you see
54:43 now, I can I can override that with my own little um CSS.
54:49 So, there we go. Really simple way um to access these quote unquote secret
54:55 settings. Okay. Um and if you ever forget what those are, they're all on the the product page and they're always
55:01 going to be here in the in the demo file as well. Um so, you can copy and paste those.
55:08 Um pretty cool. Uh column width means you may have a
55:14 asymmetrical columns. Um no the column widths should always be
55:22 the same. Okay. Um so you will never have columns that are not the same size.
55:28 I'm pretty I think that's what you're asking Franco. Okay. Um so yeah it will the the browser will always ensure that
55:35 these three columns are always equal. You will never have this column big, this column big, and then this one's
55:41 tiny. No, they're always going to be equal. Okay, and it'll spread that size out across evenly. Okay, good question.
55:49 Very good question. Um, you can't have un unequal text columns.
55:54 Very good question. I never that thought never even sprung to my mind actually.
56:00 Okay, good one. Good question.
56:08 Okay. Um, can you use units other than pixels, min, width? Okay, good question.
56:13 Okay, so one thing if you noticed, um, and I actually didn't didn't point this out. Okay, um,
56:20 and I've done this for a couple stacks now. Okay, where, um, if you notice here, min width, I have it set to be 250
56:27 pixels. Okay. Now, originally this earlier version of this uh stack before
56:34 I released it, this was a number field and I had it like hardcoded, but
56:39 you know there are a lot of CSS units in here. And um you know if you want this
56:46 to be minimum width is 50% you can do that, right? So um there are a lot of
56:53 different CSS units. You can also even do some crazy stuff like you could do like I don't know calc um you know 100%
57:03 minus 50 pixels or you know I don't know if that really makes sense for this setting but you could do that. Okay. Um
57:11 you can also use something like um I want it to be 50% the viewport width.
57:16 Okay. So you can really use uh well 50% maybe doesn't make any sense at all.
57:22 Whoa. What happened? Oops. I did some sort of dictation. And now I'm in Oh,
57:29 interesting. Okay, there we go. Uh, let's do like uh I don't know uh 30
57:35 viewport width. Okay, maybe that makes sense, right? So, I made it extremely
57:40 flexible um so that you can use whatever CSS units and values that you want and
57:46 you prefer. Okay. Um but I think for the average user, something like you know, you know, setting up 250 pixels. Now,
57:54 what that does mean is if you if you put in 250 in there, um Oh, interesting. It
57:59 kind of defaults that to pixels. I I actually thought that was going to break the page. Here, let's preview. Actually,
58:06 oh, interesting. The browser takes it like a champ. I did not expect that. Okay, but um yeah, so you're going to
58:12 want to have make sure that you set your number and whatever unit you want. Same thing for column gap. This is set to two
58:17 rem, but if you want to set it to be pixels, you can, right? So a two pixel
58:22 gap, right? That probably doesn't make any sense, but 20 pixels maybe, right? So you you have your control over what
58:30 these units are. Okay. Um now something like divider um nor
58:37 normally the the width of divider only setting in pixels makes sense. So I did hardcode that one to be pixels. Um but
58:44 as you see down here also in span margin, we have the ability to you could define whatever sort of unit that you
58:49 want. So, that's something I'm I'm interested to see how people tend to use that or how they get along with that.
58:55 Um, I think it's pretty intuitive, though.
59:08 But yes, uh actually you you mentioned character units. That's actually uh of interesting use case as well where you
59:14 can set it to be I let's say like um 50 characters
59:19 uh 50 might be too much. Let's do like 35. Right? So you can set that to be hey
59:25 when this is reached a width of 35 characters then we can you know split
59:31 out the columns. Um so anyway yeah um you can use whatever units you want.
59:37 Good question Mr. Nice Guy. Okay. I wasn't being uh by the way that
59:43 that's actually his his name. I'm not like being facitious. Just just saying.
59:50 Okay. Uh let's see if there's any other questions that I missed. Matias, you're never a pain in the ass.
59:57 Thank you. I appreciate it. Maybe a little bit, but it's all it's all for everybody's benefit, so I'm good with
60:02 it. I love you, Matias.
60:08 Okay. Uh to I think that answered all the questions.
60:15 Sweet. I um I have to admit uh I went a lot
60:21 longer that man I someone's got to stop me. I I just can't shut up sometimes, you know? Like I can just talk and talk
60:26 and talk. I can't believe I was like, "Oh, I'm this columnist is is on it's going to take me like half hour, 40
60:32 minutes tops." Man, I went for over an hour. Like I I could just talk and talk and talk and talk. So
60:39 hopefully you guys like Columnist. Um there is um if you owned version one or
60:44 version two um well if you own version two because version two was a free upgrade. Um version three is not a free
60:50 upgrade. Um you do get a 33% off discount though. So you can get it uh for 20 bucks. Um 1995
60:59 and um yeah go over to the store, pick it up, pick up a copy. Can't wait to see what you guys build with it. Um, yeah.
61:07 Oh, I should say really quick, okay, I I won't I won't take the time to do the full demo, okay? Um, but
61:16 uh Oops. I need a new browser window.
61:24 All right. Um, if we go into Let's just go into Total CMS.
61:29 I just want to show off um like how you can use some of those cool like block um
61:36 block quote features and whatnot uh within style text because I know a lot of people are going to want to use that,
61:42 right? So um let's just go into style text.
61:49 Let's go into this. Okay, so inside the style text editor, now I'm not sure what buttons I have. I think I should have
61:55 all of these. Okay. Yeah, cool. Um, let's say, um, a I don't if this is this
62:01 a header? This is probably a header, I assume, right? So, if I set this to be like an H2, right? And let's say inside
62:08 of your um inside of the the columnness settings,
62:13 you know, H2s break, you know, they go they span full width. So, you know, you can easily make it so that if this is
62:20 set to be an H2 and you're putting this style text inside of a column list, this header is going to go full width. Okay.
62:28 Um, same thing if I go ahead in here and let's type in um
62:34 this is a quote. Okay. And if I select that and I go ahead and make this a
62:40 block quote. Okay. this. Now, if I have it set in my
62:45 columnness settings, this is a block quote and this will go full width if I
62:51 have that set in the settings. Okay, hopefully that makes sense. And
62:57 then next up is if I do um if I do uh or
63:03 let's just set this up here. So, if I set this to be um this right here. Okay.
63:09 Uh oh, wait, no, it's not. Oh, do I not have
63:21 H interesting. I do not have stylex doesn't have a code block.
63:29 Well, interesting. Maybe that's something we can add.
63:37 May. Yeah, because I think I'm showing everything here. Yeah, I don't think I added a code block
63:43 into style text. So, um that was something I will have to rectify.
63:49 Um so, whenever I do add a code block button, um you'll be able to select this
63:55 and then um yeah, you'll be able to make this a code block. So, then it will look like this. Okay. In your um in your
64:05 content. Interesting. Um uh same thing for uh if you do bold and itallic and
64:11 all that jazz, but that's common u common knowledge. But yeah, so um yep,
64:17 the the oh and dividers u so if you click on this little doodad right there, that is a divider. So obviously it looks
64:23 like this here inside style text, but when you publish it, it can look like this little ornament or however you
64:30 configure that, right? So, um, yeah, a nice, uh, nice little things and I just
64:35 want to show you how you can get those featured those features through the style text editor. Okay. Um, there we
64:44 go. Good thing I thought about that before we left. Sweet. Okay guys, um, that's all I had
64:51 for today. Um, for those that just I know a lot of you I from the chat I see
64:58 are were at the last total CMS training. Uh, the video's already uploaded. I will
65:03 send out an email today with the replay URL. Sorry, I totally forgot to send out the email on Friday. Um, so thank you
65:11 for the reminders that for those that posted on the community and reminded me to send that out. So, I'll do that um as
65:16 soon as we hang up here. Okay. Um, cool. Thank you very much.
65:23 Oh, Matias says, "I added a code block, but I made it." Okay. I will I will look into the code block thing. Um, and yeah,
65:30 I'll make sure that it's there. And if it had the same icon as another one, I'll make sure it has a unique icon. So,
65:36 um, cool. Uh, thank you very much everybody. Have a great rest of your week. Hopefully I'll see some of you on
65:42 Friday at the Hangouts. Um, yeah. Take care. Have a wonderful day,
65:49 wonderful rest of your week. Go out there and make your websites