okay everybody how's everyone doing today I had to do some last minute uh changes to
my live stream setup um I'll uh hopefully be able to
troubleshoot that one thing with this new setup I don't have my cool little chat integration so um give me a second
I uh I need to get the uh the video up so that I can actually see the chat uh
one second going have to go old school on this
one here I can open the chat in a new
window I pop out chat there we go
okay sound in picture okay good um if you're curious um for years I've been re
I've been using a service called restream and um essentially I stream from my lap
from my laptop from my desktop to restream and then restream then broadcast that out to YouTube Twitter
and Facebook um and I use a a app called wirecast locally um that does that or it
connects to Ram um now for some reason as you probably remember the last two or three
weeks I've had like some really bad connection issues um so I pinged restream today
I thought I'd test before um since it's happened multiple times now I was like let me do some tests before I actually
start the live stream this time and um still having the same issues
so um contacted their support they're looking into it but for today I'm streaming directly to YouTube and as of
right now it looks like it's solid so I don't know maybe this will be the new norm and we'll just forget about
streaming to Facebook or Twitter um so so anyway uh I do like their little their
little chat app though it was kind of nice but I think I can live without it okay
um that was fun I've been like for 30 minutes I've been trying to struggling to get that to work stressing myself out
and uh but anyway okay um thanks for coming everybody hi Josh
and Mr Cole David's here Scott's here oh we got Ryan here um cool
all up Chris is here unfortunately get out of here Chris
Jason good to see you bud Peter thanks for popping on excellent Ron
sweet okay um chat here is looks like it's frozen
oh no it's good okay tacos um
today I thought we would talk about Foundation 6 swatches actually I have to
G uh I have to give um Scott heads up on that I uh I was like what should I what
should I stream about today and um I was chatting with Scott and he was like hey
I think we should go back to the basics again with swatches because uh based on some questions on the community um you
know it seems like that would be a good call and I can agree with that um actually been noticing a lot more in the
last week or two a lot more like CSS answers and I'm like hey yo you know you can do this with a Swatch it's a little
more user friendly maybe um you don't need to have learn CSS right that's what
kind of the what swatches do for us and so I thought it' be fun to uh yeah go
back and kind of revisit swatches um talk about what they are um
how they're um organized how you can use them and uh yeah so we don't need to
figure out CSS I mean I'm not to say that CSS obviously CSS is awesome I know
it very well um you can do a lot of stuff you can't do everything with swatches there there are some things
where even I'll be like here just put this snippet of CSS in there um it's just potentially simpler in a small
percentage of the cases um rather than a Swatch but again vast vast majority of
the time a Swatch is perfect uh I need to turn off my little space heater it's uh heating me my behind a little bit too
much getting a little hot back there W man
okay okay uh what are we doing man I'm hungry um but anyway let's go ahead and
uh let's get some wrap Reaver going
here or should I say Stacks classic right
okay voila okay so let's um I'm just going to open up the demo file on demo
file I think this is what we were working on last week maybe I don't remember let's go ahead and clear that
out okay yeah you guys can see guys can see
it all in its Glory uh let's um you know maybe I'll talk about this if you guys
want let me know in the chat whether or not you guys want me to talk about this little color slurp app
um later on okay just close that for now though so we can get this nice and
big I just realized my display didn't uh
didn't resize so I apologize if everything's a little tiny today and I
have learned in the past if I try to resize my desktop be while I'm streaming
that is just a disaster so um darn it my little pre-stream automation didn't
resize my uh my browser window or my my desktop resolution uh that is
frustrating hold on let's let's see how this is going to work out here let's
see where do I normally set it to one second here let me let me go ahead and I want to see if I can I can do this
again 20 48 okay right let's go let's give it a shot cuz I I want you guys to
be able to see this and I don't want to have
please all let's go out back
in what I'm going to do is I'm just going to go like
that out in okay does that screen look better
now okay cool um excellent it's a little blurry for me but I can live with that
as long as it's it's clear for you guys
okay excellent hopefully that's a little bit better okay
um site Styles so here let me uh go ahead and normally I have site Styles
some various things turned off and this is what you guys normally
see in sight Styles yes yes it seems better zoomed in
yes it does okay cool um so Insight Styles um this is where
pretty much all swatches reside there are other ways we'll talk about the swatches stack um in a little bit okay
but um site Styles is a little bit nicer
because there's some organization um built into it okay now I guess in site Styles itself
is kind of like one it's kind of got some swatches baked into it okay um and you'll you'll notice
that these are component colors okay and there's text colors right um and so
those are kind of baked into site Styles so that we can Define our default colors
for various things within our site so for example let's go through
site Styles default okay um I'll skip these settings utility
classes we've talked about utility classes um if you know you're going to need them or not need them um chances
are you can turn off this load extra classes okay most of the time those aren't used by many people it's on by
default for backwards compatibility sake um probably in a future update I'll turn
those off by default um but they are on by default on purpose um just for
backwards compatibility okay but if you know you're not using extra utility classes meaning like um utility classes
like SM colon W colon like all those those media query specific ones so
utility classes that are specific to sizes I don't want to go down that rabbit hole um but I I have some posts
in another live stream about that if you want to check that out okay but most of the time I'm going to say most people
can turn the second check box off okay okay um site background
so here in the site Background by default the site background is going to be white it's actually like a slightly
offwhite it's not Pure White okay
um it's almost indistinguishable from white but there's some reasons for that blah blah blah blah blah whatever um but
if you want to change your your site background color um this is where the best place to do that okay so you can
have a background color you can have an image you can Warehouse your image or you can have your own custom CSS okay
such as if you wanted to do some sort of background gradient or something like that okay you can do
that um there's also um if you turn on
um this little plus button there's some extra modes here um which doesn't really help you much with the color but if
you're doing uh background images and whatnot um you can go ahe and change those um I personally recommend like
just sticking with something simple like I'm not sure a a background image works
for many websites okay normally you're going to have a colored background and then your content containers can have
background images right but um your site background color can change okay um so
there we go but most time I'm finding white okay
um site sizing okay so this is where we can Define um the maximum width of our
content so um I this is kind of turning into a
foundation Basics but it's okay um so let's just go ahead and I'm going to go ahead and add in a uh let's do a text
stack okay and I'm just going to add in a bunch of warm whip some text just for
fun okay just a bunch of text and um I'm going to put in one
outside of a container and one inside of a container he and let's just preview
that and why did it preview it like that oh boy it replaced my
uh replaced my YouTube chat window that wasn't very cool of you uh how do I get
that back that is annoying
history W never had that before look at that back and I can't even go back
that is brilliant one second here let me get my YouTube chat back
open that was
great chat popup chat there we go okay got my chat back
okay
all right and I don't need this live stream okay
um there we go okay now I got my chat back although
I lost the history it's all good um so in this example here uh what will notice
if I make my screen my uh oops my screen large you'll see that the top one goes
the full width of the browser window where this bottom one is centered and it
has a a limit right well that limit is Insight Styles it's this Max width
okay um now you can make your site unlimited with um I'd recommend not uh I
mean I guess there are some designs that that that works okay with but most of the time you're going to want to have a
maximum width on your on your content now um
what defines the only the only stack in the entire in all of foundation that
obeys that Max width setting is the container stack okay I can have um a a one column
in here okay so I could have a one column and a container let's preview
that and it's the same thing okay um it's because it's the container that
obeys that that site width and you can adjust that in a container in the container settings there if you'll
notice here's there sizing and it's site width pus gutter site width there's a few other full width options and whatnot
okay but by default site width plus gutter is what the be default behavior
is and that will um obey that site width setting in site Styles and it will Center it so there we go Okay
cool so that's site sizing now now we start going into some of our Swatch
style settings um inside sight Styles okay um and just for fun just to show
you here we have site colors now these colors um obey various things throughout
Foundation right it's like your default button color and your secondary color right and um things of that nature right
so also if we go to things like accordians um and here let's just add a
couple things in here um so I'm going to go ahead and add in let's add in a button right so I'm
going to go ahead and add in a button here and then uh let's go ahead and add in like an accordion right just for fun
we'll add an accordion there okay um no not an accordion menu I wanted an
accordion container which is this accordion okay so we have an accordion
and let's just go ahead and add some items in there okay and for fun let's just add add in some
text right I'm just going to add those right now okay so we have an accordion and we have buttons now if you notice in
this button and the accordion okay you'll notice here that we have under styles for a button we have various
colors we can choose primary secondary alert success and warning now if you're
familiar you'll you'll look at these labels and you will notice that in sight
Styles that's what those colors are right so uh when I set my button here to
be a success button well guess what it's the color of My Success color inside sight
Styles okay and there are various other places that have you know white light gray dark gray or black colors used okay
you can customize those and then obviously text colors right so we have text colors for headers which are H1s
through h6s um we have subheaders which in a header stack there's a subheader checkbox so so you kind of have like an
alternate color okay um small which is another part of headers okay then we have our default
text colors and Link colors and Link cover okay
um so and those are all our default colors right uh oh and I forgot to show
you accordion right and accordion um I guess accordion just use I should have
used tabs I forgot um here let's quickly just that's fine
uh oh I have a template made up of tabs cuz Tabs are kind of a a a laborsome
thing to set up so let's just go ahead and do uh uh tabs let's just add that boom so
we can see that really easily okay and for tabs let's oops uh don't
edit I just want to extract it okay cool
um so tabs here uh you'll notice that there are some colors used okay and it
actually uses I'm going to go ahead and just change this primary color to be something different right
now okay let's just change it to uh all let's just pick something
crazy boom all right let's make it purple so
primary is now purple right and if you notice that the tab text color here
changed the purple and actually would have been the same for accordion okay um
but just to show you how um component colors now these are if you notice these
are called component colors and they're called that on purpose okay um and let's
go ahead like if I were to change the secondary color let's make that a little bit darker gray you'll notice that um
that doesn't change an ed mode but um these colors that are for component
colors are used to color various components of stock of foundation that
includes buttons and any sort of foundation component if you look in these Stacks it says Foundation 6
components right so accordion captions cards light boxes all this stuff here
okay uses the colors that are defined by default inside sight styles
okay now um if you notice if you wanted to override the colors for a particular
section of your site or a different thing you can go ahead and add a component colors Swatch okay we'll get
that back to we'll get back to this in a little bit but just notice that these colors are all the same thing inside
this component color swatch okay so again that's why I said that this is like like a Swatch just baked into sight
Styles okay just because these are your default colors and we can override those in the future um with that component
color swatch which I won't dive into that that ho yet okay
um text colors same thing if you notice under font and text we have a text colors here and we have header subheader
small link cover and text you notice same exact colors we can just override those uh for particular sections of the
page now there is a cool thing built in that kind of comes from Foundation 1
days called called alternate text colors okay and what that is is um let's go ahead
and just simplify this content a little bit and we'll just have just a text area again okay uh if you notice this says
header. alt subhe header. alt okay and these are all alt alt alternate colors what is an alternate color well if you
notice a lot of these color schemes are for white text right so um by default
our headers are going to be black our text is going to be uh black black link colors are going to be blue but let's
say I want to have an alternate section on my pages cuz a lot of times we're building like a traditional like bandid
website we're going to have like a light section and a dark section and then a light section and then a dark section right so that's what this alternate uh
colors are for so you can create an alternate color scheme for text and all
you have to do is let's say I go to a container and we're going to type in our first class here I'm just going to do
this magic class called alt Al okay and what you notice here is this
text became White and that's because that's my alternate text color okay now to make
it look a little bit better I could just do BG black which is a utility class which I'm not going to go into right now
okay but just to quickly make this background black you can see th um the
alternate text color works on a dark background
okay okay so that's kind of like um for for text it's basically like having two text uh color swatches on our page we
just have one that is our default the other one is tied to an alternate
class okay um so that is site colors and there is text colors we also have some
stuff for like underlining do you want to underline your links or don't underline your links so on and so forth
um and then we have text sizing okay um and actually you know what I was thinking the other day like why don't I
have a text sizing swatch I think that was an oversight on my part um I think that would be cool have this uh this
little section right here as a Swatch could be cool um maybe that will come in
a future update okay um can't believe I never thought about that before um but
right now only site Styles has these options and these are going to be your default options or your default text
sizing for small medium and large and you can do it for all your various headers your text and your buttons
okay okay so that's teex sizing um then we have some some kind of
outlier things such as um list Styles so if you're using bullet lists or numbered
lists these allow you to Define what kind of um little bullets are used okay
so do you want to have circles or or discs or squares and if it's a sub
bullet list what do you want to use right same thing for numbered lists and then list positions that is the do you
want by default it's outside so it'll actually put the bullets outside of your text versus inside of your text so it's
just like indenting your lists and whatnot so just some list Styles and lastly we have some um there
is a global radius setting okay and let me show you an example um there are
various things such as you'll see some settings buttons are it's probably the most prevalent so we'll just add a
button stack to the page really quick okay and and inside of a button you'll
notice that there's a feature to called called radius okay and you can just turn it on
and off that's it that's all you get and there there are various radius settings throughout several Foundation Stacks
okay and if you notice what that does is it adds rounded Corners to our button
okay this is a very subtle rounding it's only a three pixel rounding okay but all of these settings throughout Foundation
that use a radius option okay um that uses This Global setting of radius okay
so if I were to set that to 10 you'll notice now that this button has a much more rounded look to it okay now this is
powerful because I can now I can kind of globally change and control these settings right so if I decide you know
what my rounded Corners I want them more rounded right um we can just utilize This Global radius setting which is
really really cool okay um and if you want here's a little Maybe power user
tip let's say I want to have a um a container okay and I'm just going to quickly uh give it a black background
okay here let's just uh we're going to do that what we did we're going to do alt and then BG
BL okay uh just so we could see it okay if I just have there's a a class if I
just do radius okay well you'll notice I now have that Global radius on here right
pretty cool okay it's just a class I can just use the class
radius um and then if I go into here and I change this to be back to three
pixels you'll notice that that radius changed on the button and it changed on my
container pretty cool right so super useful um and the reason that's great is
because um you don't want to have some things on your site have like a radius that's large and some are small cuz then
your design is going to look inconsistent okay and Foundation is all about making sure that we are consistent
and we um don't repeat ourselves okay the dry principle right so that you know
years ago when we didn't have things like Foundation six we would have to add great round corners on everything
individually and if you ever wanted to change that You' have to go to everywhere and then things get out of
syn and it's just horrible right so being able to control our Styles
centrally is super powerful okay so yeah there's the global radius next is um if
you don't like the default gutter settings that I have throughout various Foundation layout Stacks columns and
whatnot this allows you to change the size of the gutter between the columns
so there we go sweet wish I got a glass of water before
I started okay let me go in the chat was there anything anything I missed please go
ahead and if you have questions or you want me to stop and clarify some things go ahead and let me know in the chat and
I'll make sure that I uh I address those before we end today
okay okay so that went over site Styles um now let's talk about the rest
of site Styles and it's swatches so you'll notice that swatches
are broken up into different features right um by the way I'm going to go ahead and insight Styles uh we're going
to go ahead and I'm going to turn off the color palets just to save us some space in edit mode okay um another thing
before I turn it off is this display chart okay you might be wondering why is this chart in the back of my site Styles
okay well that is a great question that's because a lot of times um
Foundation has um standard spacing sizes uh across all of it swatches and utility
classes I'm not going to go into utility classes today um I've used a couple of them I have I have videos specifically
on those go check them out but they use these standard sizings okay
and a lot of times it's like it's hard to know like what does 64 pixels look like what is 120 pixels look like 128
pixels right so it's it's I know we can kind of know it relatively but I want to
give us a a place and a location to visually see what 48 pixels is okay so
like for example um let's just pick let's say a margin Swatch okay
um and you'll notice that in the margin Swatch we have 1 4 8 12 16 20 20 NE the
negative and positive versions of all of these numbers and the reason this chart is
here is that you can visually see which of these options you want to
pick so that you're just not guessing you can you can look at this chart and be like you know what I want about this
much margin on my container or on my card right so I can go ahead and say
let's say I want 64 okay I can go ahead and and
say um you know call this black um container okay give a give it a class
here I know we're jumping ahead a little bit but I'm going to go ahead and do a mar I'm going to do all a margin let's
say padding I'm going to change this to a padding Swatch really quick so we can kind of play around so I'm going to do a
padding um and I'm going to jump in here and do a class I know I'm jumping ahead a little bit bear with me and I'm going
to do 64 because we we saw we visually saw 64 here and then I'm going to go
ahead and put that class on this bad boy right now and
voila so we saw that that size and we boom that's what I wanted now maybe when we add this to to
this we go uh you know what that that's a little much we go down to like you know 48 right and you go okay yeah
that's good right so we can kind of play around and see things all directly within edit mode okay I jumped ahead a
little bit I just wanted to show you um why we had this sizing chart um and uh
why it's there and you can also just go ahead and turn it off and I I
I personally like to turn it off sometimes especially if I'm doing demos because it just takes up less space in
edit mode okay um I also have dedicated stacks for that um like so there's
actually a size chart it's this the only thing the stack does is have a size chart so you can kind of put that
wherever you want I kind of use that with shelf a little bit I'm not going to go into that right now okay don't want
to go down those rabbit holes okay so now we're down to um our
groups inside site stuff Styles and we have features font and
text General and components there are a lot of swatches
in foundation and I tried to logically group these in some sort of way so that
we can um find them a little bit easier so
features these are um these necessarily aren't ways of styling your site it's uh
this is a way of adding features to Foundation 6 okay I'm not going to go
through all of these um some of them are thirdparty Stacks so all of these down here are all thirdparty stuff such as
page safe and total CMS and pwa and agent and stuff like that
okay but other things are like do you want to have font awesome 5 support font awesome 4 support do you want to have a
site preloader um there's a bunch of other things here that aren't necessarily style related but since site
Styles is kind of like our Central hub for um Foundation um it made sense to
have give you the ability to add new features to Foundation via this
dropdown okay now the rest of these three areas are 100% for adding features
to style our content our layouts or websites and I think it's pretty simple
so this top one is font and text obviously these are going to be swatches related to styling our text
so now if you don't own font Pro this will uh font Pro is another product of mine um you'll see less things in here
so basically all these ones that have the word pro at the end are um from my font Pro stacks and you'll have those
they're just um that gives us the ability to have uh load in fonts from
external services and the font Pro style stack has a little bit extra okay but
let's go over some of the defaults here uh in a little bit but just want to show you that these are all text and font
related um settings now you might be wondering what's the difference between a font and a text okay well text is your
actual words on the page and the font is the
um the font that's applied to it right so it's the style of the letters right so we need to load our fonts on the page
and then we can style our text to be a color or a size and things of that nature
okay next is general and these are
generic Stacks that could be applied to anything virtually anything I'm sure
there's some things maybe that that don't make sense here and there but for the most
part all of the swatches that you have that you see within General are going to
be settings that can be applied to most things they're
generic they're generic styles that could be applied to virtually
anything now you might see some of these have like a little Plus on the on at the end of the
name those are um swatches that you get if you purchase the Swatch pack okay I
have an additional Swatch pack on top of the foundation 6 product that um has a
bunch of new um you know styles that are kind of like takes things help you take some things to the next level
okay lastly and I think this one confuses the most people um is
components and these are going to be swatches that are very specific to a
thing okay for example um here's a Swatch for font awesome 5 icon
okay this Swatch is very specific to just font awesome 5 it doesn't work on
headers it doesn't work on anything else it just works on font awesome 5 okay there is a Swatch for
gutters this it allows you to override the gutters for a particular layout
stack so let's say I have a two column and I I want to have that one to have
custom gutters now again in Styles you can you can set your default gutter size but if you want to override that for a
particular layout you can using a gutter Swatch but again that is something that
isn't generalized it can only be used on Foundation 6 columns right so it's something that is very
specific other things are menu Styles obviously this is a Swatch that is made
specifically for a foundation 6 menu you can't apply it to anything
else other things you notice we had component colors I showed you earlier okay this is something that is specific
to a particular item another one that confuses some
people is there is a top bar Styles right so um I know top bar looks
very simple um and this gets a lot of people okay because they're like oh I just want to add I want to change the
background of top bar so I'm going to go ahead and put in a background Swatch and it's possible to use a
background Swatch on top bar um if you know what you're doing um but the top bar style stack just makes it a little
bit easier it has everything that you need um in a in the Swatch it's just baked in okay so um now some people are
like how do I know how do I know when I use a general one or when I use a component one
well basically you need to know the tools in your toolbox okay um so that's just learn you
just that's just a learning curve okay um if you didn't notice that there was a top bar Styles in here or there's an SVG
Swatch or there's you know the menu Styles in here um yeah you need to know
your tools uh I I try my best to make things
as simple as possible my camera's not working oh there we go but um this one's on you okay
um and on me as well as a user we all need to learn our tools that we have you
spent H1 or $150 depending on what bundle you got on Foundation okay and
you probably bought a bunch more Stacks right play around with them right look
at what's here we learning our tools is very beneficial okay um knowing what to what
they do and that's what probably why you're here on the live stream right so I'm teaching you the tools okay so um
yeah I the top bar Styles thing uh that one in particular I I see that H
probably every every couple months I'll be like someone will be like how do I style top bar and I'm like there's a top bar Swatch right um and you would know
that just by looking and once you know you know right but um there you go learn
your tools um and in here there are also a bunch of third- party swatches so like I
tend to include swatches with my stacks so like if you have columnist or magnifico or my filter stack or drift or
whatever quick flip right um it comes with a Swatch that you can then use
outside of the stack itself so um if any of my stacks ship with a Swatch um you
will see it here um inside the component
list what is the difference between font color and text color and when do you use which one that is a great question okay
um first off okay to address that question I will answer it here
but I want to show you uh I need oh I closed my Safari
window let me I don't want to override my chat again a new window there we go
right we're going to go to Foundation stacks.com demo okay hopefully you are all aware of
this website okay is the foundation 6 demo and is it a it is a very good
resource okay um because it has all of the various
there are a ton of videos on Foundation 6 I've done a a bunch of live streams
and there are a bunch of short-term short shorter form videos as well so if
you notice here on the side Side Bar um the I've broken out as you're probably
aware my stacks into groups there's layouts and navigation and text content and image and video well guess what that
same exact hierarchy is over here site Styles layouts navigation text content
image and media it's the same okay I did that on purpose so if we were to go over
to text content okay and obviously there's all kinds of demos on things we can do with text okay but every single
page here the very last section is video tutorials and there is a video here for
styling text okay I think it's like a five minute video and that video will
answer your question okay um I will go over that right now okay um but uh if you want to
watch that video I I'm pretty sure I go over I might miss some things today maybe I didn't think about something or
maybe I think about something today that's not in that video but regardless after this you should go watch this video okay even if I show you right now
okay cuz yeah repetition is King okay but the reason I point that out is um a
lot of these questions are answered in short form videos on this web
page right so if we go to navigation okay and we go down to video tutorials
there is a video tutorial on the menu Builder on how to style your menus on
top bar okay we talked about the top bar Swatch well guess what in if you if you're somewhere were to go to watch a
video on how to use top bar there's a video on top bar okay um so all these videos I I try
to um make sure that I keep if I release a new video um it should be here and
categorized um for the particular um section right so this again this video
because there are so many Foundation videos out there and live streams um this one is very good because it
categorizes them um now I actually have these are just playlists on YouTube so if you go to my YouTube channel there's
playlists for all these as well but I also have a playlist for every single product so there's like hundreds of playlists so I understand um there's a
lot of videos to sift through but for foundation 6 um yeah here on the product
page every single Bo every single one of these if we go to animation we see we go to the video tutorials there's video
tutorials on all of this so if you're struggling on how to use the Toggler Swatch there you go there's a short form
video on that okay so make sure you check out um all the videos on the foundation and that is foundation
stacks.com and if you can't remember we go to the homepage there is a demos and docs link
and that takes us to this okay and that sidebar over here is everything okay all
right so let's dive in uh to some swatches and talk about
um the difference between font and text colors okay so if you notice here we have font
colors or Tech font colors um and a text color
Okay um all agree it it I probably shouldn't
have called this font color but I already had a St a Swatch called text colors and it was like well I can't call it this other one text color so I call
it font color Okay um but let's talk about what that is so we we kind of saw this text colors
earlier okay and uh here uh let let me simplify this a little bit I'm going to go ahead and remove some of these
classes on here so we have just a text okay um so we saw this text colors right
it's the same stuff that is in baked into site Styles okay now in site Styles
we have our default text colors as well as alt okay now um just to replicate
what alt is it's basically just a text color swatch with a class set to alt
okay and um what this does all right but let's show you an example let's do um
let's call this live stream okay um now uh I'll go into the anatomy of a
Swatch uh man we're running really low on time
um just keep for now I'm going to I'm going to stick to classes okay um there
are elements in CSS but for now uh we're going to stick into
classes and um so here I'm going to give it a class of live stream and let's go
and change some of these colors let's just make them um just making various shades of purple so let's do that and
let's just do text as uh something
else we'll do like a light blue oh but uh yeah we'll do a darker blue okay so
we're going to have kind of a a pink header and blue text oh boy that is going to be lovely okay but so what I'm
going to do here is I'm just going to go into this container or you can do it on the text stack as well I'm just going to
give it the live stream class okay what you'll notice there is all of the text
within it now has that color Okay so the text color swatch what
it does is it allow you to define basically you put a class on something and all the text inside of that will get
the color okay now I'm going to go ahead
let's add in a header stack inside of this container okay um oh wait I put the
I put it inside here let's put it on the container okay so if you notice this
container has a class of live stream now all of the all the headers now if I move this header outside it's it no longer
has that color it's going to inherit from the default color that's in sight Styles okay um but now that I've I've
applied um this text colors to this container all of the headers uh will be
purple or pink and the text will be this blue color right and we could change all the others if we wanted links but I
think you get the gist right it allows you to style all the text colors within
a um a layout just like we did alt remember uh
when I did that alt class it changed all of the text within
a container within a layout okay now um what happens if I go
to this this header okay and I put in uh live
stream okay that works as well right so here I created this text colors
and I said all headers uh that are within live stream um will be pink so
but I only added that class just to that header right and it and it took that
value right so that's text colors what is the font
color swatch what does that do okay this allows us to define a
color for a specific thing
okay all right let's just call this my uh my color Okay um and let's give it
something crazy let's give it like a a dark turquoise
okay now I'm going to take my color
okay and I'm going to put it on this container now you might you might think oh yeah I have this font color and I
have a container or even this text stack okay and I'm going to put in my
color and I didn't get it but if I put it on the header and put my color that
worked what the heck why did why did that work why how come when I put my color on text it
doesn't work but when I put it on a header it does
work what is going on okay um essentially what's going on
is um is the text stack while it contains it can contain a a large amount
of text it isn't just a piece of text it is a header and a paragraph and a bullet
list okay essentially it's like having a a header inside of a container uh
there's a container built into the text stack that you're not aware of okay and you can't apply a
single color to a container right you need to apply it to a
particular piece of text natively if that makes any sense maybe here let's go ahead
and I overrode my stupid chat again thinking I have to do that in next time
and I can't go back why can't you go back in a pop-up window how freaking is
that hold on I'm going to let's open up Google Chrome all all right let's just
I'll bring up the chat back in a little bit all right um give me a second here um if you're if you're typing in the
chat just give me a minute I'll bring it back up um
okay all right thanks Discord I didn't want to open you let's close Discord that was an
accident and I don't need that either okay so let's look at this here I have a
piece of text that has the color that we wanted and then I have this um which
does isn't the color I wanted okay now we're going to have to get a little scary here we're going to have to look
at a little bit of code so that I can show you what's going on under the hood
okay okay uh we're probably G to want that let's
make this a little bit bigger so you guys can [Music]
see okay first off okay um here is my header right if you
notice here it's right here let's make that a little bit bigger even bigger
okay H3 and if we see we have the class is set to my color that was the class
that I set in my swatch okay and if we see in the Styles I have my color the
color is set to this color here cool right very cool now if we look
further down remember how I said a text stack is more than just the text you add
to it right because it can contain all kinds of different it can contain multiple paragraphs it can contain all
kinds of stuff right so um here we have a div which is
essentially a container a box um that has a class of my color and if we expand
that we'll see inside of there I have an H3 and then I have a paragraph and then
I have a bullet list right now let's just look at this H3 now
in here we'll notice that if we look at the inspector the color is set
via some styles from site Styles
okay it didn't there's no mention of this color here because um color in CSS
isn't an inheritable property it doesn't inherit from its parent the color of a
header doesn't inherit from from a container okay um it has to be applied
specifically to that element and um when you added
a when you added this font color swatch okay we created a color and that color
has to be assigned to a bit of text but when we add that to a text container it
doesn't get applied to that text it gets applied to something else right it gets applied to the
container so the the the solution here there are many ways to skin this cat
okay um that's a saying in the US by the way that if you're internationally that might sound weird every time I say that
I think oh I probably should not have said that but um hold on let me get that chat back up because I want to make sure
I'm answering all of your questions
here pop out chat
okay all right good there I got my chat window Now in Chrome so that when I preview in Safari it's not going to
override my chat okay um so the solution here is uh you know
if you wanted to apply text colors to a text stack use the text color swatch
another thing is there are things called pseudo states where you could be like apply this to all child elements and
basically what that will do is that'll that'll be like apply my color to everything inside of it now right so if
we were to preview this now there we go now now that is working okay because
we're applying um in that swatch this is kind of getting a little
Advanced I said we're going back to the basics and this is kind of going a little Advanced right but um basically
I'm saying find something that it has the class of my my color and then apply this color to everything inside of it
okay okay so um that was a good question I am
not going to do a deep dive into every single Swatch we'd be here for a week okay I think you can understand I mostly
what a lot of these things are for obviously you have an aspect ratio which will lock your thing into a a container
into a particular aspect ratio we have backgrounds and properties and borders right um height margin opacity again you
there's a lot of things here let's talk about the anatomy of a of a Swatch we we saw some of it here
okay you'll notice that for most most swatches the top probably three sections
of a Swatch are pretty much identical okay like here if we look at this text items or this font color let's
go ahe and add like a background color swatch okay you know you notice that this section this section and this
section the top three sections in a Swatch doesn't matter what Swatch you're in most of the time not all there are
some exceptions to this rule um but most of them are all identical the settings there will be the same so let's talk
about what those settings are so we know how to use
them you've seen me already today add in a class okay and hopefully by now um you
know that you could just take that class and add it to a class setting um in any stack and that those styles from that
swatch will get applied to that class okay so for example here I had
live stream I have these colors here I'm going to go ahead and copy that live stream class and we're going to paste it
into this text box and those Styles got applied now what's I think what some
people don't realize you can actually use the same class across multiple swatches so I can then go let's say in
this background Swatch I add a class of live stream and then down here I want to
change a background color so let's say I want to make this background color a light blue
okay I don't think that's a beautiful color obviously it's just something that I want to show off right so you can
easily see it so now when I add the class of live stream to
anything okay um let's go ahead and add uh another text stack just so it's you
know okay there here we have a text stack okay um this one has the live stream
class whenever I add the live stream class to anything the text colors are going to be that and the background
color is going to be blue so if I wanted this one to look the same as that well guess what I'm just
going to go ahead and add the live stream class to it and now it looks the same
now obviously we then go okay well whenever I need to add padding to that too so we're going to go and add padding
and whenever I add the live stream class I also want to have a padding of 32
pixels and there we go everything that has the live stream class now is a background color of blue a padding of 32
pixels and text colors set to these colors right so you can easily start
building your styles on top of each other
you can do a lot without ever exploring into elements or the CSS uh uh Swatch
selectors classes are super powerful okay and you can apply more
than one class to something okay for example um let's just
go ahead and add in a
uh a border Swatch okay and I want to call this
important okay U maybe it'll stick away from that word um let's call it standout
something like that okay or you can do it something explicit
we could be like you know big border whenever I add a big border class to something we want to have um the color
is going to be uh let's do something not ious like a like a red
okay and then I want the size to be um I want it to be like 10 pixels and I want
the style to be um on all sides I want it to be
dashed okay all right here let's just we'll call this dashed whoops what did I do
there let's call this dashed okay so now whenever I add
anything with the dashed class it's going to get this border right and let's
say so let's say this one remember this is my live stream I have a live stream class I can go in here and I can put a space and a second class in there and
there we go this one now has this Bard this one doesn't because I didn't add the dashed
class but it still gets all the other styles from the other classes that I applied to it okay so you can start building styles
on top of each other and kind of merging them and creating these utilities own utility
classes okay so um that's all well and good um but what
are these other what are these other buttons Joe okay um this ele this
element um option so when when you don't have a class there are some things you
can't add a class to okay um such as some Foundation components or maybe you
want to style all of a particular thing right okay this makes it very useful so let's say if you click on here you can
style all bullet lists so maybe you want to apply a
particular style to all bullet lists on your page there you
go let's say you want to do um do a particular style on all images on your
page right these are ways to kind of Target all of a particular element on
your page so let's say on all my images I wanted to have a five pixel white
border around them right super easy one Swatch all images border white pixel
five pixels white solid done right then maybe you add a shadow Swatch and you
can apply that to all images and you can be like Shadow this cool shadow right so then you can have that you know if you
wanted that look for all images on your page there you go okay pretty
simple um and there's a lot of other things in here like you can do all buttons all menu items there's all kinds
of stuff in here tables sliders um every single Foundation 6 component is in here
so you can Target all of that particular thing or even sub things within it like you know tabs or you know um active tabs
light boxes cards accordians you can Target the accordion title you can Target the accordion tile when it's
opened you can Target the accordion indicator so there's all kinds of stuff
that if you don't know exactly if you can't Target something with a class it's probably you probably have the ability
to Target with these elements okay and at the bottom you'll notice I even I added a ton of total CMS in here as well
since I know a lot of us are total CMS users you can easily Target various total CMS things here as well so
cool right and this last bit is CSS that means uh you're a pro uh we're not going
to dive into this you know how to do your own CSS selectors and you're just going to Cowboy it out and put it in
there okay we're not going to go over that at all today
okay so that deals with the Swatch selectors again I think most of the time class is going to work great um but
elements is super useful
sometimes next up um let's do parent class this is super powerful as well and
it gives us a little bit more flexib ility um determine our layouts okay I'm
going to go ahead and um let's let's still use this live
stream uh construct here so here I have two containers and they both contain uh
this live stream okay and I'm going to call um this container I'm going to say
I'm just going to give it a class of layout um top okay and this container down here
we're going to give it a class of layup out
bottom okay um so again so what if I wanted to
do something special for whenever I like my default style for live stream but
let's say when live stream is inside of a layout Bottom I want to change it up a
little bit right let's say um I want to add in a different background okay so
let's go ahead and create a different background and what I'm going to do is when the parent class for live stream is
um layout Das bottom okay instead of this color blue I want to do a different
color blue okay or let's do uh let's do like a green and there we go so now I
have live stream and live stream now the the text colors are identical but
because this one is inside of a layout bottom it I can create a rule that says
when my live stream class is inside of layout bottom do this instead basically
right super powerful and you can do that all kinds of things um so for
example um remember how earlier on um I I said we can Target um let's say inside
uh we can Target all images well let's say you wanted to Target all images within a particular container right you
could easily use parent class with all images and then that way you could Target all images within a particular
container right super
powerful next is pseudo State um and what is this now this is actually grown
if you're familiar with CSS um initially this really only contained pseudo State
elements such as things pseudo state is like when you hover over an element or if an element is selected like a form
element is selected right um or if it's within focus a lot of these have to do with form Fields um a lot of pseudo
states are for forms okay so Focus if Focus means the keyboard is active on
that thing right or you're you're You tab through a thing and it's focused okay um if a form field is disabled if a
form field is optional if a form field is readon if a form field is required there's a lot of these things if it's
checked if it's not checked if a placeholder is shown all kinds of stuff okay um but I've also add things which
technically are not pseudo States um if you if you are familiar with CSS um such
as um child elements and all descendants okay we saw we saw the child elements
thing um earlier um it just worked adding that into the pseudo State element if you are a CSS connoisseur
you're proba like Joe that's not a pseudo element I know okay it just I
didn't need another setting okay it just worked well on this setting okay so put your Brites back on okay
um so there are some things here that aren't necessarily pseudo States but it just kind of works well maybe I should
change the name of this maybe eventually and I'll do that but right now um there we go okay other things uh we have
pseudo elements I'm pretty sure I have a video on pseudo elements it's kind of a complex topic I'm not going to go over
it right now um but yes you can you can Target before and after pseudo elements
and also hover before and hover after right okay so there we go next
up um besides pseudo State I think most of the things you're going to use in pseudo State um let me just tell you the
things that you probably use at least the ones that I use the most I do use child elements and all descendants
what's the difference between that okay um I should I should point that
out child descendants mean um the image let's say uh we have this container here
uh and I have an image inside of that container um the child elements says it
has to be a direct child of that particular thing right uh whereas all
all descendants means it could be anywhere inside of that layout so I could have a container in a con
container in a container and that container has an image then that's what you might want okay so um there's slight
differences between child elements and all descendants again child has to be a direct descendant of that particular
class or selector okay okay
um next so you're GNA I think child descendants or all descendants is useful and next up is hover I think just having
Styles based on a hover State super useful you can change the background based on Hover change your border color
you don't want to change padding and margins CU you're on hover things are going to shift around and that's not too nice right but like text colors or link
colors and background colors and um other things maybe opacity opacity is a
good one right okay it's really cool so yeah Changing State based on Hover is
super useful those three are the most that I use inside here okay um I don't
use use much of the I use pseudo state every now and then but most the time I'm using um child uh elements and hover in
here everything else I don't use much of media query so you can have a
style specifically for media queries and it's not just the size of your browser
so you could do dark mode here okay so let's say you want to change the color of your text when someone has dark mode
enabled there you go Foundation 6 has full dark mode support okay so you can actually do a
whole site where by default it's light mode if someone has dark mode enabled your entire site colors can change
totally possible just create swatches that use dark mode and if you like if you like maybe that could be an
interesting live stream if you'd like to see a live stream on how to support dark mode let me know and we can do that okay
probably a little out of scope since we're already over the time right now um but yeah maybe in the future we can do
uh we can do one on dark mode uh you can do things such as touch device portrait mode so is you know you
can style things if a phone is in portrait mode right um there you go um you can style things for print so if
someone hits print you can actually custom style things uh when they're printed okay um I also have a printer
stack that has even more but uh but yeah there you go for print uh and then we also have you know all of our various
sizes small medium large um and even you can Target retina okay but the cool
thing here in media query is I know a lot of people aren't aware is dark mode okay so you can Target dark mode uh
specifically so pretty cool um here if you want to see here
let's let's play around with um I have dark mode on my machine if you
didn't notice right so let's say um I'm going to do live stream and we're going to do live stream dark mode okay we're
going to change these colors and when it's dark mode uh we're going to do a
different color here let's do uh we'll do white he I don't know if that that's
probably not going to look good whatever yeah that looks really bad uh here we'll change it to this aqua color and then
the headers will change to um here's darker whatever right that's pretty bad
well it's preview okay and we'll notice now because my machine is in dark mode right and here I don't uh I think this
should be fine I'm going to go ahead and change my system settings you can do it inside Safari
like you can swap it out but here I'm going to go I'm going to change my my Mac to go to light mode really quick
okay let's go and swap to light mode okay and if you noticed the color of this text changed because I'm no longer
in dark mode Let's go back to dark mode the color of that text changed okay
and that's because my Mac is in dark mode and I've C imized my website colors
for dark mode hopefully that hopefully you can see those that color changes were weren't as drastic as as I was
hoping um but there you go okay
um let me see if there's any question any more questions that I've missed I think we've kind of gone over a lot of
the the the basics okay again we've reviewed how uh how these oh I I didn't
review this note setting this note setting is purely 100% for you to help you document what you've used things for
okay um and then below that notes is always just the settings for that partic
that particular Swatch right hopefully most of these swatches should be pretty apparent um if they
aren't all of them are documented on the foundation 6 demo page and you can see
examples of them you can even download that that project file that built that site and see exactly what everything is
okay so I I try to give you a peak behind the curtain I have no secrets here um the stuff well I was about to
say it's not rocket science right uh but I I understand it it's challenging depending on your your skill level okay
um but yeah I'm totally open to helping out and giving answers go on the community there's a lot of people here
that are here to help to help you understand okay um but yeah a lot of
this is pretty simple I think some people try to over complicate it themselves okay and hopefully today
helped you out a little bit uh let me go in the chat let's see if there's anything
um uh new no this isn't a new hat I've actually had this I actually bought this hat in Austin Texas when I went to go
visit Isaiah a long time ago now I think that was like eight years ago now something
like that that was a long time ago time flies um okay
uh we talked about the difference between uh site Styles uh with stacks on the page I see drift timeline in sight
Styles and then I see it again below your demo file in drift Pro RW I'm guessing that has to do with order of
execution um so uh I have drift uh here um purely as a
convenience okay um you can add it it's the same so if I add drift here uh I can
add it to the page this and this are the same exact stack actually okay um it's just uh I
thought it made sense having Insight Styles because technically drift timeline doesn't have any content there's no contents associated with
drift right it's just helping you animate things that are on the page so I thought it made sense giving you the
ability to add it into site Styles okay there is no difference between it and this stack that's in your library though
okay um so I see Peter says he wants uh a
dark mode dark mode using a toggle um yes also possible you can toggle you can
have dark mode using the toggle as well so not it's a little bit more involved because you have you have to end up
toggling a class on something um but totally
doable um would it would a pen be better than notes great one Scott so um one
stack actually I planned on talking about today and I didn't is you'll notice that there is a a stack inside
all of these called pen pen is is currently not included with Foundation
um it is a part of my free starter pack if you don't have that get it um it's
free okay and it contains this awesome stack called pen and Pen allows you to
um one of the things that's pen can do okay is allows you to uh organize in
sight sight Style so for example let's say I wanted to take all my live stream p uh Styles and I wanted to um let's say
all of these were part of live stream right and I can just Chuck them in here oops that didn't
work there we go right so now I have all of my all of my styles for live stream
and then I can add a note here and I can say um live stream
Styles uh for blah blah blah BL blah blah okay whatever right and you can to
add your notes in here and then um yeah you can collapse that pen and you can kind of have all your styles for that
live stream class um kind of organized inside pen so pen is a great very
powerful um way to add notes for yourself and kind of organize your project files um I'm not going to go
into all the other benefits of pen today but yes pen is a great way to organize swatches
okay thanks Scott
um yes so someone noticed if so if you notice here I kind of added a cool feature so by default when pen isn't
selected you can see all the swatches here but when you click it it basically expands all of those so you can kind of
see the previews of all of those swatches so that's kind of a cool feature of pen when you select it it
automatically expands out all the swatches inside of it um so pretty slick feature
there okay um one thing I I also didn't I I said I was going to talk about is
the swatches stack okay um so pen is a great way to organize
swatches um let me just talk quickly about how I recommend
organizing your Styles a little bit
okay I'm going to bring up um I did a a full um live stream a video um it's on
the foundation 6 uh demo site uh where I showed you I built out this entire web
page okay I built it out like from scratch I
showed you how I did everything okay and um one of the things I did in here uh
which is a workflow that I liked okay um is that up at the top I have my
site Styles partial okay because normally you are going to partial site style so that it's on every single page
okay on your site because you want your styles to be uniform so you can leverage them across all of your web pages right
another benefit of foundation and site Styles is because you can apply those Styles and keep them in sync across all
your pages so in here I have you'll notice that there there aren't many styles here
um what I the styles that I add to site styles are generic they're ones that I
want to use across multiple pages okay um so those are the those are
the swatches that I store inside of site Styles
now what you'll also notice is um if we go to if we open up this web page you'll
see that um this particular web page it kind of has defined sections right A lot of times we design our sites in various
sections so here like here's the header section and then I kind of have this section here then we scroll down this is
kind of another section and then we have this Horizon which is another section right so I I kind of you know build a
website in sections and what I will do is above
each section that I build I will add in a swatches stack that's this stack right
here okay and inside there this is all the swatches that are specific to just that
section and that's it okay I don't use any of these swatches anywhere else
except in that section if they're not used in that section they're used in multiple places it goes into site
Styles okay so um that's a nice little um you know tip for you so you can learn
you know how I like to organize things you know that's just the workflow that I you know you don't you you don't have to
do this this is all strategy and we learn as we go and this is just something that's kind of stuck with me
it's something that I've liked where I will um here's the getting started section and here's swatches just for
that section okay so there we go and if you
didn't know what I I saw someone mention they didn't know what shelf was shelf allows you if you see here I have the
sizing chart always available and my site Styles partial always available to double click and go into the partial
editor doesn't matter where I am in the page it's always right there in that
shelf okay you can have it on the top or the bottom there we go okay A little outside of the scope of today but there
we go
okay okay um I think that's it for today guys I think uh hopefully you guys got
some benefit I know I didn't you know go over all of these swatches again that would take me forever ever right to
teach you every single Swatch um but get to know your tools okay um it's not hard
a background Swatch you can see background have a lot of options I'll I'll I'll give you that right but it's
pretty much if you want a color or do you want images or do you want a warehouse image you know CSS um yeah you
can also do swatches like you can assign it a Swatch color but okay um just play
around I I think a lot of these the the names of these are pretty um self-explanatory what they will do um if
you don't know what they do check out the demo the foundation 6 demo site okay check out the demos see what things do
okay every single one of these swatches is categorized so you can kind of see what it does and there's explanations
there um and hopefully a lot of them have dedicated videos as well at the bottom of the page so there we go I hope
you enjoyed today hope I didn't jump around too terribly much and Confused you um and yeah hopefully there is a
hang every Friday oh uh the uh the man I didn't get questions available ready
today I was going to do it and then I had issues with the live stream setup and I didn't want to have any issues so I fixed that instead of coming up with a
couple questions um okay
um let's uh let's think put my thinking cap on here let's let's put my thinking cap on here I got my here there's a a
different on what are we going to think about
today oh here's here's a here's a guess hold on let me get the answer one second let me let me get me
set okay yes this is a good question this is a fun
one right we're we're just going to do one question today now I do have to admit this is the these question I like
the q&as but I know that sometimes people are a little bit behind um so
yeah I don't know maybe when we're ready to get in the Q&A section you just refresh your browser so that you like
get the latest uh feed so you're if you want to win okay make sure you're you're
on the latest because sometimes you're like 10 seconds behind and other people might answer before you and you lost out
nothing I can do about that okay um let me get to this answer really quick
oh wow interesting I didn't even know that answer okay cool okay here we go you guys ready drum
roll okay so you know Foundation 6 comes with more than just it's not a
stack right in your file system in finder it is it looks like one stack okay um now this doesn't include not
including the Swatch pack okay how many stacks are inside
Foundation 6 so that means every single Swatch you know every little child stack
um How many stacks does it take to build Foundation 6
110 nope close h n not really that close actually to be honest with you you're
actually quite far
off thanks for the shout out Jason
n no you can't do 120 plus no no no all
I'll get this you have to be within five you have to be within
five nope so
close nope man so
close so far so far Mr Workman he didn't even have any inside knowledge but Mr
Workman was the [Laughter]
closest man I I love this is this is actually so entertaining for me seeing all these numbers random numbers and
just incrementing by one at a time it's hilarious
ah man I'm waiting I'm waiting
man H okay oh Mr Workman
Mr Workman wins okay now since he's family we we we'll do it we'll do
another we'll do another one so is the answer is 194 there are 194 Stacks
inside Foundation 6 that doesn't include the Swatch pack
okay
[Laughter] yes s you got it we got it now 194 right on the right on the button good job okay
now how about it now in the Swatch pack here okay let's do this one how many stacks are in the Swatch pack that's
actually probably a little easier that's a lot smaller last
question then we'll call it a day for $10 you got to be within five I I'll let
you be within five boom geston wins he said 36 there's 34 so good job
geston sweet cool guys I appreciate it I hope you had
some fun today and uh yeah it's been fun I I enjoy these uh
they're a lot of and now I have to get my butt working on uh some Bento videos this afternoon because I got to get that
out the door Sun turns 21 on Friday and I got to get this out before he turns
21 so uh cool thanks every thanks everybody hope to uh Friday hang out be
there b square um I just mentioned my son turns 21 on Friday not sure how the schedule's
working on that so I'll probably be there maybe for a little bit maybe I'll pop my head in I don't know my schedule
on Friday yet at this point so um yeah but everyone else will be there there'll
be tons of people from all over the world super fun Hangouts be there or be square it's the one of the best things
ever and if you're if you're still here stack Summit um yeah I need to uh I'm
going to be getting on I have a lot of the the speakers all lined up um we're ironing out topics um April 5th to the
7th hopefully we'll see you there get your ticket now um go to uh Stacks
summit.com and uh yeah we'll see you there April 5th to 7th cool take care everyone have
a great where is the summit oh when is the summit April 5th to April 7th 100%
online so you can enjoy it from the comfort of your own home or office
wherever you see fit um great child learning you know bring your kids and uh
you know they can learn some cool stuff there you go cool everyone take care have the
great rest of your day and uh go out there and make your websites great bye everyone