Transcript

00:00 come on
00:10 hey everyone Joe here so in this video
00:12 we're going to be looking at the new
00:13 lines to update so lines two is just a
00:17 great way of adding style dividers to
00:19 your web page you can add cool little
00:21 glyphs you can have a bunch of different
00:22 styles you can kind of slant stuff right
00:25 so let's dive in and see how easy it is
00:27 to use
00:30 so the simple example of lines is just
00:34 simply a solid line on your page right
00:36 but we can use the style setting to
00:39 change that so if you want dashed lines
00:40 or dotted or double there's a bunch of
00:43 different styles of lines that you can
00:45 use here Now by default we have a
00:47 horizontal we'll look at vertical
00:49 dividers in a little bit but for right
00:50 now let's go through all these settings
00:52 as a horizontal line next up was we have
00:55 the colors uh we have the main color of
00:57 our line as well as some Styles allow us
01:00 to have an accent color
01:02 so as we see here if we go into the
01:04 extras such as the double border this
01:07 gives us the ability to have an accent
01:10 color as we see in this example here I
01:12 have a blue line and a green line and
01:15 when we choose some of these Styles we
01:16 get some extra options so here in the
01:19 double border I have a padding which is
01:21 kind of like the spacing in between
01:22 those two lines right
01:25 next up is we have the ability to have a
01:27 gradient line which is super cool
01:30 um and this as you see here we have
01:31 options to choose the different colors
01:33 right and in this example here I have
01:36 the outside the basically the the colors
01:38 on the very far outside they're fully
01:40 transparent so it kind of looks like the
01:42 line Fades into the page super slick
01:46 and the last style option here is a
01:48 flare which gives us these little kind
01:50 of rounded flared ends
01:53 um at the end of the divider it's kind
01:54 of interesting
01:55 now the sizing options are pretty easy
01:57 to understand we have width and height
01:59 options basically if you don't want the
02:01 divider to go the full width you can
02:03 basically change the width or height if
02:05 it's a vertical line
02:06 the size is the thickness of your line
02:09 now some styles of lines such as double
02:12 and when you use a double line you kind
02:14 of need to make it thicker because if
02:16 you don't it just looks like a single
02:17 line so you kind of need to make it a
02:19 thicker in order to see that
02:22 and then next is we have the ability to
02:23 rotate so we can obviously rotate you
02:25 can kind of skew the line a little bit I
02:28 personally like just uh you know if you
02:29 are going to do it just do like one to
02:31 three degrees it kind of gives you just
02:34 a very slight slant
02:36 um anything more is kind of very drastic
02:38 but then we have margins which allows us
02:40 to add Spacey spacing at the top and the
02:43 bottom of the divider to give you a
02:45 little bit of breathing room between
02:46 your content sections
02:48 and last up is we can add content to our
02:51 line right so here's a few different
02:53 examples
02:54 um now here we have a glyph and when we
02:57 turn on line content uh we have a lot of
02:59 options similar to what we had above we
03:01 can rotate you can uh customize the
03:03 position so as you see if you don't want
03:05 it centered you kind of maybe this one
03:07 is particularly offset okay
03:10 um you can add padding
03:11 um and then you also have to define the
03:13 the background color and the content
03:14 color
03:15 so um this you're going to want to make
03:18 sure that that background color matches
03:20 the background of your website okay now
03:23 this could cause problems if the
03:25 background is maybe an image or a
03:27 gradient we only support solid
03:29 backgrounds here
03:31 um so yeah you're going to want to make
03:32 sure you set the background of the line
03:35 content to be the same as
03:37 uh your website background or the the
03:39 background of the the container that
03:41 it's within
03:44 uh you can customize the content here by
03:46 default it has this cool little glyph
03:48 that is um you know just a standard
03:50 character
03:51 um but it looks kind of fun
03:53 um but you can do other things such as I
03:54 have an emoji here so you can add emojis
03:56 in there um and just put that straight
03:58 inside of the content area
04:01 next up is we can actually do HTML so we
04:04 have a lot of the same options here but
04:06 then we can actually type in our own
04:08 HTML so here we see I have an H3 so this
04:11 is an interesting way to actually do
04:13 headings and stuff like that you can
04:15 actually have you know your section with
04:17 the heading embedded directly in the
04:19 little line which is pretty nice
04:22 and then next is we have an option I
04:24 don't have a demo of it here but we can
04:25 go ahead and click stacks and that gives
04:27 us a stack drop zone and then that
04:30 basically whatever we add into there
04:31 will be over overlaid on top of the line
04:34 which is pretty cool
04:36 so let's do a quick run through on
04:38 vertical lines
04:39 um so here I have a three column and
04:42 this is the three column stack from the
04:44 starter pack which is our free starter
04:46 pack make sure you go check that out and
04:48 what I do is I have two content uh on
04:51 the First Column and the third column in
04:53 the second column I throw in a line
04:55 stack now uh the starter pack you go to
04:58 your three columns and then you make
04:59 sure that vertical is set to stretch
05:02 and what that will do is when you set
05:03 lines to be a vertical what will happen
05:05 is it'll actually fill the entire area
05:08 there okay so
05:10 um not all column Stacks uh will support
05:13 um stretched and equalized columns
05:16 um so if you're not using the starter
05:17 pack it also works in Foundation six but
05:20 you can also use things like match
05:22 height or maybe a static height stack to
05:24 kind of set the height of what lines
05:26 will be okay and as you see here um you
05:29 can't see all of the content inside edit
05:31 mode but if we preview this page you'll
05:33 see that we have a vertical line with
05:35 our cool Emoji in the middle and it's
05:37 perfectly aligned in the middle of our
05:39 two content areas
05:41 and one last bit if you are a foundation
05:43 6 user we have classes that can be
05:45 applied directly to the line as well as
05:48 classes that can be applied to the
05:50 content area if you're going to use the
05:52 content uh options inside lines so there
05:55 we go so here we go I hope you enjoy
05:57 lines and uh you go out there and make
05:59 your websites great bye
06:07 "}]