oh let me get the chat going okay hey everybody uh joe workman here
and we got a special guest today um and hopefully let me get the chat room
going so there's any issues i can see it in the chat
what amateur hour here i can't believe you have this open before
okay um so yeah just a couple quick notes in the in the chat if hopefully everyone is um
can see this and i see we have um about 60 some odd people hello from australia we got david paul
watts thank you for coming on today we have a special guest and let me bring her on now we have
elizabeth martinez and um she is the mastermind if you guys have
been enjoying um the amazing amazing content that she's been putting out
um on our instagram account on the weaver space instagram on the weaver space instagram account
then uh she is the mastermind oops she is the mastermind right there and um man she just has been
killing it and i really love the content hopefully you are too and today she had a really great idea last week and um
she wanted to come on and she wanted to rebuild a website live with foundation six so um what what
she's gonna do is she's going to build out national geographic.com which obviously is a
beautiful website and um yeah i'm really excited um so want to talk a little bit about
yourself introduce yourself hi ah thank you joe i'm i'm really excited to be here
um i i i was looking forward to this i i was
i thought about rebuilding um a website that we can all relate to um
so i thought about now nadio because they have beautiful imagery and i thought well you know this is
we can we can replicate this in in using only foundation stacks and um and yeah i i'm excited to do it i
i will probably run into regular like problems that that uh that a lot of
people can relate to so that's that's what i think will be useful to everyone i'm really happy to see
everybody saying hi and hola voila um
and i i am yeah i'm happy i'm happy to be here thank you for for this opportunity
excellent well thank you here i i will uh share your screen great and then uh we can
here we go so everyone should be seeing your screen now okay so i'm gonna go on the night your
website for now okay so everybody can see my screen
right yes okay uh so i'm gonna show you very quickly the nadio website and i'm
gonna um show you what before i do this live
i wanted to make sure i could do it so i did it uh before i
finished it i'm gonna show you the finished result and then i'm going to start start from scratch and i'm probably
going to forget all of the things i did before but uh that will be helpful for you
and and yeah i'll start as if i hadn't done this before right so
i'm going to show you quickly this is the netgeo website today it changes every day so i mean i'm just going to work with what
i have today um before i i start showing you i want
to uh make uh i i want to make something clear that i won't be going through
like hover effects because it's going to take forever what i really want to show is that you
can do the same layout using only foundation six and and it as it maybe it's
it looks a little bit easy but i ran into a lot of thing a lot of little issues that i solved
but yeah it was it was a challenging one so this is the live uh
nadio website and and and yeah this is today obviously i uh
ignored the advertisements in in uh in my project but i'll show you what the what the
finished pro project looks like it looks pretty similar also this layout for example is repeated
throughout the the site so i just copied and pasted the first one uh for for practical purposes but you'll
see pretty much everything uh that's the nagio website and this is my website oh sorry um
this is my website my finished website and made in rapid weaver and stacks i'm
gonna preview it and you'll see it's pretty much it's close to
the finished result um the one challenge that i i will
ignore is the the exact same uh typography because in this case this is a net geotypography
and as much as i stole a lot of their content the typography wasn't that easy to steal
so i'm just gonna do it with another typography that kind of looks the same but this is the this is the remake and
yeah well it looks pretty much it looks similar right we have the the background with the
the video and we have these the the slider which is a slider but i couldn't do the
arrows but we'll do them live um we have the the fixed background
here that we could see uh here right we have the travel background
fixed and i copied that and like i said i copied the exact same layout as before
because it's pretty much the same as just uh mirrored and um and then we have this
cockroach or or whatever that is a cricket maybe and then the photo of
the day and i have the photo of the day with uh the text overlaid and
so yeah i pretty much succeeded um as you can see here in my
in my project i'm gonna finish quickly and then start doing it and i have the footer and
okay so i'm gonna start over as if i hadn't done this before but i
did do it before and i wanted to show you um so that we can
uh if if i get stuck i'll probably use it as a reference so i'm
i'm just gonna call this home for now i already have uh the theme of foundation 6
selected and i started adding a stacks page to my project
i'm gonna call this i'm gonna name save this project just in case i lose
the progress for any weird reason
um so
sorry i got you
okay so um gonna start by the
i here i have my all my stacks which are a lot but here i saved only the foundation
six stacks and that's what i'm gonna start with i'm gonna start dropping inside styles stack
um the first thing i usually do is make sure i have loaded the features
like uh font awesome and in this case i will use font awesome
so i'm gonna load it and i know in advance that this font awesome
will have the brand icons i'll use the brand icons at some point so i'm going to
uh select that option and i'm going to add a um
the u well yeah i'll add the utility classes because i use them a lot i don't know if
joe encourages this but it's just it's just so much easier for me to use
them all the time that's why you're there okay
uh and then uh yeah i think that's it that's the uh the
features i want and we'll start by the fonts
i'm going to use the um
um what's it called again century gothic it's really far from the uh
from the actual nagios font but uh
i don't know i find some similarities between them um so i'm gonna add the font
and i'm going to make it i'm going to make them this font to be
in all of the if i notice that the font is the same throughout the site so i'm
going to choose all of the elements here so that this font can uh
be can you can be used throughout the site so i'm gonna call it
century anyway so that if i need to override something i know what which
class to use and i'm gonna start
um by changing the the the primary colors as well
so if i interject for a second yeah okay so on the web font
um if you just uh if you selected the pagewide default and then um and then you just select
pretty much after that if you all the only other thing you would need to select is all the various headers
um if you uh uncheck like p and quote and everything in that bottom row it's essentially the same effect um just
to let you know i just thought if it's okay i'll i might interject with a couple small tips and tricks here and there
no no that's that's that's what i wanted but i want you to interrupt me as much as you want
okay so um great that's a great tip i didn't know that
so we're gonna start by changing the the side styles i'm going
to change the primary color to this yellow which
you can find out if you inspect the element i won't do that right now because
it's uh uh because it disappear like it has a restriction or something
it disappears the whole page and i have to reload it so i'm just gonna grab it i have this
tool called sip if you want i will i will mention the tools i use in
case you you uh find them uh useful
and it's there on my toolbar and it's pretty cool because you can
use shortcuts to grab any color from your screen not just a browser
so i'll paste that color here and um oh
i'm just gonna select the rgb slider so i can paste the the code um
i'm going to i'm gonna leave those as they are for now but i may i might
come back to them and change something later on so i'm gonna start trying to
to replicate this uh first we have uh the the the menu bar which is which has
a bro uh white background and we have the
la nadio logo subscribe and login and search
um elements and the menu button right so i'm going to
to add a menu a rapid weaver menu um sorry a foundation 6 menu
and a regular menu
okay i think i think i so sorry i'm just going to look
and see if i change something oh all right it was a tough i i did a
top bar so that i could throw in both of these and we don't have to do that but i don't
know why i thought it would be easier that way so i'm gonna do that
i'm going to um add a top bar and inside i'm going to drop my menu
on the right side maybe it was just so that i could
i mean you could do that in the menu item as well but i wanted to align the logo to the left and the menu to the
right and that that's an easy way i did it i don't know if that would be the best way that's exactly what top bar
is for is to have things on both sides is exactly what it's for so yep good job awesome all right so we have an
svg i have already that oh no i don't hold on
i i saved all of the sources that i'm going to be using maybe just copy the from the other
project that you had right thank you um
i'll do that so in case you don't know how to use an svg
it's really easy especially if you're stealing it from a
for my website because i'll do this in another tab just to make sure
because the when i reload this i'm afraid some of the pictures that i'm gonna use will
disappear so basically all of the
all of the svgs on a site you can right click on it and then inspect it
and you'll find the element in the inspector
um see i can svg here oh that's an image
well i i i can't remember it's a url to an svg file yeah there's a url and you can copy that svg
or tell this to show reveal in sources panel
and then you'll see the svg and you just drag and drop wherever you want i usually do it
in my downloads folder which i keep with a lot of stuff and then
open it open that in a text editor copy the whole uh code
and paste it right here one thing when you do copy and paste from an external svg file like that
there's gonna be a tag probably at the very top that's like an xml tag like if you were to open up the svg
inside of a text editor um you you'll notice that um
it has an extra xml tag at the very top yes exported by a lot of like even
illustrator and sketch or many other apps illustrator apps will do that so you'll want to make sure that you only do the
svg tag anything before that you can delete yeah you can delete everything before
this tab so the tags always start with this bracket and then with this work yep so
that's the the code i just copied and pasted and then i'm going to align it to the left because it was aligned to the
center and for now i'm going to
give it a max width i i'm gonna check how much i gave it of
120 i already calculated that before so 120 i probably checked here oh
i have a tool called a um measure stuff i'm not sure if it exists
yet but it's an exten it's a google chrome extension and when i click on it i can measure
anything so i can set the origin here for example with it with the letter o
and they will tell me about how how how big it is it's a 108 pixels exactly
but i'm gonna i'm gonna go for the 120 and i'm gonna start dropping these menu
items one two three four four menu items so one two
three and four so we have the
the menu items are subscribe um this one is not there anymore it's it
what it was before i don't know why um and then we have these uh
uh font awesome icons so i'm gonna
write down sub subscribe
and then user and then i'm for oh it's not showing because i think i'm supposed to have the light icons
the light type yeah i'm using a font awesome light so i have to
[Music] turn that on here the light icons okay and that will show me the right
the right ones i show i i looked up those up in front awesome and then i have this
is called menu and it also has a font awesome icon i think it's
i'm gonna check
okay am i um
confusing anyone or is everybody following me good i think you're doing good yeah okay
thank you um one one quick note someone pointed out um
is your laptop plugged in don't want to run out of battery what is your are you on you're on a
laptop yeah thanks i'll make sure i plug it in right now
i run out of battery thank you uh so um oh so i want to
align this to the right no sorry not here text alignment to the
right let's see how that looks i know that it's not going to be the right way to show but
okay so we have that gray background that has to be white and we have the subscribe it's
working out okay with that with that um font right
i think we just have to color this um so i'm gonna use a menu style
and i think i need the top bar style to remove the
the that gray background yeah background you heard a lot about it huh yes
okay yeah there we go so that's that's just to
remove the the gray and here um oh i i'm not gonna go into the mobile
version i'm just gonna work on the desk desktop version because it's it would take forever
um so i want the links to be black and
that's the hex code for black and i want the
active links to be black as well
and the carrot i mean i'm not gonna use the carrot but whoops
but in case we
okay so that should look a little bit better now oh no
you forgot to put the classes yeah thank you
[Music] so i'm going to name this class
my top bar and this one my main
so the top bar i'll use my top bar
on both here so that the grey disappears and
here i'm gonna use my menu and there we go
boom so um the font is a little smaller
i'm going to get into that later or it's just going to take forever and this has a bold i i
i decided at the end to to make a font
[Music] where is it
one color no fun
no wait how do i add a uh oh hold on i'll i'll just look what i
did before sorry can you click the hide button on that bottom it's at the bottom of your
screen that says stop sharing can you click that hide button yeah it did but it did something weird oh
there it goes oh okay sorry cool no problem um
i did it before but i thought that it disappeared but i guess it didn't oh fonts okay sorry so we go
i'm gonna add a font style and and um called it call it bold one
i usually don't just call it bold in case any built-in foundation
is um is using it so bold one and and the weight and i'm just
going to click on this so that uh the the the the item that i choose
can be bold and not the others like the menu like that menu uh oh it didn't do it
you might want to make sure you check out that you uncheck the font size because you only want bold to be
so take yes you want the size to be the same you just want it to be bold yeah it didn't work either hold on i
think i i have the weight here yeah
there we go so just add the weight okay uh click on the bold and then
make sure it's not 400 because 400 is the default weight so i just added it on to 800.
um so after the top bar we have latest stories and it's about
it's a black background so we're going to be using the alt colors here so i'm going to drop in
a container first and just before i
start using this container i'm going to add another swatch that i usually
add in all my projects with a padding um setting
and that will help me instead of using a class here so instead
of renaming this class to whatever i want i'm going to choose uh this element
section button and i can choose no sorry i'm going to choose a css sorry
css and change that to section
i use this a lot it's just so much easier to add the exact same amount of
top and bottom padding to every every container that is
that has the htm tml tag for as a section so you'll see that in a
second when i finish uh editing this watch i'm gonna go and really quick one danger with doing that
is if let's say i release a stack that uses the section tag um or someone else has a stack that
has a section tag in there maybe they're dividing something into sections um
uh this that could give you unwanted results so potentially what if you
wanted to use the element um selector there is a container in there so then you can you can apply that to all containers
right um right so yeah oh yeah i wouldn't do it to all containers because a lot of
the containers don't i actually i override the oh okay
cool i'm i'm gonna use it but um you have that big warning from me joe
um so one more thing i actually looked it up before um before i said anything because i didn't
want to be wrong um for the bold you know you said you love utility classes right well there is a font-bold
utility class yes i i thought about that and um
yeah i i i just thought it would be easier for everybody but no problem i just just trying to help out no no
it's great it's uh so it's font dash bold right yes
um like that yeah that you're right so if you wanted to control the the bold
then yeah then you could use that those utility classes or a swatch a swatch
yeah perfect great bothering you now hold on [Laughter]
so i'm gonna use this container and change it to section and you'll see that
whatever i applied in the swatch is going to change that container and and give me that
vertical padding which by the way i also sometimes use like if i don't if i don't
have that padding i i use the padding top
and then whatever value i want which by the way the values have to be multiples of eight
in my experience right and um yeah so padding top or padding bottom or
what i do sometimes is padding y which will give me the exact same result i it's just
it's a matter of taste and how you um you are more
most comfortable with right you can use a section or you can use the padding and the result will be the same for
example if i wanted to have a back a black background color i can do it right away
with the utility classes without the need to add a um a black swatch right so that's that's
what i love about the utility classes and that's what i actually use all the time and then i want all of
the contents to have a an alt inside of my container no i'm lying no because this
one is it has to be with with a white background so
i'm going to have to add the alt in each is there a way joe to like
if i have that this element inside of a container that says alt is there a way
to like overwrite that alt class or not you'd have to create
um you'd have to create another class that is that counteracts the alt essentially you
know another thing you could do is i mean it looks like a lot of times that most of this web page is white text
right one once one strategy that you could do is flip it make your d make your default text white
your default background black and then change it so your alt text is white or black on white does that make
sense yeah so so you don't always have to use alt doesn't have to be
white on black you can swap that right um so yeah so in site styles you could just
go ahead and change all of those to be you know the opposite and then that way you know your default for everything is
white on black but then only when you want to have those accents which is the black on white then you set that to be the alt does
that make sense that would be that would be easier actually yeah okay thank you
um i don't know what what you prefer right now you guys do i should i just
continue or do you want me to switch what would be easier for can you tell me
do it i can't see the no i yeah i'm watching the chat um i mean everyone's loving it but um
i think uh um you can do either way um i mean i think it might be a little easier
uh less work to do it the way i suggested for right now instead of having them trying to add alt to everything
you know what i mean yeah it's up to you though you know i'll do it that way then okay um so we
um
nope so it would be your your text colors uh inside site styles no inside size styles
no just yep scroll down oh there we go so you see so instead of that would be
white instead of dark gray right exactly and then yep and then this and then that
one would be black or 222 or whatever you want to do yeah that works okay and then you want to change the
text as well right so your text color um uh so you you change the header um but
text right below it yeah there you go
same thing yeah that should make it easier to work with okay so thank you joe
no problem one thing i just noticed by doing that i've never actually tested this out if you notice it makes
all the text inside site styles i think i should uh
maybe in my next update what i'll do is i'll make sure that that's always black so that yeah i think that would be smart
okay yeah also like for example these are h6 i know that now yeah and if i change it
it will display differently as well okay okay so
i'm gonna center i'm gonna use an h3 for now and see how that looks
and center the text and we have latest stories
and we can use the utility class font bold
it looks a little bit more like their text and then we have a
[Music] text
that will center and replace
so what i did to have that underlined i
used um another swatch
for a border and i called it i'm i'm i'm gonna change it
here for the yellow i'm going to copy the yellow again
um so butter border color simple and i'm going to paste the yellow oh i
didn't sorry
so my border is yellow now and i'm just going to change the change the size to detail
and only use the bottom like maybe three or four or five pixels
whatever works for you and only the bottom so this is what i
did but uh i'm not sure so i'm gonna call this under yellow
and uh inside the the text
this is a little hack like an html
code that you can use uh so if i add this class of span
oh sorry this is how you open and close a tag so this this
word is between a span up an opening tag and a span closing tag
now so that means that that word will have maybe another class or maybe it's just
different from the rest of the text so right now i'm going to add a class so right after
the span word i uh put a space and then class equals and then name it
my class so under oh sorry i forgot the quote quote under yellow and then i close my
quote and then i close out that and this stays the same because this is just telling the html to to end
that uh that span so you probably won't see it
on on edit mode or preview sorry that's weird what happened weird because
it worked on this one maybe i used them maybe there's something
wrong with my text spam glass under yellow no that looks correct
it looks that very looks correct maybe here huh
it's like you're uh go to the swatch sorry go to the swatch the border swatch
so you have the size oh i forgot the box yeah style so make it
solid yeah so that should work yeah there we go boom by the way this isn't a
hack that is exactly how you should do it oh okay great
um and then i found for that divider i'm gonna i'm gonna use the exact same
[Music] um way to do it
but i also did it i did it both ways so whatever is
simpler for you you can do a divider with the same class and the divider will
convert to that color oh sorry so the divider will
be yellow but you would have to set it inside of one column and then
make that column really small right or you can use the utility class
on the divider how just add a with utility class on the divider oh right
you can do that too uh well how with the w colon i don't know how you know 48
i don't know how how big do you want it okay i think that should work does that work yeah it does okay it does
boom so yeah you can do that with the the divider and then um
use a utility class and if you're not a fan of the utility classes you can just put a space bar here
if you i'm gonna do that with just the space bar and you i mean you can't really tell i'm
gonna bring it outside but you can even if i hit space and there's a space
it says click here to add content so it didn't it doesn't i recognize it as a content but if you
keep the the alt button on your keyboard and then space it does
recognize it as content and yeah now that the hack
um i didn't even know that that is very hard i learned something new today
so and then if we add that class it will it will only oh sorry well if we
would actually have to use the spam the spam thing again right
yeah so but it's the same thing even though i i can use a space bar here it won't
recognize it so i'm gonna click alt in my keyboard and that should give me
the exact yeah like look at that
look at that i never would have thought of that that is pretty clever props on that interesting
so there's the two ways of doing it you can do whatever is more comfortable for you
will work whatever floats your boat yes so we have that and then we have two
columns uh does anybody have questions
uh no i've been kind of answering them as they as they go along
so i always add the the margin right away because then i forget to do
it but yeah i i use two columns and then a header and then a one column this is i
i'll tell you why i'm using that one column um but yeah uh and then the two columns
here so the the two columns if you can see
they're not divided exactly 50 50 so i
came up with yeah eight and four so that's what we're
gonna do here um in medium and large devices this should uh
the first column should be 33 or 4 units out of the
8 and the second column should be 8 or you can leave it in auto and it will
also work and then we have a
header and but that error is uh aligned to the left
and i'm going to add this i i hope you know this
uh symbol i don't know what it to call it but i'm going to use a span again
to color that little
to replicate this here
okay um oh but not not this
not under yellow but i'm gonna i'm gonna use a span but i'm going to not under align it but i'm going to make
a oh actually if i use
that work no
can i use color primary yes yes there we go yep there we go so
yeah we can replicate it i'm not sure how i hold it that's a
utility class everyone she just set uh the the primary color to be of that pipe
to be uh the yellow which is the primary color and just because it's not doing
what i want to that to that one to that symbol i'm going to try to
use this class and see if that works no all right well
i can't remember how i did that with i'll i'll let you know soon um
so we have latest stories and we're sorry we have today's fix
so we just think that
and we have that two-column stack and here's another trick i learned doing
this one that you have two columns and then i thought well i have a photo
and then i have this text that's what i did at first i'm gonna delete this later but i'm gonna show you why
so i have a photo and and it's also divided right i mean it's also not 50 50. i
it's also four and eight the same the same as the the big one so i'm gonna
do that first add a margin and um tell it
actually i'm gonna do this in in the small devices as well
eight and eight okay um just really quick if you set four and eight on small and
then set medium large to be inherit which is the default values for those it'll just be four and eight on
everything so small you would set it to eight and then on the others you'd sit on medium
and large you'd set it to inherit so what that does is what that does is it'll it'll inherit from
whatever is above it right okay does that make sense yes and inherits from what's above it
okay great thank you uh so um
so he here too uh yeah you could do that there too okay great uh it's easier right you can
just change it in the small um so we have a picture and i'm going to
um grab that oh where did i sorry i don't know where i
put it in the
here i have this coronavirus photo and i'll drop it and
what i noticed is that this is the photo i extracted from their website
and if you notice it's not square so i'll show you what i did there but
first i'm going to just copy this text and change it to the left
and then do code red forward 19
updates on the corona virus pandemic
so we have that and i'm going to set this to have
six hashtags which means it will be a nh6 tag okay
that's what it means and um in the photo if i preview this
if anybody has a obsessive obsessive compulsive disorder
i'm gonna get my uh my my charger
before you go crazy so anyway this while
she's getting her charger this is exciting do you guys liking this i mean i love the interaction on the chat room
and um yeah i kind of like this enjoying kind of watching someone else work and then i can kind of inject a little bit
and and uh give how i intended uh for things to be done and hell even i learned some things
right i didn't even think about doing the alt space thing that was pretty clever um so
yeah very very clever there i i like that and um i'm i i'm loving this and thank you for all the interaction
keep the questions going and uh i see elizabeth is back and we'll go back to her because she's more important than nina
anyway no no no okay um so the way i did this
square i thought well darn it i'm just gonna have to edit
all my photos right and just change them to square but no i found a workaround i can't even
remember where i found it but i'm pretty sure i looked it up and found it so i'm gonna use a
container with the with the background image uh
i'm going to add a swatch for a background image here
and call it uh today's pix01
so that i remember what it is today's like tp01
and drop in a an image and i'm going to drop that image there
and this is pretty interesting i thought um there's my container i'm gonna call it
well before i name it no i am so there it is right
and what i found is that if you add another swatch
for uh oh i forgot right now so sorry hold on
um there oh patty ah you're clever nice i i was wondering
if that's what you were going to be doing very good so i'm going to use this and call it a background pad so that i
remember and then go on detail and it's a a percent
unit unit and only the top i'm going to make them make it a hundred
and that will make uh whatever i add oh sorry did it
that's correct oh that's right yeah okay so if i add this class here
it will make it square so i'll remove this picture and drop in
this container here and even though in preview it looks funny it should look good i mean on edit it
looks funny it should look good here yeah cool right so if you're curious so what padding
so when you when you add an image um to a background all right um that that image is no
longer um it's not it's not influencing the size of the container right
okay so um if it's not influencing the size of the container um there that container now has no no
content so like if you before you added that um that padding if you were to preview
it that container would you wouldn't be able to see it it would be nothing right you couldn't see the background image
because that container has no content to it okay um but when you set it to be a
padding of 100 um whenever you add a percentage padding it's always based on the percentage of
the width okay so if you add a padding top of 100
it's going to make the padding on the top the same as the width so that is one way to get a perfect
square and then because that padding affects the the content you get to see the background image
right so that's how we're able to see the background image and background images it by default it will scale as you have
it and it'll cut off the sides and it will center it by default so that is the perfect way to accomplish
what you wanted i'm highly impressed good job okay okay so
um i'm going to add a little padding on top so pt is short for
padding top and add a no not here
sorry i wanted it here because if you notice it's a little bit too close to
to the header thanks oh here right oh by the way this
should be an h1 and this should be an h five-ish or something but i'll get into
that uh in a second sorry about that all right so i'm gonna add some padding top to the
two columns here 32 like i said it's always supposed
to be multiples of eight and then copy and paste but without the padding now that should look
good oh no i do need a padding but maybe less
does that look good no more sorry i'm
there that looks for you yeah all right so um
before i get into details about what like changing all these images i'm
gonna continue because i'm gonna run out of time soon well i don't know how much time we have
well go until you're done and or until you get tired of it i'm i'm okay with it i don't think anyone else minds
great that's great so i'm gonna leave it as it is right now and i'll change i'll
um i'll go back to it later okay but you you get the idea right one two three four five
six we have six one two three four five so i'm gonna add one more and
and now i'm going to get this one done uh
so we have a background and then some content
so i'm going to use another container
here with a background one so i'm gonna add a
swatch called bg1
that's what i call all my backgrounds usually onto unless i have too many but
and we have that um oh sorry hold on i'm just gonna
uh here it is
we have that image so we'll use that class here to have that image
and as joe said if i preview this nothing will show up because there's no content on the background on the on the
on the container so i'm going to add that content right now and i'm going to add a header
it looks like there's two headers yeah
i would say there's three headers this one is an h6
and this one too and that one we'll leave it as three
right now so how u.s vice presidents when it's gonna try to write it fast
um i usually use the break tag if i want the the content to
break because otherwise it won't do it i'm going to
show you
so from irrelevant to influential is my second line and if i remove that break tag
it it won't it won't show that you know went from so it won't it won't
break and i want it to break just so that we look just um very similar to the to the original
um website so i'm gonna make this bold and i'm gonna write history on here
and then we have a hamburger
um awesome i have them here in my snippets
uh i think it's called hamburger oh no
[Laughter] menu no i can't remember what it's
called i mean here let me find i'll find it i know it i think i have it here
funny hamburger and it shows you it shows your hamburger yes it is oh bars just bars and it's a
the light so bars will make an fal
oh or you have it's a light version uh okay so i'm gonna use the l
yeah there you go so right now it will only occupy the height of the of the content
and what i'm going to do to give it a different height is i'm going to use a one column stack
is that okay joe yep and drop all of these inside the onecon
and then the one column i usually like to use the utility classes
and then you use height and here you can use like 48 or whatever
value you want but i like to use like 50 vh which means
50 of your browser height that works better in this case because
if we use a oh if you notice the width of the side
is a little bit narrower than my width so i will change that in the side styles
i'm going to check how how big i made it here so 1 10 20
10 10 10 20 1020 is my width and
here the the uh the default width is 1200 so that'll that'll
make it a little bit better see oh much nicer
yeah it's much nicer now um this will
go for for a little bit um higher sorry
in in the value oh it's 60 60 vh is what i used so that means 60
of the browser height is what this column will measure if it appears vh stands for
viewport height so that's what vh stands for so the viewport height
i didn't know that i thought it was a nerdy thing
okay so i'm just going to align the content to the bottom now
and there we go and now i'm going to use an overlay because i think no i don't i
won't they're not using overlay so i will awesome uh they do
they are using bold in all of them though so i'm going to
do that it should look better yeah
okay so we have that one and now we can have two column again and that two column
will uh be 50 50 this time
if you want to control the way your columns will look on mobile for example if you want the order of the
columns to be different i'm using the two columns just so that everybody can relate to this
but i i would recommend to use columns um
so that you can have more control over what column to show first on mobile and the
and what column to show second later you can't do that with the two columns
stack but you can't
and i'm going to uh now i will add a picture because here
a picture for the elephant and then this world elephant day and
then well it's pretty much yeah it's pretty much the same as here
so i'm gonna copy this oh i don't know why there's two pictures
in there but um
what was it all right so in that in this um
in this these three stacks i'm going to use the alt text now right correct
because they are black against white and i'm going to use a
container too oh actually or actually just put the alt on the container yeah i'll put the alt
and the container it's easier so i will add a container
sorry about this keeps moving around when i
uh open one or the other one thing you could do is if you set
your uh your stacks library to be popover mode instead of the panel that could that could help
uh when you're on small screens the what sorry so on the bottom of the
stacks library you see there's a pop over button on the bottom toolbar click on that
all right so now now now if you click out of it it'll just close
right okay it should and then if you click on the library um
thank you a lot of weight from my shoulders from five years
back just happened so um i'm going to make this container
have a white background by setting this background white and
the content to alt and drop in the elephant picture
which should be around here and you use the bg white uh utility class right to make it white
yes yes that overwrites the background black
correct yeah yeah unfortunately the the the live stream our our videos are covering
the class setting so people can't see that um sorry oh no it's not your fault i
can't move those it's i don't have control over that so sorry for everyone that's watching i'll read it out loud
um oh here it is right is that oh it just doesn't really
matter but
okay so this does not have the bold and that one
does and that's smaller and [Music]
oh i'm going to drag the picture out of the container so that because yeah
it goes full width there we go see i knew that [Laughter]
okay and you're requesting me use the pattern what you were testing me yeah uh
so i'm gonna use p y which is padding y so you can have padding top or
pt padding top p l cutting left p y is p top and bottom
p x would be p padding left and right so i'm using p y colon
16 and to give a little space there we go
in between and i'm going to change that header to a an h4 or h3 or h5
i don't know h5 i guess and remove the bold from this one i just removed the bold
class from that one and go welcome with another who wants to go
walking with an elephant heard i do okay
oh
okay i think i added a little
so there it's done right does that look good to you guys
we're going to change that anyway we're going to change the the color of the
am i still alive yeah yeah yep you're still alive
sorry okay and we have that so what i noticed is that i'm going to
um go ahead in what i did before and i i thought that this was a photo
that would cut at the guy's tie but no it goes all the way down here and the button the bottom
the button is on top of that photo and the photo goes all the way
uh to the so that would not be a picture that would be a container
so i'm going to add a container
here and uh
well yeah i'm going to add the class of background or bg2 uh
even though it doesn't exist yet and i'm going to add a swatch called pg2
and add an image there image of that guy
here
so we have the container and i'm going to drop in a one column stack again
so that we can give it the height
and i'm going to use h colon um
i'm going to check what i had before
60. so h colon 60vh
and drop in a button or a link whatever
you're gonna use
sorry okay and then the button
i will uh center it it it automatically is um
yellow but the the the
the the the sorry the text color is white now i wonder if
no well i'll check what i have to do you might want to set the primary text
color and site styles to be black instead of white you change the
the primary color but there's an there's a corresponding color so instead of white you change that to b black yes that's correct
thank you there we go so that button is registered
register and fold
yes and just align the content of the column
to the bottom and let's see how that looks
there so i'm just going to add a little padding to the two column stack
pb colon um 32
oh pb no not pv sorry pt
there there it looks pretty much the same right
should i go in does everybody have more time or
um yeah maybe if you want maybe um start like maybe uh take some of your um
the layouts that you may be pre-done in the other project and maybe just copy them over and maybe explain instead of
building them from scratch yeah okay i'll do that so that we can go faster
um so oh but i'm not sure i'm using the same
classes i'll just go over this project and explain what i did sure
okay so as you can see i have the same
the up to here we're all set right we know what i did i changed some
pictures i changed the and then i used impact for the video um
i'm not sure if you can use anything else outside of the just with foundation six stacks joe um no it doesn't have any background
video stuff like impact does so impact impact would been a great solution there yeah
okay so inside the impact i placed a container that sets the alt
in this case i i don't have the alt uh switched around so um
this container tells that all of the content will will have an alt um
setting and so i have a header and then another header with a little bit of padding to the top
and then a text and then a header and again if i if i for example in this one dive into
shark quest if we look in the original site dive into shark quest is is underlined
in yellow and if i add the class under yellow class i'm adding it right
now and if i hit enter it will just apply it to the whole
header so i'm i what i did is use use another span
and just put everything inside of the spam
content okay i i did the same thing as before
and um yeah the the impact is set to set to um
use a full screen hero header and if you click here you can add a impact video
slide and the video i i told it to play
i found the link to the nagio website and told it to play that mp4 video
and then it's it's set to autoplay and mute and loop the video so that it doesn't
stop playing all the time um i didn't add i didn't need to add a
um like a [Music] an overlay or anything in this case it
worked the way it is right now and we can see it
live here
so did i it looks like i'm using an overlay but maybe maybe the video already has it
yeah the video probably already has an overlay on it yeah that's what i would expect yeah
me too but i'm just gonna check yeah maybe on the main is it in the main
impact stack i forget if the overlay it's possible the the main impact stack has an overlay
oh i do okay so it's an overlay yeah if i remove it it's it's gonna the text will end up
lost uh yeah the overlay is a really great effect a it makes your it makes your text your content that's on top of
the video or image really pop but you get another benefit of the overlay
it's it's crazy how tricks play with the mod or you know these sort of tricks play with the mind you
can if you use an overlay you can get away with a much much smaller lower resolution video and you won't
notice it if it you have an overlay it's crazy i don't under i really don't understand it but it
plays tricks with your eyes or something because you can get away with with a really low quality
video file here and when you add an overlay you just don't notice it
um it's pretty crazy um and obviously you know a lower quality video file
will be smaller and load faster right so that's you know a good benefit yes
true i noticed that too i noticed that you can have a low quality video it's
great um this uh is i am using for the slider i'm using
moving box uh so i have i added another
swatch instance here because i was i had been using a lot of background uh
swatches as you can see here here there so i was using a lot so i wanted to divide it
and have it close by because i was going to be editing a lot i mean that's exactly why i created that swatches stack
so that you know you don't need to constantly scroll all the way up to site styles and then scroll all the way down
um because you know now these styles that are specific to this one section you're not using these
styles for any other section you can they can live in that section now right exactly yeah exactly and if i want to copy this
section into another project then the swatches go with me exactly yeah so let's just try to
make sure to use a name that you know that you won't um use again
yep um and then i have the two columns this header is aligned to the left this header is
aligned to the right and i use the span instance again to only underline the c
shows um uh text and inside the moving box
whatever you you start dropping in will count i as a slide
so this container with this picture inside has counts as a slide um why is there a container with
a background and a picture well that's because that's the way it is set up in their website they have a background and a
picture and the reason why they did this i think it's cool um it's because when you hover
only the background uh gets a little bit bigger and the and the
the title remains the same we won't see that here but if you wanted to do that it's
it's easy to do it as well with rapidweaver but uh for now i have a container with a
picture inside and automatically they're already aligned to the background i didn't have to do anything to it i
didn't have to align it anywhere i just dropped it in and the the png's
are already saved with the same height as the background and the uh the titles are already
um placed where they need to be placed um so this is for the slider i didn't
finish the slider and i didn't i don't know why i i think i forgot how to use
moving box but i can't see the the arrows uh yeah there's settings that
you can you can turn on the navigation arrows uh show navigation arrows and i set them
to the outside edge and the arrow to be white
but i i can't see them not sure we can look at that later okay
so i'm going to keep going um and so that that's what i use for a
slider but practic you can you can replicate that that that effect
where you click here and five um slides move at the same time you can
replicate that with moving box i was going to do it but i didn't finish that part because i couldn't
i couldn't see the the arrows this time and then the next one is this travel
container that has a background with an overlay and then this layout which pretty much
looks the same as the first one but it's mirrored right so this one is um eight and four instead of four and
eight in in size so i won't go through how to switch that
around because it's pretty straightforward i think so i would just copy the exact same content as i had on the
top and dropped it here after i had a header and a divider and
as per the container it's only using a background uh a background swatch it which is
called bg9 and if you look at that bg9 in mine
in my um background the only thing that uh is different is that the the behavior
in this behavior section i have fixed uh clicked selected so
that makes the image stick and the content uh move on top of it
okay just one quick side note um if you notice i like that um i find a lot of sites they tend to
like if they want to use the fixed background like every every section on the page is fixed right
um and i think maybe like in this particular example like just this one section is right so it's
like it makes it a little bit different it's not like it's not overdone because it's you know doing it on every section
on the site um so just uh you know i think that's a nice touch from national geographic where
you know they're not doing it everywhere right and also i do have to say fixed backgrounds actually um especially
on on mobile um i think they are actually do work now on mobile um but um they they use up a lot of
resources as well um so that's why apple resisted having fixed backgrounds on
ios for so long because for some reason it's very um memory intensive seems odd
but i don't know the reasons behind that but that's that is a reason i didn't know that
but yeah but it's true that a lot of uh sites overdo it this is already using
even if if it even if it's a not it's not a fixed background it has movement already so
there's no need to to overdo these um so and this the set the next one
the next uh sections are really really simple i i'm so glad i did this before so that
i can show you very quickly instead of um i have a another container with a one
column stack to set the um the height again and i'm also using a utility class class
with h colon 70vh again so i'm using like i'm telling it to use 70 of the viewport
height and then i have the header and the text and they're all with alt uh classes and
only the text has a padding of 32. the next one is a container
uh that i made it into a section and then you have photo of the day um
it's a the header and then a text for the padding on top and then another text with that trick i
showed you to underline it and um
we have the the the this um image that they use
here they have content on top and on the bottom so
to do that i set the container sorry i set the column oh why am i using
two containers oh right oh you know why i'm using two containers uh if i
yeah yeah i think so if i if i only use the container with a background
image and leave it without a container it would it would go full width for some
reason correct but the container no for some reason i know why
it goes full width with a they can if i set this container to have a background
image the background image would go full width just like i wanted it to have to go
on the on this one right the travel section but on this one um they have
i can they they have it inside their their site width so i just dropped
in the container inside the container and that did it and this container has the background
image and then the one column stack that gives it that the height and then this text at the bottom is
just right after the one column that text at the bottom is not especially aligned or anything
it's just thrown in there right after the one column the one column will give it will give this container the height
along with the text that is below it so i only
made sure that the content inside the one column stack is vertically aligned to the top
and that's what did it um that's how i did the the big photo with content on the top
and content on the bottom so you made that one column inside there 90 height right or 90 90 vh
so that gave that gave it the height and then he made the text alignment top so which made that date go on the top
but then since the other one was below the one column it went below the 90 vh so basically
yeah it's very clever it's a perfect way of doing that great thank you yes it's 90 ph um
so then the next section is another container with a black background that i set with
the utility classes and then we have a text and a header
header and then another text and then the the uh
divider and then again this the exact same content as before
because what we have right after the photo of the day is the same uh layout layout again
so i left it just like that i just copied and pasted it the exact same one just for visual
purposes and then we have this container with a header and a divider and then
two columns and the two columns are set to have the vertical aligned to the middle
and then the first column the two columns are also seven to five that's the proportion it's
not eight to four it's 75 this time um
and in small devices i left it in 12 and um
and we have a text a link and for this link i uh i made another swatch
because my buttons are uh
by default if i add a link here you'll see that what i did with that
button by default they are yellow oh
i'm making a mess sorry by default it is yellow and if i tell it to be hollow
it will be um yellow as well so to change that i uh added a new class
and called it black button uh so a new swatch and call it black button and just set
the font color to be black i think it's a fun style swatch
and the border you probably said border to be black as well i assume no uh that that did it oh really okay
cool yeah yeah i guess that makes sense yeah i thought it would i would have to as
well but no i just changed i guess you just said you it was just a color swatch
oh you just said black uh font color that's not the one that's not the one no
um which one is it
i wonder if no oh did i add another one right there
another swatch instant
yeah there it is oh there it is it's component oh and then you set primary to be black
yes yes that makes perfect sense yes yeah you're changing the primary color
to be black instead of yellow there another thing you could potentially do is like um there is a secondary color
scheme and other you know so like if you wanted to set the um maybe the secondary color scheme to be
black i don't know because you don't seem to be using the secondary color scheme anywhere so if you were to set that to be black then
in the in your link button you could just set that to use the secondary color that's an idea but that that is a great
way of doing it as well it's a perfect example of using the component colors because you just wanted to swap that
that yellow in this particular section to be black instead yes great so that's what it did there
and then we have another container with a background image using a swatch uh a p
a padding vertical padding so p y colon 32 and then i have the overlay
class to to display that to be to display this this text better um
i was trying to
to make this the same height and i couldn't do it but you can see that i'm using an inline
form uh no just oh i should have oh yes yeah so yeah what you want to do is
um yeah you have a form stack and then inside the forms um so you'd i didn't even have a quorum
stack i just thought yeah that one that won't do anything if it's not in a form stack then
um there is this stack called uh was it inline groups
actually there's a temp do you have my foundation six templates installed i have an inline form template you could probably just use that really
quick i think i do um the the red one i never use these you
can tell um just search for inline i'm pretty sure it says inline subscribe yeah
yep just plop that in there it actually already has a form in there so you probably don't you probably
didn't need to put inside the form or else you actually have problems because you can't have a form inside of a form
right um
and then just unpack that
and then you'll see there we go and we have an inline group now you're that that has a submit inside the button but you could
change that to be your little arrow and yeah and it's done awesome
so i'm going to use the front awesome here i think
it's called arrow right right arrow right arrow right yeah
see i preview that let's see oh yeah delete the other one
yay boom it worked awesome so yeah you can pretty much do
anything with foundation stacks i love it so we have the exact same layout here
that was the only challenging part which was not challenging at all after the completes
and then there's a four column stack with a white um text and then i i have a
a special class for to make the text a little smaller and
i'm curious did you use text for those or did you use the menu i just used the text for this ah okay
it would take me a longer time so i just copied and pasted it fair enough but you would use a menu of course yeah
yeah i'd probably i'd probably use four or vertical menus for each of those i think that would be a great a great option to do that yes definitely
definitely i actually have a i think one of my footer templates does that so anyone who's who wants that
sort of layout for a footer um check out the footer template
yeah awesome this was this was awesome you did a such an amazing job
now some feedback okay um i didn't want to stop on every little possible thing one thing though you use utility classes
a lot which is awesome okay but for certain things like go to
that one layout that they repeat a lot okay so like that that top layout there
right um i remember like on the the cards this those six that are going down the side
right um you used a lot of utility classes to do the spacing for that right yeah now um they use this
particular layout multiple times throughout the entire um you know they use that layout
multiple times throughout the entire uh site right and let's say you wanted to go from
maybe 24 pixels i don't remember the exact amount you had it doesn't matter let's say you're like you know what i had 24 i want to i wanted to be
32 now or 16 right what happened is because you use utility classes you'd
have to go to every single one on every single instance of that layout right
right um so while utility classes are great especially if you're just if you're playing around right now and
you're not sure what layout you want because you can just quickly change those utility classes but maybe for that particular instance
once you kind of have the the layout nailed what you do is you create a swatch
right that then uh that way in the future if you ever wanted to leverage that layout somewhere else
or um you know you want to be able to change that layout a little bit like tweak those
settings you can do that in one place inside the swatch right does that make sense
yeah yeah yeah okay yeah right the one the one and everything would
change point exactly and then all the all the layouts all four of those layouts on your entire page
would change right yeah um so yeah when i when i'm using utility
classes i do think about like if i'm gonna repeating this if i'm going to repeat this instance over and over
i usually go back and change it yeah exactly perfect yeah i i think that was
the only thing that i i you know i think utility classes are great and i say i have a video on utility classes everyone
and i actually have a video on the pros and cons of utility classes right they're really great they're they're
especially as you saw elizabeth was kind of playing around with the classes she's like i want a little bit bigger a little
bit less right utility classes are awesome for that and they're great for like one-off little things too
but again if you're going to use you know really have a layout that you want to use in several places try to swatch it out right swatch it out
i i i'll have to use that term swatch brilliant [Laughter]
so cool um actually i had one question that um commander jody joy had a question for
you and she said what are your thoughts about recreating this website
in foundation six opposed to foundation one oh it's it's a to me it's a huge
difference i mean i i loved foundation one don't get me wrong but um it's just a foundation six is
that that that exact same thing that we were talking about the classes
that's what makes the whole difference like um and and and the the versatility like how
quickly you can just add a padding with if you if you start using the utility classes a
lot you'll memorize some of them like i did i don't i didn't memorize them all yet
but i have some in my head and i'm like oh you know it just makes it much easier than to go
on each stack and try and change like uh where was the padding and oh there it is
and then change the padding to the top and i don't know to me it's just easier to type things out
and then like i think it's wonderful to have for example i i don't know if you saw
the remake of the apple website but you have the the what the a column
that was not a column a container that that was white with black text and pictures
and then i would copy the same the exact same container um to the to the next section
and just remove the classes and that would make it uh so sorry if it was black with white text
i would remove the classes and then it was white with blackjack just with a with a removing the classes
so it was it was so much faster to work with and i uh yeah i'm a big foundation six
fan awesome thank you well everyone says i need i need to do we need to do these videos
a lot more so uh everyone absolutely thought it was stellar and i have to give props
with this was her idea she came up to me and proposed this idea she is a genius and um thank you very
much elizabeth for coming on today i had a lot of fun hopefully you learned a little bit too yeah
and um yeah i thought it was great thank you very much everybody cool take care elizabeth thank you for
having me bye thank you everybody everyone it was nice seeing you seeing your
your your comments cheers bye elizabeth all right everybody so yeah that was
cool i got to stand up for this that was awesome right so uh really really cool stuff we'll definitely try
to do a little bit more of these and um yeah as always try to come back oh someone rang the doorbell now my dogs
are gonna go nuts okay so fridays we have hangouts um check us out on friday we're gonna have
a lot of really cool stuff actually i've been working on it i know a lot of people are talking about total cms a little bit they'd like to
see this total c messified a little bit well maybe we could do that in the future but um
i'm working on a really cool total cms update um we're adding some really cool new features that people have been
begging me for um to kind of transition us over to total cms2 a little bit so um if you want to join this friday you
probably get a little sneak peek i actually have a couple beta testers on it already so hopefully we'll see you on the hangouts this um basically 20 minutes
from right now on friday okay um on our hangout url go to the weaver space um go to weaverspace
events or there's links on the homepage as well and you'll get access to the uh hangout urls
we just hang out on zoom we have a bunch of fun they are not recorded um so yeah come join us have a lot of
fun we'll see you on friday and if you haven't checked out elizabeth's
amazing work on our instagram account you gotta check that out she has been killing it on um on
instagram so make sure you check out uh weavers or instagram.comweaverspace a lot of
really great tips and tricks um it's just not promotional videos there is a lot it's a great learning
resource so make sure you're checking that out promote it follow the accounts and uh yeah repost all that stuff
because it's so awesome share it with every web presenter you have i really appreciate uh would really appreciate that and as
always i know a lot of you are on youtube hit that subscribe button i don't think i really asked that very often but yeah subscribe
that'd be awesome just don't watch us live subscribe let me know um you know let
youtube know that you like us hit that like button uh they say like pound that like button or whatever they say on the other
youtube channels anyway cool well anyway i'll let you guys go take care everyone hopefully we'll see you on friday if not we'll see you next
week on next week's live stream bye