Transcript

00:06 [music]
00:09 Hey everybody. So in this video we're
00:10 going to be looking at the columnist
00:12 stack. So let's scroll down and have a
00:15 look at the demo. So the columnist stack
00:17 is super simple. Uh you just add any
00:21 text that you want via markdown or from
00:23 integration with total CMS. And
00:26 essentially, it allows us to create nice
00:28 column layouts with our text. Now, this
00:32 is sort of the kitchen sync demo where I
00:34 have a lot of features in a very small
00:36 amount of area, right? But as you can
00:37 see here, we have headings, we have drop
00:40 text, I have a block quote that
00:42 basically breaks through the columns and
00:44 goes full width. Um, we have a nice
00:46 accented divider that kind of divides
00:48 our content into two different sections.
00:52 Uh we have code blocks accented uh words
00:56 within our content. Um we have different
00:59 headings based on whether or not the
01:00 heading can break through or whether or
01:02 not you want the heading to break and or
01:05 go with the text along with the columns.
01:07 There's a lot of flexibility here uh
01:09 with our text layouts. This is a really
01:12 great way if you have a lot of text,
01:14 maybe a some very text intensive blog
01:16 articles um because shorter text in this
01:20 format is easier to read. There's a
01:23 reason newspapers use this format. Now,
01:26 next up, we also have the columnist grid
01:29 stack that comes with this uh suite. And
01:32 this is just a different kind of grid
01:34 stack. Now, what makes this different
01:36 kind of steps apart from others is that
01:39 it's 100 p 100% pure CSS and the content
01:43 flows from top to bottom just like it
01:45 does with our text. So, it's just a
01:48 different type of grid layout the way
01:50 the content flows. Now, using columnist
01:53 is super easy. Essentially, you drag it
01:55 out on the page and you can go ahead and
01:57 add in your markdown that you'd want to
02:00 edit. So here I've gone ahead and just
02:02 added a little bit more markdown so we
02:04 can kind of see it in action. Now if
02:06 you're using total CMS, I recommend that
02:08 you actually use the total CMS settings
02:10 here and then you can actually add in
02:11 your macros directly there. Now we can
02:14 go ahead and edit the settings directly
02:16 here in edit mode to kind of customize
02:18 how we'd want our number of columns and
02:20 the width of those columns to be. Now,
02:23 these behavior settings, please go ahead
02:25 and review the tool tips. It kind of
02:26 explains the rules on which these are
02:29 used to define how content is split
02:33 within our layouts. I recommend that you
02:36 preview your content and then play
02:37 around with these settings till you get
02:39 the look and feel that you want.
02:42 Let's say, for example, here I'd like to
02:43 have all my headings actually span the
02:46 entire width. So now my headings break
02:49 my columns.
02:51 And let's take that quote that I have in
02:53 the middle, that block quote, and let's
02:55 make that go pull. So now I have a very
02:58 nice looking layout where my headings
03:01 mer uh break the columns. I have my text
03:03 columns. I have a block quote that also
03:06 breaks it. And there we have a very nice
03:09 looking layout that is actually really
03:11 easy to read.
03:14 Looking pretty nice.
03:17 Now, the second stack in the set is the
03:20 columnist grid stack. And this allows us
03:22 to build out a grid of cards. And you
03:25 can add whatever content you want within
03:27 these cards. Inside the columnist grid
03:30 stack, you can go ahead and set up the
03:32 columns just like we did in the
03:33 columnist stack. And then you can also
03:35 style your cards as well. Now, if you
03:38 want to use something like swatches, you
03:39 can actually turn these styles off and
03:41 then use classes to style each
03:43 individual card. Now, you can also go to
03:46 the individual card level and have
03:48 specific styles just for that one card.
03:51 This makes it super easy to style just
03:53 the way you want. And for all the swatch
03:55 lovers out there, there is a new
03:56 columnist swatch that allows you to
03:59 define a centralized column layout that
04:02 you can apply to as many items as you
04:05 want, just with a class. These settings
04:07 work exactly like the main columnist
04:09 stack. You have all of the options here
04:11 as well. So, I hope you enjoy Colonist.
04:14 I can't wait to see you guys build with
04:15 it. Please go ahead and share that on
04:17 the community and we'll talk to you
04:18 soon. Bye-bye.
04:25 [music]