all ah dang it chat's not working hey everybody uh let me log into the chat it
logged me out sorry for being a little tardy uh come on one password help me
out here love one password until it's not
working
all right now I can oh now I got to click on the I hate recapture everybody hopefully you guys can see and hear me I
got to click on bicycles let's get these bicycles Okay click on all the bicycles
and it's in slow motion so I have to wait for the new ones to come and say verify ah
I wasn't patient enough find all the cars now I got to find all the
cars cars cars
cars and there's more
cars finally Jesus
Christ okay and we're in oh we got 25 people awesome sweet okay uh look it's
climbing now excellent sorry for being TIY guys I uh
forgot that I uh you know trying to use stack app for you guys during the live stream um just so we can do that and I'd
uh reimplement some of that little uh little hacks that I had to get it working for a live stream
um excellent Russell thank you your first hangout well this is a live stream
Hangouts aren Fridays Hangouts are a little different totally awesome though dude definitely got to make sure you get
those uh get on to one of those okay um am my yeah my lights are on lights
weren't working like all kinds of stuff I went to go click Start and like I don't know stuff wasn't working I hate
when that happens um okay now I got preview
working all right got the chat going excellent Mr Powers thanks for popping
in Romy thank you very much um so today guys we're going to actually
before we get started um I'm sure you probably I mean everyone that's here is probably already in the know and um and
whatnot so uh yeah Summit uh April 11th to the 13th hopefully you saw the email
and the post on the community yesterday um go and get your tickets now okay go to summit. Weavers dospace and uh
purchase your ticket um so yeah I had one guy uh dug Doug I don't know if
you're here Doug uh Doug had uh some issues purchasing not sure what it was we figured it out but uh let me know if
you have any issues uh going through the checkout I know most of you haven't uh we had quite a few attendees already so
uh yeah um let me know and uh we'll make sure that you uh we fix you up and
you're added to the attendee list now um I know right now some people are you
know you just get like a generic receipt um the closer we get to the summit you'll get more information as well as
invites and and all kinds of stuff in the schedule um I'm still working on getting speakers and the schedule is
going to be very similar to probably last year um I mean it's kind of a schedule that's kind of worked for many
many years um this is our ninth Year by the way this is number nine uh so super
exciting next year will be our 10th year right pretty cool um so yeah ninth
Summit is this year super stoked about that um and yeah we're going to have a great lineup of speakers if you want to
speak let me know still got a bunch of spots open um we're always on the lookout for New Blood new victims ha
right um so yeah if you want to speak at the conference um everybody has
something to teach right so um if you feel like you have something that you can contribute to the community um
remember we we want experience from all levels you don't need to be an advanced user um you know such as Chris Powers
right here um to yeah to to give a talk I'm sure Chris is going to give a talk
right but yeah we want people from all walks of life to uh to share your experience so that people that are at
your level can learn from something you've done as well right so um it's always great to get different
perspectives from all levels of people in the community so please don't be scared if it's something that you think
you have something to share or you might want to bat some ideas around with me reach out and we can strategize and see
what we can do um yeah to come up with a great Summit again so there we go okay
that's all about the summit go check it out get your ticket um next up is yeah today live stream um also actually I did
release a new stack this week elevator 2 go check that out um yeah it's nice it's
a nice little stack I decided I was releasing you know as I said on last week's live stream I think a bunch of
updates to like some jQuery stuff and yeah I just decided to put a little
bit extra effort into elevator and I completely redesigned and rewrote it um or a lot of it um and yeah it's nice so
check it out elevator 2 just a a way of scrolling to the top of the page super
simple easy to implement stack um and yeah and yesterday or was it today I
don't remember when at some point I released it was EI yesterday or today um
man I can't it couldn't have been today cuz I was getting everything ready for this so it must have been yesterday um a
stack for swatches for the elevator so now you can Swatch ify elevator okay um
so pretty cool um today I thought it would be nice to kind
of revisit how we can style text inside um
Stacks okay um now I'm going to be doing a lot of this in Foundation six because
yeah it's what we know okay um there are possibilities that you can do this
outside a lot of what I'm going to show today will work outside of foundation 6 as well um but yeah I we're going to be
using swatches and that just kind of make styling things easier okay um and
quick tip uh if you're using some other framework you know what everything I'm
showing you today actually will work if you have Foundation 6 swatches will work in any framework as well okay so um yeah swatches are just CSS so
uh not all of them I there are some that are very Foundation 6 specific but um
mostly everything we're going to be looking at today is generic and we'll work in anything even outside foundation
so there we go um if you have Foundation 6 I know there's some people are like I
know how to do this in Foundation 6 with swatches but how do I do it in Source or whatever right well if you know how to
do it in Foundation 6 you know know how to do it in Source cuz just use Foundation 6 swatches in Source there
you go done okay so okay that's it uh let's
um that was last night thank you Mr Cole yeah you know I I've been working like
hardcore I have to admit for like the past I well for a long time but four days at least I've been like um started
Sunday just worked through Sunday and got the elevator released and and whatnot so yeah um sayage show what are
you doing with a stack in your hand no um oh I I got my 3D printer actually
printing something um it's actually for my workshop uh so and I decided you know I I don't tend to do well with sorry for
this quick little tangent I decided to uh do like the slow print option cuz
sometimes like I do the normal or fast print option which takes you know still takes hours this is going to take like
20 hours but I'm stoked to see if the slow print option works and Chris I put some glue stick down on the bed you gave
me that tip I don't know we'll see if that works so we're see it's it's going
slow but hopefully it's going to work out okay
um styling text let's share my screen because you guys want to see the screen not not this beautiful face don't want
to see this beautiful face okay um
text so um to start off finally huh Chris yeah yeah yeah yeah
okay um there are two primary ways to um get
text on your page with Foundation 6 okay um and I'll talk about a few other ways
I guess I I guess let's just go all the way back to the beginning okay so um we
do have the um the text stack okay and
then we have markdown okay now um traditionally the text stack
was a style text engine okay um now um
this particular styl teex engine that we've been used to inside rapid Weaver
um will no longer exist inide uh Stacks okay um a modified version of it that
isn't ready to be played with fully yet um will be available so um there is this
the text stack okay I know the UI of this looks similar um as it did in Rapid
Weaver um it is not actually it be honest it's been a while since I've played it let's see does it still no see
yeah does doesn't do nothing yet okay um so it doesn't do anything yet um but styleex uh the styleex engine
was really crappy and I've told people not to use it for many many years okay and I've I've instructed people to uh
use markdown okay okay and uh markdown uh it has some crazy syntax I'm not
going to go into the ins and outs of markdown okay um I've done actually a live stream if you want to learn more
about markdown I've done a live stream on it okay and uh watch that okay but
it's just a really nice way of doing headers and text and bold and some links
and stuff like that I know uh I think the scariest part is links and um that
that tends to be the scariest part for for some people okay and uh I can understand and I know there
are plans to uh make that a little bit nicer and better um in the future okay
um so I just want to kind of go off those are the two default Stacks okay and then uh we can go up into my
starter pack which hopefully everybody has my starter pack it is free so you have no excuses not to have it um
because it's awesome okay um and in here you'll notice that we have two ways
there is a text stack okay which for all intensive purposes is a markdown
stack you'll notice that it shows markdown okay um but it it has some different settings here okay think of it
as just a a step up from the markdown stack okay um and then we have a header
stack okay and in here you can Define your headers okay so um now in
Foundation 6 we have pretty much the same thing okay um and I'm going to be
using the foundation six Stacks today okay just because okay um so in there we
have a text stack there is an RW Tech stack just ignore that um yeah it was
there to kind of have parody with Foundation one I didn't recomend you use it in Rapid Uber okay and in when
Stack's app officially ships that stack will be gone okay um okay header so we
have a tech stack and a header stack um in Foundation
six and they're very similar and that this is a the tech stack is marked down
okay and the head header stack is a header but it's actually to be honest
it's actually more than a header okay uh the name of the stack is a little
misleading and uh let let's talk about why okay
um and similar to the starter pack uh these are very similar to the starter pack it just the foundation versions
just have slightly more options
okay yeah yes and and Chris says the starter pack has the world's best stack
which his his favorite stack which is called pen which is right here okay pen is a very popular stack it used to be a
standalone and then uh I don't know a year or two ago I kind of Consolidated a lot of my free Stacks into the starter
pack um and yeah Penn is now inside the starter pack so definitely get that okay
um text versus header okay first off let's um let's look at header okay I'm
and just to focus on that I'm going to delete the text
stack now inside header okay we have the ability to if you notice over here in
the settings oh let me turn on my little uh my little this guy there we go okay
um so here in the size settings you'll notice that we have the ability to choose from all the various H1s as well as a
paragraph and a span and some other stuff right okay but that's kind of
weird like why would I have a header stack that is a paragraph right it's kind of weird but essentially what um
most of the time we're going to use the header stack as a as a header okay but
there are other things that we can use with it okay such as a paragraph now um
why would I do this okay um and let's show you okay I'm just going to add in oops
some lurum text I cannot type today there we go
okay and I'm just going to go B um one thing to note you see in Stacks app see how nice and big this text is
and how readable it is man so nice Okay um so I just put in two what looks like
two paragraphs of text okay inside preview right okay let's go ahead and
look at that okay uh I forgot about this Foundation version thing uh I shipped an
update and I forgot to update the stacks theme inside Stacks Pro sorry um so yeah
just ignore this Foundation version warning sorry about that um okay uh actually do I have let's see uh disabled
preview Checkers uh are you sure yes are you really are you hella sure yes I'm hella sure oh but the version warning is still
there dang it okay oh well um okay um what you'll notice
here is I only have a single
paragraph even though in edit mode I clearly put in uh a a a character return
in here um and I here let's let's even just look I can put in a lot sure let's
go in I'm going to put in the character return so there we go right you would think but look even in here like inside
edit mode I just have one blob of text okay and that's because the header stack
um is essentially a way of creating one of something okay um so like if I were to
change this to an H5 this entire thing is now an H5 right so it essentially
allows you to create a element it literally creates a element
so it is a paragraph no matter how much text you add into here um and if you try to put in markdown like five try to do
in you know blah blah blah header okay um that ain't going to work it's just
going to put in literally what you type in okay um so markdown is not supported
in here at all um these character returns doesn't matter everything is
just whatever is in there is a element it is a paragraph in this case and H1 in
that case right if we if we prev
and uh let's look at the inspector here okay if we look at
that it is let's make that a little bit bigger all right uh if we look right here this entire bit of con uh text is
in one H5 tag okay U now what's kind of cool just
to let you know um because we're going to do this later on let's do uh there's classes so let's just call this my class
right um and if we look inside preview now okay we will
see oops did I not save that or
something inspect there it is so you'll see now that I have an H5 and the the
the class that I put inside that header stack is on the actual H5 tag see it
right here right H5 class my class and there's some spaces in there but that doesn't matter okay um so there we go
that's again the header stack is for creating a
element it's going to be very important later on when we go to try to style all this stuff okay um all right so now um
let's there let's put that back to a paragraph oops Yeah paragraph right and
now let's add in a text stack okay all right so let's just uh the
default markdown has some complicated stuff that we're we're not even going to try to worry about okay actually here
let's just go ahead and um inside here I'm just going to take the same exact text and we're going to paste it in the
text stack man I love the text size here it's so nice Okay U boom all right so
now inside edit mode we can immediately see a difference
okay now the text stack it doesn't allow you to Define any sort of element right because um essentially in edit mode it
it accepts markdown and in markdown when you put in
a character return or return or empty line right here markdown is going to create a paragraph out of that a
paragraph out of that and a paragraph out of that it's kind of what we would expect right and there's no fancy syntax
here it just does what we would expect it to do for a paragraph when I put in a new line it creates a new
paragraph Okay so it kind of it makes things easier right and uh just for fun let's
go ahead and preview that right and you'll see again this this is our header that is one big
paragraph and we have one two three separate paragraphs and if we look at the
code okay if we look at the code there uh let's make that a little bit bigger
actually we don't need let's close that right uh you'll see that I have one two three paragraphs
here and you see as I highlight them they highlight themselves inside the the
browser okay and paragraphs tend to have a margin on the bottom there four um
yeah there's space in between each one all right now remember how we put a
class on this header and it put a class directly on the paragraph right let's
look at what what happens in the text stack if I put in my text oops let's
type that properly okay and let's preview that actually let's can I just uh reload
that page okay um so now if I inspect that you'll see right here okay
you'll see that the tech stack has something that the uh the normal header stack doesn't have so this was the
normal this was the header stack that we had set to be a paragraph it is a paragraph okay and the paragraph has my
class now the text stack um creat something called a div and that's just
like think of a div as just a generic box or a gener a generic container that holds stuff okay now um because the
markdown can generate many things multiple paragraphs bullet lists all
kinds of stuff okay what it does is it encapsulates it all inside of a a
container okay and that class gets added to that container that contains all of our
text okay so in this case when I added the my text class it didn't get added to
the to the individual paragraphs it got it gets added to a container that's
added around all of that text hopefully that makes sense okay now now
put that in your brain that's that's a very important distinction um that we need to know when we're trying to style
our text content
okay the chat's quiet so please let me know if there's any uh any questions okay that you you know something I need
to review again okay so um now let's start styling some stuff
okay so um let's just go ahead and let's go ahead
and um we'll just unload those some of those okay
so I'm not going to dive through every single font style and font families and
all that jazz because I I want to get to some cool stuff today we're not covering just fundamentals today okay
um but there are obvious things such as um font color and text color which is
kind of an important thing okay what are the differences there
okay um if you notice in text colors okay um
actually let me turn back on the color palettes in sight Styles okay be before
we explain this Swatch let's look at site Styles in general okay you'll see
in site Styles there's something called component colors and text colors okay
and text colors allows us to define the colors for headers and subheaders and
small Elements which are uh a feature of the uh header stack Okay small element
um the generic text color so like our default font color on the page and then link colors and the link hover color the
covers of links when we hover over them now what you might also notice is there is an uh some alt colors here okay and
these are useful because these allow a lot of times we want to have two variations of colors on our page okay we
want to have um uh our default colors and maybe like alternate colors you know
sometimes our websites will have let's say a light section of the page and then a dark section and then a light section
and then a dark section um essentially this alt allows us to Define colors for
our darker sections okay and it's super easy to use the these alternate colors
okay simply by adding in the class of alt okay um so if I do alt
here okay uh let's go ahead and delete my class right and let's add alt
here okay um right now this is a very important
thing I wanted to uh show you how come when I added alt to this it it was black
um but then when I added alt here everything turned white which is our alternate color why is that well the way
um the uh these text colors schemas work okay or these SWAT the text color swatch
okay essentially site Styles has two text color swatches built in the default
on the page for everything and then an alternate class okay and essentially the
alternate class um these are tend to be applied at a container ER level okay so
um when I added it directly to a header it didn't necessarily work okay actually
let's in actually it does work inside uh my bad it actually doesn't it only doesn't
work in edit mode which is actually a bug probably okay um so inside preview
um it does work okay um so everything got the alternate color now in order to
see this better we could probably might you know make our color site color background or just temporar make it like
a gray and there we go so there's our alternate colors okay now if I were to
go ahead and remove the alternate color from the header okay that header is now
black okay so um this the alt class is a powerful thing it allows us to have two
different color schemes that we can use um across our pages and it's super easy
just by adding the alt keyword okay and what's powerful about it is you can
again you can add it at the individual element level like on a header or an entire
container um and just to show you like you can actually add this let's say I have a container um and let's remove the
alt class from this and I know that this container actually here let's go ahead and make my
site background white again okay and let's say um I know I want this
container it's let let's say it's a section of my web page that is going to be um dark okay so I'm going to make it
BG black so it's going to be uh a back blackground okay and I'm going to add in all my text now obviously when I do that
okay um the background is is black but the text isn't so what I'm going to do is to control the text of the colors of
everything inside of this section all I'm going to do is set it to be alt and again it seems like there there
is a bug there with that but will work inside preview
okay so the alternate color will get used for everything inside this
section super cool all right so when you add a let's go back to
what I was showing before when you add a text colors Swatch it's a it it is essentially adding a
third text color scheme
okay um let's say you know if the default color scheme didn't work and you you don't want to use the alternate
colors okay and all by the way all of these colors are defined right here inside site Styles normal colors
alternate colors so if you ever needed a third text color scheme you can do that okay
and let's just call this one my text okay and in here I want my um well we
only have paragraph on the page so I'm going to make my my uh text color to be
uh let's make it just so we can see it's slightly different we'll make it like a bright green okay and so this is called
my text okay and now if I put on this
container my text it is well it that doesn't look too great on a let's turn
off the BG BL okay and whoop what happened let's
see my my my text did I change something hold on let
me just look at the other classes all right so I have my text and the text oh
the color didn't save sometimes I hate the Color Picker um inside of the the
default Apple Color Picker all right we're just make it just just so it stands out you see that now again bug in
here in edit mode now everything is getting applied now if I were to add in
a header let's go ahead in here and let's just add in a um my header
okay so now um I've added a header inside this Tech stack okay if I go into
here and let's say I wanted my header colors to be blue okay that green is
absolutely horrible let's just go into
here uh all right let just do the color wheel
right there we go something that's still wouldn't use that but whatever right so
now we have purple text and a a blue header
okay all right so that is what text colors will do okay it allows you to
again uh you apply um the colors um of an element or for all the sub elements
within a container or within a wrapper okay and again you can do it at a
container level like this or you can just Chuck it at the text stack because remember we learned earlier the text
stack is just a wrapper around text elements in this case a header and three
paragraphs all right so what does the font color swatch
do okay um I'm just going to delete that text color let's let's let's focus on font color
font color is um something that you need to apply to a very specific element not
a container okay so um let's just call this my color okay and um let's just set
it to uh or we'll set it to Red for now
it's going to be red okay so my color uh
I'm going to go ahead and put my color on the header and what you see boom that is now red and I'm going to put it on
the text stack okay and what you see is the text stack didn't do it now let's look in preview okay so why is that
okay um so again remember what I said is the funk color swatch needs to be applied to a specific element okay it
needs to be applied directly to something okay and um directly to to
text so in the case of this header okay this header here um or this paragraph
from the header stack is the class is assigned directly to that okay so it's
getting the color but in here the color is is getting assigned to the
container and that doesn't necessarily affect the individual
elements okay so hopefully that kind of makes sense
okay still no questions people I'm hoping you're uh you're understanding all this so hopefully that that I know that
is a very confusing thing especially for new people um and I do have other videos on this as well there's actually a very
targeted video on the foundation demo uh site um that I think it's like five
minutes that goes over exactly what I've done in the last 20 minutes okay um but
yeah I want to give you a little bit further more in-depth expl explanation of what that is all about right cuz I
know that's a very thing now what could I do to this this Swatch to make it work
with this I mean there's other things there's some hacks we can do right so inside here you can do select or add-ons
you could just say all child elements okay so now um we're saying go
to my color and and all child elements make red okay now if we look at this
what you'll see now is what's interesting is this is no longer red but
the text is um and the reason for that and funny
enough it it's actually in edit mode it's flipped so that's actually a bug okay
um the reason is so we here let's put in uh our our settings for our our Swatch
over here and let's preview so this header here okay okay this header
remember our our our Swatch we said find the class my color and apply this uh red
St color to all child elements now the header there is no
child element because uh the class my color is directly on the paragraph so
there are no child elements so this Swatch this red Swatch gets
applied to nothing here okay but in this case down here um um the my color is
assigned to that wrapper around my text which contains a header and three
paragraphs so this header and these three paragraphs are child elements of
my color let's look at this in the browser so maybe it'll uh make a little bit more
sense okay so if we look here okay again if we look at this we have a paragraph
with a class of my color and uh there there is there are no child
elements so that red color never gets assigned to
anything right but now let's look at this container here we have my text stack which as we see here is a div
class text and here is the my color class now because this has direct
children the each individual child gets assigned a red color
hopefully this is making sense okay what if you use a parent class to
The Container yes you could do that too geston there's a lot of ways to skin this cat I'm not going to go into every
other possible combination um I yeah you could use parent class there's all kinds of other pseudo selector add-ons that
you can add into this as well you can also do all descendants okay which is slightly different I I don't plan on
doing exhaust uh explanation of all of this today um okay but I I I thought it was a very
important thing to talk to you guys about um about you know the difference
between the font color swatches and the text swatches okay or the text colors
Swatch um let's see Sean if I wanted to add a font color to the middle of a paragraph um in the text stack so Sean
that is a perfect question that I was actually planning on going to next okay um could I add a span man you're
ahead of me Sean I'm going to be teaching you about spans in like 30
seconds good good question though Sean great question
okay um now there are are a lot of other font styles that we can do other than
colors right so inside font style um you know we have this we have you know teex
size the weight of a font um do you want it italic do we want to adjust the line
height okay and these Styles um are
all they all behave similar to the font color swatch okay where the font style should
be applied to um individual elements okay now in
this St in this uh Swatch here we can actually apply you know styles to individual elements as well as a parent
class and we can do child elements and all that stuff as as well okay but yeah this particular um one if just to show
you let's make uh 24 let's do 24 pixels on everything okay and let's just call
this uh it's my class okay so let's just do my class click on that all of a sudden boom
that is now 24 pixels right now let's do it on this oh interesting it did do it
actually on here I didn't expect that to actually do that on on that text class interesting okay
um I I guess I was wrong um it's probably because of some ways I'm doing
uh I probably made this work a different way um for people having some issues
okay it doesn't work necessarily like the font color swatch so I was wrong on that one okay um if you want to make
that bold so on and so forth right so you can set that to your font weight now if you have font Pro um there's some
more styles that you can do okay um I'm not going to dive into all the fonts
today we are going to play a little bit with fonts um but not I'm not going to
do a deep dive onto it we're going to use some Google fonts just because it's super easy okay um but there's also a
font Pro style okay and um at this point we have a lot of granular uh stuff what
we could do with like letter spacing word spacing like there's some very grain stuff that we can do with um and
this comes with our font Pro um swatches okay does not this font Pro style does
not come with Foundation 6 it's part of our font Pro product that integrates well into Foundation okay and here you
can do all kinds of stuff you can do a stroke on text um you can do add text Shadows uh we have text shadows in the
shadow Swatch um in Foundation but here you can do it uh within font Pro um and
I think it might have a few other uh settings here that others doesn't I don't remember okay um but yeah there's
a lot of more professional style um granular text settings here um within
the font Pro Styles Swatch okay again I'm not going to dive into all of that today okay because I
wanted to get into a new subject um or something and I'm actually running out of time um so I think it was two weeks
ago um I showed off a I'm going to open up a um the
foundation uh demo
project okay uh because uh now you might have saw this post on the community and
um it was about creating an animated highlight okay and let's just let let
this load I didn't have this inside this is just an existing rap Reaver project so now we got to open up rapid Reaver
sorry um okay just for Speed I I could do the same exact thing here let's do
now actually oh man I forgot I actually went the to the nth degree here to kind of really document everything what's
going on here okay but we'll review it all today okay actually for fun let's just go ahead and uh let's let's just
take these just copy those and uh let's paste it in here okay
cool uh now I don't need this thank you very much goodbye okay um all right
let's go through this um I'm going to minimize site Styles and let's delete
this container which we don't need okay hey did you just see I can copy and
paste from my old rap Reaver projects into new Stacks projects right hopefully
you saw that okay uh because remember I'm using Stacks app right now okay
um so uh highlighting let's preview this okay and
oops what's going on here oh did I break
it is there a that should
have ah darn it what did I
do all right we might need to do it in the other
one darn it and I just quit it too all
right instead of me trying to debug what's going on there we'll
uh I break
something darn oh well okay I didn't test that obviously beforehand as you
can see all right uh let's preview this oh there it goes okay um actually
you know I'm wondering if I did I have anything in another was nothing inside Styles okay whatever we'll we'll we'll
review the implementation here okay um all so as s uh as Sean alluded to
earlier how can we apply styles to the middle to text within a paragraph okay
now in this case I'm doing kind of a fun effect where um I'm taking this uh this bit of text and I'm adding a highlight
to it now there's a few interesting aspects of this the Highlight is actually kind of angled up a little bit
it it's not like perfectly centered which I like right it makes it more more normal right I mean less
perfect right um which when you're highlighting something on a page you're never exact right it's always a little
bit offc centered maybe a little bit up it's not perfectly straight right so I kind of tried to mimic that with this
and so let's review how that is accomplished and it just uses a header
stack as you can see here okay but the powerful thing here is something called a span
tag okay so if we look at this okay see look how small this text is versus I go
over here okay look how nice and look at that is that's nice so much nicer okay okay
so uh let's look at it here just so we have this open this is a and if you see I have a span class equals highlight and
I basically put this around actually let's copy this okay and uh let's just open up VSS code
here okay and let's just make this
big all right um well this is my
okay so uh let's say this was my text that I had right and let's just do uh language mode
HTML B all right so in here you'll notice that um first off let's just you
let's simplify it okay so inside of my text okay or of my paragraph I'm going
to put in these little span tags okay and that allow what that
allows me to do is that allows me to Target parts of my
text okay so um here what I did is I also added a class to my span so that I
can easily identify this particular span or any span that has the class of
highlight okay so and you could have as many of these spans as you want inside
of your text this can be inside of a paragraph this could be inside markdown this could be inside of a header
wherever you want okay and these spans they they don't add any extra space they
don't add new lines unless you apply those things with the class with
swatches okay um now this highlight example is is a little Advanced okay um but let's go
ahead and uh look at this okay um
let's this is definitely an advanced option I I probably should have showed some something a little simpler okay
because uh let's do a simple version of this okay and I am in here let's go over
back over to here I'm I'm going to do one called highlighter okay I'm going to add an ER to the to it here just so that
um it's a different class okay so highlighter okay and um so to do
something something basic here um I'm just going to go ahead and go to background I'm going to add a background Swatch okay actually what we're going to
do is uh I'm going to add a new swatches in here we're going to minimize that actually move this up here okay all
right let's so we're not don't get distracted um so here uh we're going to do highlighters okay so here we're going
to do highlighter okay highlighter okay and
I'm just going to do background color and let's pick um oh there and as you
see it you can see it right there boom now so that gets us hey that
that's most of the way there but again that that's kind of like a perfect highlight right um but let let's make it
obviously we don't want it it would be nice to have a little bit of maybe a little bit of oomph at the beginning and end so maybe we can like add like I
don't know a padding okay and um let's do like a highlighter
okay and uh let's do detailed and I only want left and right so we're going to do like four pixels on the left and four
pixels on the right I and it helps if I spell it right
let's just copy that to clipboard there we go so it adds a
little bit before in the end but what that does is it actually adds extra space between these the text as well so
it it it does modif kind of the flow of the text a little bit okay um but as you
see I I can I can now Target parts of
my text now and there's a lot of things that we can do um here okay so for
example um let's go ahead and is this is this a header this is an H3 let's make
this an H1 okay and let's have a little bit of fun Okay so highlight is something you can do but let's do
something other more practical okay um let's say okay that's an H1 okay um
let's go ahead I'm going to I'm going to add in um we're going to do more
text actually you know what before I do that uh let's uh all right we're going
to here let's do this I'm going to keep that the way it is uh actually let's go
ahead and I'm going to put highlight back in there okay and then we're going to do uh I'm just going to copy this
above right Let's ignore that let's go into here okay and let's just do
this all right so now I have a header uh and let's do uh let's just do some uh
laurum text okay um I don't want that much laurum text though so let's just go
the first bit okay there we go so I have I have a nice big paragraph okay and um let's look at
let's let's look at our styles for H On's right okay so we got 48
pixels and our font our default font oh the font family is just going to be the
system font right and the weight is going to be the 400 okay but um let's
play around with some stuff um let's say um we want to have let's do
font size um actually know font style okay and um I'm going to uh apply this
to my H1 and instead of text size I'm going to apply a weight of
um 200 okay so we got thin right so there we go so now my my H1s are thin
okay okay and you know a a one thing that is very common is you you're going
to within a paragraph maybe make this particular one bold okay or you know so you can take
key terms inside of a sentence and make them bold okay so let's let's work on that
that's something that's very common okay so now I'm going to go ahead and add a uh font style
okay and um let's just call this
um bold right um so font style bold uh
and then that is going to be a weight of uh let's do 600 okay not sure how that
will look let's play with that okay so now I'm going to go into here and let's say I wanted this particular word to be
bold okay so we're going to do uh span uh class
equals um
fold and we're going to close the span on
there right and Just for kicks let's add it in a let's just copy this and we're
going to add it to I maybe right here and we're going to close it after two
words all right so let's let's look at that really quick so here I have class
span equals bold and then you have that oops my Clos span tag you got to make sure your close span tag has a little
slash in it right and then over here I have Clans uh span class bold and then we have our closing span tag okay so now
we'll see it right here in edit mode okay that um that particular bits of
text are now bold and they stand out this is a very common design um you know
utility for text now I could also then take the font uh let's do font Color
Oops font color Jesus I can't type today um and we're going to we're going to to
bold as well maybe uh we want to make those instead of black we want to actually make those a special color okay
maybe we want to make it uh like that
right boom so now those bits of text are styled within my paragraph or my header
or whatever okay it doesn't matter what it is um these span tags you can use
anywhere you want okay and then you can Target them with
swatches pretty cool right now this is just a simple idea you can then go a lot
of different ways you can actually um let's go ahead and add a Google font
okay and um let's do
um uh uh Merryweather is a nice font hopefully I just spelled that right
let's see right and uh I think 200 is what I
set my font to I don't know if Maryweather has 200 uh we we'll find out in a
second all right uh let's preview that Mar NOP Merryweather does not have 200
okay uh let's try um um Lotto I know I spelled that
right I think that has 200 oh oh that doesn't have 200 either
what actually here let's do write font uh remind me later um let's do
Google fonts uh let's do
Lotto uh what what weights is
that uh regular what is light light might be 300 I I bet you it's here let's try um
Lotto 100 there it goes all wow that's really
light holy smokes all right let's try 300 all right I like that okay 3 00 okay
now um uh then what we can do is on those bolds okay let's let's do something even
more interesting um let's see
uh all right let's try Mary so if you notice Merryweather is a um a a siif
okay Lotto is a sand serif without getting crazy into typography here it's
basically these little the little things at the end of our character those are called sifs okay um and if you
look at Lotto which we can see up here well this is this that's not Lotto but that is a sand serif a sand serif means
without a serif okay so there there's no little ligatures at the end of each
letter okay hence the uh fonts like this one here I'll call a Sans serif because
they do not have a serap whereas um SF fonts do have them okay all right
um so let's look at Merryweather and let's do okay it has a 400 okay so what we're going to do is I'm going to do
this we're going to do um uh Mary
we I don't know if this is what I'm going to be doing is actually going to look good but we'll find out in a second
let's make that 400 and I don't want to apply that to
H1 right uh um so here I'm going I'm assigning U Merryweather to the
Maryweather class and I'm actually not going to assign it to anything on the page okay but so what I'm going to do is
now let's say I want to have these to be bold um and Merryweather okay um and and actually
I'm going to have to change the bold because I think I set the Bold to be 600 I loaded Merryweather as 400 okay so
let's go over here we're going to change change that to be
400 boom right so now you can mix and
match I I'm not sold on this exact connection actually maybe the opposite um here let's let's let's try the
opposite of of that um so I'm going to set Merryweather to be my header font at
400 okay and then um we're just going to change this and
this is going to be Lotto is 300 okay and I'm not going to assign
Lotto to H1s and we have the lotto class and I'm just going to set Lotto
class here um just to be because I'm going to be lazy to Red all right so now in here we're going
to change this from Bold to be Lotto
right Lotto All and again uh Google fonts will not load inside edit mode for
performance reasons so let's preview that and eh I don't love that either okay but as you can see you you can mix
and match things now right I think it actually looked better pre previously okay um so you can not only mix up
styles but you can then make some text that you want to maybe accent here actually Let's do let's do something
else let's do um uh fit text uh let's do fit text
and um just going to do element uh let's do CSS let's do
H1 okay oh interesting uh position relative why did
that do that
interesting oh worked great inside the browser
huh interesting but here let's do um let's
make it even bigger let's do like 150 to
250 you know that there are some you know that's quite large right but this
uses you know there are things that use text as a design element uh and you'll see stuff like this on a particular
website right where you have this this ginormous text right on the page and um
yeah um so something like that could could work right I mean obviously we play with the fit text fit text settings
there but yeah could work um pretty cool okay uh or you can
do something like this where you know this particular thing maybe makes that particular word stand out right and
again they're they're bits of a larger paragraph okay cool all right um I know
we are already at the 1 hour mark or actually past it a little bit I I did want to show off a little bit more of
that highlight um actually when I I'll me when I planned this live stream I forgot that I used some more advanced um
swatches uh to create this highlight okay um I did do some nice overviews
okay of what I do with this highlight essentially what I'm doing is I'm using
I'm creating something called a pseudo element okay um so let's let's target
this particular highlight okay so um in here um this highlight I'm not
highlighting the actual text what I'm doing is I'm creating a
fictitious um element behind the text okay uh let's just use the inspector
here to kind of teach you again this this is definitely kind of next level stuff okay use something called a pseudo
element so here is you'll see that this is my text I have my H1 and it says this
is text and inside there I have a span okay and uh why is Toggler enabled I
must have Toggler somewhere here I forget okay um so here I have a before
element okay here's my highlight text this before element is what
contains um the uh highlight okay it's just basically a yellow box okay that
I'm shoving behind the text right so if I turn that off you can
see it's just it's just this yellow uh box that's behind the text okay and so
let's review um everything here pretty I'm going to go a little quick okay hopefully you guys can can follow
along um so here this in this pen we actually create the Highlight okay and
this pseudo content stack is actually what creates it okay it doesn't look fancy but all it's doing is saying okay
highlight and we're going to create the pseudo element before the element you can actually have two cell two pseudo
elements for every element on a web page you can have a before and an after okay
I just used the before okay now um I want to um position that
okay Rel relative to um the parent which is that bit of text okay so here I have
this before element and I want to position it so it it kind of expands this entire parent which is the span
itself so the the the parent of the before element is the
span now if you use the position Swatch you know that we need to make uh when we want something to be relative to the
parent we need to make sure that that parent is set to be relative Rel so
that's why I have a position Swatch over here where the Highlight class is set to
be a position of
relative okay and then here I I basically set the element to be um top
zero bottom zero left neg five and right neg5 now the reason I'm doing right and
left neg5 is to draw it outside of the bounds of the span so I'm
actually dragging it to be bigger than the span
okay um and then here I set the background to be yellow that highlighter
yellow okay and and important thing is here I set the class to be highlight and a big thing here is you need to make
sure you set the selector add-on to be before because we want to apply if I
didn't set that okay let's look at the page now uh it's applying the background
to the highlighted text oh to the to the actual span not to
our before element okay so it's very important that we do
that okay so now how do we how do we do um
all the fancy animation right let's refresh that so we can kind of see voila
okay so now let's look at the
animation oh not now I remember why I have the toggle stuff on there so um here I'm using a toggle on
scroll Swatch okay which um is kind of interesting because if this text If This
Were high this were further down the page the Highlight would happen as it
Scrolls into view now because this is on our page by default it just happens on page load okay but the Toggler on scroll
um will will basically uh apply this particular style that we're going to be doing um on
scroll and basically what this is doing is um when it's uh into view so we want
to trigger on highlight when um highlight when that span becomes into
the view we want to add the tall we want to add the expand
class Okay so this point basically going to add add or remove that expand class
and you probably saw that when we looked at it um there is highlight there's an expand class okay and I if you if we
refresh this page if we look really quick if I C it I didn't get it fast enough on page load that expand class
didn't exist okay um it did it got added by the
Swatch so if I manually remove that uh well it only controls the there it is so
boom it's gone okay so um when I add add that expand
class voila it adds the uh the animation of the Highlight okay just by adding and
removing that class okay now when you want to do something like that actually
this I'm explaining the Toggler on scroll stack now but I didn't add this until afterwards okay um because
basically what we want to do is uh let's set up uh uh here what I'm
going to do is I'm going to trash that and that for
now okay just to kind of show you um what it what this does okay so first off
um we have two states okay we have a transform Swatch okay without the expand
class and we have a transform Swatch trans transform Swatch with the expand
class okay so let's look at the default okay so transform on highlight I am
scaling of by one and one so basically making it uh itself and adding a a skew
of 5° and3 de right and what that does is that adds that skew so it's not
perfectly centered right that kind of gives it what I think it's the more realistic look right where it's it's
skewed by 5° and 3 de okay now when we add the expand
class uh what we'll see is uh oh uh here okay uh I have scale X
from zero okay and the only difference is here scale X is one okay what does that
mean so basically what that means is um it's I'm by default I'm setting the
scale of X to Zero so it's basically squishing this down to
zero and then when I add the expand class it's going to make the make it
expand all the way to zero on the xais hopefully that makes sense okay so
uh Let me refresh this page okay so let's inspect that okay again
right I I remove those those animate swatches so it actually doesn't automatically add the class for us okay
so now I have highlight okay and I'm going to add the expand
class okay so again what that does is it changes the scale of the X
along the x axis from zero to one just so you can kind of see what what that
does I'm going to set the default to be 0.25 okay let's refresh that okay so as
you see here by default I scal the X AIS to be 0.25 so it's only a quarter of the
width but what I wanted is I want it to be completely zero so that you don't see it at all hopefully that makes sense and
then when we set the scale to one it's going to expand that out
okay now um obviously we don't want the Highlight to show up like this right we
don't want it to show up like let's go back to inspector let's add the expand
class I don't want it to be instantaneous right I don't want to be like boom I want to actually highlight
out okay and and the the Swatch that we use to do that is called a transition
Swatch okay so our transition Swatch here says okay anything on highlight
before okay remember uh I should have I should have said this transform Swatch remember it's important that the
selector be before on both of these cuz that's what we're transforming is the before pseudo
element okay so um for highlight before so for the pseudo element I want to
transition over 300 milliseconds so a third of a second and I actually delay it by 1.5 seconds so I want to delay the
start of that by 1.5 seconds then take 1/3 of a second to actually expand out
so let's see that in action so that's why see when uh when we
reload the page you get a delay because I'm delaying that animation so that you know maybe that as the user scrolling we
want it we don't want it to happen immediately on page load we want to delay a little bit so that it catches the user eye the user's eye when the
animation does happen Okay and the animation speed as you saw it happened in one3 of a
second okay 300 milliseconds and then uh you know I explain this Toggler on scroll that
Toggler then automates the addition of that expand class so that we can automate that you know adding and
removing of that expand class onto the span okay there we
go okay guys hopefully I you guys learned something I know we got a little
Advanced towards the end um but yeah uh Sean good job on um you know seeing
envisioning where I was going with uh with this right um so yeah uh really
good stuff spans learning how to style things um with them so you can do you
know either different colors parts of the text different sizes different fonts
even okay um yeah really cool stuff I hope you learned something today let me
see if there's any questions that I I overlooked
nope I think that's it okay um cool well thank you very much everybody I hope you
uh you enjoyed it uh we'll see you on Friday okay at the hangout uh that is uh
1:30 p.m. Pacific on Fridays same time every Friday we'll see you then uh and
we can uh yeah that way we get actually interactive uh this is a very one-way thing where it's me talking to you guys
um that is definitely a group setting where we all get to interact with each other unfortunately sometimes not um but
yeah uh hopefully we'll see you there and remember get your ticket to the summit um they're available now April
11th to the 13th it is a 3-day event that uh yeah it's a lot of fun so
hopefully uh you'll get to join us there and uh learn and grow and have a great
time so take care everybody hope you have a great rest of your day I'm now getting Tongue Tied um and I
need to get some water take care everyone take care bye