Detailed Notes
We are continuing a series of tutorials focused on Spring Boot. The crux of the project is to convert/migrate an old JSP/Tomcat application to a modern Spring Boot application and Java 7/8 to a current version. This continues a short series focused on CSS setup and customizations aimed at getting developers up to speed on CSS basics. Part 2 of 4.
You can learn more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list, and you will periodically receive coupons for courses and notifications of the latest releases.
Transcript Text
[Music] well hello and welcome back we are continuing our journey through doing some styling sort of uh you know think of this as basically like crash course in cascading sheets uh style sheets and UI design for developers uh we're not going to get like super awesome but we are going to play around with some stuff so as a developer you have an idea of what we can do if you haven't already played around with it now I want to Dive Right into looking at uh tables essentially or you know how we've got our rows now we last time around we we added our you know little hover and we've got our um you know we've got our little zebra striping here but it's still like not super awesome there's just some things about this that just are blah so what I want to do is I'm going to play around with a couple things I'm going to show you as we're going through this oh go over here to elements and one of the things I want to do is I want to like make this pop a little bit more so one of the things I can do that is a uh let's see where am I at let me get down to here wh wh there we go that uh one of the things I can do that you will see in bootstrap and some other cases but in this case specifically bootstrap if I can double click fast enough there we go is a class called a card and a card is like anything else we can play around with a little bit we do have one and that's already been built in here we've got an existing card and if you look you can see that once we had this card we actually have added it it gives us a little more of like a a Content pane as we do it and if we want to take this we can actually do some uh some fun stuff like uh let's say so it's got a little bit of a uh we could change the background color we can do uh there's quite a few things we can do so we're going to probably end up playing around with that a little bit and we will uh we'll go ahead and set this overall to a card and probably come back to it but I want to actually spend a little time more within our rows first because some of the things we do with the rows we're probably going to end up doing uh some of those similar kinds of things with our card whoop I hate when I do that when I accidentally click on something so if I go to here we go let's get our way down into a row uhh where is our table that one because what we're going to do right now is we're going to play with our odds and evens because that's going to give us something while we could do it within a row uh itself there's a couple ways we can tackle this but I think it's going to be easy enough to do it with an even and an odd is we're going to we going to add some more information around this to make this pop a little bit now one of the things we can do is we're going to give ourselves a border color and let's start with uh we'll just make it like some sort of a blue uh let's make it let just make it a dark blue so that's a nice little dark blue color we're going to have to have a border width and let's make that uh two pixels so it's you moderately reasonable now you'll see here you don't see a border showing up and we're on evens but now if we do a border style now what you can see is we're like right now and again this is one of those nice little things is I can s scroll through the options and see what it looks like on the page so I can go dash dot if I double up uh this is you know using an environmental one I can do a Groove hidden initial inset set none and an outset so you see things as you see now this is every other one so this is going to make it look a little different so we're going to go ahead and pick like let's say we're going to pick inset and one of the things we want to do is let's add a little bit of margin to the top let's make it like a and let's make it like a five pixel and now we're going to see a little bit of spacing let's go that's probably too much let's go to three and so we've got that on our evens but not our odds but let's also do uh margin left and we'll do let's do three pixels there three pixels and so now that's moved in that's probably a little too much let's go let's just make it one and then we're going to do a margin on the right and what we're going to end up doing that'll be one pixel so now we've like brought it in a little bit so we've got something it's got a little more definition to it so let's take that alone and uh that'll be good so let's take that for our evens and if we flop back over here here we goes our even we're going to add like a whole bunch of stuff to that let's see did it have a color before uh let's see let's take the color and yep so let's take the color push that back here I don't know we had a color on our even but we're going to now oh I guess we did and now with odd we're going to do the same thing we're take everything except the color and the background color so we could tweak these a little bit we could you know have sort of a uh family of stuff uh come here we could have family stuff but we're just going to go with this for now so now let's take a look at what this gives us it's going to give us a nice different look to our little table here and if we come in and we log in now notice that we've got something that's much more distinctive from row to row so we very quickly notice how just adding like a little bit of just like that one pixel margin stuff like that has added something so now our rows are much more distinct they don't fall together and wherever we use them because we use those odds and evens those are now all over the place now back to where we were at before uh one of the things we were looking at if I looked here was how and some of these cases we've got a nice setup here but if we look here on this one one it doesn't it doesn't it sort of just all flows together now one of the things we could do is we could create a card in that so let's actually go to the uh let's look at these so we have sort of a interesting thing is we've started to do this in some places which is where sometimes we make mistakes we need to be a little consistent so here what we've got is we've got a title and then we've got our you know our table if we look over on projects I believe it is we don't we've got like a very different look to it and if we look at uh one of these rows this also has sort of a everything's a little different in how it looks so let's start with with each of our pages and we're going to start with projects we're going to having to do some code around these things but let's start with our project list and let's start with let's see where's our card so we have a note card let's take a look at our note card if that may be what we want to start with so if we come to to uh where did that go here in our container and let's make him a note card was that a whole one word nope note underscore card so if we do a note uncore card so it does give us some stuff that would be useful now one of the things we don't want is with our note card is we probably want our position can we make that uh that's [Music] relative can we do a center let's see if we can do Center oh it's going to be relative and we probably want it to be let's see if we can do that's position f so probably want to like change that around a little bit cuz we want that to be within so our note card we're going to want that to be within something so if we get rid of that we probably want it to be with inside that instead of with our container itself so if we go here let's just take that out for a second and if we go back here and we jump in let's go to our first row actually let's do this one and let's see if that becomes a note card notore card let's see what that looks like Oh see now we got something now we're starting to look a little bit better we've got something that's got a little bit of a pop to it now what we want here is this would want to be a note card as well but now we've got these splits so we're probably going to want to do is put a div around this whole thing and then if you do it as a note card and we may even want to do it here uh let's see that's our container and he have a row here so this one let's see how does that look now we've got something so now we got a little bit more pop it's got a little more contrast so that's not bad at all so we can do that that opportunities we want that first row so let's go to that real quick and fix that then we're going to come back and fix our so if we go here available opportunities this one we want that to be a note card might change that note card a little bit too we'll see how that goes but then we also want here with our projects that was where it is we want this whole thing to be a note card so if we go to our project list we're going to wrap uh here it goes all the way up to the welcome welcome and that is going to be let's take that all the way up here there's our welcome and that means we're going to go all the way to the end we're going to have to add another another close out and this one is just going to be a row and a note card we could probably make it just n we make it a note card and we actually we'll take that row out too at some point let's see what that looks like if we get rid of the row and so now if we log in oh look like we're getting uh we haven't added that yet I'm sorry I thought we had that but we do have uh you know some things are starting to look a little bit better so that's let's do that let's log in and so now we've got uh here now we've got like this little note card it so it does look a little bit better uh we've got this stuff grouped if we go to our opportunities then we've got that sing a note card that looks better now it is a little bit small but if we blow this up oh let's do it here let's blow this up so we can read our content a little bit better and we got some stuff that's looking pretty good now one of the things we're going to do with this overall list is I was going to see what happens if we take the row out let's see what that looks like if it's instead of just a row a note card in a row what if it's just a note card so now it yeah it pops it up a little bit it rounds it out a little bit more notice before that we had something that's like now it's sort of hitting uh the me it's hitting stuff a little bit better now if we also let's see what if we do a container in a note card now we've shrunk it in quite a bit so I think the row looked better so let's do that we may have let's see what that road does because another thing we've got here is we've got it like bumping up against here now and so we're going to need some extra stuff and now that's partially probably some of it to display issues yeah so what we're probably going to want to do is let's put up projects let's make sure we've got something at the bottom here that would be a row uh we get all the way to the end let's just do that and we just put some space like a blank space in there just to be safe and let's do two and let's see how that looks I don't know why I still have that open so let's go run that one real quick and let's take a look at our projects list so now if we look and we scroll yeah see so now we've got some space it makes the card pop and we can do a little bit more with these so what we might want to do is take that whole top section and make that put that together and actually even this filter for stat status probably want to split that up so we're but we are already adding some nice little touches to this and if you look at note cart actually let's go look at that in the CSS because there are some things that we've got here this is one of them right here is the Box shadow on the transition that is if you see this little Shadow thing that pops up so when you come over it when you hover we got something that makes it look like hey that's active now the nice thing is we could take that to one of these like here and we already have some nicil information but if we come in and turn our row into note card let's see what that does so if we do that now granted it like it changes some of the flow so that does become some of our issues because now we've got these divs within here and we probably want those to be like a span uh it's going to cause some issues so we don't really want it to go all the way down to that row level although we could take some of that stuff that we do with a note card and we could actually place that uh in within a row so we could do some like the highlights and stuff like that uh let's see field set yeah so it's already a note card we could move we could move some stuff around that as well let's see where's their field set so our field set is that guy so our field set's already got some coloring to it the note card gives us a little different now we've got something now we've got some things that are like a little easier to read and they pop a little bit more so we've got a nice little touch on these uh we've actually improved our tables and our ability to read them if we look here it's probably still sort of a little bit wonky because we've got some dark colors so we probably want to change these out let's look at what this is what is that that is just alert dark let's see if we change that we're just going to change that sometimes it's easy to just like throw something everywhere if we do that now that looks even better actually maybe do that make it a let's make it oh let's make it an alert uh light I think works now we've got something that's and now when we now granted when we hover it but it does give us something there and it depends a little bit on whether we're dark notice we're still picking up stuff depending on whether we're a uh odd or an even row but that does give us some stuff so I want to go like I want to go alert uh worn I think then that's going to be really annoying no uh it's not a Le uh I don't know if it's going to give me it's not going to give me me the options there I don't think so I could do uh let's do info yeah so some of this gets overwritten then I think by the note card and that's where you you have to get yeah so now I've gotten that so I've changed it but the note card is going to change some of its colors again so that's where you're going to have to sort play around with it a little bit uh if I do default yeah defaults just straight up not anything there so there's some things like that we can do once we've got one or two of these things set up we can start throwing them all over the place and really quickly tweak our our look and feel which is the whole point of the CSS so one more thing I want to knock out is next time we come around let's get this this needs to be cleaned up now we do have I think yes we have a nice little mobile menu as you see it goes to what they call the hamburger but we have this in the way and it's just not terribly good so we're going to clean up do a little bit more and like maybe do something with this title we're going to do some stuff with our menu and our header next time around and then uh we'll sort of see where we go I think we may clean some of these things up but probably wrap up because now we've got you know some decent looking stuff we probably want to the rest of these things are like just code things we want to turn like this into a probably this whole thing into a card so it looks more like uh this one I think there's some things we can do that just make it pop more but those are getting into the coding details so I don't want to spend too much time on them we will come back next time with the menu uh but until then go out there and have yourself a great day a great week and we will talk to you next [Music] time wello hello this is Rob with develop andur also known as building better developers wanted to announce that we have school. develop or.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology or how toos you can work on your business skills we can help you with becoming a better developer as in coding and things like that a lot of the stuff you've seen on YouTube we also have out at school. develop andur we have it in a little more of a uh educational format and a way for you to track your progress as you move forward becoming a better developer
Transcript Segments
[Music]
well hello and welcome back we are
continuing our journey through doing
some styling sort of uh you know think
of this as basically like crash course
in cascading sheets uh style sheets and
UI design for developers uh we're not
going to get like super awesome but we
are going to play around with some stuff
so as a developer you have an idea of
what we can do if you haven't already
played around with it now I want to Dive
Right into looking at uh tables
essentially or you know how we've got
our rows now we last time around we we
added our you know little hover and
we've got our um you know we've got our
little zebra striping here but it's
still like not super awesome there's
just some things about this that just
are blah so what I want to do is I'm
going to play around with a couple
things I'm going to show you as we're
going through this oh go over here to
elements and one of the things I want to
do is I want to like make this pop a
little bit more so one of the things I
can do that is a uh let's see where am I
at let me get down to
here wh
wh there we go that uh one of the things
I can do that you will see in bootstrap
and some other cases but in this case
specifically bootstrap if I can double
click fast enough there we go is a class
called a
card and a
card is like anything else we can play
around with a little bit we do have one
and that's already been built in here
we've got an existing card and if you
look you can see that once we had this
card we actually have added it it gives
us a little more of like a a Content
pane as we do it and if we want to take
this we can actually do some uh some fun
stuff like uh let's say so it's got a
little bit of a uh we could change the
background color we can do uh there's
quite a few things we can do so we're
going to probably end up playing around
with that a little
bit and we will uh we'll go ahead and
set this overall to a card and probably
come back to it but I want to actually
spend a little time more within our rows
first because some of the things we do
with the rows we're probably going to
end up doing uh some of those similar
kinds of things with our card whoop
I hate when I do that when I
accidentally click on something so if I
go
to here we go let's get our way down
into a
row
uhh where is our table that one because
what we're going to do right now is
we're going to play with our odds and
evens because that's going to give us
something while we could do it within a
row uh itself there's a couple ways we
can tackle this but I think it's going
to be easy enough to do it with an even
and an odd is we're going to we going to
add some more information around this to
make this pop a little bit now one of
the things we can do is we're going to
give ourselves a border color and let's
start with uh we'll just make it like
some sort of a
blue uh let's make
it let just make it a dark blue so
that's a nice little dark blue color
we're going to have to have a border
width and let's make that uh two pixels
so it's
you moderately reasonable now you'll see
here you don't see a border showing up
and we're on evens but now if we do a
border
style now what you can see is we're like
right now and again this is one of those
nice little things is I can s scroll
through the options and see what it
looks like on the page so I can go dash
dot if I double
up uh this is you know using an
environmental one I can do a Groove
hidden initial inset
set none and an outset so you see things
as you see now this is every other one
so this is going to make it look a
little
different so we're going to go ahead and
pick like let's say we're going to pick
inset and one of the things we want to
do is let's add a little bit of margin
to the
top let's make it like a and let's make
it like a five
pixel and now we're going to see a
little bit of spacing let's go that's
probably too much let's go to
three and so we've got that on our evens
but not our odds but let's also do uh
margin
left and we'll do let's do three pixels
there three pixels and so now that's
moved in that's probably a little too
much let's go let's just make it
one and then we're going to do a margin
on the
right and what we're going to end up
doing that'll be one pixel so now we've
like brought it in a little bit so we've
got something it's got a little more
definition to it so let's take that
alone and uh that'll be good so let's
take that for our
evens and if we flop back over here here
we goes our even we're going to add like
a whole bunch of stuff to
that let's see did it have a color
before uh let's see let's take the color
and yep so let's take the
color push that back here I don't know
we had a color on our even but we're
going to now oh I guess we did and now
with odd we're going to do the same
thing we're take everything
except the color and the background
color so we could tweak these a little
bit we could you know have sort of a
uh family of stuff uh come
here we could have family stuff but
we're just going to go with this for now
so now let's take a look at what this
gives us it's going to give us a nice
different look to our little table
here and if we come in and we log in now
notice that we've got something that's
much more distinctive from row to row so
we very quickly notice how just adding
like a little bit of just like that one
pixel margin stuff like that has added
something so now our rows are much more
distinct they don't fall together and
wherever we use them because we use
those odds and evens those are now all
over the place now back to where we were
at
before uh one of the things we were
looking at if I looked here was how and
some of these cases we've got a nice
setup here but if we look here on this
one one it doesn't it doesn't it sort of
just all flows together now one of the
things we could do is we could create a
card in that so let's actually go to
the uh let's look at these so we have
sort of a interesting thing is we've
started to do this in some places which
is where sometimes we make mistakes we
need to be a little consistent so here
what we've got is we've got a title and
then we've got our you know our table if
we look over on projects I believe it is
we don't we've got like a very different
look to
it and if we look at uh one of these
rows this also has sort of a
everything's a little different in how
it looks so let's start with with each
of our pages and we're going to start
with projects we're going to having to
do some code around these things but
let's start with our project list and
let's start with let's see where's our
card so we have a note card let's take a
look at our note card if that may be
what we want to start with so if we come
to
to uh where did that go
here in our container and let's make him
a
note card was that a whole one word nope
note underscore
card so if we do a note uncore card so
it does give us some stuff that would be
useful now one of the things we don't
want is with our note card is we
probably want our position can we make
that uh that's
[Music]
relative can we do a center let's see if
we can do
Center oh it's going to be
relative and we probably want it to
be let's see if we can
do that's position f so probably want to
like change that around a little bit cuz
we want that to be
within so our note card we're going to
want that to be within something so if
we get rid of
that we probably want it to be with
inside that instead of with our
container itself so if we go here let's
just take that out for a
second and if we go back here and we
jump in let's go to our first
row actually let's do this one and let's
see if that becomes a note card notore
card let's see what that looks like Oh
see now we got something now we're
starting to look a little bit better
we've got something that's got a little
bit of a pop to it now what we want here
is this would want to be a note card as
well but now we've got these splits so
we're probably going to want to do is
put a div around this whole thing and
then if you do it as a note
card and we may even want to do it here
uh let's see that's our container
and he have a row here so this one let's
see how does that
look now we've got something so now we
got a little bit more pop it's got a
little more
contrast so that's not bad at all so we
can do that that opportunities we want
that first row so let's go to that real
quick and fix that then we're going to
come back and fix
our so if we go here available
opportunities this one we want that to
be a note card might change that note
card a little bit too we'll see how that
goes but then we also want here with our
projects that was where it is we want
this whole thing to be a note card so if
we go to our project list we're going to
wrap uh here it goes all the way up to
the welcome welcome and that is going to
be let's take that all the way up here
there's our welcome and that means we're
going to go all the way to the end we're
going to have to add another another
close out and this one is just going to
be a row and a note card we could
probably make it just n we make it a
note card and we actually we'll take
that row out too at some point let's see
what that looks like if we get rid of
the
row and so now if we log in oh look like
we're
getting uh we haven't added that yet I'm
sorry I thought we had that but we do
have uh you know some things are
starting to look a little bit better so
that's let's do that let's log
in and so now we've
got uh here now we've got like this
little note card it so it does look a
little bit better uh we've got this
stuff grouped if we go to our
opportunities then we've got that sing a
note card that looks better now it is a
little bit small but if we blow this up
oh let's do it
here let's blow this up so we can read
our content a little bit better
and we got some stuff that's looking
pretty good now one of the things we're
going to do with this overall list is I
was going to see what happens if we take
the row out let's see what that looks
like if it's instead of just a row a
note card in a row what if it's just a
note card so now it yeah it pops it up a
little bit it rounds it out a little bit
more notice before that we had something
that's like now it's sort of
hitting uh the me it's hitting stuff a
little bit better now if we also let's
see what if we do a container in a note
card now we've shrunk it in quite a bit
so I think the row looked better so
let's do that we may have let's see what
that road does because another thing
we've got
here
is we've got it like bumping up against
here now and so we're going to need some
extra stuff and now that's partially
probably some of it to display issues
yeah so what we're probably going to
want to do is let's put up
projects let's make sure we've got
something at the bottom here that would
be a
row uh we get all the way to the
end let's just do
that and we just put some space like a
blank space in there just to be safe and
let's do two and let's see how that
looks I don't know why I still have that
open so let's go run that one real
quick and let's take a look at
our projects
list so now if we look and we scroll
yeah see so now we've got some space it
makes the card pop and we can do a
little bit more with these so what we
might want to do is take that whole top
section and make that put that together
and actually even this filter for stat
status probably want to split that up so
we're but we are already adding some
nice little touches to this and if you
look at note cart actually let's go look
at that in the CSS
because there are some things that we've
got
here this is one of them right here is
the Box shadow on the transition that is
if you see this little Shadow thing that
pops up so when you come over it when
you hover we got something that makes it
look like hey that's active now the nice
thing is we could take that to one of
these like here and we already have some
nicil information but if we come in and
turn
our
row into note card let's see what that
does so if we do that now granted it
like it changes some of the flow so that
does become some of our issues because
now we've got these divs within here and
we probably want those to be like a span
uh it's going to cause some issues so we
don't really want it to go all the way
down to that row
level although we could take some of
that stuff that we do with a note card
and we could actually place
that uh in within a row so we could do
some like the highlights and stuff like
that uh let's see field set yeah so it's
already a note card we could move we
could move some stuff around that as
well let's see where's their field set
so our field set is that guy
so our field set's already got some
coloring to it the note card gives us a
little different now we've got something
now we've got some things that are like
a little easier to read and they pop a
little bit more so we've got a nice
little touch on these uh we've actually
improved our tables and our ability to
read them if we look here it's probably
still sort of a little bit wonky because
we've got some dark colors so we
probably want to change these out let's
look at what this is what is that that
is just alert dark
let's see if we change that we're just
going to change that sometimes it's easy
to just like throw something everywhere
if we do
that now that looks even better actually
maybe do that make it
a let's make it oh let's make it an
alert uh light I think
works now we've got something
that's and now when we now granted when
we hover it but it does give us
something
there and it depends a little bit on
whether we're dark notice we're still
picking up stuff depending on whether
we're a uh odd or an even row but that
does give us some stuff so I want to go
like I want to go
alert uh worn I think then that's going
to be really
annoying no uh it's not a
Le uh I don't know if it's going to give
me it's not going to give me me the
options there I don't
think so I could do uh let's do
info yeah so some of this gets
overwritten then I think by the note
card and that's where you you have to
get yeah so now I've gotten that so I've
changed it but the note card is going to
change some of its colors again so
that's where you're going to have to
sort play around with it a little bit uh
if I do
default
yeah defaults just straight up not
anything there so there's some things
like that we can do once we've got one
or two of these things set up we can
start throwing them all over the place
and really quickly tweak our our look
and feel which is the whole point of the
CSS so one more thing I want to knock
out is next time we come around let's
get this this needs to be cleaned up now
we do have I think yes we have a nice
little mobile menu as you see it goes to
what they call the hamburger but we have
this in the way and it's just not
terribly good so we're going to clean up
do a little bit more and like maybe do
something with this title we're going to
do some stuff with our menu and our
header next time around and then uh
we'll sort of see where we go I think we
may clean some of these things up but
probably wrap up because now we've got
you know some decent looking stuff we
probably want to the rest of these
things are like just code things we want
to turn like this into a probably this
whole thing into a card so it looks more
like uh this one I think there's some
things we can do that just make it pop
more but those are getting into the
coding details so I don't want to spend
too much time on them we will come back
next time with the menu uh but until
then go out there and have yourself a
great day a great week and we will talk
to you next
[Music]
time wello hello this is Rob with
develop andur also known as building
better developers wanted to announce
that we have school. develop or.com feel
free to check it out if you like any of
this information any of the content that
we've sent and you would like to see
more you can come out you can enroll for
free we have free courses we've got
places for you to get better at just
learning a technology or how toos you
can work on your business skills we can
help you with becoming a better
developer as in coding and things like
that a lot of the stuff you've seen on
YouTube we also have out at school.
develop andur we have it in a little
more of a uh educational format and a
way for you to track your progress as
you move forward becoming a better
developer