everybody let me adjust my camera looks a little hot here there it looks a little bit
better a little
bit all right we'll go with that all right hey everybody uh let's see my live
let's go over here Mr Powers is in the house what's happening bud
still seems a little dark all right there we go um sweet
excellent we got David Mr grobler is in the house
excellent okay guys so um I thought it would be fun um so as
you know I'm continuing to work on Mr Cole how's it going bud um I've been working on total CS 3 like
all the time right all day long 15 18 hours a day okay and
uh hey sorry if I've uh ignored you or tooken a long time to respond to you on
the community I'm seriously like I just said heads down um trying to get this
out the door Mr workman's in the house sup Dad um okay
so I'm at a point um I have my to-do list and one of my to-do list items is
to um get get at least some sort of rough draft um or rough version of some
documentation done right um I have I have some just text drawn out but
obviously I need to kind of make it look pretty right at least have some sort of web page built and um so I figured you
know past couple weeks I've been kind of showing you guys off and kind of working while I live stream getting actual stuff
done not that teaching you guys stuff isn't getting stuff done but I think you you know what I mean so I figured hey
you know why not uh work on kind of building out some sort of boiler
plate template for a docs page okay and then I was like Hey would it be fun to
kind of make it in HTML and then um head over into stacks and build with
Foundation um and kind of see how the workflow differs right um so yeah and
then if we have time at the end I'll show you I'll show off what has happened
with the image uploader since last Wednesday okay cuz I've finished it it
is amazing I love it um thank you for some of you that gave me some ideas during the last live stream I
implemented all of them so hopefully we'll have time at the end I'll show you how that looks and maybe a couple other
amazing features that I've implemented since last week as well um so really cool stuff's going on without further
ado let's go ahead and uh jump in okay um so just want I'm going to
show you an example um of a site I should have had it already pulled
up but let's see proton see docs.
page darn it
um I just got to Search for really quick how does it not come up right away
hold on one second um I think it's uh docs.
page Foundation slon I think that's the URL oh look at that okay um so this is
the the the style of page I'm I'm going to be building today okay I probably
won't build this it's a three- tier structure We have basically a a simple list of navigation or pages okay uh and
then we have our documentation right here in the middle okay um and uh there
is a third kind of uh pan over here which is uh like on this page there's
you you can link to parts of the page okay um I do like this idea I might not
get to that today okay but uh I just want to have just build out a extremely
simple page here again we just have a a kind of a top header area again a sidebar with some
navigation and uh and our main content area that's it okay um super simple and
uh yeah let's uh let's get on it okay um so yeah super simple maybe we'll leave
this page up maybe we can reference it just for ideas um just we can kind of go for Styles um it it has I'm probably not
going to build this toggle in there I don't know maybe eventually I definitely won't have time to get to that today okay but um
yeah there we go uh has this little toggle kind of a cool idea um maybe I'll build it into the
actual docs page or not I don't know um but we're going to go ahead and build
probably a light version I don't know um all right let's do
this so we're going to start off with a completely blank htl page here okay um
haven't even created this we're just going to go ahead and do a new file we're going to do docs.
HTML okay and I'm probably just going to build this all in one file of CSS and everything uh just to keep things simple
um and uh we're going to go ahead and uh run a live preview Show preview okay and
let's just make this a little bit bigger oops that's a little big okay and uh don't necessarily need to see
that Mr Williams in the house Sean thanks for coming on okay all right so
uh I'm starting off with a blank HTML page and um as we do we don't just code
we we we start from some best practices right so um I like this thing called uh
HTML 5 boiler plate um I uh I used it for foundation they always update it
with kind of like the latest and greatest stuff um so we're going to go ahead and I'm just going to go into let's see
Source let's just open this up and we're going to go into their index HTML and
here is their uh I'm going to copy the raw file we're just going to paste this bad boy in there right so there is our
raw um HTML file okay uh we're not going to have any JS for right now at least um
so I'm going to ditch that let's see um I'm not going to worry about some sort of site
manifest um going to do that
um I'm going to be bad I'm not going to work about icons
uh at least for today okay we're going to comment those out um here's all the
OG stuff I'm this is going to be an internal docs page um not something
that's going to be shared um so in fact uh we don't want that okay in fact I'm
not even going to have that okay we're not even I'm not even going to do a description we'll do a title so that it has a a title okay so we'll just do
total scene CMS 3 docs okay just for
now um ini scale blah blah blah and the going to link
to uh here we'll do this we'll we'll link to docs. CSS so that I I at least
have my my CSS um separate
okay all right so uh let's go ahead and create a docs file as well um we're
going to BP we're going to create a new file we're going to create docs. CSS
okay so now I have now I have my CSS file and my HTML file
okay um and save that and we'll see that boom
here is my here's my boilerplate file okay
um there we go BL that's going to be
Ian I think it's Ian underscore us or something like that right iore I think us is
capital but I think uh well that's the local language is always going to be Ian I believe um doesn't really matter
okay um there we go super simple uh now we're going to go out into our body
actually um before we start creating content excuse me I'm G to have to sneeze in a
second or not I hate that
um there we goes finally sorry ah live streaming fun times okay so um well
we're going to start off with some some actually some boilerplate CSS as
well so I'm not going to use any sort of Frameworks on this page I'm not going to like load in all of
foundation I it's just going to be a super simple page P probably most likely
zero JavaScript I I might do that third pan that like creates all the in page links I don't know I might create I
might do that with um with JS but um that's not going to be today today we're just going to do uh
HTML and CSS and um one thing that I've kind of been intrigued about is to um
there's something called CSS resets okay uh this is a Blog by a a well-known web
developer out there called Andy Bell um last year he implemented kind of a new CSS modern CSS reset now uh what is
a CSS reset you might ask so um
browsers and I just copied what he had on his blog and pasted it directly into this file we're just going to save that
okay and uh I'm wondering did that refresh this page
automatically okay well it didn't seem to fix any change anything so okay so
what a CSS reset is is there are certain styles that we
should apply on the page because um some browsers behave differently different
browsers behave differently I should say okay and here let me let me back to here is and um so since different browsers
behave differently um we need to add what's called a CSS reset okay to ensure
that all browsers kind of behave the same and also it kind of fixes some
known annoyances in browsers now uh I'm not going to dive into and analyze all
of this CSS for us okay may maybe we could do a little bit but um yeah this
is basically a CSS reset that kind of makes things nice now um before this I
had I had a little bit of time so I did Analyze This blog post and this CSS and it's a very personal thing right like I
kind of agree with some of these things don't agree with some things there's actually been some other blog posts that are out there that kind of uh gives some
other suggestions one thing that I liked is um
so if I do I'm going to change that to this to class really quick um right so
what this does is um I guess we can go through this some things I'm going to skip okay um Box model border box this
is just a a web developer standard it's just a shame that we have to add this um
uh it just makes things nicer just trust me okay um uh apparently this this one
here this was actually new to me this has to go with um actually fix some Oddities with um how font is size
potentially and like if you if you're on a mobile device and you go from landscape to portrait mode or something like that so this one's new to me I'm
going to leave it in there um it seemed like it fixed some sort of issue um let's see we're standardizing some uh
some margins okay um there was another CSS reset that I that I read this one
right here that that took andies and then modified it and he did this where he basically removes margins on
everything I don't know I kind of like that I don't know I'd have to play around with that to see if I liked it or not um we're I'm actually going to go
with that um as well we're going to go up here and uh I'm going to remove all margins as well on everything I don't
know we'll see we'll see if that's going to be annoying or not okay um look I
don't know is it is it a good idea I don't know if it's not or not I mean it's an interesting idea and he did it
here um there are some other interesting ideas on let's see on this one uh improve media defaults um where we have
display block Max 100% with um have that in here but it's limited to image and
picture and I liked this guy added it to video and svgs as
well perfect we're going to save that um let's see input
stuff uh oops man I wish I could turn that off in PS code okay input button
text area select yes uh and then text area rows BL where
am we doing oh here text balance
yes okay I'm good with all these I think we're just going to we're just going to go with this so this is a CS again a CSS
reset that kind of like standardizes a lot of stuff in browsers
okay uh let's refresh that make sure it's good okay so
um now we're going to go ahead and let's start adding some content to
our page we're going to get we're going to ditch this this
here um so first off we're going to let's let's analyze our page that
we're we're building here okay so at the very top we have this um kind of this header uh that just has like a you know
a title um it has this little dooh hicky maybe in the future we could have other menu items okay then we have this other
container right here that is our um navigation menu we have our main content
area and then here we have our um onpage
navigation okay and I'm G to I'll build this section out but I'm I'm not going
to um build it actually out today okay um okay
so let's go in here we have a uh we have a header okay
and in that header um right let's let's just build that out we have a header
okay and then we have um a sidebar a main contact area and
another sidebar right so we have an side
okay and then we have a
main and then we have another aside
right and uh yeah right so let's build out this grid okay so I'm thinking
remember um how Bento has this thing called areas right so what we're going to do is we're going to uh go into here
let's scroll down to the bottom okay and I'm going to you know on body I'm
going to do a grid I man I don't do this with code
very often grid grid template areas and then um hold on I need a
little my little cheat sheet here uh to help me do this
properly grid template areas all right right grid template areas
name blah blah blah
okay right so we're going to have
um isn't it uh hold on let's just do this
CSS grid Dash template areas
there we go that's what I thought it was sometimes so vs code has you know
um you know co-pilot which helps us and if you look at that that is wrong um so
sometimes it throws me off and it's like I want header header header okay um and
then we're going to go to uh the second row is going to be um
nav
content and then um we'll call it on
page but like uh we want that content area to be
big H interesting I don't know I thought it'd be fun to use grid template areas
but this would make these three different
sizes right but we want it to be uh basically I want this to fit content
that to fit content and then this is just going to grow maybe grid template areas that we don't really need it I
don't interesting probably should have gone with something I've uh I've I've
used several many many times I thought it would be fun to try this out but do
we try it out and watch you guys fumble through watch me fumble through it uh without
Bento because I built this all at Bento and it's like yeah I could you know it's like you build all this stuff and then
it's like how did I do that again um all right so we have header header header I think we're going to do
content basically I want nav and on page to be the width of their content
because over here let's see
um see align
content
interesting h let's let's go with it all right um right then we're going to do
here just so we can see our grid we're going to do um header is grid area
header um let's see oh let's do in my here I'm going to
add a class into this since we have two asides class equals
um main nav
and this is going to be on page
nav there we go
okay side dot main nav grade area nav and then we
have main grade area content and then we have on
page I think I did on page dnav is on page
right that's what I did yep right um we're going to do header just just for
now so we can kind of do background color uh we're going to do uh
black okay uh and then
okay uh let's go in here let's start adding a tad of content in here so in my header I'm going to add a
H1 I don't
want interesting than insect this oh what
they don't let you inspect that
sucks uh okay we want to go into here uh since that uh you know I don't want
background let's do um and do the same background color here
I don't want
black you cannot get an inspector in here man that sucks it's first time I
used this live preview thing um hold on one
second there we go let's open this inspector what is
it does body have a uh a padding on it
what I think I should add a uh a wrapper around all this I'm going to add a
wrapper around all this instead of doing it doing a grid template on the body is kind of crazy um I thought it was let's
do a div
we're just going to say
equals page
layout okay here so this we're going to do page
layout let's try that that make things look better
interesting oh look body has a margin by default what well that tells us that we
want that uh that star margin zero we're just going to do that now thank you very
much okay star margin zero for the win I debated adding it it's happening
okay probably do maybe even pading zero that's getting a little maybe a little crazy but okay that that makes me feel
better actually I'm I'm curious now that if I added that if I did I just want to test this
out um that was down here that was
body the same ah there we go interesting okay um let's keep it I'm trying to I'm
trying to do this with the least amount of HTML it's kind of my the challenge to myself here so um yeah there we go let's
go ahead and save that he boom right now on my header let's just
uh add a little bit of we'll just add a little bit of padding to
that let's do like one R maybe okay so we got a little bit of padding there
perfect okay um
and now oh let's add some content to um here in my main uh or in my main
let's go ahead and just add in
um H1 with
a see m page
docs page right and then we're just going to do
a do something boring here there we go all right um and then in my aside see
we need to add a little bit of menu right so we're going to do a uh a look at that boom kind of already did that
for us
how come they're stacked on top of each other did I mess up something here is maybe there has to be a comet in
there no header header nav content content
page how come that didn't do it what did I do wrong
there interesting
oh I didn't the I didn't tell body it's a grid display
grid oops wow what happened
there I'm intrigued to see look got it refreshed here
too huh interesting all right I'm going to ditch
this grid template areas I hadn't really done it much very much before so we're going to
um we're going to do this I'm going to leave that and then we're going to do a
um do a div [Music] here and this is a class
equals page layout okay we're going to get all of this
stuff here going to move it into there
okay that was enough messing around we're going to now do this quicker
way Page Das layout okay
display grid um grid D template columns we're
going to do auto 1fr auto no and
do 1R Auto
1fr and then we're going to take that off and that off and that
off that off
okay now we're getting there all right um so this is going to be a going to add
a uh class of menu onto there okay you notice when
I did that we now have our bullets are gone that came from our CSS reset whenever you add a class to a bullet
list it will remove the bullets for us score I like it
um okay now we need our main content now this main content area well he let's add a little bit of padding to this aside
which is uh which needs to happen so let's add in my bank side over here
we're going to do um padding to
R um why is it oh um we also want to remove
the padding from the UL you know what I'm going to do is in my reset I'm going
to go ahead and try this I'm going to do padding zero as well excellent I like
that just remove everything there we go now I got my kind of got some docks over
here it's quite small we can we can add a little bit of breathing room maybe
okay three on there there we go okay now this content area here U is my main
content area okay so what I want to do is um I want to do a Max
width okay since a lot of this is going to be text okay um I'm going to do 65
characters
right and that is oh interesting because Auto those are Auto um right we're going to have to and
we're going to also add a padding to it to add some two run padding to that
as well all right interesting now if you notice
these this it it grew basically I'd like these to be kind of more static sized
and then allow this now if if I resize this we'll see that it kind
of this reaches its Max width and then that menu item or or this this menu
Grows Right and that's because I set it to be let's see let's try the auto here
and one of our Auto let's try that
yes okay now uh I added this this gray background kind of as a just so we can
kind of see the columns a little bit um but I don't necessarily need to have them there right right so um I don't
know style-wise maybe we keep it white I don't know let's look at the other page here let's look at the other page I'm
trying to replicate here um so we have proton
okay and then we have a bottom link or bottom border sorry then over here we
have here let's just inspect this and have a have a gander and what's going on here so there's the
sidebar that's a section that has that is what that's a flex box of course it
is I think
oh they did it quite different actually
okay they did a oh oh man what you know when you when you look at
a web page that looks nice and then you look at the code and you see what the heck they're doing and you go it makes
me want to barf um um funny enough okay
um let's add that little bottom border to the well first off let's let's go
ahead and adjust our H1 uh font size
I also really don't like this um this font we need to change the font size the fonts in here so we're going to
um body
um I want to [Music]
use there we go boom all right we're going to use the system
fonts oh that's looking so much better already okay just applying a font um yeah made
it look so much nicer okay I like that right so there we have just some simple
titles um let's go ahead and
H right we need some vertical Rhythm okay and uh what I'm going to do is
on um
see well we're going to leave it at that for
now all right let's style our our menu okay so we're going to do a uh
menu and obvious well this style none is already applied but what we're going to do is um
all links in there we want to have um text decoration
none okay there we go okay these are all the links um now for fun actually here
I'll show you um ah maybe not for now hold on one
second right I'm going to remove that that gray background let's remove all
the all these gray backgrounds okay make it
similar okay yes um I'm going
to there we go that way the the links line up with that okay um
now in our menus we want to have
um let's see when we do do menu actually you know what this will
this will be fun this is something new um I actually haven't played around with this so CSS now supports
um nesting okay and I think this should
work and it does wow that's cool cool okay so now um we have that we also want
to change our our color right so we're going to do um color on
Hover um let's just change it to Aqua for for
right now let's see what's
onic oh that's a little much right uh here color
slurp let's find it oops oh I can't move it over because it's
full screen right let's find a cool color um here let's go
[Music]
to maybe a little darker oh let's use
that I can I'll probably tweak these colors oops tweak these colors eventually anyway oops I thought that
copied copy
that okay there we go and we hover we have blue perfect okay and eventually
there'll probably be like an active page or something like that so um and we
could do um and. active
Okay so for example if I were to go to this homepage and this um this
particular nav was active Okay uh then over here so there
we go so now uh the the active page which just home is hovered the others are not right
okay um and one thing I want to do over here is
let's go ahead and add like just another paragraph okay we need to have a little bit of space into here okay and um what
I want to do is we're going to make so that um all
H1s H2 H3
oops okay um and
paragraphs have a margin top
of one M it
is and then we're going to do and first child margin top zero perfect okay okay
so what does this do let let's teach you what what what this little bit does okay
so um so basically on on all headers and all paragraphs okay I'm going to set a
margin top of 1 M okay so what that does is that sets uh I'm going to go ahead
and comment that out okay um so right now we have a margin
top on um this header uh and and the m
is the size of the header or the size of the text okay so for example let's go
over here so we can actually preview right and actually inspect this it's cool this live previews as well okay um
if we look at this okay um I have a margin top of 1 M
if we look at that calculated it is 24 pixels okay so uh this this header has a
margin top of 24 pixels and that's because 1 m is equal to the size of that
text element okay um now if we look at this paragraph it only has a margin top of 16 pixels okay um therefore um it is
1 M it is the margin top equals the size of the text ele the size of the font um
or the text in that particular uh element right so that makes sense that
we want headers to have more space um between them than paragraphs okay so
again we're adding um here the the space between the these paragraphs is here now
let's go ahead and it's more parent if I were to add in let's add it I'm going to duplicate
this section here okay all right um so if I were to
go ahead and I'm going to change this to be I know we all know REM right yeah let's
let's make this one REM so that way right now the headers and all paragraphs have the same amount of space it doesn't
look horrible right but um let's change that back to 1 M okay and what you'll
notice is um you can even go a little bit more actually maybe 1.2
[Music] okay one is good right what you'll notice is the uh the space between the
last paragraph and this header is more okay than the space between these two
paragraphs and that visually looks better okay now one thing we need to fix is this very first one on the page and
now we also added a margin on this bad boy up here right we don't want that
right we don't want a margin there I don't want a margin on the very first header at all okay so if we look at that
CSS that I added okay um Bally what this does okay is it finds if one of these
elements is the first child make the margin top zero so pretty cool so everything has a
margin top except the very first item which has a margin top of zero that is
why that fixed this because this is the first uh it is a first child element
okay as well as this one because it is the first child element as well so now
they both have margin tops of zero okay all right um what else can we do to
make this kind of look nicer um let's add uh let's see that that bottom border
on the on this header okay let's add a border Dash bottom um we'll do one pixel
solid uh gray there we go right so adds like a
little nice accent line there okay what else did uh let's look at this what else
did this there's a little bit more space here they have a lot more spacing
[Music] um there's more spacing between those
items let's add a little bit of a little bit of padding to our menu items here so
let's add a
padding how come that didn't
help what's going on here that didn't help
oh I need to add it on the LI elements I
believe yeah um okay I need to
do give me a second I'm going to modify this
that's a little bit much actually to yeah that's looking better okay so
now I added a little bit of padding to these list elements there we go cool um
like to add like maybe
on the main nav I have padding there wonder if we did like a minwidth
200 pixels yeah that that looks a little bit
better so I just add a minimum width to this side over here
cool I'm liking it all right um see we're at 12:15 already uh as you saw uh
I didn't build an exciting web page I I just built something that is pretty simple okay and uh I don't know I
fumbled around a little bit I tried to play around with that grid template areas which I haven't really played around too much outside of building it
for bento um so you know once I got out of that oh one thing I I did want to
note okay um I think I've taught this before okay but here um on the main
content which is this area here if you notice I put a Max width of 65
CH okay um I glossed over that um the reason I did that was um for large text
areas when a human eye is reading text they tend to it tends to be very
difficult to read long line lengths and normally anywhere between 60 to 70
um character that is the line length that is readable so what I did is I knew
that I I wanted to make this entire content area a Max width of 65 characters so that may that means that
uh no matter how this grows this content area is never going to be larger than 65
characters okay so um that is why that is now um one thing I could add is is we
added um margin zero Auto there we go so if I
added margin zero Auto on here um then then this would then Center okay um now
uh let's go ahead and take actually I'm going to take
this there we go all right that looks good so basically uh what I did is before these padding and M and minwidth
settings um on the aside here was only getting applied to this one now I'm also
applying it to the one over here even though it doesn't have any content right so here let's just go ahead and add a
I'm going to quickly add in a little bit
of content into here okay now now this over here is going to be different this
is going to have like links to uh parts of the page okay um so but for now just
so you can see we have navigation over here um it probably won't have any of the active
um things um so over here you'll be able to
link to uh your on page nav right and if you wanted to you can even do something
like um you know H4 um on page
nav right and then here you can do main nav
or something like like that but I think it's kind of let's just keep it simple um so there we go uh this is the page I
wanted to build um it is a very simple page now here uh is where you know
there's going to be a lot more styling in the main content area um because
yeah uh you know it's going to have the docs it's going to have code snippet areas it's going to have all kinds of
stuff right so um I think it's just a very simple page that's kind of elegant let's go ahead and build this exact page
that took me I don't know half hour 40 minutes or so okay let's build this page
in Stacks okay we're going to open up uh
Stacks classic okay uh we're going to open up let's start a brand spank a new
project new page
okay so here we go we're going to Chuck on site Styles okay uh we're going to
hide that um at the very top remember we had a uh we have a header okay so here
all you replicate um pretty much the exact structure
okay what are we going to do here um container I have a container
okay I'm going to make that a header okay since it's my page
header um we are going to add in a header stack okay and here we're
going to do uh oh and also I wanted uh total
cms3 docs container I want that to
be um full width plus gutter okay so there's
that um and then well we wanted a bottom border on that right uh let's just build
it out so we're going to do um a border
Swatch if I can type there we go border okay um we're going to just going to
apply this I'm going to be lazy I'm going to add this to header okay and uh
we want to have a simple um bottom one
pixel uh style uh sides
bottom okay and oh color there we go okay
um yeah that's fine give you that
boom I think the bottom border over here here was a little lighter but hey we're there we're getting there okay um also I
had I think I had some padding on there too right um we could just quickly go in here and add a little bit of padding
just do like Pon um 16
okay uh now we need our layout here okay so super simple uh we're going to have a
three column um actually here we're going to do remember I I'm going to try to replicate as quickly or as evenly as
possible okay so on the column here I'm going to set this to be I'm going to use a columns Pro and the you'll see why is
because here on the column I can set the HTML tag here to be an aside okay uh
which is like you know tell tells the the browser or whatever that we're on and as side okay and um here I
[Music] use uh what did I do oh main nav here
let's just replicate it as quickly as close as possible so I'm gonna have main nav
okay and um then we have uh and then here actually on the on
this main nav let's go let's call this oops uh main Das nav okay um on small we
want it 12 on medium we want it to shrink to content and then this one we want Auto
on column 2 and that's going to be a main
tag okay I don't think I had any class on that did I nope didn't have any class
on that um okay we're going to call this main
okay um and then then we have our second one which
was on page nav on page
naav and we're going to put that in the title so we can kind of see that in our column so here we have our navigation
our main nav our main content and our on page nav okay let's quickly build out
that uh menus okay um for the main content here let's just here we'll add in some text in
here there we go just some text okay there we go um right on here we need the
navigation
I'm just going to use a simple menu okay um and uh we're going to be a vertical
menu and I had
home docs
oops uh about and contact right in in my docs page I'm not going to have these
pages but uh you know you get the idea as long as there's something here to see
get the Styles down okay um now I want to style these a little bit so we're going to go ahead and we're going to add
a oops a components we're going to add a menu Swatch menu
Styles and let's just call this um uh my
menu okay and uh I want text to be black on Hover
uh oh [Music]
wait yeah on Hover I want the text to be uh we did like a blue let's just do
some sort of blue here
okay keep like that um so item on blue and we're going
to do uh my menu okay there we go let's preview this
see how it's looking okay so we we have our menu item in our content now this
this aide needs to be a little bit bigger right so we added a um minimum
width right to that uh so we're add a width okay and
and um we're just going to do on a side um I'm going do minimum width
minimum was 192 pixels okay I also added
some padding to that okay uh
padding um I'm just going to do a side as well just for Speed since I knew
exactly what it was and padding we'll do I did Two Rim we'll do 30 pixels which
is two R okay preview that okay there we go okay the padding
on the menu item is a little is a little much
uh on the menu Styles or
padding do that there we go right and uh yeah so
now we need to Center this right let's well here also we're we'll take this menu and we'll copy it down here okay uh
preview that so now we have uh our menu over here but this needs to be centered
okay so how are we going to do that so let's go ahead and uh I wonder
if I could just do uh a utility class MX
Auto that didn't um
uh or we can do content alignment or no uh column alignment
horizontal um justify I
think
no oh wait okay uh wait on this main remember we wanted we wanted the main to
have a Max width that's what it was sorry sorry um so we're going to add in
the max width we're going to do uh width and we're going to do on
Main we're going to do minimum width is none maximum is we're going to go to
detailed um maximum unit is characters and maximum is
65 and boom there it goes okay so I set my Max width to be 65
characters just as we did on the other one um now here uh I did you I did cheat
a little bit and I use that utility class here we'll we'll get rid of that I'm curious actually if
we okay I didn't I didn't even need that so uh one second let's one thing okay I
was using Arc and you've noticed if you ever used Arc that when you preview with
Stacks um it opens up a new instance every time drives me nuts um so uh by default I had uh this
horizontal set to inherit let's preview what that looks like when you do that it
it basically moves everything so that it fits okay but what we want is if we set
the horizontal alignment to justify okay and what justify does here let's show
you a little I have a a little cheater diagram here um here if we look down here oh
wait no that's uh
uh is it this one yeah it has to be this one so um
well I I changed the names a little bit than what's in this graphic but essentially what it does is it spaces
them out evenly right so that it puts the First Column as far as it can it's last column as far as it can and the
center is the middle one right which is exactly what we wanted space between okay I call it justify okay so um set
that to uh justify and uh refresh voila
okay um you know we we could add a little bit like made like a padding on the top here uh what did I do over there
uh uh there's a nice padding there where did I add
that oh I added three rim to the top of
that I did on the main too oh I did it on the main too okay I just added more
so okay so on I was lazy uh on these on
this aside you're going to do aside and Main okay um we're going to go detailed
and top and bottom were three REM which is
48 48 left and right we're two R which is
32 there we go voila there we go um so I mean there
we go we effectively have the same the same page here now obviously Foundation adds a little bit of all of different
styles right uh it's not identical like some of the you know the fonts are slightly different um obviously this is
an H2 this is an H3 I think or something like that I don't know right but we're
really really close uh to the Styles um now oh another style that added is on
Hover it adds the text decoration here I think that's the only style that I kind of didn't do if you're curious on how to
do that
um oops I didn't want
that okay let's go ahead and
do I thought I added that to
menu display carrot no I know it's in sight Styles we
do underlying links on Hover let's see if that does it I I'm
thinking many will might override that still let's have a
look yeah menus menus don't allow you to underline um so we're going to have to
do thought I had a text
decoration now I have underscore which works actually it's
cooler um here let's do um here actually instead of knowing the
class I'm going to go to element we're going to go to uh all all menu
items okay and then we're going to
do yeah let's try that boom it's actually kind of cooler
okay we got a nice hover effect um it does go all the the way out we could we could tweak that
um there we go so yeah man that's that's really nice
if you haven't played around with this underscore it's in the Swatch pack man it's really really nice if you see it
just it just this nice animated hover effect on the links super cool okay I
might have to add that to the actual docs page I add a little bit of Bazzaz to it at least pretty cool um hopefully I didn't
lose all of you guys but um as you saw that was a hell of a lot easier right for pretty much the same exact page um
using Stacks it just just shows how
powerful um Stacks is and how much fun I think it is to build like you don't need to worry about all the stuff you don't
have to worry about diving into the code and how you going to remember like even me like I build stacks like I built
Bento like the perfect example I bit I built Bento that has the
grid the template areas thing I built that now if I ever want to build a template areas thing again guess what I
just I don't need to remember how I did it I just use Bento right like I built stacks for myself as
well because while I can code and I'm relatively good at it I find building
pages in layouts more fun and easier with a stack so um yeah uh there's that
Hopey do you guys like that if you guys want to uh I know we've already hit the hour mark but would you like to see kind
of the stuff I've built um in total CS3 yes no let me know in the chat while
I close up some of these uh windows here or maybe I'll save this project in
case anyone wants
it okay okay um let's dive in let me go
ahead and share my screen again
and all right let's close that don't need that anymore don't need that anymore more don't that
anymore uh don't that anymore right let's go
to let's just go to a new one we want to look at
images all right
um so we left it last week where I was building out uh this link tool okay um
oh I just noticed the the rounded corners on these are not getting applied
H okay something to fix um so one thing also I was I think I I
don't think I I added anything to this since last week I may have I may have added some
some new icons right so there's every kind of uh you know thing as various icons okay um but this is pretty much
all the same okay uh if you haven't seen how fun is is moving this around and it linking to
these like that's just too cool okay oh look at that border outline
needs to I know what that is and that needs to change oh but it could change
interesting all right sorry um got distracted myself all
right so this link Builder um if you notice it is uh different than what we
saw last week okay um a I've added I know I've added all all icons into here so that we kind
have nice little icons for each um value um the help has been added to the hover
okay so that you can uh it doesn't kind of clutter up the UI having all this help um and I've I really worked on
getting that help very very detailed okay um so that it really tells you it's
kind of like built-in documentation for everything okay so it really tells you everything that is available and like
for example this fit and crop um I added a bunch of options but if you want to read the docs for it there's actually
full-blown docs um so you can read about all the available options um and what
each of those options actually does okay so really really cool there same thing
is documented for watermark okay I don't have a watermark um demo yet um it's
because I haven't built it relies on having a gallery and I haven't built galleries yet okay so um so yeah um
there is that now another thing you'll notice is let's go ahead and just uh change this let's
make that like a thousand okay and preview image okay you'll notice a couple things
just happened um a the image changed okay but you also notice that I display the current size of the image of this
version of the image um I display the pixel sizes because um as you notice I
def finded it a a width of 1,000 pixels but we don't necessarily know what the height is right so now we can kind of
see what the height and width is okay as well as what I think is very important is the size okay so we because we don't
want to have too big of an image next up is we have the ability to cop copy the macro and so you can just click on this
button and the macro will be copied okay so then at that point you can then take this and then this is the macro you
would use on the total CMS side the content side to add that image to your web page okay so really really simple
and it as you add in these uh so let's say I add in a contrast of I don't know 50
okay right if you notice up there it adds all of those options to always
replicate and generate this image this is the macro you will use okay um and then here is our
download button so we added a download button so you can go ahead and download this version that you're looking at
right now so if I go ahead and click download it actually downloads that
particular image that I just generated on the Fly okay um this image isn't actually on
my web page until I actually add it to a web page you can kind of manipulate images and then download them all you
want really really cool okay um so that is how image
preview uh came out I I love it um it's really really cool
if you want to play with it um I have added it online okay oh some people have already
played mucked around with it okay um I gave this out to a few people on
Friday if you want to go ahead and play with it here I will now just remind you
um this is online so as if you upload new images they will get replaced so
just be careful like if all of a sudden an image changes that you uploaded it's because someone else is playing with it
okay right but uh this is I added four images you can go ahead and maybe play with a different image so that you're
less likely to run and step on someone's toes but you can go in Ed here and edit information play around with the image
Builder and all that stuff okay um so pretty cool there all right let's get back to uh my
local demo here uh another thing that I added um so if we I think Irwin last
week suggested that um I added a download original button okay so if I
click on this this downloads the original image from the server okay so
now that I clicked on that this is the actual original image that was uploaded to the server it's not a modified
version It's the original right so that's a that's a nice thing to
have um I also I I created an upload so if you want to uh before upload used to
be over here I moved upload over there um it kind of makes sense because now these items in the in the action bar are
kind of destroy they're you the ability to destroy things so uploading will
replace this image this is clean clean the cache as I showed off last week and then here's deleting an image okay um so
yeah I'm really happy with how uh the image stuff uh came to fruition I think
it's really really spot-on um yeah there I might have fixed if you find any
issues let me know know in the in the chat or on the community um pretty soon I'm going to be creating a total CMS
beta group okay on the community um I am really close to releasing this beta um
so U my goal is to get it out by uh well to get it out by today but I think it's going to be by next Friday I should have
a beta out uh to people that uh pre- purchased the um the pre-sale for total
CMS 3 during the summit last month okay so um those people will get first access to beta 1 um and then uh soon after that
and future betas will be available uh to a wider audience okay um so let's look
at some other cool stuff that we did uh I got to look at my my backlog to
kind of remember what the heck I did I've changed a lot of stuff okay
um let's go to
um all right um so this is just text forms and um if we go ahead and just
modify um this first off you'll notice I one once I typed into this field okay
let's make that a little bit bigger okay uh when I made that let's refresh so you can see that again
okay right you'll notice that once I change this value the Border as well as
this little um the little icon over here changed blue okay that is the new
indicator to tell you that this field has changed and it has not been
saved okay um now let's go ahead and save
this and as you saw there that is our new save indicators okay um so if you
want to see that again let's just go ahead and there you click on Save and it will save and success boom okay and if
you notice now that I saved it the uh change indic at on this box has been uh
removed because that has now been saved okay and it it'll actually happen on multiple forms so if I go ahead and
change both of these click on Save it's going to save both of them and both
states are um set to be unsaved or unchanged
right so pretty cool um I I'm I love that now you can change by default it is
full screen like you saw there oops um but you can change the height of that so that if you wanted it to be um here
let's go ahead and play
uh um where is that
here set that to be like uh 25 okay uh I'm going to have to rebuild
really quick okay there we go let me close this
really quick there we go refresh here all right now let's we go ahead and change that click on
save oh how come that didn't oh oh browser cache refresh okay and do that
again save there you go see you can have a full screen or you can you can adjustify adjust the height that'll be a
setting and a stack for you um I changed obviously directly in the code but you'll be able to adjust the height of
that really really easily right I do like the full height though I think it's pretty slick
okay let's change that back um oh another thing is field validation okay
so let's go ahead and let's find
forms text this is the page we're looking at right now
okay um if you haven't seen this is uh now the
total CS this is Twig all right this is how we can generate forms um obviously
there will be stacks for you to do this but um this is all uh available if you
want to play around I'm going to go ahead and add in um I'm going do a
pattern and um let's do patterns dot um
now there are a bunch of well hey first off let me just show you how you can do you can do
um you can add regular expressions in here now this is sort of advanced right
so you can add I can basically set up a regular expression to make sure that this particular input only contains
numbers okay so let's go ahead and save that and uh let's refresh the page right
and if I if I just try to save let's do a test if I try to save this I'm going
to get a oh interesting there's a bug that progress indicator shouldn't shouldn't happen uh
if this is valid or not valid interesting that must be something I I
mucked up that wasn't happening earlier yesterday um so it didn't let oh and it it did save
it interesting okay well the the validation did happen right so you you'll see that
there is a valid this form is saving um it shouldn't uh I I broke something
but if you notice it it gives you a little um hey this form uh something is wrong with this form and unfortunately
um here let's go ahead I'll mock it up what it what will look
like darn it I hate when I break
things there you go so um I if you type in data that isn't valid okay let's say
you know um then uh this will turn red red and you'll have that little tool tip there okay that that tells you hey this
field isn't right right so pretty cool
there um now uh there are also a a library of built-in patterns that you
can use um let me go into
my n it's not that one is
patterns what did I oh form patterns okay so um yeah
here's a bunch of patterns like you could do uh so I can like type in this
here I can go over here and I can do pattern and I can do patterns. email so I can make sure that this is an
email oh and make sure you spell patterns right patterns. email or you can do patterns. URL okay now those
partic those two in particular actually have Fields specifically for email and URL but um this will still work so let's
go ahead and save that we go over here um refresh I I set that to be URL right
yeah URL so let's go ahead and um I'm going to do I'm going to add in a URL okay now if
I save uh it will save successfully it won't give me that little error message because this is a URL perfect okay now
if I go ahead and change that to be um this is some
text this is going to fail well it'll still submit because of that bug but you we should see oh and look at that and it
just worked I guess I need to play around with that a little bit hold on one second let's go ahead and look at
that that should definitely work
oh man look at that oh no it did have an error because look it's just thinking
there's that bug it did error out um because this
isn't darn it all so obviously I need to work on patterns but um it's a feature I
just added I think a couple days ago which is pretty slick okay
um let's see what else did I do um hold on one
second and I worked on so much stuff I'll add I'll show you some some
of the docs okay uh if you guys are curious so here's some of the documentation I've already written
written up uh or I've sketched out some ideas for um configurations right so um
there's going to be various configuration files levels of configuration um probably the on ones that you will use the most are going to
be this env. PHP P file it will be actually this one it'll be in your document route um so that you would edit
that file and have like things you can customize like the location of the total CMS all kinds of other stuff okay um the
local um here I talk about the data model and basically how um you know
there's Collections and objects and objects have properties and and stuff like that so I've I've kind of detailed
a lot of that out okay um we're going to dive into the
fact Factory I've done some really cool stuff with the factory in the past couple days uh which I'll show off um
but I think I've showed this before where um let's say you want to import and create fake data okay so I created
this thing called the factory and uh it allows you to um import data um fake
data uh autogenerate fake data let's say you want to create a thousand blog posts that were just fake okay and basically
you could say the date is this format just create a random color create me some random t tags uh the summary is
just a paragraph and I'll show you an example of some of these things okay um
here this documentation goes over the total CMS file system okay so um if you
notice you you know right now total CMS has a folder called CMS data by default the current one's called TCMS data and
basically this do I documented the entire file system structure so that you know what is what if you want to know
how everything works behind the scenes um this document will have some most of
that information okay um see that's just a homepage um licenses just kind of
detail out uh the standard light standard and professional licenses and what be included um this is still a work
in progress I don't know what will be included in what yet I'm still debating but this is a general
idea documentation on the on the entire rest API because there is an entire rest API um templates so basically how you're
going to use twig on your on your um in your things okay now this is cool um so
I created something called The Twig Factory okay and um it integrates the um
what I built for the factory import and it brings it into twig okay let let me
show off show that off it's really cool okay um let's see what page did I do
that on
um one second let me find the there it is okay all right so uh
here's a page um let's bring it up over
here okay um I'm going to go ahead
and let's refresh that okay what we'll notice here um is this is just a a
template okay um and it just has some some HTML if you notice in here in this
paragraph tag okay I have this thing called factory. name actually I don't don't even need that so I made it even
simpler now so factory. name and what that will do if we look here is it
generates a fake name every time the page loads it just
generates a random fake name pretty cool again fake data so now
we can have fake data um inside of our uh web page right so let's say we want
to design something and you just want to create something and you want to have you know various pieces of data and if
we look at um we can do all kinds of stuff you could do um person and all
this is also all these options are available in the import Factory as well right so we have I use name here U you
can even do gender is male or female Let's test that out right uh so if we go back into here I'm
going to do name name and I want to make sure it is a female name okay save
that there we go always generates a female name Delta
that a female name okay but there we go I mean so pretty pretty interesting right um and here let's look at some of
the other options we got we could do things like um let's do like words
okay um and we could do I want to create uh 100 words or maximum of 100 words
okay so let's go ahead and refresh that oops maybe I did that wrong maybe it's
not words maybe I got that wrong let's look at my my documentation
here I literally just finished that part this morning H should be words
interesting oh I was thinking text I know I tested text maybe words is broken let's do
text there we go so just generate some random text with a maximum length
of 100 characters pretty cool um if we look also we have let's look at a couple
others where's the factory right um let's
do paragraphs or here
um do yeah paragraphs so we're going to do
paragraphs and uh we're going to do I want to do um five
paragraphs and uh I'm not going to explain what true means but that's what we want oh well interesting
this this is going to look like a single paragraph because I put it in a single paragraph tag okay uh yeah
um let's do uh oops uh we can do real text which is
kind of interesting because normally uh text creates like lurm ipsum style text okay but what we're going to do is we're
going to do real
text let's just do the the def take the default
value there and and if you look here what it does is it actually uses actual words right now what's kind of cool is
now I haven't tested this but let's go ahead and um I'm going to go into my settings okay
and config okay um I'm going to change my
local from nus to F
FRFR so we are now in French
mode voila if you notice this now right this
text is in French so um I've built in um
localization into the factory so that you can uh quickly you know generate
stuff in whatever language you need um but we can also do um
let's try German I think German I think that's the one for German voila right so
there's German we can now generate words just random fake text in German okay um
there is a large language support uh we support pretty much every language out
there right and it's really cool and you can do the same thing so like uh for everything so like if I did um
name okay it's it's going to generate a more
German name okay um so yeah there we go even
the names everything is going to be um slanted towards whatever your local is
um so you're if again if you said it more German um um
so uh what about integrating an AI generator um
I built this before AI was a thing um so maybe eventually we can go
ahead and and integrate into some sort of AI tool um but for right now this is
100% local to your server um so it nothing goes out from nothing goes out
from your server it's all generated locally it's not using any sort of apis so um I am very worried about that
especially for certain European countries okay um um so yeah really cool
um eventually we might have some sort of some AI integration but for right now um this Factory tool um helps can help us
generate fake data right and I'm pretty happy with that um so yeah the factory super cool
um and I I just wrapped that up this morning um yeah there we go I think we're
done um I'm sure there's probably more you guys haven't seen but I've already taken up an hour and a half of your time
and uh yeah thank you very much for coming on today hopefully I didn't bore you too much with me fumbling through
and styling up a page but if you see if you're ever in doubt Stacks is just so
much more fun to use right it's um it's faster uh we can create the same exact
stuff the output is just as clean um and yeah I think using Stacks is where it's
at um so there we go and hopefully you're you're enjoying where total CS 3 is going um I'm really excited about it
and I can't wait for you guys to have it in your hands uh again I gave the URL to that uh image tool okay and you can go
ahead and play with that if you want and uh let give me some feedback if you if you found any issues I have fixed a few
things from that published version but uh yeah I'm really happy uh with how it's turned out and hopefully you're
happy too so cool take you uh on Friday uh Hangouts make sure you're there I'm
sure I'll have even more stuff done more stuff fixed and we'll go um we'll have
fun and show off more stuff on Friday hopefully we'll see you there and uh take care everyone have a great rest of
your week bye