- 00:00:02 welcome to this video
- 00:00:03 in this video we'll have a look at which
- 00:00:06 approach you should actually take
- 00:00:08 use vanilla css so just css
- 00:00:11 write all the styles on your own use a
- 00:00:14 component framework like bootstrap
- 00:00:16 and what does this actually mean
- 00:00:18 component framework or should you use a
- 00:00:20 utility framework like tailwind
- 00:00:22 css we'll have a look at all of that at
- 00:00:25 the simple example
- 00:00:26 of a button sounds boring it isn't
- 00:00:32 so we want to style that button and
- 00:00:35 obviously styling a button is not the
- 00:00:37 biggest challenge you face as a web
- 00:00:38 developer
- 00:00:39 but it's a good example for the question
- 00:00:41 i'll try to help you answer in this
- 00:00:43 video
- 00:00:44 should you do it on your own should you
- 00:00:46 use a framework for that a component
- 00:00:47 framework or a utility framework now
- 00:00:49 let's do it
- 00:00:50 on our own here's the html code for
- 00:00:54 this button and right now i only have a
- 00:00:56 little bit of styling set up for the
- 00:00:57 container to basically present this
- 00:01:00 button in the middle of the screen
- 00:01:01 here's our button and since it's the
- 00:01:03 only button on the page
- 00:01:04 i can select with the button selector
- 00:01:07 but let's still use a class
- 00:01:08 let's maybe name this class button
- 00:01:10 though so if we want to start this on
- 00:01:12 our own we simply add a class to that
- 00:01:14 button
- 00:01:15 with that well button class we just set
- 00:01:17 up
- 00:01:18 and now how do we want to style it well
- 00:01:20 maybe we want to inherit
- 00:01:22 the general font of our page and
- 00:01:24 therefore also set
- 00:01:26 a general font for this page with a font
- 00:01:28 family of censerif at least
- 00:01:30 to not use this ugly serif default i
- 00:01:33 have on my system otherwise
- 00:01:35 maybe you want to overwrite the border
- 00:01:38 to be one pixel solid
- 00:01:40 and then in this purple five two one
- 00:01:43 seven
- 00:01:43 five one maybe you want to set a
- 00:01:46 background color
- 00:01:48 of that same purple and therefore
- 00:01:51 set the text color to white and with
- 00:01:54 that if we reload
- 00:01:55 it's already looking not too shabby
- 00:01:58 maybe we then also want to add some
- 00:02:00 padding to the button
- 00:02:02 to well let's say three pixels
- 00:02:06 top and bottom and six pixels left and
- 00:02:09 right so this is how we use the padding
- 00:02:11 shorthand
- 00:02:13 like this let's maybe add
- 00:02:16 10 pixels left and right looks better
- 00:02:20 and we probably also want to add a
- 00:02:22 cursor
- 00:02:23 pointer and also add a hover and
- 00:02:26 an active style so button active button
- 00:02:30 hover like this and in there i want to
- 00:02:34 set the background color to
- 00:02:36 [Music]
- 00:02:38 basically the same purple though i will
- 00:02:40 pick a slightly
- 00:02:42 brighter one maybe this one here just
- 00:02:45 with the color picker which is
- 00:02:46 integrated into my ide
- 00:02:49 so that now i got a little bit of a
- 00:02:51 hover effect if i go over that
- 00:02:53 yeah it doesn't look too bad and last
- 00:02:56 but not least
- 00:02:57 i want to override the focus style to
- 00:03:00 set
- 00:03:01 outline to none there with that i got a
- 00:03:05 nice button which i can click and which
- 00:03:07 i style totally on my own
- 00:03:09 and if you want to learn more about css
- 00:03:11 in general how to write styles and way
- 00:03:13 more than these basics
- 00:03:15 definitely check out my complete guide
- 00:03:17 on css which i got
- 00:03:18 link can be found in the video
- 00:03:20 description however you probably didn't
- 00:03:23 look into this video just to see how you
- 00:03:24 can style a button
- 00:03:26 after all these lines of code are
- 00:03:29 maybe interesting but also something you
- 00:03:32 do a lot
- 00:03:33 now imagine that you of course have a
- 00:03:36 bigger
- 00:03:36 web page with way more than just a
- 00:03:38 button on it
- 00:03:39 and you need to style all elements that
- 00:03:42 are on that page
- 00:03:43 if you write these styles on your own if
- 00:03:46 you're not using any css framework
- 00:03:48 then obviously everything has to be
- 00:03:50 styled and positioned
- 00:03:52 and layouted by you now let's compare
- 00:03:56 this
- 00:03:57 approach here to using a component
- 00:04:00 framework like bootstrap so let's visit
- 00:04:02 getbootstrip.com
- 00:04:03 i also got a series on bootstrap on this
- 00:04:05 channel in case you want to dive deeper
- 00:04:08 and on bootstrap let's check out the
- 00:04:09 documentation and there let's go to
- 00:04:12 components
- 00:04:13 and let's visit the button section there
- 00:04:16 and as we see here we add the button
- 00:04:18 class and then we decide with button
- 00:04:21 primary
- 00:04:21 secondary and so on which style the
- 00:04:23 button should have and we get the hover
- 00:04:26 style and all that
- 00:04:27 out of the box automatically so what we
- 00:04:30 need to do for that to work is just
- 00:04:32 click on getting started
- 00:04:33 grab that cdn link which gives us the
- 00:04:36 bootstrap css package from a cdn
- 00:04:39 let's simply import it here can remove
- 00:04:42 that import here by the way that's from
- 00:04:43 well
- 00:04:44 old snippet we're not using an external
- 00:04:46 style file
- 00:04:47 and in here in or with the help of this
- 00:04:50 import here
- 00:04:51 we can simply start using these
- 00:04:53 bootstrap classes like button
- 00:04:55 button primary or maybe let's not
- 00:04:58 overwrite this one but simply add
- 00:05:00 a second one so that we can see the
- 00:05:03 difference
- 00:05:03 and now we only add two classes and if i
- 00:05:06 go back
- 00:05:07 and reload well unsurprisingly we got
- 00:05:10 that bootstrap button next to ours
- 00:05:12 the cool thing is we of course didn't
- 00:05:14 write any styling for that
- 00:05:16 and we got the full behavior we want out
- 00:05:19 of the box
- 00:05:20 that already shows us a big advantage of
- 00:05:22 component frameworks like bootstrap
- 00:05:24 we just start adding css classes to our
- 00:05:27 html code
- 00:05:28 we don't need to write a single line of
- 00:05:30 css code if we don't want to
- 00:05:32 we can simply start working with the
- 00:05:34 different components and layout options
- 00:05:37 this framework gives us this already
- 00:05:40 also
- 00:05:40 shows us the disadvantage of course
- 00:05:42 we're bound
- 00:05:43 or we're limited to use what bootstrap
- 00:05:46 in this case
- 00:05:47 you can use any other framework of
- 00:05:48 course what it gives us
- 00:05:50 if we want this to look differently we
- 00:05:53 can of course
- 00:05:53 overwrite it with our own css code but
- 00:05:57 if we start overwriting a lot
- 00:05:59 we quickly end up in a situation where
- 00:06:01 probably using
- 00:06:02 that framework isn't the right choice in
- 00:06:04 the first place because then we get the
- 00:06:06 worst of both worlds
- 00:06:08 we're pulling in this extra library
- 00:06:10 which of course needs to be downloaded
- 00:06:11 by the user
- 00:06:12 and we're still writing our own code
- 00:06:14 which also needs to be downloaded and
- 00:06:16 we're not even saving time then
- 00:06:18 still if we don't plan on overwriting a
- 00:06:20 lot using
- 00:06:21 bootstrap or a server component library
- 00:06:24 definitely is a great thing
- 00:06:25 we save time there is a third way though
- 00:06:29 there are utility libraries like
- 00:06:31 tailwind
- 00:06:32 css we can visit the talent page
- 00:06:36 and there we learned that taiwan is a
- 00:06:37 utility css framework
- 00:06:39 now what does this mean it means that
- 00:06:42 unlike bootstrap
- 00:06:43 tailwind doesn't give us automatically
- 00:06:46 pre-styled components like buttons
- 00:06:48 cards and so on it instead gives us
- 00:06:51 utility classes which
- 00:06:52 add a shadow which color something in a
- 00:06:55 certain way which color the text in a
- 00:06:57 certain way
- 00:06:58 and we can build our own components with
- 00:07:01 the help of these utility classes
- 00:07:04 this means that we have to write less
- 00:07:07 css code
- 00:07:08 not zero we probably still need to do
- 00:07:10 some things which the framework doesn't
- 00:07:12 offer
- 00:07:12 but we can simply add a bunch of utility
- 00:07:15 classes combined with our own styles
- 00:07:17 to get our final result so here if i add
- 00:07:20 a third button
- 00:07:22 and we then import tailwind css
- 00:07:25 which we do by clicking on installation
- 00:07:27 here on their page here we also got a
- 00:07:30 link to a cdn so let's quickly add this
- 00:07:33 next to our bootstrap link
- 00:07:35 and with that added we can go down to
- 00:07:37 our button here
- 00:07:38 and now we can start adding some of the
- 00:07:40 classes table and css
- 00:07:41 offers us and you can of course find all
- 00:07:43 these classes
- 00:07:44 in their documentation there are things
- 00:07:47 like
- 00:07:48 background purple for example
- 00:07:51 and hover colon bg dash
- 00:07:55 purple dark to turn this to a darker
- 00:07:59 button when we hover over it
- 00:08:00 then things like text white to give it a
- 00:08:03 white text color
- 00:08:05 maybe a font which should be bold
- 00:08:08 and then also some padding on the y-axis
- 00:08:10 so top and bottom with p
- 00:08:12 y 2 and all to the left and right with p
- 00:08:16 x 4 and then rounded corners
- 00:08:19 now these are all just classes the
- 00:08:21 framework offers us
- 00:08:22 you can look them up in their
- 00:08:23 documentation to learn which classes are
- 00:08:25 available and how they work
- 00:08:27 but they generally always follow that
- 00:08:29 pattern of giving you the utility to
- 00:08:31 assign a color a background color
- 00:08:33 some padding margins stuff like that if
- 00:08:35 we save that
- 00:08:36 and we reload the page we get this
- 00:08:39 button here
- 00:08:40 which also behaves and looks like a
- 00:08:41 button which
- 00:08:43 is not a pre-styled component but
- 00:08:45 composed
- 00:08:46 as we need it but with the help of
- 00:08:49 tailwind css so that's like the middle
- 00:08:52 way the in between way between write
- 00:08:54 everything on your own
- 00:08:55 and use a component framework where you
- 00:08:58 get everything working
- 00:08:59 out of the box but which one should you
- 00:09:01 use then
- 00:09:03 first of all here's a quick summary
- 00:09:05 vanilla css means we write all the
- 00:09:07 styles on our own and therefore we can
- 00:09:09 style everything as we wanted of course
- 00:09:11 we therefore have to know how to write
- 00:09:13 css
- 00:09:14 component frameworks like foundation is
- 00:09:16 an alternative to bootstrap basically or
- 00:09:18 bootstrap give you everything pre-styled
- 00:09:21 and you mainly use the classes they give
- 00:09:23 you the css classes
- 00:09:25 and utility frameworks like tailwind css
- 00:09:27 are in between
- 00:09:28 and they help you build your layout and
- 00:09:30 your styles
- 00:09:31 with utility css classes which one
- 00:09:34 should you use then
- 00:09:36 well vanilla css obviously gives you
- 00:09:38 full control that's awesome you got full
- 00:09:40 control over the styles you're writing
- 00:09:42 you don't necessarily have unnecessary
- 00:09:45 code
- 00:09:46 of course if you write bad css code then
- 00:09:48 you might end up with
- 00:09:50 spaghetti code or a lot of unnecessary
- 00:09:52 css rules
- 00:09:53 but in general you can control um which
- 00:09:56 code you need and which one you use
- 00:09:58 the downside especially and i'll come
- 00:10:00 back to that with component frameworks
- 00:10:02 like bootstrap is that you import
- 00:10:04 a lot which you might never use back to
- 00:10:07 vanilla css though
- 00:10:08 there we can also name classes as
- 00:10:10 exactly as we want
- 00:10:11 so for tail and css you set a padding
- 00:10:14 with
- 00:10:14 uh to top and bottom with py2 and so on
- 00:10:18 that might be unintuitive so it's
- 00:10:20 something you have to get used to
- 00:10:21 with custom css you decide how things
- 00:10:23 should be named
- 00:10:24 the downside of course however is that
- 00:10:27 you have to build everything from
- 00:10:28 scratch that's a lot of work obviously
- 00:10:31 that you have the danger of writing bad
- 00:10:34 code because maybe you're not a css pro
- 00:10:37 and maybe you're not really knowing how
- 00:10:40 css works and you just copy solutions
- 00:10:42 from stack overflow
- 00:10:44 which is fine to a certain extent but
- 00:10:46 which can also lead to bad code if you
- 00:10:48 don't know what you're doing
- 00:10:50 so these are downsides of vanilla css
- 00:10:53 for component frameworks like bootstraps
- 00:10:55 you can develop
- 00:10:56 very very fast of course everything
- 00:10:59 works as soon as you
- 00:11:00 add a css class to an element and that
- 00:11:03 of course means
- 00:11:04 you get a prototype or a complete
- 00:11:06 product page
- 00:11:07 up and running extremely fast you
- 00:11:10 typically also have code behind the
- 00:11:12 scenes
- 00:11:12 that follows best practices and
- 00:11:14 therefore is performant
- 00:11:16 and not too long too big
- 00:11:20 and you don't need to be a css expert
- 00:11:22 you can just start using beautiful
- 00:11:24 styles without even knowing css in the
- 00:11:26 end
- 00:11:26 that is why bootstrap was super popular
- 00:11:29 like three four years ago
- 00:11:31 and why it still is popular these days
- 00:11:34 downside of course no or little control
- 00:11:36 now with bootstrap
- 00:11:38 as you also learn in my bootstrap series
- 00:11:40 on this channel you can
- 00:11:41 overwrite the defaults it says you can
- 00:11:43 customize its theme
- 00:11:45 but that's more advanced and still
- 00:11:48 might not always be the best way for you
- 00:11:50 to really get the result you want
- 00:11:53 you might also have unnecessary overhead
- 00:11:55 code if you
- 00:11:56 import the entire bootstrap library and
- 00:11:59 you just style buttons and images
- 00:12:01 and you never touch things like you
- 00:12:04 never use the cards you never throw
- 00:12:06 these alerts it offers you
- 00:12:08 well then you import all these styles
- 00:12:10 still without using them so that might
- 00:12:12 be a downside
- 00:12:13 and one thing you can sometimes see
- 00:12:16 all websites look the same you can
- 00:12:19 customize bootstrap themes
- 00:12:21 but they tend to have a shared look so a
- 00:12:24 look which you just
- 00:12:25 recognize if you worked with it a bit
- 00:12:28 that might be totally okay for you
- 00:12:29 it can also be something you don't want
- 00:12:31 though now what about utility frameworks
- 00:12:34 like tailwind css
- 00:12:36 tailwind css and co they also allow you
- 00:12:39 to develop
- 00:12:40 fast in a fast way because you just
- 00:12:42 start
- 00:12:43 adding more classes than with bootstrap
- 00:12:45 but still you start adding classes you
- 00:12:47 don't need to write that much code
- 00:12:50 they also typically justice bootstrap
- 00:12:52 should follow best practices so you
- 00:12:54 typically can rely on that and here too
- 00:12:57 you don't need to be an expert
- 00:12:59 you probably need to write some custom
- 00:13:01 css code because it doesn't offer
- 00:13:02 everything you want in exactly the way
- 00:13:04 you want it
- 00:13:05 but it's certainly less code than if you
- 00:13:07 build everything from scratch
- 00:13:09 the downside of course still is little
- 00:13:11 control more control than with
- 00:13:14 bootstrap and so on but still you're
- 00:13:15 using a css framework so you don't have
- 00:13:18 full control that's just the nature of
- 00:13:20 it
- 00:13:21 also you might still have unnecessary
- 00:13:23 overhead code if you import the entire
- 00:13:25 library and you don't use
- 00:13:27 the margin top and bottom helper class
- 00:13:30 well then you still have it imported
- 00:13:32 so that's the downside here too and with
- 00:13:36 all that the question of course is
- 00:13:37 what's the verdict
- 00:13:38 what should you do and it depends on
- 00:13:40 your css knowledge
- 00:13:42 the time you have for your project and
- 00:13:44 which kind of project it is
- 00:13:46 is it for your company where you have
- 00:13:48 your own brand and your own style guide
- 00:13:51 anyways and it's rather hard
- 00:13:52 to squeeze bootstrap into that well
- 00:13:55 probably you got no other chance than
- 00:13:58 styling everything from scratch do you
- 00:14:00 enjoy working with css are you an expert
- 00:14:02 or do you want to become
- 00:14:03 better at it well besides taking my
- 00:14:06 course
- 00:14:07 then writing styles on your own also is
- 00:14:09 a great
- 00:14:10 practice in the end if that is not the
- 00:14:13 case however if you want to finish a
- 00:14:15 product as
- 00:14:16 quick as possible if you want to finish
- 00:14:18 your web page as quick as possible
- 00:14:20 and or if you don't know css that well
- 00:14:23 using bootstrap might be awesome you get
- 00:14:25 great looking results quickly
- 00:14:28 if you're kind of in between or if you
- 00:14:30 know css but are no expert and still you
- 00:14:33 want to style some things on your own
- 00:14:34 a utility framework like tailwind might
- 00:14:37 be the best choice
- 00:14:38 actually in a lot of situations that
- 00:14:40 might be really helpful
- 00:14:41 and it's definitely worth playing around
- 00:14:43 with it
- 00:14:44 so that's my overview that is my
- 00:14:48 opinion on these things that is my
- 00:14:50 answer to some of the questions i got
- 00:14:52 regarding
- 00:14:53 what should you do and i hope it's
- 00:14:55 helpful hopefully see you in other
- 00:14:56 videos too
- 00:14:57 bye