Transcript

00:08 hey everybody so in this video we're
00:10 going to be looking at a more advanced
00:12 layout kind of a more custom layout
00:14 option that's going to use the classes
00:16 baked in the cookie jar
00:18 now if you notice this page we are not
00:20 using the cookie jar content stack and
00:23 that's because i'm using foundation
60:25 here and i wanted to build my own custom
00:28 layout using some foundation six stacks
00:32 so here i just you notice that i have a
00:33 container inside there i have a close
00:36 button
00:37 uh some text and then two buttons for
00:39 accepting decline and i also have a
00:42 clear button just to kind of help us out
00:43 with the demo okay
00:45 so let's go ahead and preview and we'll
00:47 see that here i have my
00:49 container with round corners a great
00:51 container i have this dismiss button
00:53 that if i click it it will actually
00:55 close
00:56 the window
00:59 and then i have my accept and decline
01:00 buttons that do the accepting and
01:02 declining of consent so if i go ahead
01:04 and click accept there we go it shows us
01:07 that we have
01:08 loaded the content
01:13 so
01:14 essentially all this happens all the
01:16 magic inside cookie jar there is a set
01:18 of classes that you can use so we have
01:21 accept decline clear and dismiss and
01:24 then the content container
01:26 okay um the remaining classes we're
01:28 gonna review in a different video um but
01:30 for right now we're just gonna be
01:31 focusing on these five classes
01:36 so we'll see in this layout uh first i
01:37 guess the clear button i just added a
01:40 normal foundation button here and then i
01:42 added the cookie jar clear class and
01:44 that is the class that i'm have defined
01:47 right here inside cookie jar
01:50 and then in the container this is my
01:52 container that contains the content for
01:54 my privacy message
01:56 and you'll notice here that i have the
01:58 class cookie jar content
02:02 now you might be wondering why do you
02:03 need to have a cookie jar content class
02:05 at all because it just it's just a box
02:08 right
02:09 and the special thing about the cookie
02:11 jar content class
02:12 is that it's closable right so if i
02:15 click accept whatever that cookie jar
02:17 content stack is will disappear
02:19 okay or if i click on this dismiss
02:21 button that will disappear right so
02:23 again if i click on this that content
02:26 whatever has that cookie jar content
02:28 class will then disappear when i click
02:30 any of those buttons dismiss accept or
02:33 decline
02:35 okay so this container it has a few
02:38 other styles that i'm using such as
02:39 background and radius and some padding
02:41 but the the big thing here for cookie
02:43 jar is this cookie jar content class
02:46 next is i have a close button here that
02:48 you'll see has the cookie jar dismiss
02:51 and again what that does is that closes
02:54 that neither accepts nor declines but it
02:56 does close the window or the content box
03:00 which means next time i do a page load
03:02 the content box will still load because
03:03 i never gave or denied my consent so
03:06 this is just dismissing that box
03:10 then i just have some text um and here i
03:12 have two buttons
03:14 okay inside the decline guess what
03:15 inside the class i have cookie jar
03:17 decline
03:18 and inside the accept i have cookie jar
03:21 accept
03:22 super easy you can build these layouts
03:25 any way you want right they could be
03:27 inside here i just have something simple
03:28 on the page but you can have this inside
03:30 of a light box you can have it inside of
03:32 a little container that animates in onto
03:34 the page it's really up to you all you
03:36 need to do is apply those classes
03:39 and your layout will be integrated with
03:41 the cookie jar stack
03:43 now just to show you a different type of
03:45 layout here i have on the multi-facet
03:48 demo
03:49 a completely different look right it's
03:51 just a little box with an okay cool and
03:53 a thanks which is the accept and the
03:55 decline buttons right
03:56 so i'm going to be reviewing this demo
03:58 in a separate video but i just want to
04:00 show you a different way that you can
04:02 actually show uh your messages it just
04:04 doesn't need to be this boring box
04:06 that's on the page you can do something
04:07 different design something on your own
04:09 that you think looks nice
04:21 you"}]