Coding

First Steps with Vuetify | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 well again to this video my name is Max
  • 00:00:03 and in the last video of this series we
  • 00:00:06 actually got started with our beautiful
  • 00:00:08 project we installed it and now we have
  • 00:00:11 it here I open that in webstorm and if
  • 00:00:13 we have a look at the running project
  • 00:00:15 this is how it looks like now that's
  • 00:00:18 default setup and as you can see it
  • 00:00:20 already ships with a lot of components
  • 00:00:22 and I don't want to use these instead
  • 00:00:25 I'll go to my app but view file and here
  • 00:00:27 I will simply start by deleting
  • 00:00:31 everything which is in there now I will
  • 00:00:34 re add some of these things
  • 00:00:36 I'll also delete everything in my data
  • 00:00:37 here but I want to start with a clean
  • 00:00:40 project and then I add the things step
  • 00:00:42 by step so that you really well see what
  • 00:00:44 we use and why we use it so doesn't the
  • 00:00:47 cleanup project if we now save this this
  • 00:00:50 certainly is a little bit leaner now
  • 00:00:53 let's start adding elements and you see
  • 00:00:56 a left EVF element here now generally
  • 00:00:59 all these beautiful components I'm going
  • 00:01:02 to use start with we – and a good place
  • 00:01:06 to learn more about beautify obviously
  • 00:01:08 is their official page beautify
  • 00:01:11 chase.com there if you click on get
  • 00:01:13 started you can get detailed
  • 00:01:15 explanations on all kinds of components
  • 00:01:18 you might use how would you use them you
  • 00:01:20 get examples you can have a look at and
  • 00:01:21 at the bottom of each page you see the
  • 00:01:24 different props you can set up and so on
  • 00:01:26 so really an important page when working
  • 00:01:28 with beautify is also another important
  • 00:01:32 note over the course of the series or by
  • 00:01:34 the point of time you're watching this
  • 00:01:36 video the version of Butte approaches
  • 00:01:38 might have changed and some things might
  • 00:01:41 not work the same definitely always have
  • 00:01:44 a look at the latest release notes of
  • 00:01:46 beautified shares if something is broken
  • 00:01:49 I'll also try to add annotations in the
  • 00:01:52 video description if possible to point
  • 00:01:54 you towards potential issues and with
  • 00:01:57 that you should get a working project
  • 00:01:59 again right now everything should work
  • 00:02:00 though so this is give you deployed
  • 00:02:03 chest page and I want to start by
  • 00:02:05 populating the main page with some life
  • 00:02:09 again I also want to change the default
  • 00:02:11 colors though because if you have a look
  • 00:02:13 at it
  • 00:02:14 well now it's white but if you remember
  • 00:02:16 the old state it was really great and
  • 00:02:19 thankfully we can set our own theme in a
  • 00:02:22 beauteous project for that theme we can
  • 00:02:26 choose from many colors which you can
  • 00:02:28 find on the official page under style
  • 00:02:30 colors these are all the material colors
  • 00:02:33 and these are basically the CSS classes
  • 00:02:35 you can add to any element to add this
  • 00:02:38 as a color for the element however you
  • 00:02:41 can also set up a main theme for your
  • 00:02:43 application to give your overall
  • 00:02:45 application a certain style without you
  • 00:02:47 having to add these individual classes
  • 00:02:49 to all elements you're going to use more
  • 00:02:52 information can of course be found under
  • 00:02:54 the theme section here and there you see
  • 00:02:57 you can choose between a light and a
  • 00:02:59 dark theme now in order to be able to
  • 00:03:02 see that we need some components though
  • 00:03:03 so before diving into theming why don't
  • 00:03:06 we add some components again in our
  • 00:03:08 applet view file again we have to be app
  • 00:03:11 component and that basically wraps your
  • 00:03:14 entire app it's that simple
  • 00:03:15 this really is all now in sight that we
  • 00:03:18 have you can add different things for
  • 00:03:21 example a main element this is not a
  • 00:03:24 beautified shared component this is a
  • 00:03:26 normal HTML element in this main element
  • 00:03:29 we'll place our main content so the D
  • 00:03:33 content we're going to display in our
  • 00:03:35 application so you might wonder well
  • 00:03:37 what's outside of the main element then
  • 00:03:39 well all the content of our application
  • 00:03:41 but basically our navigation so the
  • 00:03:44 static content which is the same for
  • 00:03:46 every page which isn't dynamic the
  • 00:03:48 dynamic content goes into main and we'll
  • 00:03:50 add a navigation above main now I want
  • 00:03:53 to have a responsive navigation with a
  • 00:03:56 hamburger menu for smaller devices in
  • 00:03:58 the toolbar with icons and buttons for
  • 00:04:01 bigger devices so why don't we start
  • 00:04:03 adding that and we actually got a B –
  • 00:04:07 toolbar component and beautify cheese
  • 00:04:09 which you can use so let's add that
  • 00:04:12 toolbar and let's see if we already can
  • 00:04:14 see something after adding this well we
  • 00:04:17 can't see it right here right it's great
  • 00:04:19 so you might have over seen it but this
  • 00:04:21 was actually added this bar here at the
  • 00:04:23 top now you can already see that we can
  • 00:04:27 switch
  • 00:04:27 theme on the app element by default it's
  • 00:04:31 the light theme can switch to the dark
  • 00:04:33 theme which will change the overall look
  • 00:04:36 of your page might not be the look you
  • 00:04:38 want to use but you can do that changes
  • 00:04:40 the background color and the color of
  • 00:04:42 your toolbar now we're going to change
  • 00:04:45 this color anyways later so I'll revert
  • 00:04:47 to the light theme for now that's the v2
  • 00:04:50 are now in the toolbar I want to have
  • 00:04:53 certain elements to display and these
  • 00:04:56 elements actually are the icons or DVD
  • 00:05:01 navigation elements we'll have but it's
  • 00:05:04 also the brand for example now in a V
  • 00:05:07 toolbar component we can add a V toolbar
  • 00:05:11 title component now you might be
  • 00:05:14 wondering how do I know all these
  • 00:05:16 components and how do I know how to use
  • 00:05:18 them in which way well if you go back to
  • 00:05:22 the beautify chest page there under
  • 00:05:24 components to scroll down to the tool
  • 00:05:27 bar here you'll find some examples which
  • 00:05:32 you can simply check out and there you
  • 00:05:34 will already see the structure I'm using
  • 00:05:36 here like using a be toolbar title
  • 00:05:38 inside of the toolbar this part here at
  • 00:05:41 the bottom of this page as I mentioned
  • 00:05:43 earlier you'll also see a full
  • 00:05:46 explanation of all the properties you
  • 00:05:48 can set but here you'll also see the
  • 00:05:51 different elements under functional here
  • 00:05:54 v toolbar title and so on so this is
  • 00:05:57 where I got this from but the best way
  • 00:06:00 to learn it really are the various
  • 00:06:02 examples you can have a look at to see
  • 00:06:04 the code of well what you're seeing on
  • 00:06:06 screen here back to our element we add
  • 00:06:09 up the V toolbar title component and
  • 00:06:11 with that we can of course set our title
  • 00:06:14 and I'll name our app death meetup now
  • 00:06:17 if I save this and we go back to the
  • 00:06:19 application now we see a nicely aligned
  • 00:06:22 and styled title on that toolbar which
  • 00:06:25 already is pretty great now remember
  • 00:06:28 that I also wanted to add some links
  • 00:06:31 later or for now simply some dummy
  • 00:06:33 buttons which won't do anything but
  • 00:06:35 which will represent our navigation
  • 00:06:37 later on that's very easy to do too
  • 00:06:40 can simply add the buttons and again
  • 00:06:44 that is as for all components something
  • 00:06:46 you can find out on the official
  • 00:06:48 documentation we want to add buttons to
  • 00:06:51 the navigation to the toolbar and
  • 00:06:52 actually you don't even have to go to
  • 00:06:54 the buttons component to know that you
  • 00:06:56 can simply have a look at this example
  • 00:06:59 again and here you see the V buttons you
  • 00:07:03 also see the V toolbar items component
  • 00:07:06 here which we use to wrap these buttons
  • 00:07:08 and of course we can add this too so
  • 00:07:12 here in the toolbar I'll actually remove
  • 00:07:15 the button for now and add B toolbar
  • 00:07:17 items to wrap all the items which
  • 00:07:20 basically are not the title or some
  • 00:07:22 other element which I'll come back so
  • 00:07:25 here I'll now add my button and again we
  • 00:07:27 can take the structure from here the
  • 00:07:29 button and basically then add a text
  • 00:07:31 like for example view meetups and here
  • 00:07:36 we save this we don't have to add the
  • 00:07:39 flat attribute as a side note that just
  • 00:07:42 changes how the button is displayed come
  • 00:07:44 back to this tube we save this we see
  • 00:07:46 the button here sitting right next to
  • 00:07:49 that title and also this button style
  • 00:07:52 might not be the one we want that takes
  • 00:07:55 us back to the different button styles
  • 00:07:57 which we can now learn on the detailed
  • 00:08:00 documentation page of how to pattern
  • 00:08:02 there you click on it you see the
  • 00:08:05 different kinds of buttons like flat
  • 00:08:07 buttons which don't have a border
  • 00:08:09 basically raised buttons which have a
  • 00:08:12 border and a tiny shadow and then some
  • 00:08:14 other buttons you may use now the flat
  • 00:08:17 button actually makes sense on the
  • 00:08:18 navigation so why don't we add flat here
  • 00:08:21 and to get some space in between our
  • 00:08:25 title and the toolbar items there
  • 00:08:27 actually is a V space or a helper
  • 00:08:29 component which allows us to distribute
  • 00:08:31 this because behind the scenes B
  • 00:08:34 toolbars uses flexbox VCS as concept
  • 00:08:37 flex box and in Flex box by default here
  • 00:08:41 all the items are aligned to the start
  • 00:08:43 however if you add a spacer in between
  • 00:08:46 it will add some well space between the
  • 00:08:48 title and the our elements so if we save
  • 00:08:52 it with this setup here
  • 00:08:54 you will see that in our application now
  • 00:08:56 it's pushed all the way to the right and
  • 00:08:58 that it now has this flat look which
  • 00:09:01 looks better in my opinion we can even
  • 00:09:04 enhance this a bit more though we could
  • 00:09:07 go to that button here and it could add
  • 00:09:10 an icon to it to do this I simply add
  • 00:09:14 inside of this button up besides the
  • 00:09:17 text I add the V icon component now
  • 00:09:20 again that is provided by beautified as
  • 00:09:22 all the elements starting with V dash we
  • 00:09:26 have a look at the beautified
  • 00:09:27 documentation we actually see I can bust
  • 00:09:30 nose here to here for example but we
  • 00:09:34 also have a dedicated article about
  • 00:09:37 icons to click on that we find a link to
  • 00:09:40 the material icons page which allows us
  • 00:09:43 to find all the icons supported by the
  • 00:09:46 materials style guide or by the material
  • 00:09:48 style and here you can choose any I can
  • 00:09:51 you find appropriate for the element you
  • 00:09:54 are about you create so for our example
  • 00:09:57 here of the view meetups we can find a
  • 00:10:01 fitting icon for dad what would make
  • 00:10:03 sense for viewing meetups obviously
  • 00:10:07 there are a lot of icons which might
  • 00:10:08 make sense but I think the supervisor
  • 00:10:10 account here would also make sense so we
  • 00:10:13 can take this or remember this name
  • 00:10:16 actually also click on it and copy it
  • 00:10:18 and go back to our application at this
  • 00:10:22 in between the icon without that extra
  • 00:10:25 information here though and important to
  • 00:10:27 remove the white space turn it into an
  • 00:10:29 underscore with that if you now reload
  • 00:10:33 the application you have two icon here
  • 00:10:35 however it's it's really close to the
  • 00:10:38 text and that might also not be the
  • 00:10:41 behavior you're looking for that is an
  • 00:10:43 issue though we simply have to add a
  • 00:10:45 directive QD icon which is called left
  • 00:10:49 in this case and should be setting left
  • 00:10:51 of the text by adding this it beautifies
  • 00:10:54 made aware that it probably is next to a
  • 00:10:57 text and that we wanted some spacing in
  • 00:10:59 between so now you see this looks much
  • 00:11:01 better and that's how you could build
  • 00:11:03 your menu I will come back to building
  • 00:11:05 the menu a later
  • 00:11:07 so right now I want to jump to another
  • 00:11:10 menu we have to build the responsive one
  • 00:11:13 the hamburger menu we need for mobile
  • 00:11:16 devices because right now we only have a
  • 00:11:18 toolbar and it won't auto collapse if I
  • 00:11:21 open my developer tools and shrink the
  • 00:11:23 page you see it's not collapsing so this
  • 00:11:26 alone doesn't give us a responsive
  • 00:11:28 design in order to add a responsive
  • 00:11:31 design we need to add a different
  • 00:11:33 component to beautify actually we can
  • 00:11:37 look for one in the beautify
  • 00:11:38 documentation there you can go to
  • 00:11:41 layouts and predefined to learn about
  • 00:11:44 some common layouts you use and actually
  • 00:11:47 we're also using one this year's default
  • 00:11:50 application market but now we can have a
  • 00:11:53 look at which layout would fit our needs
  • 00:11:54 this one has some drawer but I actually
  • 00:11:59 know that there is one which I like more
  • 00:12:02 I like the temporary floating one here
  • 00:12:08 which floats the navigation drawer over
  • 00:12:11 our main content I really like that a
  • 00:12:13 lot of course you can choose any other
  • 00:12:14 setup here so let's expect the source
  • 00:12:17 code for this setup and here we see
  • 00:12:19 quite a lot of elements we see our tool
  • 00:12:22 bar here which we already added as one
  • 00:12:26 extra element though we still have to
  • 00:12:28 add but then we see that all this part
  • 00:12:30 here at the top is responsible for
  • 00:12:33 rendering this navigation drawer as it
  • 00:12:36 is called this side menu which slides in
  • 00:12:39 death decibel user is all component DB
  • 00:12:42 navigation drawer component again under
  • 00:12:44 components you would find a dedicated
  • 00:12:46 article and inside this drawer
  • 00:12:49 we're nesting another component made
  • 00:12:51 available by beautifying the b-list
  • 00:12:54 component also to be found in that
  • 00:12:56 components documentation now here you
  • 00:13:00 see how such a list could be structured
  • 00:13:02 and how it could look like I'll simply
  • 00:13:05 create a almost comparable list a bit
  • 00:13:09 easier though to find the style I'm
  • 00:13:11 looking for I'll go to components and
  • 00:13:14 their twist and now here I don't want to
  • 00:13:19 have an avatar or something like that
  • 00:13:21 what you have all I can in my list
  • 00:13:22 though so I basically want you will
  • 00:13:26 build this style here where I have a
  • 00:13:29 list with an action which holds an icon
  • 00:13:32 and then the content which is a text and
  • 00:13:34 I don't need the avatar
  • 00:13:35 so what did we gathered all the
  • 00:13:37 information we need now let's build this
  • 00:13:39 step by step for that I'll go back to my
  • 00:13:42 application and now outside of the
  • 00:13:45 toolbar that's important
  • 00:13:46 add your navigation drawer which was the
  • 00:13:49 navigation drawer just like that now the
  • 00:13:53 navigation drawer alone doesn't do much
  • 00:13:56 it also meets you be connected to
  • 00:14:00 something which opens it basically we
  • 00:14:03 can use v-model for this we can use this
  • 00:14:06 because beautifly set this component up
  • 00:14:08 to be bindable via v-model
  • 00:14:10 and here we have to connect it to a
  • 00:14:13 property which holds a boolean if that
  • 00:14:16 boolean is true the menu will be opened
  • 00:14:18 if it's false it will be not shown it's
  • 00:14:20 closed here I'll name this side nav and
  • 00:14:24 of course I have to add this
  • 00:14:26 so here I'll add it in my data object
  • 00:14:29 and I'll set it to false initially so
  • 00:14:31 that it's closed now of course we need a
  • 00:14:34 way to open this now and four days I now
  • 00:14:39 will add another element to my toolbar
  • 00:14:41 here next to the title I'll add a V
  • 00:14:45 toolbar side icon and that's element you
  • 00:14:50 could also find on this predefined
  • 00:14:52 layouts page I showed you a second ago
  • 00:14:54 this adds a hamburger icon that is what
  • 00:14:57 it does and this is dedicated for
  • 00:14:59 opening the drawer basically we still
  • 00:15:02 have to connect it though so what we do
  • 00:15:05 here on that side icon is we add a click
  • 00:15:09 listener we add a click listener where
  • 00:15:12 we want to set side nav to what is
  • 00:15:15 currently not so if sign app is true we
  • 00:15:18 will set it to false and the other way
  • 00:15:19 around to close or open the drawer if we
  • 00:15:23 do that and we save this let's have a
  • 00:15:26 look at our application we see the
  • 00:15:29 hamburger menu there and actually of
  • 00:15:31 course we should add it in front of the
  • 00:15:32 title here to have it on the left
  • 00:15:34 like this if they click this you see
  • 00:15:38 nothing happens though we also don't get
  • 00:15:41 an error so what's going wrong here
  • 00:15:43 actually this is related to a change you
  • 00:15:47 chase introduced in view 2.1 I guess
  • 00:15:51 that clicks on components by default
  • 00:15:55 don't propagate up they don't give you
  • 00:15:57 this native click event you can still
  • 00:16:00 easily get it though by adding a
  • 00:16:01 modifier which is dot native with dad
  • 00:16:04 you're telling view if I'm clicking on
  • 00:16:06 the component give me the native Dom
  • 00:16:08 click event now with that we should be
  • 00:16:11 able to listen to that so let's click
  • 00:16:14 this and something changed we get the
  • 00:16:17 backdrop at least so somehow half of the
  • 00:16:21 drawer is loaded but the drawer itself
  • 00:16:23 is missing dad is related to another
  • 00:16:26 thing we did with this click there click
  • 00:16:28 on the backdrop actually also dismisses
  • 00:16:31 the drawer and it turns out that if we
  • 00:16:34 open the drawer with a click listener we
  • 00:16:36 automatically dismiss it because our
  • 00:16:39 click now propagates up and it's also
  • 00:16:41 consumed by the drawer component which
  • 00:16:44 then again dismisses the drawer so we
  • 00:16:47 have to add another modifier to stop
  • 00:16:49 modifier to stop the propagation now
  • 00:16:53 with that we should make sure that we
  • 00:16:55 only handle a click on the level of this
  • 00:16:58 button and we get the drawer of course
  • 00:17:00 it's empty though because we haven't
  • 00:17:01 added anything in there you
  • 00:17:04 theoretically can now add what you want
  • 00:17:06 but a typical thing is a list which
  • 00:17:08 displays really nicely inside the drawer
  • 00:17:11 so in that navigation drawer we can
  • 00:17:13 create a list with we – list now with
  • 00:17:16 that we basically add or set up a list
  • 00:17:19 now we can start adding items we do that
  • 00:17:22 by adding V list tiles each tile is
  • 00:17:25 basically a row in the list you could
  • 00:17:27 say and this tile now can hold a V list
  • 00:17:32 tile action action is like the icon in
  • 00:17:36 our case so here I'll add a V icon and
  • 00:17:40 now again I will pick this supervisor
  • 00:17:44 account I can here because it worked out
  • 00:17:46 really well and of course
  • 00:17:48 to replicate my toolbar menu in the list
  • 00:17:50 now because I need to have the same menu
  • 00:17:52 invoked responsive and the unresponsive
  • 00:17:54 approach at least in this application so
  • 00:17:58 we have the supervisor account and next
  • 00:18:00 to the realize a list tile action all
  • 00:18:03 now at the b-list tile content and if
  • 00:18:07 that is super confusing with all these
  • 00:18:09 components you'll get into that really
  • 00:18:11 quickly it's just a matter of practicing
  • 00:18:14 and using do defy a bit and you always
  • 00:18:15 have the official documentation to have
  • 00:18:17 a look at if your stack or if you're not
  • 00:18:19 sure which elements you should use so we
  • 00:18:22 list tile context now will hold the
  • 00:18:25 actual text like view meet us and now if
  • 00:18:29 I save this and we go back to the
  • 00:18:31 application
  • 00:18:32 you already see it here due to hot
  • 00:18:34 reloading can also reload now we see our
  • 00:18:37 list item here so now we have a
  • 00:18:39 responsive menu and we have the normal
  • 00:18:42 toolbar we can now also add CSS classes
  • 00:18:45 to make sure that we only display what
  • 00:18:49 we want to display so only display the
  • 00:18:51 toolbar menu if we are on a big screen
  • 00:18:54 and display the drawer and the hamburger
  • 00:18:57 icon on smaller screens that is super
  • 00:18:59 simple to do we can simply go to that
  • 00:19:02 hamburger menu here and add a CSS class
  • 00:19:05 to it and I'll let those over multiply
  • 00:19:07 to make it easier to read this class
  • 00:19:09 needs to control whether this icon is
  • 00:19:11 shown or not and if we have a look at
  • 00:19:14 the official beautify documentation you
  • 00:19:16 can find it under layout you actually
  • 00:19:19 have this display part here you find
  • 00:19:23 classes which allow you to control
  • 00:19:25 whether something is displayed on a
  • 00:19:27 certain screen resolution or not which
  • 00:19:30 of course is key to creating responsive
  • 00:19:32 designs for example we want to hide that
  • 00:19:35 hamburger menu let's say on everything
  • 00:19:38 which is a small device you can see the
  • 00:19:41 definitions for device sizes on the grid
  • 00:19:43 page here as a side note here small is
  • 00:19:46 greater than 600 pixels so we can
  • 00:19:49 basically hide it on small devices or
  • 00:19:52 bigger with the hidden SM and up class
  • 00:19:55 here and if you only want to hide it on
  • 00:19:58 medium sizes and up well then you would
  • 00:20:00 choose
  • 00:20:01 this one so I'll go with hidden SM and
  • 00:20:04 up go back to the application and add
  • 00:20:06 this as a CSS class to my hamburger menu
  • 00:20:08 of course the toolbar items on the other
  • 00:20:11 hand should be hidden on small devices
  • 00:20:14 so here we can add a class which is
  • 00:20:17 hidden XS only to only hide it on very
  • 00:20:20 small devices here with that if we now
  • 00:20:24 save this you see we have no hamburger
  • 00:20:28 icon on this screen size but if I
  • 00:20:30 decrease the size now we get the
  • 00:20:33 hamburger and we get no more item here
  • 00:20:36 in our toolbar so now I can choose from
  • 00:20:39 the hamburger icon from the navigation
  • 00:20:42 drawer this is the basic set above one I
  • 00:20:46 use now I also want to change the
  • 00:20:48 styling the theme and I did mention that
  • 00:20:51 we could do this with beautified it's
  • 00:20:53 actually simple to do for one we can add
  • 00:20:57 CSS classes to change colors and we can
  • 00:20:59 pick colors from the style colors page
  • 00:21:02 if we wanted to turn our toolbar into a
  • 00:21:06 purple toolbar we could pick up fitting
  • 00:21:09 purple maybe purple darken one can just
  • 00:21:12 copy that here go to our code and on the
  • 00:21:17 toolbar we can add a normal CSS class
  • 00:21:19 where we apply the two classes we just
  • 00:21:21 copied with dead if we go back now it
  • 00:21:25 turns purple you will also see of course
  • 00:21:27 that now all the text cells black so
  • 00:21:29 that might not be the contrast you're
  • 00:21:32 looking for we can simply fix this by
  • 00:21:35 assigning dark directive to the toolbar
  • 00:21:39 this will mark this as using a dark
  • 00:21:42 theme and by doing that it automatically
  • 00:21:45 turns the text into white text as you
  • 00:21:48 can see now to also convert the icon
  • 00:21:51 color here we have to go to that I can
  • 00:21:55 here is our button and there we can now
  • 00:21:57 also add the dark theme to inform it
  • 00:21:59 that it's sitting on a dark background
  • 00:22:00 and you see this turns it into white
  • 00:22:04 cube so this is how you work with that
  • 00:22:06 you give beautify the information is the
  • 00:22:10 dark or a light color the one you're
  • 00:22:13 assigning here
  • 00:22:14 and with that information beautiful I
  • 00:22:16 will adjust the text and the displaying
  • 00:22:18 of icons and zone automatically as we
  • 00:22:21 did here so this is one step now as I
  • 00:22:25 said it would also be nice if you could
  • 00:22:27 adjust the overall theme of our
  • 00:22:29 application and not just work with CSS
  • 00:22:31 classes we apply like this for that we
  • 00:22:34 can visit that stylus folder and there
  • 00:22:37 we get the main dot style file now
  • 00:22:39 stylus is a CSS preprocessor just like
  • 00:22:43 sass would be and you don't have to use
  • 00:22:45 it you can though since it by default is
  • 00:22:47 set up to be usable in this beautiful
  • 00:22:50 project you will have to use it if you
  • 00:22:52 want to override the theme though and a
  • 00:22:54 detailed guide on overwriting the theme
  • 00:22:56 can also be find a found on the beautify
  • 00:22:59 page under oops it was under style theme
  • 00:23:03 here if you scroll down you actually see
  • 00:23:05 the setup you'll need to have in the end
  • 00:23:07 this one here now what's happening here
  • 00:23:11 let's copy this import because we
  • 00:23:14 already have two second one in our main
  • 00:23:16 style file and then I'll explain what
  • 00:23:18 these two imports do this one the bottom
  • 00:23:21 one basically imports the beautified
  • 00:23:24 styles and your file happily uses
  • 00:23:27 variables so our goal is to override
  • 00:23:30 some variables before this gets imported
  • 00:23:32 because since all of this gets built
  • 00:23:35 dynamically here in our build workflow
  • 00:23:37 with that we can change the styling of
  • 00:23:39 the build CSS file now we can overwrite
  • 00:23:42 variables here if you want to use the
  • 00:23:44 material colors though we need to import
  • 00:23:47 that colors file from the beautify
  • 00:23:49 package which simply also stores various
  • 00:23:52 colors we saw on the colors page in
  • 00:23:53 their own variables and what we can now
  • 00:23:56 overwrite the theme variable which is
  • 00:23:59 one which will get used in that main
  • 00:24:01 file and assign our own colors let's
  • 00:24:05 choose the one I just copied if we save
  • 00:24:08 this and we actually remove the purple
  • 00:24:11 class on our toolbar and we go back to
  • 00:24:14 our application you now see it's black
  • 00:24:19 but that is not due to our theme but
  • 00:24:21 because we added the dark theme to the
  • 00:24:24 toolbar here how can we make our
  • 00:24:26 teamwork then
  • 00:24:28 well by default you chase or beautify it
  • 00:24:31 we'll choose the black or the light gray
  • 00:24:34 look however since we set up our own
  • 00:24:36 theme with our own primary colors and so
  • 00:24:39 on we can go to the after view file and
  • 00:24:42 still apply a CSS class here however we
  • 00:24:45 can just use primary now could have you
  • 00:24:47 set the four but with the tree which has
  • 00:24:49 used defaults now we're using our own
  • 00:24:51 primary class or our own primary style
  • 00:24:54 as we set it up in our theme file and we
  • 00:24:57 can use it anywhere in our application
  • 00:24:59 now you see we have this red colored
  • 00:25:02 toolbar due to our own theme being
  • 00:25:05 applied this is where I want to stop in
  • 00:25:07 this video in the next video we're going
  • 00:25:10 to finish this menu both menus this one
  • 00:25:14 and the responsive one we'll learn how
  • 00:25:17 we can dynamically populate these menus
  • 00:25:20 and thereafter we'll start diving into
  • 00:25:23 the core functionalities of this
  • 00:25:25 application