hi i'm andrew from the youtube channel
follow andrew you can check down in the
description and there'll be links to my
channel where i do video tutorials about
web design web development technology
css html photoshop ui ux and other
related technologies i've been
developing websites for over 20 years
now
and so go ahead and check out my channel
if you like what you see here and and
come see some other stuff
now in this particular video tutorial
we're going to be learning how to create
an entire custom bootstrap theme
for an admin style panel from scratch
and it's sort of divided into three
separate parts the first part we're
going to be setting up npm and webpack
so we can configure bootstrap's source
files that are written in sas and kind
of setting up some automatic workflows
to help us when we develop it the second
part second part of the tutorial we're
going to be looking at creating just
some basic bootstrap templates things
that are common in admin forms like
forms
something will tables cards widgets
things like that you may find inside of
a typical admin style theme
and then the third part of the tutorial
we're going to be customizing the
bootstrap
uh experience by adding some custom css
overriding some of the bootstrap
javascript or rather the bootstrap sas
files to have some sort of custom look
and feel and layout and design to our
bootstrap admin theme
so that's kind of the three parts again
check down in the description if you
want to skip ahead to any particular
section back and forth throughout this
video i hope you learned something so
come follow along
now the first thing we need to do here
is set up a project folder so i've just
got a simple folder here set up in
visual studio code is what i'll be using
for the editor and it's just called
hq-admin is my master folder and inside
of this folder we're going to be
creating several files
configuration files to start off so what
we're going to go ahead and do is we're
going to open up our terminal window
and we're going to make sure that we add
a couple of files here so the first
thing we're going to do is do git init
and that is going to create a regular
empty
git repository so we can track changes
here to our files and whatnot
the next thing we're going to do is say
npm init and that's going to
pull in the node package manager into
our folder so we can pull in various
packages and import those into our
project so the package name i'm just
going to leave here at hq admin you can
see i'm just going to follow the prompts
here version 1 description we'll just
call admin theme
uh entry point we'll
leave at
we're actually going to call our entry
point
js
slash
app.js
is where our entry point is
going to be we're not going to leave any
types of commands we're not going to
have a git repository set up quite yet
uh keywords we'll just say admin theme
and the author will just say is andrew
wilson
and we'll leave the license at default
and we'll hit yes
for all of that
and then that
creates a couple of files for us now you
can see it says i can update to a new
version from five six to five six one so
make sure you have the latest version
probably want to run an npn and run this
command right here
before you start this tutorial to make
sure you're on the latest version
of node
so you can see what that did for us is
it created a file in here called
package.json
and this
package has all those values that we're
going to be using throughout this
tutorial we're going to be adding quite
a bit to this here in a minute but that
gets the initial things set up nicely
for us
now the next thing we're going to do
here is we're going to create just a
file here
and this file is going to be a dot get
ignore file so dot git ignore
and we want to add into this file
the node
underscore
modules
directory this way git won't track all
of the scripts that we import into the
node modules directory we don't want
those as part of our repository so we'll
just add that one in there for now and
that's probably good enough in our get
ignore file
for right now
next let's go ahead and
uh we're gonna install webpack so we're
gonna be using webpack as the
package manager which is gonna
automatically bundle up all of our
javascript files into a single
javascript file it's gonna compress it
for us it's to automatically take our
css and sas and convert it to css and
write that and compress so it's going to
do several things for us so we're going
to be using the webpack package manager
in this tutorial so let's go ahead and
install that next so again down here in
our terminal
we'll run a couple of commands here so
we're going to say np whoops make sure
you're actually down in the terminal
we're going to say npm
and install
webpack
now we could
run all these commands which dash dash
save
dev we could run all these commands on
one single line however gonna do most of
them i'm going to do most of them
individually so you can kind of see what
they're doing so this is going to
install webpack for us this will take
just a minute as it downloads here
the next command we're going to be
running after this webpack command is
the webpack command line
uh tool so in order to do that we say
npm install
webpack dash cli dash dash
save dev that save dev command makes it
so that this writes to the
development dependencies in our
package.json file so that they're not
included as part of the production
dependencies because this stuff is of
course only used during development
so we'll go ahead and add that one
give a second for that guy to install
next we're going to say npm install
webpack dash dev dash server
save dev and this is going to be the
development server that automatically
will spawn when we're creating our files
it has supports like hot reloading and a
few things like that so every time we
hit command s and save a file
it'll automatically recompress recompile
our sas put out the files and refresh
the browser for us so that's kind of a
nice uh
feature there that we're going to be
using
in that package
uh next thing we're going to do is
install npm
install
uh let's see here this one's going to be
the font awesome
so we're going to say
at it's under the repository called
fort
awesome
font
awesome
dash free there's a free and a pro
version we're going to be using the free
and then the save dev as well so font
awesome
is the icon font that is open source and
free that we're going to be using i
guess i don't know if it's open source
but it's free we're going to be using
that to generate all the icons for the
various uh settings and switches and
toggles inside of our admin theme
so the command we use to sort of crunch
and make webpack do its thing is npx
webpack
dash
config and then it's just the default
name there which is
webpack.config.js this is actually
optional
it assumes that's the default name so
you don't need to patch the dash config
value
unless you've changed your name for some
reason but you run that command
and this will go ahead and take all the
configuration settings you have inside
of your webpack
run them all and then spit out the
output
stuff so of course we don't have
anything in our webpack config.js file
but i just wanted to show you that
command that you can use
okay
next let's go ahead and
run a couple more commands here so we're
going to continue installing things
uh next we need to install a thing
called fibers
now the next couple of things uh
we're gonna be basing our theme off of
bootstrap so we're gonna also be pulling
in bootstrap
so let's come down in here we're going
to say npm
install fibers dash save dev
and we'll pull that one in
and then we're going to be installing
sas
s-a-s-s
so we'll grab it next as soon as this
finishes up here
okay then npm
install
sash
and then same thing here into our dev
environment
and the next couple of things we're
going to install are going to be dealing
with live reloading our css pulling in
css
uh the post css loader a few of the
things that basically are required for
bootstrap in order to import and
customize bootstrap we need these little
uh files because we're going to be
working with the raw sas files in
bootstrap and these things required
so in a pm
let's see here install
so we're going to be working with one
called sas loader and here i'm going to
do a couple at once we're going to be
doing the node
sas
whoops and we're going to be doing the
css css
loader we're going to need the auto
prefixer
the post
css
loader if i can type this right it's
post css
dash loader
and we'll save all those to dev as well
see if i typed all that out right
okay so this is going to pull in
all these little different packages that
kind of are required for working with
bootstrap
and the next plugin we're going to grab
is one specifically used for pulling out
your css file and writing it to an
individual file
so
webpack by default when it configures
and packages of your javascript files it
also takes all of your css and it jams
it inside of javascript and then
hot loads that or pushes that into the
browser via javascript
with inline style tags so if you don't
like all of your css jammed inside of
javascript this next little plugin is a
plugin that will take your css
export it out and write it as a
regular.css file which is how i like it
so npm
install
mini dash
css dash extract
dash
plug-in
save dev
okay we'll wait for a second for that
and uh let's see we have one or two more
here
but that will probably do it for now
so
uh the
most of our files are now
in place and loaded up now let's go
ahead and check the node modules and you
can see just how many things came in
from all those commands we have all
sorts of stuff in here
that is packaged
as part of all those imports
so the one thing here
that we are missing
is actual bootstrap itself
so we're gonna ins uh pull in bootstrap
next
so we do that with npm install
bootstrap
and this will pull in all of the sas
files css files
and also all the javascript files
that are required from bootstrap now you
can see here when we install bootstrap
it tells us that bootstrap requires a
peer of jquery and popper in other words
jquery and popper are both dependencies
that are required for bootstrap to work
uh if you're going to be working with
javascript files so we need to add those
files
so let's go ahead and
plug in those guys so in order to do
that we can say
npm
install
and then we're going to save
dash dash save jquery and
popper.js
now we're not doing save dev here
because these need to be these are
actually production files that are not
part of our development files so that's
why we're
not saying save dev
same thing with the bootstrap
dependency we just pre-installed we want
that as a required package not a dev
package
okay so now we have bootstrap so let's
go ahead and peek over here at our
package.json file and we can see kind of
what this
uh is doing here
uh we have a bit of a problem
so it looks like our package.json file
is not getting up to
and the issue here
um
maybe i just have an old one so let's
just
yeah there we go i was just looking at
an old file i was a little confused
there
so you can see now our package.json file
is updated with quite a bit of things
here so you can see here's all of our
development dependencies with all these
things we just barely added and then
here's our required dependencies which
are the bootstrap and those two files we
just added there as well
so that is mostly set for our
webpack
uh or sorry our package.json file
and now we can go ahead and start the
process of building out this theme
importing our files setting up our
webpack file so let's go ahead and do
that next
so
uh let's jump over and create a few
files we need so we need to come over
here and set up a source file so we're
going to set up a new folder and it's
going to be source and this is going to
be the folder that houses all of our raw
assets
and inside of
source again you can really set this and
configure this however you want
i'm just going to set a folder called
javascript i'm also going to do a new
folder called
sas which is going to hold all of our
css and sas files we're going to be
using to modify and build this theme out
so that's really all we need there
and then inside of our javascript folder
we're going to create a new folder
called app.js
so that's going to serve as the main
file that webpack looks for to run its
commands
and then we're going to do a new file in
here
also called
custom.js
and that's where we'll write any scripts
or things like that we need to write
for our application that we want to
import into this main file
so there's a couple of those boilerplate
files
now let's go ahead and set up our sas
files so we're going to set up a new
file here
so the first file we're just going to
call main.scss
so this is going to be the main sas file
that houses all of our imports where
we're importing all sorts of different
uh css sas files all over the place
we're going to create a fairly modular
layout so that it's easy to sort of find
you know if we have a button element
it's going to be in our button styles if
we have a card element it'll be in our
card styles so we're going to be setting
up several components
so let's go ahead and set up those
folders for the components so we're
going to set up a new folder here and
we're just going to call this folder app
as it's going to house all of the css
files for our app
we're going to set up another file here
that is called
underscore
vars.scss so this file is going to hold
all of our sas variables
we'll set up another one here and this
one specifically we're just going to
call it
customize dash
bootstrap
dot scss and this file in specifics is
going to house
the
variables that we're going to use to
override specific things inside of the
bootstrap sas files so this variables is
going to be our own variables that we do
various things with various things with
and the customized bootstrap will be
bootstrap specific variables so we'll
kind of separate those two out like so
all right so we have our main we have
those we have our app
and we're gonna be creating inside of
our app three folders
so we're gonna be creating a folder
called
components that's where we're gonna
house all of our various components
we're gonna have another one called
pages this will be a folder where we'll
house
a page specific css so like if we have a
login page for our admin theme that
really doesn't belong with all the other
css so that's where we'll kind of house
things like that login pages
contact pages maybe things like that
and then one more in here we'll do a new
folder we're just going to call this guy
vendor and this is where we'll store any
css that's specifically created to
override vendor packages
so one example we're going to be using
here in a minute is we're going to be
using the pace
javascript
library
which enables you to sort of have a
loader to show the load progress of your
page as it renders
and it comes with its own sas files so
we can use uh this vendor folder to sort
of override and customize the look and
feel and colors of those loading bars
that are package based
uh third-party packages so that's where
we'll put that type of stuff
okay so that's pretty much the setup for
our uh
sass folder so all that stuff's going
inside of the sas folder
and we'll be creating all those sas
files of course here in just a minute
next let's go ahead and create
our front end so that's just going to be
inside of our demo
and we're just going to create a new
folder here and literally
call it demo i just i think i just said
that wrong so this is going to be like
our distribution a lot of times you'll
see this called dist which is the files
that are distributed i'm just going to
call mine demo again you can set this up
really however you want
so inside of our demo we need a few
things so we're going to create a couple
of folders here we need a css folder
which is going to house our outputted
css
we need a folder here for our fonts
these are going to be extracted and
output from
fantasm
and we need a new folder here for our
javascript
which is going to be whoops i think i
created that as a subfolder i did
cancel we want to move it up into
demo
yes
and our javascript file will of course
house all of our javascript files that
we have
and then we need one file here
new file
we need an actual
index.html file
and this file is going to be our
our of course applications
html
will live here
so in
that's kind of the basic setup for our
distribution or our demo folder that's
really all we need inside of there
um if we did have for example in our
javascript file we could create a new
folder here and we could call this like
plugins or something and then all of the
external javascript that comes from
vendors we could stick inside of there
if we wanted to to link to that
and inside of our javascript folder we
now need our output file which is going
to be our app.js output file but
webpack's going to create that for us
and stick it in there so we actually
don't need to create that file
but that's eventually where it's going
to go
okay
so all of those files are now in place
and let's go ahead
and build out our
uh
html file so that we can begin the
process of running webpack first to see
if it actually loads up
so let's go ahead and jump over here now
to our source folder
we're going to come in our javascript
folder here and into our
app.js
and the first thing we're going to do is
run the import command because we need
to bring in bootstrap that's one of our
required dependencies oops
and we need to import
everything inside of our sas folder so
right everything inside of here we
basically want to bring in
so we're going to say
dot dot slash
sas because it's back a directory from
this javascript folder
so hence the dot dot slash then we need
to
bring in
our
custom stuff so we're gonna import
dot slash custom
so that's gonna bring in anything
you know that we write inside of our
custom stuff and package all that into a
single
single javascript file
so those are the three things we need
inside of our app.js
so that should be good there
okay the next thing we need to do is
configure our webpack javascript so
we're going to come in here to
webpack.js and add in all the
configurations so we can finally run
webpack it's going to do its thing
import bootstrap and then create our
file so let's go ahead and add this
next
okay now there's going to be quite a bit
of code inside of this configuration
file so we'll kind of go through it uh
piece by piece so you can kind of
understand this so the first thing we're
going to do is
add a constant of path equals require
path and this is just what's required
here for
uh webpack and we actually need to add
another constant
for webpack itself
and we'll hit require
webpack
and then we're going to add another one
and this is going to be the mini
css this is the plugin we added earlier
uh
extract plug-in
whoops
equals
the chances i make a typo in any of this
are very high
just so you're aware so this is the
plugin that we downloaded that's going
to extract our css
and then here we're going to do our
module
dot exports so this is all the
configuration
settings for all of the various modules
and things like that
okay so we're going to start with the
one called dev
server so this is basically just key
value pairs here
in this little
uh
i guess it's a json type of object
so dev server
is going to have the following
configuration
so it's going to have a content
base
and then we're going to say path.resolve
and this is going to automatically find
the path where this file exists
so we're going to say directory name
demo so it's going to look for its
current directory and then into the demo
folder
that's where the dev server is going to
be served from
we're going to say compress
true so it's going to compress our files
whoops this one over here has to be a
comma not a semicolon because these are
all the
values
and then we're going to say public
path is set to demo as well
so again this is going to be whatever
you set your right mind's being served
from this demo folder right here if you
call this dist or something you would of
course update these for that
and then right
to disk is true now this one got me
initially i was having some issues with
webpack where it wasn't
updating my sas files when i would save
it kind of looked like it was but it
actually wasn't working so i had to
actually add this flag right to disk
true and that solved that issue for me
so that's pretty much it for the dev
server values so that's gonna
make it so that our dev server you know
uses those values when it serves this
um then we're gonna add in here
the entry
point for everything here is dot source
slash js slash app dot js again this is
not standard standard i think is just uh
camera what standard is index.javascript
or something like that
uh the output
output
is going to be
so the file name
is just going to be app.js for me
and the path where i want that guy
output is going to be we can just say
path.resolve again okay to fix that for
me
directory name
and it's going to be under demo
slash js
so that's where mine is going to live
and that's probably non-standard as well
and the public path variable we can set
to
demo
whoops demo
i actually think the dev server might
use this public path variable when it
does this thing so i might not need to
declare it twice but
okay so that's good enough there
next let's go ahead and
work on the module
so this is going to be some various
rules we're setting up
that's going to happen basically these
are instructions we want webpack to use
when we run it
so we're going to be using this key
called rules
and it's made up of a bunch of
configuration values
so the first one is going to be
test
and it's going to be
let's see if i type this correctly here
again this is going to be a miracle if
everything goes off
perfectly in the first
go by
so scss
and i don't need that one
comma
okay and
then we are going to
say use
and use is going to be set up with a
bunch of these as well
so the first one will be
this this first one we're going to be is
the plug-in that's going to be used to
extract the css into a separate
uh file so we're going to say loader
mini css extract plugin
dot loader
so that's what we need for that
and then the next one
is going to be the
loader for the css loader
which is going to load in our css
the next one and again i'll have these
files
uh somewhere you can download so a copy
paste here is really going to be your
friend but i wanted to kind of go
through this piece by piece by piece
uh for i don't know because i'm crazy
for sanity's sake uh this next one is
going to be used to process our css with
post css which i think is actually
required for to make the bootstrap stuff
work
so we're going to say loader
css
loader uh whoops sorry this is the post
css loader
post css loader
and we're going to be passing in a few
options here
so the options key
and then the first thing is going to be
our plugins and then we have a function
here
function if i can spell that correctly
and i'm just going off my notes of
course because i don't have all this
memorized i've looked this stuff up
uh return
and then we're going to require
auto prefixer
and auto prefixer not sure where that's
hyphenated there i think it's without a
hyphen that's why my notes have it
anyway
auto prefixer is the
plugin that's required for bootstrap sas
files to compile correctly so that's why
we need this
all right uh that's it for
the post css
next we're going to load up our sas
loader
so we need
one more here and this is going to be
our loader and this is going to be our
sass loader
to process our sas files
and that's pretty much
most of the way done for webpack we just
need a couple of little more things down
here at the bottom
we're going to set up
some code that's going to make it so
that our
web fonts get extracted and
saved to disk via the file loader
and then set up um
jquery with the provide plugin
which is going to make it so that our
jquery dollar sign is a global variable
because webpack i don't think
i don't know how it packages your
javascript but it messes up with global
variables so that is going to allow for
that
okay
and that we're going to add
it's getting so big i can't even see
that's going to be added right after
let's see the rules command i believe
i'm just double checking here yeah
so after all of our rules so this is
where the
this helps
tremendously
the bracket matching highlighting and vs
code
so after our rules we're going to set up
a another section here and this is going
to be called test
so this is going to be the thing where
we're testing for all the web fonts
so this is going to be uh our little
regex here
slash
dot
a couple of these
okay so we're going to look at the eot
files
we're going to be looking for woff files
we're going to be looking for
w o f f 2 files
we're going to be looking at ttf files
we're going to be looking at svg files
and that's it for that
and so all of those files are all of the
different
ways that font awesome packages its
fonts because every single browser
requires a different font format it's
kind of ridiculous so they're sort of
stored in a million different ways and
then the browser will pick the correct
font depending on its needs correct font
files
okay
so that's why we need to
have so many of those
and i do not know what this regular
expression means somebody else probably
does
i grabbed this from
uh i can't remember where i grabbed this
from
somewhere and then dollar sign
okay
so that is supposedly
the regex that will do that for us
i'm just double checking my note here
really quick to see if i see any obvious
typos
okay now we're going to say use
and
this is going to be
so we have here
um the loader is going to be the file
loader
and the options
are going to be name
will be set to
[Music]
whoops
name like this
will be set to
the
name
and then the dot
extension so this is how we want our
file name so it's going to be the name
of the extension will come in just how
they're found essentially
and then the output
path
is going to be dot slash fonts
now this is kind of important because it
depends on how you where you store your
font files but for where i stored mine
in my demo or distribution directory
this is the correct
path if you will and the public path
is the same in my case so essentially
one of these store one of these
references where the files are and the
other one is what actually gets listed
in your css file when it references the
font family that says where's the font
family it's going to be say dot slash so
it's a relative file path based on your
css files location
so that's very important to note
okay
so that's pretty much it for the
test now we just need to add our last
two things which is our
um
after our modules
so clear up here
so after this guy
now we're going to load in the plugins
that we
so plugins
and let's say new we're going to load
the mini css extractor plug-in first
and it's going to
be passed in the following options
file name and this is just dot dot slash
css slash app dot css so that's the file
name that it's going to create and save
that to that location as well when it
extracts the css
and whoops one more plugin here
we're going to say new
webpack dot
provide plugin
and this guy is going to be past the
options this is where we're going to
make our global variable so we're going
to say the dollar sign is for jquery
and also jquery like this
actually that doesn't need to be in
quotes just
this is just the key
jquery like this is going to be for
jquery as well
okay
so
that i think pretty much does it for
that plugin i'm just double checking
here
because i feel like i may have added
that in the wrong spot
yes i did
so this plug-ins
goes
after the module not the mod
which will export so i had it in the
wrong spot so it goes right after this
guy
like so
so then
i think we are good and again the
chances this all compiles correctly is
going to be a miracle
but uh of course i'll have this file
list you can download if things don't go
you know probably the easiest was to
skip to this point in the video but i
wanted to kind of go over that
all right so we're going to save and the
one thing i did notice is that i forgot
we need the file loader plug-in
and i don't know if i installed that
with my last npm commands
uh so we're gonna go ahead and do that
right there npm install file
loader
whoops save dev
if it's already there i'll just add it
again so it really doesn't matter
but i don't know if i did that before so
heads up there
okay
uh now we have that webpack file all set
we can actually run the command i showed
you earlier
to see if all of that stuff
will compile
now in order for this to work we need to
set up an index file
inside of our demo
so we do have our index.html but let's
go ahead and set up a little bit of
boilerplate code here in this file
first
so we'll come into this
index.html file and we're just gonna if
we just in vs code if you just do talk
and hit type it fills out all that
boilerplate for you with the emit script
super super nice
so this is really all we need here
um for this the only thing we want to do
is we're going to create also a link
so we'll say link rel equals stylesheet
because we want to link to the style
sheet that webpack's going to be
creating for us
href is going to be set to css slash
app.css i'm actually going to put a
slash in front of this because we're
going to be using development server so
i want that to be root
relative
and close that guy off
and then also we want to add inside of
here down in our footer
not our footer really before our closing
body tag i guess
a link to the javascript file so script
and we're going to set the source on
this one
is going to be
again
j
slash app dot js that's the public path
for our demo or our distribution folder
and that should be
good
so we don't i don't think need anything
else in here
let's just throw ourselves a header one
tag for a hello world finally
and let's see if we can get this guy to
run
so what we need to do here is
now
execute that command so let's come i'm
going to try to back up here in my
history that's the one right there so
npx webpack config so this is going to
make web pack
look at our webpack dot
json or json however you want to say
that file i like json personally
and then execute all this stuff so when
we hit return here
my return there
down here
this is going to have webpack
try to do this
so we have an error it says
uh can't resolve source.js app.js
and i think i see the issue here
so if we go to our webpack file you can
see that i said dot source it's supposed
to be dot slash source
so i had a i was missing a slash there
to go into that directory so let's go
ahead and fix that and run it again
so we'll hit return here see if we get
some more errors
so we've got another one can't resolve
dot dot slash
sas in our javascript file so in
this guy
so dot dot slash sas
so
maybe it's because we don't have any
files anything inside here let's go
ahead and try that let's add something
to our
actual
sas file
and see if that helps
so let's just say
body
background color red
so we'll save that
and let's come down here i don't think
this is going to
solve this issue
all right let's
troubleshoot here
okay the issue here is that we can't
just
go to a folder
i need to specify a file
so i'm going to come to slash slash main
dot sc ss
so this should come in and grab that
main file so let's come down here and
run webpack again
okay we have some more
errors
let's track these down
first one says cannot find module auto
prefixer
so
uh
we
possibly spelled that wrong
so earlier in the
it came up with the auto prefix or
hyphenated
uh so let's try that and run this again
all right i found the issue here uh so
the thing is this does auto prefixer
does need to be included without a
hyphen like my notes the problem is
earlier when we installed
the npm apparently there's two packages
one's auto dash prefixer and the other
one's just auto prefixer i installed the
one with the dash which is incorrect we
need the one without the dash so you
need to install auto prefixer without a
dash back at save dev
then once you have that guy installed
let's just go ahead and run webpack here
again one more time
you can see now it runs through
everything without a problem and it
compiles out so let's go ahead and see
what webpack did for us
so we're going to come over here to our
output so let's come into demo
you can see that we have an app.js file
that webpack has created for us with
tons and tons of stuff so we have in
here
this is basically all the javascript
that is from bootstrap you can see here
sizzle there's all sorts of things in
here but bootstraps javascript's in here
we have our css
so it compiled and minified our css body
background color red
and
everything is good to go
so
inside of our source
whoops our demo
we have
all of that stuff in place
now the one thing we need to add inside
of our output folder
is a place
for our
uh web fonts
so we're eventually going to be adding
in here
to our demo we'll just create a new
folder right here we're just going to
call this guy fonts
because this will be housing
all of the fonts so
perfect that actually worked so now what
we can do is we can
use uh npm so instead of having to type
this command every single time
we can
make it so that we can just say npm
run build
and everything will sort of flow for us
so what we have to do is we're going to
come back to our
packages.json file now
and we're going to come up here to our
uh
scripts
section
and we're gonna add a couple of things
right here
so we're going to add in the one called
build
and it's going to execute the command
webpack
and then if we have one called
start
dev
will say
this guy is going to execute the command
webpack dev
dash
server
for us
okay so in other words we can come down
here to our terminal
and let's go ahead and clear this out
whoops
not there
so we can say webpack because we
installed this module earlier
dev dash server and hit return
oh
we don't have
did we install the webpack dev server
i'm pretty sure we did i've installed so
many things i can't remember
um
let's go ahead and just double check
that really quick
and okay we definitely did
so uh what the problem was i was using
the wrong command
so the command we need is actually this
it's node modules slash dot bin slash
webpack dev server so we have to go to
the right directory before we
execute this command so when we do this
command this will launch this
dev server here
so what the dev server does is it
launches a server you can set up some of
these things but notice how it's been
served from my slash demo that's my
distribution folder automatically for me
and then it sets up a little dev server
so i can just
copy this
and we'll pull up firefox here
and just paste that in there
and you can see that sure enough it's
pulling up everything from my dev server
so there's my index there's my css fonts
javascript and it's all sitting right
there as i would expect
so that is pretty slick
now typing that command over and over
and over again right every single time
now typing that command over and over
and over gets a little bit cumbersome so
what we can do is i'm just going to get
out of that dev server that's why we
added this command right here so we can
say npm
run
or build
and then we say start
dev
and now when we do that
we get an error
because i typed it wrong it's npm
run
not build start dev it's build on the
other one
okay so we can just run that command
that will automatically execute the
webpack dev server command up here
start our dev server everything launches
up
creates all of our files
and everything is good to go so now we
can just
again jump over here to the
dev server and it should be up and
running perfect so the one issue here is
you can see in our route this should be
bringing up my index.html file which
it's not so we need to jump back here to
vs code and just double check that we
place that in the right spot
and
we did not
in fact
i have no idea where we put that because
i don't see it anywhere
i'm pretty sure there we did we created
it in the wrong
uh in the wrong area
so inside of our source
oh whoops i did it i did a bunch of that
stuff
wrong earlier
so
we uh we're just not paying attention to
where i was creating those folders uh
but our index our javascript our fonts
all these guys should have been up
inside of the css
demo folder way up here
so
uh let's just
how can we fix this easily
um we can probably there's nothing in it
any of this stuff is there
no let's just delete this one altogether
so we'll fix this by just deleting this
demo
and we're going to grab this demo and
move it up
up
not into node modules
maybe i can move it up i thought this
would be easy
right there move
okay so now our demo is back at the root
it has its css fonts javascript
okay let's try this again
so i'm going to
get out of the web server here let's
come down the bottom
and let's just run that same command one
more time
so this should package everything up
launch our dev server let's just double
check that it created the files sure
enough it created our css file
it created our
app
there is that file of our js
so that looks like it's working
correctly there's our index file is
sitting inside of there
so now if we go over here and refresh
there we go we're now finally seeing the
root of our app with our hello world and
our red background color
so
that was about an hour of just setting
up and configuring everything to
actually then begin the process of
developing our custom theme
so now we're going to be adding in a
whole bunch of css and some boilerplate
to build a fairly robust
admin theme
and the admin theme i'm using is i've
taken a lot of the ideas off of another
admin theme and used some of the css but
i've also heavily customized it to kind
of fit my needs so i'll link to that
um down in the description for the base
theme that i'm basing this off of
but let's go ahead and get started with
that next
okay now that everything is working for
us here in our dev server let's go ahead
and now import
uh into our sas file of the bootstrap
files we'll set up a very basic page
and then we'll be off to the races to
create this full theme
so back over here we're going to open up
our main sas file
in our source
and do some imports
so we can go ahead and delete this rule
we added earlier
we'll just
add in our little
doc block here with
um
i thought that would actually ps had a
thing for that but it doesn't maybe it
does
uh so we'll just uh say this is going to
be our
hq admin theme
and we can give ourselves an author
andrew wilson
and we can give ourselves a url
colon slash youtube.com
channel follow andrew
anyway
you get the idea right so we can add in
here at the top
um
whoops
some of that stuff
okay so
uh the first thing we're gonna need to
import is bootstrap itself so we're
gonna just gonna do a couple comments
like this so we're gonna say at import
this is the sas now
um going to import our
variable.scss file
we're going to
import the customize
bootstrap.sc
file
and then we're going to at import
the bootstrap itself so bootstrap
s-c-s-s-s-c-s-s
boots
drop
like that so basically this is going to
look inside of the node module so if we
come over here we can find the bootstrap
files right here
and you'll see inside of their
scss file
um
this is what it's going to be you know
it's going to import
all of this jazz
so they have a bootstrap file in here
right this is the one we're importing
and their file imports a million and a
half other bootstrap files so we're
importing right tons and tons and tons
of sass files
uh
that is
what that line does
so
that is getting us all the bootstrap
files
uh next thing we need to do is import
font awesome
so this is kind of a little bit
strange here but it's very powerful so
we're going to say fa we're creating a
variable called fa
font
path and we're just going to set that to
the path for font awesome's web fonts
folder
so we're gonna say at
fort awesome slash font
awesome dash free slash scss slash font
awesome.scss
okay
so that is the
uh that's not the right path
s it is
font awesome
dash free slash web fonts i got too
excited
web fonts
okay so that's the path there and now
we're gonna at import
uh essentially
now we can
copy this and kind of use part of it
here
so the scss
slash
font awesome dot css now font awesome
five version five which is what we're
using is quite a bit different than
version four it splits off
all of the different fonts into four or
five different css files we need to
import each one of those in addition to
the main font awesome file
so i'm just going to copy this and we're
going to go one two three more times
so they have one called regular they
have one called
uh
brands which is things like facebook
icons google icons brand icons and then
they have things called solid which are
solid icons
and if you have notice how every time
i'm hitting command s it's doing its
thing right it's running this and it
just recompiled everything
from scratch so that's pretty cool
uh
now
we are going to
so just to prove this if we go over here
and look at our
demo file and now look at our app.css
notice how it's much much larger now
right this is all the bootstrap stuff
we're seeing inside of here there's all
the font awesome stuff we're seeing
inside here so it's just importing and
compiling everything down which is very
very
handy
so that's it for font awesome
and the next thing we want to do is
just also to illustrate this if we look
in our demo folder now if i open up my
fonts now that i'm importing font
awesome notice there is all of the
various actual font files themselves
that will be served
with the font awesome so that's what
that
file extractor we did inside of our
webpack
right down here so we tested for all
these different files and then extracted
them with the file loader and then stuck
them all right there
so that's what that little configuration
setting did for us
which is really really cool
font awesome five is actually a bit i
think more trickier to customize and to
use on your own like this but it's
doable with some of these tricks
all right next section here we're just
going to call this section our app
layout
so here we're going to at import
and this is the files that we'll be
creating so we're going to say app
slash components
slash app
so again this file doesn't exist yet but
we'll be creating a master css file for
our app and notice we got an error right
there when it tried to compile because
this does not exist
so we will go create it so let's open up
app
and we will create
this
file inside of our components
new file
app.scss
let's underscore that
and
let's try to
let's just do a rule in here
well
it's probably gonna be overridden by all
that other css let's try a body just to
see if this is working
background dash
color
green and we'll add an important on this
to try to override everything and save
so
that looks correct
and
let's see if this is actually working
now
so it failed to compile
so let's go ahead and let's run this dev
server again and see if it
compiles okay so it looks like it
compiled okay that time
and let's go back to our uh
and refresh and you can see sure enough
it's working just fine so now what i'm
going to do is i'm going to go side by
side because we have sort of live
reloading enabled on this so i'm going
to pull this
instead of full screen here
i'm going to pull visual studio
instead of full screen now we're going
to go to
a partial screen as well so over here
and then we'll make
let's take over the other half of the
screen so now we essentially can see our
hot reloading
in action so watch what happens if i
change this to blue and just hit command
s it's going to recompile everything and
refresh the browser and poof
we get blue so that is super super
powerful
okay so we don't need to have this in
here let's just delete that and save
that
we'll go back to our main sas file here
and we're going to add in
a couple of more of these
so there's our app layout
um we will
add three more here so i'm going to copy
this
and i'll say paste
based paste so we're gonna have one
called app we're gonna have one called
app
dash
header whoops i just deleted that
app header
we're gonna have one called app
dash sidebar
we're gonna have one called app dash
sidebar
mini
and then we're actually gonna have one
more
we're gonna have one called app
dash
tile
like so
all right so now
let's go ahead and create all these
files so we need that header app sidebar
all these in here so let's come back to
our components
where these guys all live
and we'll create them so
new file
app
app dash header scss and a new file
app dash oops
forgot what i was typing in there
sidebar next
app dash sidebar.scss
new file
app
dash
title i think we had that as css i can't
remember all these it keeps opening them
up as i create them
uh let's see we got header sidebar title
now we need sidebar mini
so underscore app dash sidebar dash mini
dot scss
okay so now we're going to come over
here and save and it should try to
recompile and hopefully we don't get any
errors
and it looks like
that worked just fine
so
let's come into maybe our app.header
file
and just throw in a couple of
customizations
so we can kind of see how this is going
to change
so
let's say
again we're going to do this just to
make sure everything is working
when we save
there we go it's working fine
okay so
let's go ahead and add now some code to
our
index.html file so that we can then
begin to flesh out a little admin theme
here
so we're gonna jump over here to
our demo whoops i was in the right spot
and
[Music]
index.html
and we're going to add some code
to our body tag so we're going to get
rid of this hello world
and actually add in
uh quite a bit of code here so this is
where we're going to be integrating
we're going to be using bootstrap so
we're going to be using a lot of the
bootstrap grid which is based off of
flexbox and some other components and
widgets and whatnot as we start to build
our admin theme and we're going to
heavily customize the app layout
with some uh left with some sidebars
things like that toggle menus
etc etc
so let's begin the process of setting up
just a few html files that we can learn
a bit about the basics of bootstrap
before we start to customize some of
these components so what we're going to
do is we're going to come over here to
our demo folder that we set up and let's
just create a new file here for now
we're going to call this file first
forms dot html because forms are going
to be the first aspect we'll tackle here
so inside of this forms folder i'm just
going to do a little bit of copy paste
here i'll pause you can pause the video
here in a second when i get this all set
up here for you but basically all we
want here
is just our body tag
and just our basic html here so you can
kind of see we've just got our head tag
we'll call this one the forms page we're
linking out to our css sheet that we
have set up that webpack is configuring
for us
and that's pretty much it so we're going
to have a class on our body
of app
and that's pretty much all we actually
don't even need the sidebar mini there
and then we're going to write a little
bit of bootstrap code so let's start out
here and we're going to write just a
little bit of code that will help us get
a column or two so we're going to be
adding two columns we're going to be
we're going to be using the bootstrap
grid system and then let's add two
columns to our section here and then
we'll add an inline form a horizontal
form and then just a default
vertical form so to kind of showcase
three of the different forms you can use
inside of bootstrap
so the first thing let's go ahead and do
is we're going to get a container so
we're going to say div class equals
container
and the containers in bootstrap sort of
act as you know kind of your main outer
element that you can wrap things inside
of rows and columns and things like that
they have fixed width containers and
they also have fluid stretchy containers
and then inside of our container we're
going to set up a
two columns so here we're going to say
div
whoops
class
equals
and here we can say row
so we're going to be setting up
an initial row
and inside of this row we can say div
class equals call
and then you can see all the presets
here inside of bootstrap so bootstrap is
based on a 12 column grid by default and
it uses flexbox to create this grid
behind the scenes
um
but you can you can specify like if i
want two columns that are equal width
they would each take up six so you can
think of like call dash six
would basically be half width and then
another call dash 6 would be another
half width so let's go ahead and add
this one first so we're going to say
call dash 6
and i'll just call this first column
and then inside of this initial top row
let's go ahead and add another one so
we're going to say div class equals call
dash six
so we'll say second column
okay so let's go ahead and save here
and we're going to refresh here this
page
and make it go to our slash we call this
forms.html
and you can see here now on this basic
page over here i have a first column
over here and a second column over here
and as i resize the page these columns
are always staying equal width meaning
this one is taking up 6 out of 12
columns and this one's taking up 6 out
of 12 columns so just to kind of
illustrate this let's go ahead and
switch this
grid here i'm just going to rescale this
a little bit
let's change this to call dash 3 and
call dash 9. it's always a good idea
when you're working within a single row
when you're working with columns they
should add up to 12.
so 9 plus 3 is 12 because 12 is means of
full width so let's go ahead and save
this
and then we can come over here and
refresh and now you can see that this
first column is only taking up 3 12 of
the space and the second column here is
taking up
9 12 of the space so that's kind of how
you work with the columns inside of a
row if i want to add another row down
below
you simply can just copy this entire row
code
and drop it right down below and now
essentially i'm going to have a 2x2 grid
two rows and uh two columns in each row
so let's save that we'll just call this
one third
and we'll call the last one fourth
and let's go ahead and save and refresh
and now you can see i've got that 2x2
grid up there now the bootstrap columns
are responsive
by default so bootstrap has that built
in so if we do an inspect element over
here and just move into our responsive
mode i'm just going to illustrate how we
can
change the width here and you'll watch
those columns automatically resize so as
my viewport gets down you can see those
columns kind of jumping around resizing
themselves
and then eventually we get down here to
the mobile
and you know that's kind of what it
looks like
now if you don't specify a media
breakpoint modifier the columns will
always be three and nine you can see
even all the way down on mobile view
they're not splitting into a stacked
view so if you want them to split we
need to change and add some media
responsive break points and that's
really simple to do in bootstrap you
just add
small medium or large to your class
names so for example on this first one
let's call this call
dash
medium
dash three md for medium
and we'll call this one call dash medium
dash nine
now let's go ahead and save and refresh
and first i just wanna illustrate this
so you can watch what happens
so you can see right now this is taking
up
their they're behaving correctly and
then as soon as i get below the medium
break point
you can see now they stack on top of one
another this first and second column
so the way the break points work is
column medium three means medium and
above
will behave in three columns once it
gets below a medium then they stack
so that's kind of what the way that
works so let's change this second row
down here to call dash
large dash three
and we'll call this one called as large
let's actually make this one down here
six and six just to illustrate that you
don't have to have them be the same in
each row each row can be completely
different
so you can see here on the large this
one is taking up half and this one's
taking a path that's a three and a nine
as i come below large
the second row now stacks because i got
below that large break point and as i
get below medium
now the first row now stacks as well so
that's just kind of a little primer into
the way the grid works inside of
bootstrap you can sort of customize the
grid and you can move things all over
the place but that's the basics of just
working with rows and columns so fairly
straightforward to do
so what we're going to do now is we're
just going to make all these six i'm
just going to have four equal and i'm
going to make them all medium so medium
and above
they will
lay out horizontally medium and below
they will all stack on top of one
another
so now we have those sort of grid
elements in place there so instead of
saying first column second column etc
we're going to replace the first column
over here with an actual form so let's
start out and we'll just add in a form
just we're just going to leave this
whoops
we're just going to leave this as a
default form tag here
and let's add in a simple form
so a form we know has an input
so let's give this input a type of text
and we'll just give it a name of
username
and that should work just fine we'll
give it an id let's pull this over just
a little bit so we can see this
an id of username as well
okay now forms typically have labels so
let's give this guy a label and we'll
call it the username
and we'll say
for
equals
username so that this label is attached
to its
uh element whoops looks like i have an
extra oh there we go
extra bracket in there right there
so you can see now i have this little
element
and that's looking fine now bootstrap
has several classes for working with
forms that make them line up and display
a little bit easier
and the first one is an option or an a
class name that's cut called call group
so let's take a look at that
so we're going to come over here inside
of our form and we're going to wrap this
input inside of a div that has the class
of
form
group i said call group but it's called
form group
okay so we create that div and then we
can just cut this guy out
and paste him right inside of there and
we'll save and refresh
so that will create the form group class
whoops
and we're going to do one more
so let's go ahead and let's actually
backtick these a little bit
let's just copy this entire form group
we're going to paste it right below
but this one down here is going to be
instead of a label for username let's
just call this one password
and we'll say 4 equals password here
and then the text will just say is
password password
and we'll go ahead and save and refresh
so now we have our username and we have
our password
and those are looking just fine
now you'll notice that there's really
not a lot of styling happening on these
in fact they're not even lined up
properly and that's because we still
need to add one more class called form
control to our actual inputs so let's
come down here to the input we're going
to give this guy a class of form
control
and the same thing down here
class equals form
control and we'll save and refresh and
now you can see they get a little bit of
styling built into them by default and
they automatically line up nicely for us
okay the last thing we're going to add
here is we're just going to copy this
entire bit one more time
paste it down below
and we're going to call this one will
will delete the label because this one's
just going to be a submit button
we'll go ahead and delete the input
and we'll replace it with just a button
and it's going to have the class of btn
and btn btn-primary
and then we'll just call this submit
and we'll save here and refresh you can
see that now adds in a submit button
right below our column there
now these two options are also bootstrap
classes so this is giving the class of
button and then we have what style of
button is a secondary one so we have
button primary we have button secondary
there's
all sorts of different color classes
that bootstrap has where you can change
the buttons we can say
button dash large whoops
btn-small or btn-large to make small and
large variants of these buttons
we can do outlines and things like that
so anyway we'll just leave this back
here at our primary
button for now oops let's change this to
primary
okay so that's just the basic form
that's just a typical stacked horizontal
form where the labels are above the
inputs
in our form over here we're going to do
the exact same thing except our labels
are going to be to the left of the
inputs
okay in order to do that we're going to
copy all of this form we just barely
built and paste it down into the second
column here let's just save and refresh
here so we can see that now in order to
get our labels over on the left we
essentially are going to be leveraging
bootstrap's grid system to make our
labels take up two columns and our
value our input fields to take up 10
columns so you can you can nest the
bootstrap grid so i can have a container
in a row and i can have a six column box
and inside of that six column box i can
create another full grid and you know do
columns and rows inside of there so you
can have nested grids inside of grids
uh with the bootstrap grid just fine
so let's go ahead and take a look at
that
so in order to get this to work the one
thing we need to do is we give our label
a class
so we're going to say class equals
and then we just call this guy
we basically give it whatever column we
want so we're going to say call dash
small dash 2.
okay so let's save and refresh here so
you can see that that's going to take up
two columns
and then we need to wrap the input field
here in another row so we're going to
say div
class equals
call dash not not row a column call dash
small dash 10
okay and then we'll just close this guy
off
after
whoops it's getting a little bit tricky
to see there
and then let's refresh here
and let's
pull this up so we can kind of see this
okay
and then we also need to give
to our
form group one extra class as well here
because our form group is going to act
as a row so we're going to also give it
the class of row
so now we can refresh here and you can
see now those are laying out a side by
side
inside of that area
so this of course is squished down too
much you can't see that there we go you
can kind of see that so now they're
laying side by side now you can notice
it's a little bit subtle but the
username is actually at the top it's
aligned at the top of the input we want
this guy in the middle and in order to
do that we have to give one more class
to our label which is call dash form
dash
label
now let's save and refresh here and you
can see what that does it just centers
it up so it's in the middle of that form
over there so now we just need to apply
all the same things
to the second one so we'll just take
this down here
we'll take this entire class
for the label we'll paste it down here
as well
and then we'll take this div
and we'll wrap this input
in a div as well just like we did before
and
save and refresh over here
there we go so now those are laying out
side by side and this one down here we
probably want our submit button maybe
over here right we want to kind of have
a blank space right there
what we're going to do is we're going to
follow the same process we did before
we're going to come down to this div we
have our button inside of we're going to
give it a row so it acts as a wrapper
and then we're going to wrap this button
in a div so we'll say div class equals
call dash small dash 10 so it's going to
be taking up
10 units there and again we'll cut this
guy out paste him inside of there
okay and what we can do now is we can
use a property called offset so we can
say offset
dash small
dash two
and you'll see when i save and refresh
here watch this guy jump right over here
so offset what that means is it's going
to offset those 10 columns over
two columns so now we essentially have a
blank column here and then this guy
starts over there
so that's pretty easy way of doing that
so now we have the two methods we have
the stacked one we have the with the one
with the labels on the left and then
down here let's just merge these two
together and we're going to be doing an
inline form
so instead of having
two columns down here
on our row let's just delete this one
and let's just make this one
a call medium actually it's not really
going to matter we can just say call 12
and this one and it'll be full width
column
you can see like so
so let's kind of pull this guy down a
little bit because we're just going to
be kind of paying attention to this
third column here
that looks pretty good
okay so let's add the final inline form
let's go ahead and copy pasta
just like we did before copy paste
so we're going to copy all that form
code there and we're going to paste it
down into this 12 column
element and refresh so there we go
and in order to create a form that's
inline you come to your main
form and you give it a class that's
called form dash inline
and we'll save and refresh here and you
can see that just automatically converts
things to be inline the one thing i do
need to do is with the form inline we
don't necessarily need all these form
groups and rows because that was for our
last sample
so we can delete all of those guys
let's see
that guy that guy so we just have our
labels
save and refresh there
oops i deleted too much
oh i still need my form groups whoops
let's undo that undo that undo undo undo
so the thing i need to delete is the
rows so we don't need separate rows for
each one
and then down here on this button we
don't need to have this guy
offset anymore as well
so now let's save and refresh there
okay
something's still happening here oh yeah
i still have these setups this is from
the previous example so i've got to go
remove all that stuff we just really
added
so we can delete
uh we can delete that
we can delete this because they're not
they're not taking up
columns 10 and 2 anymore
so let's clean all that up and refresh
okay
so that's looking pretty close there
so we can now go ahead and remove these
form groups as before
we don't need any of them
so let's save and refresh all that you
can see it's laying out the same
and you can see there's a little bit of
padding and whatnot issues in inline
forms we could solve that by wrapping
them in the grid but we don't want to do
that i'm going to illustrate one other
feature of bootstrap which is its
ability to add padding and margins to
any elements with just class names
so we can come up for example to our
username
so let's actually back
uh
tick these a little bit so we can see
this a little bit better
so on the
label itself in the class
i can give this guy some you can say
padding so p is for padding and you can
see they have five levels p one through
five so if i see if i say padding dash
five and save and refresh
you can see that adds five units of
padding around that helmet
so you can also say pr for padding dash
right top bottom pb pr pl
you can say px which means the x-axis
you can say p-y which means the y-axis
the top and bottom and the left and the
right so you can add all sorts of
modifier keys to adjust the padding
so i'm going to say pr
dash one and save and refresh here and
you can see that just adds a little bit
of padding there on the left
um and you can sort of tweak padding
tweak all those things to adjust your
form elements
just how you want
the issues you see here is our submit
buttons actually come down to another
line and that's because we still have
all these form labels
that we added from our previous sample
to
so we can go ahead and delete those when
you're working with inline forms you
don't need a lot of additional classes
you can just kind of almost have vanilla
inputs and labels and they'll work sort
of as you expect
so there we go now that's sitting over
where it's supposed to so i can come
down here to my password and for this
one let's give it a class of whoops
p x so it's going to be on the left and
right
of one and we'll refresh that and you
can see how that adds on the left and
right
and then on our submit button here too
we'll do the same thing of
uh px-1 or something
so you could use
all those different padding classes now
you can also do margins so p is for
padding m
is for
margins which is the outside right of
the box model
so
uh and the same modifiers work for
either one
so there is our final form so we have
three different forms we have our top
one
our left one and our bottom one all
built three different ways and bootstrap
and they're all fully responsive
and behave and work really well so
that's all we're going to do for our
forms page let's jump now over and
create our second page which is going to
be for our tables
so we're going to come back over here to
vs code
and we'll create a new file inside of
our demo folder
and this one's going to be
tables.html
and the same thing like we did before
let's just actually come to our forms
we'll say command a we'll come over here
and command v to paste
and let's go ahead and delete everything
inside of our
body
we'll leave our container because we're
going to need that so we'll kind of
delete all this stuff
there we go so we just have another
container again inside of our
body tag and this time let's come over
here and change this to tables
whoops
and hit return so now i have a blank
empty document to work with these tables
now you may be wondering why did i show
you all this bootstrap stuff if i
haven't even shown you where you can get
an install
and work with the bootstrap
documentation so let's take a look at
that the website is bootstrap
getbootstrap.com and i wanted you to
just get your hands wet a little bit
with bootstrap before you
so you can kind of see how those classes
and whatnot work before you dive deep
into the documentation the documentation
is a little bit overwhelming because
there's just a lot to learn with
bootstrap
but you come over to getbootstrap.com
and you can download the full source
here and play around with it but what
you really want to do is come over here
to the documentation tab and it has
fairly good search so if you want to
work with tables you can just come over
here and type tables and hit return
there and it will just pull up all the
various code for the tables
all the different classes that modify
tables
and the different looks and fills of
tables
you can see here that bootstrap is a
utility framework because almost
everything in bootstrap is controlled
and modified with css class names
so
adding table styles just like we added
form styles it's all done with class
names you rarely go in and edit the
source of course we're going to be doing
that in part three
but most people will just use class
names to sort of you know customize and
tweak and move things around
as they're needed
so this is where you can come and read
about how table code works and play
around with all this various
the various options so rather than
typing all the table code out by hand
we're actually going to use some copy
paste here from the documentation so
we're going to come down here and we're
going to start with the option called
table head options and we're going to
copy all of this table code from this
example here
and the only reason we're doing this
here is mainly so we can kind of see
how they look by default and then if we
decide to do any overrides later on we
can kind of compare our overrides with
the default bootstrap styles so i'm just
copying this first table here let's come
over to the container and we will paste
and let's just save that and i'll back
over here to our page and refresh
so here we have a basic table i'll just
go over a couple of these class names
quick
but you can see here that you just give
it the class of table
and if you have a t-head element you can
give various classes so i can say t-head
dark i can say t-head light let's save
and refresh that
and i can also use the various uh color
classes so i can say like primary or
secondary or blue or pink and all that
sort of different stuff so you can color
these guys um
various ways oh i guess warning one
doesn't work on that one so we'll go
back to dark because that one was
working fine there
and you can see that this by default
here the table is getting some lines and
that's because we have the class of
table on the main table element if i
take that off and save and refresh here
you can see we just get a default old
html table
so just a couple of properties here on
this guy i'm going to leave this table
as default and then i'm going to grab
this table
and i'm going to copy it and paste it
down below to add just another exact
copy of it so we're going to have two
tables here
now on this one here let's change
the table we're going to call this table
dash bordered
and i'll save and refresh and you can
see that that's going to add a border
all the way around
also i'm going to add an option called
table dash striped
and that's going to make every other row
alternated down have alternating colors
which is helpful to read if you have a
lot of data right when you're scanning
through a table
and then lastly on this guy i'm going to
show you one thing you can do you can
add an extra div here as a wrapper
element
and on this wrapper you can give it the
class of table dash
responsive
and what this means i'm going to make
this closing tag close after the last
table and save and refresh
if your browser
is smaller than the width of the table
this is a common problem tables are
tricky to deal with on
mobile devices but if my browser is
smaller so let's come down here and pull
this under
table dash responsive gives you this
slider you can see my top table doesn't
get that it's actually truncated the
data i can't even see there's more table
data over there unless i
horizontal scroll the entire page but by
adding that table dash responsive
wrapper you allow the users to inline be
able to scroll back and forth and see
the additional table data
which is kind of a nice little feature
so that's a really easy way to make your
tables responsive by just wrapping them
with that single div
so there's a couple of tables i'm just
going to show you here in the
documentation you can add colors you can
add alternating row stripes this is one
we just pretty looked at dark tables
light tables down here at the very very
bottom here
you can see they have color variations
for rows success danger warning you just
add those on the table row class itself
so if i want this table row here i can
say class equals
table dash success
and now when i come back here and
refresh my form that guy gets
highlighted with the success which is
green by default in bootstrap so there's
all sorts of ways you can tweak and
color tables
and the documentation is really well
done here so you can kind of read
through that so that's really all we're
going to do on our tables page
our third and final page we're going to
be setting up here before we jump into
the third part of this tutorial
is setting up a page we're going to call
cards
this could be used for like widgets or
little elements but we're just going to
call it cards
so let's come over here and we're going
to create one more page in our demo
new file let's call this cards.html
just like we did before let's copy all
the code for tables and we'll just paste
it in the cards here
delete everything inside of our
container
and save
okay
so let's come over here and move over to
cards
so cards were a concept that was
introduced in bootstrap 4. they didn't
exist in bootstrap
3
they're kind of like bootstrap threes
wells they have this thing called well
uh cards are kind of an uh fancier
version of wells i suppose but they're
really really nice you can do some
really cool things with cards i actually
like them a lot i use them quite often
whenever i'm working with bootstrap
so the card elements let's come over
here to the documentation
uh you can just hit cards here
and you can really
do a lot with cards so cards basically
have three basic parts there's a top
which they call a card header
there's the body which is the card body
and the bottom is called the card footer
so you can add images you can do all
sorts of things you can stack them do
columns with them
but i just want to show you a basic card
here so i'm going to come down here we
go
so this one where's one with the footer
here i'm just scrolling down there we go
so here's one that has a header you can
see this is the card header this is the
card body and then this is the card
footer
so uh let's go ahead and just copy this
code actually let's just type this out
because cards i think are worthwhile to
kind of see how they work
so
what's cool about cards is we can place
them inside of a grid to create some
interesting elements so the first thing
is let's create a div
which is class
of row
and then let's create two columns so
we're going to say div
class equals call dash six
and then let's just go ahead and copy
this
and place it down below here
and we'll just make sure this is working
we'll call this one one we'll call this
one two come over here and refresh
okay so that's working fine
whoops
we have both of our columns our left and
right columns here and now inside of
these columns we can add some content
so inside of our first column here
let's add a card
so for a card you say div class equals
card
and then for the header you can say div
class equals card dash header
like so
and then you can add a header so maybe
i'm going to add an h let's do an h2
of
card
title
okay below the header we have a div of
class equals card dash body
and this is the card body
and then lastly we have the div class
equals card dash footer
whoops and this guy
oops i missed the angle bracket there
i think i just double added it yep
is our footer
okay so we're going to save and refresh
here and you can kind of see how those
guys lay out by default
so they work
pretty fancy there we just have our
basic
card
so let's go ahead and just do a little
bit of lorem ipsum here
so we'll just save that so you can kind
of see what that looks like with a bit
more information there
and then also
let's copy all of this card code
and paste it into our second column
and save and refresh
and you can see there's our next card
now i'm going to duplicate both of these
rows so i'm going to grab each of these
rows
and copy and paste
so we're gonna have a two by two grid of
cards you can kind of see all these
different cards in there
so that is looking fine here
whoops i
copied i didn't add a row
so i'm actually going to undo that here
i've got to add
my row starts there
so i need this guy as well so i need to
add another row
and this will fix that little margin and
padding issue you just really saw in the
preview
so let's save that and refresh there we
go so now they're the equal you can see
they're equal widths before they were a
little bit squampous
okay so cards you can see they lay out
fairly easily now with this sample here
i'm actually going to change my
container
so i want this to be a fluid container
just to illustrate kind of another
feature here of bootstrap so instead of
container i'm going to say container
dash
whoops
container dash fluid watch what happens
when i refresh here you can see now it
stretches all the way to the edge of my
viewport
when i resize here
like so
now again we can use the responsive
classes
on bootstrap if i wanted to move these
guys down or up these cards down here i
could come down to this second
row
of cards
and i could give this class a card of
margin top dash
uh three let's see what that looks like
there we go and you can go all the way
to four or five right if i want to try
to make the gutter match the gutter here
it's all the way up to five
that way they're going to kind of look
fairly similar but
you can play with those guys how you
want
just lost my place there we are
so i'll give that one a margin top of
four i'll give this one down here a
margin top of four as
well oops i gave the wrong one a margin
top of four
that one
and
oops i gave this one the wrong one
let's save and refresh and i'm getting
myself confused here so i need my second
row my two on my second row so they're
down here there we go
so that one and that one should each
have a margin top there we go and now
they're pushed down properly
and you can add buttons you can add
forms inside of cards you can really do
anything you want with cards you can
customize the colors with the sass files
when we if you want to override those
you can see in the documentation here
you can even do colors clear down here
at the bottom they have some info on
colors so if you wanted to colorize them
you can just use the bg properties
so let's take a look at that really
quick so maybe i want this card title to
be a different one
so we'll come up here to the header and
say bg
dash
primary bg for background and we'll give
it our primary color background
anyway all sorts of things you can do
with cards we can change the color of
the text up there we can say text dash
white
that'll make the text white on that
background that's a little of course
hard to read you wouldn't want to do
that
you can see just how far you can
customize and take these cards
you can make them full width you can use
the grid
anyway really really cool
so that's the card element in bootstrap
really helpful for doing things
as far as messages and whatnot
so
that is our three basic pages
of bootstrap we have our forms we have
our tables we have our cards i just want
to illustrate two more things that are
common in bootstrap things where we're
not going to create dedicated pages for
them i'm just going to show you in the
bootstrap documentation
and those are buttons the button element
and the warning or dialog elements
so i'm just going to come over here and
show you the button group
so buttons like we already used this
button before but you just give the
class of button
followed by the modifier whether it's
primary secondary success danger warning
so those will give you all your
different levels of buttons
so you can make them big small you can
do drop down buttons block buttons you
can see you can really take buttons and
do quite a bit with them you can do
group buttons like this which are kind
of like radios
for different elements
so buttons are very common thing
the second one is the alerts
so alerts also come in the standard
colors so you can have your success
warning danger info secondary primary
alerts
they even have dismissable alerts if you
tailor them with javascript but by
default you just give them a class of
alert and then the color of the alert
that automatically gives them a border a
background color and it changes the text
to match the text of the alert color as
well so that's what you do with
alerts
down here you can see there's a couple
options i believe they have yet here's a
dismissible alert so you can click the x
and it actually dismisses the alert
which is helpful for an action that pops
up if a user clicks you know save record
you want to pop something up that says
success and i can go ahead and just
dismiss that alert
as well
so those are alerts
kind of in conjunction with alerts are a
thing that bootstrap calls modals modals
so a modal is like an alert basically
that's intrusive so it's going to pop up
above everything on the page and require
an action from the user
that
is dismissible so a modal down here you
can see this is a modal right but it's
going to pop up in front of your page so
watch this so when you click a modal you
can see it animates down the background
gets a little bit of a dimming effect
and then you can read the thing and you
can dismiss it or you can you know do
whatever you want here of course but
that's what bootstrap calls a modal it's
an intrusive alert basically is the way
i like to think about them
so those are just the last couple things
i wanted to illustrate quickly on the
bootstrap documentation we could have a
20 hour course just on bootstrap really
because there's just a lot to learn but
that's a few of the basics and setting
up some bootstrap grids working with a
few of the elements learning about those
classes and the grid system
and next in part three of this tutorial
we're now going to build our custom
wrapper or a custom admin theme around
bootstrap
bootstrap does have the ability to
create nav bars so nav bars that
automatically
will respond and give you a drop down
menu on mobile but they're a little bit
limited and when most people create
admin themes they actually don't use the
built-in bootstrap nav system they kind
of create their own one thing bootstrap
doesn't have which we're going to build
is what we call an off canvas menu where
the menu slides in and out from the side
on a mobile view
that's not possible to do with native
bootstrap
so what you'll see is most people end up
building those by hand and then sort of
putting bootstrap in the middle of their
app but the actual skeleton the menu the
sidebars and whatnot are custom created
and that's exactly the method we're
gonna take as well so come join in in
part three and let's take a look at that
so let's go ahead and start with uh the
code here so i'm going to pull up my
notes
there's quite a bit of html
that we'll add but the good news is once
we get all the html in here we kind of
leave it alone we don't nearly touch it
so we are going to add a couple of
classes on our body so we're going to
say class equals app
and sidebar dash mini this is going to
enable this mini sidebar you can either
disable or enable this with this little
toggle
and then we're going to add in a header
and then we're going to add in a
unordered list
so ul
and it's going to have one
two
list items so we're gonna say
li
times two
and the first one the ul is going to
have a class
of
app dash nav
and the list item
is going to have a class
of the first one anyway
app dash
search
and the second one
is going to have a class of
drop down this is going to be a
bootstrap drop down here in just a
minute
okay let's save and see what that looks
like
there we go so there's both of those i
guess when you save the html because
it's the distribution it's not hot
reloading
but that's fine
okay and we're also going to be adding
in here into our header element
the
anchor tag
so we're going to have an anchor
and it's going to have an href equals
just
the main this is going to be our hq
admin this is going to be our title
essentially
in our nav bar
and this guy is going to have a class
of app dash header and then it's the
logo element
so we'll save that refresh that over
there you can see that
we're going to be adding our sidebar
toggle in here in just a minute this guy
actually needs to come back
one space
okay so that is it
for those two
inside of our drop down
we need to add in a few links
so our drop down item
is going to have an icon so here we can
finally test this out
i'm just double checking my notes
there's so much code i'm skipping over
quite a bit of code because i don't just
want to go start from finish i kind of
want to build this in pieces so you can
kind of see how it's built
so i'm trying to skip back and forth a
little bit
uh so let's add an anchor tag
so
right here inside of our first drop down
we're going to be adding an anchor tag
and this anchor tag is going to have the
class of
app dash
nav
item
like so
and it's going to have an href that's
just empty
it's going to have a data dash toggle
which is going to be set to drop down
and we're going to do an aria label for
accessibility here
it's going to be set to open
open uh
open menu
sure
and then we're going to
close off that anchor tag now inside of
the anchor tag
i'm going to turn on my line wrapping
here because it's getting a little crazy
oops wrong key inside of vs code here
inside of this anchor tag we're going to
add an icon so icon class now we're
finally going to test out our font
awesome so fa
fa search
and then close off whoops that icon
and save and let's refresh
oh sweet so fantasm is working correctly
so there's our little uh search icon so
when we click on this it's going to
toggle
the
i actually don't want this one if they
search i'd like we want this one as
uh the person which is like f a
dash user
i think fa-large
let's refresh that there we go so when
we click on this guy it's going to drop
down our drop-down menu
for us
so now let's add the drop down menu
and that's going to be added as an
unordered list
right inside here let's actually
do this
ul
um
li times 3
and each of those anchors is going to
have an anchor tag
okay whoops the ul didn't work
don't know what i did
oh well so let's just manually do that
unordered list
i'm going to move the terminal down here
a little bit
close the unordered list
tab all these guys over so you can see
those so our unordered list is gonna
have the class of drop down dash menu
and
the
it's going to be our settings menu and
the drop down
dash menu
dash right
because we on the right side of our page
and then each of these list items have
an anchor tag and these anchor tags are
going to have the classes
class equals
drop down dash item
and we'll just call this one like
uh something
we'll just give all these anchor tags
some text for just a minute
and refresh
and it's working look at that so this is
the bootstrap drop down so when i click
this
i'm getting my drop down menu to fly
down inside of here
now we need to add these classes in
to these guys as well that styles them a
bit prettier so they have the drop down
items
and refresh so there we can toggle out
that little drop down let's add some
font awesome icons in these anchor tags
as well so icon class equals
f a f a dash
cog we'll say
on this guy
and then close the icon
let's copy that and paste it into we're
gonna do a space right there
paste that one into there and that one
into there so we'll have a cog
we'll have a user or something and we'll
have a
this one's called sign dash out
dash alt
so now we can refresh and see these so
there's our three icons some settings or
something right sign out so maybe we'll
call this one log out
call that one a profile and we'll call
this one the
settings refresh over here
and you can see our little drop down
looking pretty lovely there
so that's working fine now
on our drop down menu
so that's pretty much it for our header
we have our title
we have a search inside of this search
we're going to actually add in an input
because we actually want a search bar
so an input type
class this as app
dash
search
and then it's going to be our input
the type here
whoops
type is going to be set to the search
type that's the html5 search type
the new input type
and href
actually we don't need an href on this
um we'll say data dash
no let's see
placeholder that's what i'm looking for
placeholder text is going to be set to
search
and that should be fine for the input
let's see what that looks like there's a
little search bar perfect
and then we'll add in a button
and we'll give this the class of app
dash
search underscore
button this is all these css rules i'm
adding here are all our we're going to
be using custom css so this is not
bootstrap css we're going to be writing
this css to sort of tailor this to our
needs
but we could easily use bootstrap code
as well but we're going to use a lot of
bootstrap code later
so there's our button
and we'll close the button off and we
will add an icon here so another icon fa
whoops
class
close the icon at
class equals f a f a dash search
uh and save and refresh
there we go now we got our little
search bar over there so in other words
we can type in here and then click that
search button and make something happen
we'll of course style that on our own
here in a minute
and that's most of the code there for
our header
so quite a bit of code we'll be styling
this a little bit later with some css
and now let's just add a couple other
little pieces here for our
sidebar
so we're going to have some css
we're going to have our sidebar and
we're going to have
our content
so let's go ahead and do the sidebar
first
so div
class equals hap dash sidebar
okay there's that it's going to have an
unordered list ul
li
times i don't know however many links we
want there five
uh i guess they'll all have anchor tags
as well
so that looks pretty okay
for that
and this ul is going to have the class
of app dash
menu
and we're going to have
that that looks actually fine instead of
a div we could use a side here because
it's technically a sidebar so let's
might as well use our html5 tags call
that aside
app sidebar app menu
and then a whole bunch of leaks that
we'll be doing
with our menu items so we'll save and
refresh that
nothing in these for right now but we'll
just say test a whole bunch of times
test test test test test
there we go
and then
now that we have that aside done we can
come down here and add our main element
so our main is going to have the class
of app dash content
oops i said min supposed to be main
app content
and it's going to have a div that has
the class of app title
and then underneath app title
we are going to have
any other content rows and stuff like
that so we'll just say
div class equals
row so this is the bootstrap grid system
uh here div class equals call
dash medium
6
so maybe we'll have a row with
two columns this one will be a left
column
this one over here will be a right
column
let's save and refresh
so you can see on medium there
we're getting the left and right and
when we go down to a mobile view it
automatically stacks so the bootstrap
grid is doing that for us
so there's the grid system coming into
play
and that's uh that's pretty much it so
you know we can flesh out our main area
however we want
now the css we're going to add is just
going to be to take the header and make
a header bar get our left sidebar over
on the left and the other column over
there on the right
and when we'll be off to the races so
let's go ahead and do that
okay let's start off here in the header
section so we can start to flush a
little bit of this code out so we're
going to move over into our app header
as css file
and let's go ahead and
code a little bit of this we're going to
say dot app header we're going to be
writing some sas in here so this isn't
just pure css this is sas and we're
going to say position fixed because we
want our header to stay at the top
left 0
right 0
bottom 0 and width 100 so that's a bit
of a trick that's going to make it so
that our header
stretches all the way across
our html
so the files we want to kind of have
handy here
um
so we can kind of go back forth and
double check
we can turn this one off we can turn
this one off for a minute
we can turn that one off
turn that one off we'll have our index
there we go
so this is going to be our app header
now
inside of our header tag itself
we need to give this guy a class that i
didn't give before so class equals app
dash header
and we can save that and refresh and you
can see right away our header disappears
because we added a bit of that css
to it just over there so let's now come
back to our
app header
and uh
add some more
sas code
to this guy
okay so with 100
we're going to also say display flex
because there's several items in our
header and we want those guys to be
displayed in using the flexbox
model
and
we're going to give a background color
here
just using red for now just so we can
kind of see that you can see our header
is there it's just down there at the
very bottom
um and that's because
bottom zero is supposed to be top zero
i couldn't see that i was i wasn't even
looking at the bottom of my screen
there we go so you can see now with
display flex
my logo and my search bar and my
uh this guy right here whatever we call
that or drop down they're starting to
lay out a little bit differently
so that's working okay
and we're going to give this guy a z
dash index of 10.50 just because we're
going to be pushing and pulling some
things we want to make sure it stays in
the front
okay and let's go ahead and also give uh
some padding right of 15 pixels
so that's looking okay there
alright so each of these three elements
should be children of our app header
so notice we have
the app header so our anchor tag is the
first child the unordered list
is the second child
and it's the thing that has those two
two inside of it so we're eventually
going to take these guys and also make
those go side by side
in our app nav in a minute but
that will do it for that
so instead of a background color here
we're going to replace this with a
variable we're going to call this our
primary
color our primary color in hex
now that variable doesn't exist
so we're going to have to open up our
variables tab
and create it so
primary
dash hex
and we'll just set that to red for now
just so we can make sure it's
working properly
and
let's come back to our app header
what did i call that primary dash hex
is set to red
and that's set to primary hex
but it's not working there so something
is not compiling down
in our variables oh i think i know the
issue
so we have to come back to our main css
file
and
make sure we're importing our app header
oh we are
we're importing our variables first
which is what we want then we're
importing our app header
so that
should be working
um
oh
where is that app header go
let's close the title there we go
let's close the sidebar and the sidebar
mini
our variables
there we go i put that inside of quotes
i was treating as a string but you can't
do that with sas variables
so now we're back in business
for our
variable here so we're going to declare
specific colors here for these
so our primary
hex color i'm going to look here in my
notes and see what color i have set
so 0 0 zero
zero zero a zero ff
and again you can use whatever colors
you want this is just a color scheme i'm
going with so this should give a bright
blue yep there we go
that works
and
that'll be fine for now
okay back to our header
so let's go ahead and add in a little
bit more css we're gonna design up our
logo so this is the app
dash header
logo
and we're going to give this guy a flex
of 1
0
auto
like so
and we're going to say color is
white
so fff
and
that did not turn white so i must not
have this class
so app header underscore logo let's go
to our index and make sure we do that
app dash header
underscore underscore logo
oh whoops i did a
uh i did an id instead of class we need
to do a dot there
there we go so now you can see that
works out okay
and let's see where were we so we're
gonna change the
uh font family
so the font family is going to be set to
whatever our font family is so i call
this my app
dash font dash serif now this doesn't
exist yet so we gotta come over here we
have to create that
so we'll call this our app dash font
dash serif
and this is gonna be whatever you want
your fonts to be so i create two fonts i
have a serif font and a sans serif font
so it's kind of up to you what you want
to do there
so this one's going to be
we're just going to say this is
not a serif font but
well let's just just say times
and then for the we're going to copy
this and we're going to say sans dash
serif so
app font sans serif
we'll call
verdana just to set those two up
okay so
um
now when we save this
you can see our font there just updated
to that new font which is times new
roman but
of course we would swap those out for
whatever we want
okay uh let's see next
we are going to add in
text align
center and we're going to give a font
size
of 26 pixels
we're going to give some padding of 0 on
the top and bottom and 15 on the left
and right
make sure we have a colon there
so that's looking okay
line height
this is going to really depend on your
font as well
but i'll just set it to 50 pixels
on mine
and
that should be okay for now
so
there we have our
logo or our
title whatever you want to call that guy
all right
uh now let's work on
the search and the search button up
there
so we're going to say dot
app dash search
we're going to set that position to
relative relative
display as flex
align self
center
margin right
margin right at 15 pixels
uh padding
we're just gonna leave that alone for a
minute actually
and
that'll do fine there
so the app search again is
going to be
up and where is that app search up
inside here so that's the list item
itself now we're going to be doing the
input and the button
so the app search
input
is going to be next
and it's going to have a border so we're
getting rid of all that default stuff of
zero you can kind of watch this update
over here as i'm saving
and we're going to give it some padding
5 pixels
10 pixels
and
padding dash right we're going to get
override and make 30 pixels
border dash radius to round the corners
of two pixels
background dash color we're going to
make
uh
rgba
and we're going to make it
255 255
255.8 for our opacity or alpha value
so now you can see it's kind of
semi-transparent inside of here right
and this blue background is glowing
glowing through i don't know if that's
shining through transparency through
and that should do it uh for that we
could change the placeholder color we
can add some transitions we can do all
sorts of stuff there but we'll call that
good
so next we're gonna be doing our app
search
app search
button itself
so for this guy we're going to say
position
absolute
we want right zero
and we want
padding actually we want top
10 pixels
we want the padding
to
be 0 on the top and then 10 on the left
and right
turn off all the borders all together
let's save that and see what that does
so that looks pretty good we're going to
make
the
color
the same as
no actually we're not we're going to
make the color another rgba
000.8 eight
for the color
and
no background
because we don't want that little see
how there's a little
background right there i'm gonna turn
that off and there we go so you can type
inside of here and then you can just
click that search button and it kind of
integrates right into that element with
an icon fantastic icon pretty cool
so that's pretty much all we need to do
there we can also set the cursor
cursor
to pointer
and that way when we hover over this guy
we get the pointer cursor instead of the
default
cursor
all right that will do it for the search
uh and the logo
so we still have to lay these guys out a
little bit
uh better and we have to kind of fix
this little drop down because we want
this to kind of appear right over the
side of there
but that will
mostly get us where we need to be
so now let's work on the sidebar and
then just a few final touches and then
we'll finish up this tutorial
we could of course wait i mean we could
go for eons we could do this for 12
hours straight so
we're near the end
so let's go ahead and do that
okay so we're going to do the sidebar
next so let's go ahead and open up our
app you can see i've got my app sidebar
a sass file ready to go
and we will add in some stuff for this
guy
so
first thing is first is we're going to
add a rule here for the app dash sidebar
and it's going to have a position of
fixed
that's going to be top
zero
left zero
bottom
zero
we're gonna give a little bit of padding
on the top because we don't want
elements running right up against the
top of this
and so we're going to give it 70 pixels
now
that's also going to make it so that our
elements don't go underneath our
header up there
nav bar you can see that push down all
of those elements right there
so that's what that did for us
and we're going to give this guy a width
of 230 pixels or something
now in an ideal world we'd also make
this with the css variable that way we
could easily change the width of our
sidebar
later on
and we are going to set the overflow to
auto
we are going to
let's give it some z index of something
like 10 or something just so it gets
pushed in front
and we're going to give it a
background color
and this we are going to be using a css
variable for so we're going to say
sidebar dash color
and that sidebar color we're going to
declare in our variables
file right here right now
so the sidebar color
that i have chosen
uh is going to be
well i'll just add right here
sidebar dash color
and that's going to equal
to
[Music]
a
4
f 6 9.
it's kind of a dark blue
so there we go now when we save this
you can see now we've got our dark
sidebar color over there which looks
great
and let's keep going here on this little
guy
pull back up my notes
okay and we're gonna give this guy a
bach shadow
because it's gonna have a little shadow
kind of poking out over there to the
right so it's going to be 0 pixels and
then 8 pixels
and 17 pixels that's the amount of blur
in rgba again
and it's going to be
well that's kind of weird i didn't know
i was going to add
all of those for me
0 0 0
comma and then
0.2
like so so that adds just a little bit
you really can't see it but it has a
little bit of shadow there over on the
right side
of the sidebar so that's what that did
for us
and that will be that
next we're going to kind of tweak these
menu items a little bit
so let's go ahead and do those guys
so we're gonna say app whoops dot app
dash menu underscore underscore
item now we actually i gotta double
check to see
if we have
our menu items i can't remember if we
added those
on our
navigation we did not
so we need to come in to our
actual sidebar items and on these anchor
tags
they need to be
menu items
so we need to add those
so on each of these anchor tags
they're going to have the class of
app dash menu underscore underscore item
like so
our
menu
could support
drop down so a secondary tier as well
under the primary tier items
so we'll just give these guys a app of a
menu item like so
okay now let's go ahead and style them
so we want position to be relative in
case we want sub items we can position
them
we're going to use flex to display them
and we're going to align
a line dash
if we can hit dash items on the center
so let's save that
and
that did not seem to work
what did i do wrong there
let's give some padding here
padding of 12 pixels 15 pixels save
oh it is updating there we go so now it
gave some update about gave up
um
a
border dash left of three pixels solid
transparent this is going to be used for
like an active item or something so we
can make the little left of it
active if we want there
and that's pretty much it there
for the
uh that guy so we need to do one more
rule here right above this for the app
dash menu itself did we do a rule for
this
no we did not
and we need to
say margin dash
bottom
zero and list style
none
and actually we just want to set
margin to zero
and save that
and also padding to zero so we get rid
of all those guys
there we go
so there's our little uh tags right
there
and that's looking just fine and dandy
now we could give these guys
um some
background colors
and you know style these all sorts of
different ways but we'll just kind of
leave it at that for now
so let's now go over to our app
uh css so this guy right here
and just quickly add in a little rule
for the content so we're going to say
app dash content
and we will say the we're going to give
it a min height in fact i'm just going
to do an outline on this so you can see
it outline outline
one pixel solid red
so
we'll be able to see this guy
let's make sure we have our app content
as well
let's close this down open up this yeah
so there's our app content
so that's what we're creating here
so we're going to give it a min dash
height
of
calculations we're going to calculate
100
viewport height minus 50 pixels
and save that
and you can see it's kind of hard to see
but there's it's now
fully
fully heighted
that's a it's not a word clearly but
and let's give this guy a margin dash
top of 50 pixels
whoops 50 pixels
and save
and let's also
give some padding to this guy so 30
pixels of padding
and a background dash color of
b5
e5 e5 e5
and save
there we go
so there is our
uh
content area there
i don't know where my outline went
where'd my outline
go maybe that margin top is causing a
problem with that guy
okay and now we need to say we did that
margin top so we're going to now give
this guy a margin dash left of the same
width as our sidebar which we did is 2
30 pixels
i think
we really need to set that up as a
variable don't we
um
width is 230 yeah
okay so in other words it shifts over
that
uh left and right
columns there's for our sidebar
so that's looking pretty good so you can
see how those guys sort of behave when
we
get below certain break points
and that is pretty much it
so
we again we could go forever on this but
that pretty much gets the basic layout
so now it's just a matter of finesse to
where we add the break points to when we
get certain break points our our sidebar
collapses and grows we add a toggle so
that we can click that button and shrink
and grow the sidebar
we rearrange this so we use flex to get
this item and shift it over here to the
right we start adding in filler content
again we can use bootstrap for all of
that stuff this theme is based on
bootstrap so we can come into our index
and inside one of these uh rows
we can grab in fact i'm just going to
jump over here to the browser and let's
just go to get bootstrap
just to grab some code here
and uh we'll go to the documentation
we'll just grab a little bit of code for
a card
so let's come down here and grab
a card without a title without an image
there's a basic card right there so
we'll just grab a card and we can throw
that inside of this column and throw it
inside of this column
and save there
and refresh over here so you can you
know we can start to add cards again we
can customize all of this stuff
we do have our folder that has our
bootstrap overrides css file where we
can go in and just redeclare any of the
bootstrap variables that have bootstrap
names you can just redeclare an override
so if you come into your
node modules
and we come back into bootstrap
so let's find this here
so there's the there's the bootstrap
variables file right here so for example
if i want to change the primary color
this is the button primary
they have a variable in here called
primary so if i redeclare this variable
on my own css sheet so i'll come into my
bootstrap override
a css sheet
so i'll come into my customize bootstrap
right here and i'll say primary and i'll
just say pink for now
and watch what happens when i save boom
all of everything with that class of
primary is automatically overridden so
i'm overriding bootstrap's variables
because in my index.html
that
button down there had the class of
button dash primary
and i just changed the color of the
primary color in bootstrap by
overwriting their variable so you can do
that with anything you can come into any
of their variables and just pick a look
at you know what the variable name is
and just use the exact same variable
name and you can override anything
colors widths heights shadows
transitions
anything in bootstrap you can you know
customize
okay we're back here on day two i've
obviously got a little bit shorter hair
today and we're gonna finish things off
in this tutorial by just fixing up the
header and then making the site
responsive with some automatic sidebar
closing and opening so let's go ahead
and start here with the header elements
you'll remember that our header sort of
stacked on top over here at the top
right we're going to fix this guy so it
lays out nice and horizontally
and then we're going to push this little
logo to make sure it's always on top of
the sidebar when we're on our
desktop view
so let's come over here back to our app
header.scss sheet and we're going to add
a couple of rules here just to fix that
so the first rule thing we're going to
add is for the app dash nav
so let's go ahead and add this rule and
what we're going to do here is we're
going to use a command called at include
and we're gonna include the function
that's called list
uns styled now what this does in sas is
it brings in
all of the lists or rather all of the
css that's defined inside of this and
this is actually a bootstrap function
this is defined in the bootstrap sas
files this is what makes a regular
ordered or unordered list unstyled
meaning it doesn't have bullets and
margins and things like that so we're
going to include that for our app nav
over here
and then we're also just going to set a
couple of properties on our own
so we're going to set display to flex
that's what's going to make it line out
horizontally i'm going to set the margin
bottom
to 0 pixels because it has a bit of a
margin
included in it and then we're going to
set the justify content property
to flex end
which is what's going to push that guy
clear over to the right side of the
screen so you can now see over here that
lined that guy up like so and this guy's
then lined up like so
so that's what that did for us now
that's lining up much much better so
lastly let's go ahead and fix this
little guy align him a little bit better
so that he can properly sit where we
want him
so to do that
that is going to be
another rule here
and that rule is going to be for our
you'll recall if we come over here and
look at our main
oops not our main.css but rather our
index file
in the index.html
the
that guy is tucked away over here let's
come up into our head section so we can
see that
so that is
you can see we have this li class of
drop down and that's got our anchor tag
for the nav and then this ul class right
here
so this little ul which is called drop
down menu right
is responsible for
this guy so we're going to do a couple
of rules here to position him correctly
as well
rather than the
menu right
we're actually going to be targeting
this one right here this is the anchor
tag the anchor tag is actually the
little icon right here so this one is
called app dash nav item so i'm going to
copy this we'll move back to our app
header and let's just go ahead and paste
that in here
and for this guy we're going to set it
to display block and we're going to give
it some padding the padding here is
going to be 18 pixels and you can see
when i save and refresh here that just
lines it up nice and evenly on the top
and bottom
we're also going to assign some line
height here of
18 pixels and color
we're just going to assign to white for
now
and then we're also going to add a
transition on this guy
because we want there to be a slight
effect so we're going to transition the
background color
point
0.3 seconds
and we're going to ease that so let's
save and refresh over here and now you
can see when i hover over this guy
oops my background oh i haven't added a
background color yet let's go ahead and
do that
so
let's go ahead and add some extra rules
for our so we're going to say and when
this has the hover
and this is also actually going to be
for the focus
so in both of these two states this is a
group selector here that'll be nested
inside of this rule in our sas rules
here here's we're going to set our
background
and we're just going to do rgba
and we're just going to go with
instead of the default 0.8 we're going
to set that to 0.1 percent opacity
and let's save that and see if that does
the trick for us
so now you can see that little teeny bit
of a hover effect on the background and
the transition we're getting there
on that element so now i can click that
and those fly out nice and lovely for us
so that is now organized properly so
that's looking good
let's go ahead and work on just a few
items to make this a little bit more
responsive
so the first thing we want to do is when
we reach a certain point we want this
sidebar to disappear
right now you can see that it's really
not all that responsive these middle
options here are responsive
but as i drag this window down
let's kind of pull this over a little
bit you can see that the sidebar stays
active no matter how small i get so what
we want to do is when we get to our
break point for our tablet and mobile
size we want that sidebar to
automatically hide itself so we need to
set up a couple of media queries to make
it slightly more responsive
so the first one we're going to do
is just add in
our main one here
let's pull this back over
to our app
so we're going to go back to our
app file here just this main app
and we're going to add the main media
query here so we'll say at
media and this is going to be set to a
max
width of 767
pixels which is kind of a standard for
tablet size
and we're going to set the margin left
to zero
so in other words up to 768 pixels this
is where these media queries will be in
effect
so let's go ahead and test that out
so we'll come back over here and let's
pull this guy down and you can see that
right and we hit
oh whoops
doesn't seem like that's getting
triggered there
oh this media query needs to be nested
that's the issue here so this media
query right here needs to be nested
inside of this app content rule
because the app content is the one that
we want the margin left to go to zero on
remember by default we have our margin
left set to the width of the sidebar
which is what allows us to have our
content over in the content area so
let's fix that let's go ahead and try
this again
and
there's that should be triggering there
so whenever it's not working like so
i'm just going to save and make sure
that's recompiling okay
you want to inspect the element and see
what's happening here
so we can right click anywhere here and
just inspect the element and see if our
rules are actually toggling like we
expect
so let's look at our app content which
is this element you can see right now
it's got the margin left of 230 pixels
which is correct we want to set that to
zero
when we go below that break point
so as we come down oh it is working
so you can definitely see it's being set
to zero the problem is now we have to
set also set the sidebar one so the
content is working fine now you can see
that the content is clapping collapsing
down properly
underneath here and now we need to
collapse down the sidebar
so to do that let's move over to our
sidebar
and add that guy
so here inside of our app sidebar we're
going to be adding another media query
to this app sidebar rule just like we
did before so right here we're going to
say at media
and this one's going to be set to a max
width
of the same thing 767 pixels so that is
triggered whoops at the same time there
and for this rule it's going to set the
left position to negative 230 pixels
so now let's go ahead and save that
and you can see right away that's
actually working properly here
so as i scale up
this guy his margin gets set to 230 and
this guy's left position gets set and
then as i scale down
our media query overrides both of those
rules and now the sidebar automatically
disappears
for there so that's now working just as
we expect so now let's go ahead and
fix in this little content area here we
just have one small issue with the way
our header is working
this issue is in our app css file it's
an error we made earlier
you can see that we have our app content
has a margin top of 50 pixels that's
what makes it so that our content
doesn't slide underneath our nav bar
there at the top and our nav bar
uh you can see has will also has this
minimum height set to the 100 viewport
height units minus 40 pixels well this
40 pixels should be the same as this 50
pixels so we need to switch this to 50
pixels and then when we save
notice that that
is going to fix a few issues here
over in our content area where we're
just not having this one pixel or a few
pixels slide up underneath there like we
were going to be having before so here
in our app header file let's come down
to the app search
and we're going to switch this guy out
not switching out rather but we're going
to add another media query here so we're
going to say at media
and this is going to be at a max
width here of
480
pixels so this would literally be our
mobile size here
and we just want to set display
to none
so in other words when we get down to
the phone size we don't want this search
bar to appear at all so you can see here
on tablet size we still have it desktop
we still have it but on mobile we get
rid of that all together so we're left
with just our logo and our drop down
here like this
okay
so next let's go ahead and fix this hq
admin so that it appears over here at
the left by default and not kind of
floating over here in the middle
so for this one we're going to be in the
app header logo
and we're just going to come down here
and add another media query
so this one's going to be at media
and we're going to have this one at a
minimum width
of 768
we are going to change the flex
so we're going to set flex whoops i uh
let me fix this little mistake right
here first
before we do that and there we go so
we're going to change the flex to 0 0
auto
we're going to change the display to
block
and then we're also going to set the
width equal to our sidebar width which
is 230 pixels so watch what happens here
when we save
you'll notice that then this first item
gets that 230 pixels width and the other
items follow suit accordingly notice
that this rule right here is what's
being applied on our mobile menu by
default and then because we're doing
sort of a mobile first approach here on
this menu and then this media query
kicks in as we get higher and higher in
our widths
so that fixes this issue you can see now
we can scale this guy down
and at this point it switches it breaks
and now this flex rule is overriding
here now these three rules are shorthand
property for three separate flex
properties here so you can see there's
the flex grow the flex shrink and the
flex basis properties so that's what
this uh when you have whenever you see
it like this flex that's a bit of a
short hand
so
now we need to fix you can see here that
on our desktop view
this is lining up properly but now our
nav element over here is all scrunched
over to the left where we want that guy
clear over to the right on a desktop
view so let's go ahead and fix that
that is going to be done down inside of
our app nav
so we'll scroll down here and same thing
we're just going to be adding a media
query here
so we'll say at media
this one when we hit a minimum width of
768 pixels
so at least 768 so 768 and above this is
our desktop media query
then we're just going to change the flex
so we'll say flex is 1 0 auto
and we'll save there
and that does that so now you can see on
desktop these guys are sitting down over
at the right whereas our
item here is clear over to the left so
let me just pull that up a little bit
bigger now so you can see how that works
so on our desktop our menu is laying out
nice how we expect it to be we get down
to our tablet
we still have the search bar in the logo
and then when we get down to our mobile
the search disappears we have our logo
and then our drop down menu so that's as
far as we're going to take the header
here as far as adding the responsive
setup for that so let's do one more
quick thing here when our sidebar
appears we want this to sort of have a
bit of animation so it doesn't just
suddenly appear let's transition that in
so it slides in so we're going to add
that with a css transition
we need to open up the app sidebar
css file so let's open that guy up in
here and we'll come up to the app
sidebar rule and we're simply going to
be adding a transition property here so
it really doesn't matter where we add
this i'll just kind of stick it above
this media query here
so we're going to say transition
and we're going to transition the left
property
in
0.3
i always have the habit of just doing
0.3 like that but it's actually correct
syntax to do 0.3
seconds and then we're going to ease
that
and then we're going to do one more here
this one's going to be for the width
we'll also transition the width same
thing
0.3 seconds
and e so we have two different
transitions set on that
the actual width and the left position
so now when we come over here
and our sidebar
you can kind of see how that animates in
and out so it kind of slides out when we
get down to mobile and it sort of slides
back in when we get to our
desktop one extra thing we could do here
you'll notice it's pretty quick but as
soon as i move this this is gonna
animate out but we still have our margin
left that's sort of left over so watch
here really closely kind of pay
attention to this area right here
so as we come down in
watch what happens when i come up
you can see the margin left appears
first and then the animation slides over
so we really want to change that margin
left so that these things get pushed
over in a nice smooth animation as well
so let's add that next
that is going to been over in our
app.css file and on our app content rule
you can see here we have a margin left
property and that's the one we want to
add a transition to
so same thing here let's just go ahead
and add a transition this one's going to
be set to the margin dash left property
0.3 seconds with an ease
and then let's go ahead and save that
and let's test this out one more time
so when we come down it hides and when
we come up now you can see that we're
getting this area animated as well
meaning the content watch when it slides
over it's also pushed in an animation
so you can kind of see how that works
there
so that's nice and smooth so perfect
next let's go ahead and remove the red
border here from our little
uh
sort of that we added earlier so let's
just get rid of this border rule all
together we don't need that anymore as
that was just when we were doing a bit
of wire framing
and now that's behaving really nicely so
most of the work here is done the last
little thing we're going to do in this
tutorial is then when we're down on our
mobile phone so we're at our mobile menu
everything's hidden we need a way to
toggle out that sidebar with a hamburger
menu or a menu toggle up here in the in
the header to where we can click that
and slide that guy in and slide it out
as we may need to access of course those
menu links because right now the only
way we can get that back is if we were
to suddenly go above that break point
and then our sidebar appears so let's go
ahead and add that mobile navigation
toggle next
so we are in our index.html file here
for this as we need to add
the anchor tag that's going to serve as
the little toggle for this
so we're going to add this right after
our hq admin
logo
or rather title site title so this is
just going to be an anchor tag we're
going to give it a class of
app
let me fix that really quick
app
dash
sidebar underscore underscore
toggle
and the href here is just going to be
blank this isn't a true anchor tag for a
link i'm going to say data dash data
toggle equals sidebar if we wanted to be
setting up some javascript hooks for
this we use this and then we'll also
just give it an aria label
which is going to be for our
accessibility
and we're just going to call this the
hide sidebar
so that screen readers and whatnot would
be able to
show that properly
and then that's all we're gonna do there
and then we'll just close off the anchor
tag like so all right let's go ahead and
save that
i'm gonna turn on my wrapping here once
more whoops
so that wraps down so you can see that
full entire rule there so there is the
selector for our sidebar toggle now
we're going to jump back into our css
and we are going to add in some rules
here to make our toggle appear
so
we're going to be using font awesome
because we're already using that for a
few things to add in the bars
so we're going to have that little sort
of hamburger menu
so we can actually do it right inside of
the anchor tag we could do that with a
span tag or something like this we could
open a span tag and say class equals
f-a-f-a-bars
and then that would make
[Music]
those bars appear like so so you can see
this is going to be our little guy that
we click and toggle that guy down with
so let's jump over and add some of the
css
to our app header
so inside of our app header scss file
let's go ahead and add this rule so it's
going to be dot app dash
side bar underscore underscore toggle
is what we named that and i'm just going
to hit return a few times just to kind
of move this up to the center of the
screen there so it's easier to read
so we're going to give this guy some
padding we'll say 0
15 pixels
and then
let's whoops there we go let's go ahead
and give it some color
we'll just set it to white
and we're going to give some line height
and we are also going to transition so
we want this guy to transition our
background color just like we did on our
item over there on the other side the
little toggle for the drop down menu
the background color 0.3 seconds and
ease
and that's looking good there
then we're going to go ahead and add the
the hover and the focus rules so let's
say whoops
ampersand
so on focus and ampersand
hover this is our grouped
css selector here we're going to set
color to just white again
no change there
but here's where we can set the
background color
to something else
and rgba we can just do like we did
before and just set it to 0.1
or something like that
we're going to set the text decoration
to none so there's no weird underlines
or anything like that when we hover
and you can see now how that's working
there so we'll come over here
so you can see that when i hover over
there i'm getting that nice little
background
effect there so now we need to position
this little span tag a little bit better
so we're going to write a little rule
below this guy that's called
app
sidebar toggle uh
child of span
which is where actually fa bars reside
and we'll just set that to display
inline block
and save
and then we can add some padding to this
too so we'll just say zero
i don't know 15 pixels or something
so we're just trying to move this guy
whoops we don't want 15 there we'll just
do 15 all together so we're just adding
a little bit of padding to get this guy
to sort of center itself
in the bar there and that looks
fine enough for me
so there's our little toggle for the
menu
to be toggled in and out
and that's looking pretty good so one
issue you'll note is that when we come
down to our mobile menu it'd be better
if this little guy was on the opposite
side of our logo we don't want him in
the middle we sort of want him on the
left edge so we can do that with flexbox
by just switching the display order so
let's go ahead and add a media query
up in this sidebar toggle
we'll just do this one
before i guess we'll just do it right
here where our cursor is
so we'll say at
media
and this is going to be at a maximum
width
of
767
pixels so in other words this is tablet
and below
we're going to change the
order here
so we want to say order
negative one that's an easy way to just
force it all the way to the left
so let's test that out so on desktop you
can see it's still order number two but
when we get down to tablet it swaps over
and it's now at order number
zero essentially or negative one it sits
over there for our
tablet and mobile so the last thing we
would do here is we need to set up a
little bit of javascript so that when we
click this guy
we're either going to add or remove a
class
from our
html
we're going to move into javascript here
you'll remember earlier that we set up
inside of our javascript
folder here not in the demo rather in
our source
we have our sas then we have our
javascript and we have this one called
custom
and this custom javascript file is the
one we're going to be using
to write a little bit of jquery you
could do this with vanilla javascript as
well but since bootstrap 4 requires
jquery we already have it we're just
going to use it here
so what we're going to do is we're just
going to set a little bit of toggle
javascript so that when we click our
toggle menu we add or remove a css class
to our app
and then we're going to write a little
bit of css that either hides and shows
the menu based on that
hook if you will so let's go ahead and
write this little javascript first
so this is just going to be here
anonymous the jquery
function here
which looks like
this
and we are going to say
use strict
then we're just going to set up a little
bit of jquery test here
so we're going to go with
we're going to be targeting that data
toggle
attribute we added
so we're going to say data dash
toggle
equals
sidebar
remember this is right here we call this
data toggle equal to sidebar so this is
jquery targeting this specific anchor
tag only
that's what this little guy right here
is doing
and then we're going to say dot click
and then we're going to write here in a
function we'll add our event
whoops i can type that out correctly
keep
typing that incorrectly
just event there
and then we'll write this function here
i know this is kind of let's push this
over so we can see this a bit better
there we go
okay and we're just going to do a little
test here we're just going to say
console.log
sidebar toggle was clicked
just to make sure this event is actually
firing before we go pull our hair out
trying to troubleshoot why it's not
working
so let's come over here and that should
refresh automatically so when we click
this
i'm not getting anything in my console
so something
is working
oh we have an error
oh yeah here we go this is supposed to
be a dollar sign there's a problem
that's the shorthand for jquery
so let's try that again and click
that's still not working there
oh
i think we need this here
there we go
so this is the little piece i was
missing there for the this is the jquery
shorthand syntax or whatever for their
on ready event
okay so you can see it's working now
every time i click this little button
watch down here you can see that the
sidebar toggle was clicked and this will
increment over here to 678 every single
time i click this so there it goes it's
working so i know now that my hook is
working
so now
what i can do here
is let's delete this console log
and we're just going to say event dot
prevent defaults
so that just prevents whatever the
anchor tag wants to do by default for
this specific event then we'll write
another rule here so we're going to
toggle the
dot app
and we're going to say toggle class now
this is a jquery function that just adds
or removes this class based on whether
it's currently present or not currently
present
so we're going to call this our sidebar
um
dash
toggled
something like that
okay so now if we come over here and
look one more time
so we should see on our inspector if we
look up here at our app remember this is
the
this is where we're adding this to right
to our body class of app it should add
another class here called sidebar
toggled if it doesn't exist so let's
test it out
and you can see sure enough it appeared
right there sidebar toggled
and if i click it again it should
disappear
and that's how that little jquery thing
does so we're just adding or removing a
simple css class here and you can kind
of see where we're going with this
we're going to add a little bit of css
to this specific class name that sets
the margin left and the left position of
our elements to either be you know
hidden or displayed just like we did
manually with our media queries
so let's do that
so we will jump back and add that we're
going to add that one on our since this
is sort of sidebar related type of stuff
we're going to add that in the sidebar
dot css file
and we'll add a little rule here called
um
uh would we call that sidebar
and i've got a card i can't remember
what we just called that thing
we called it sidebar dash toggled
so we'll just paste that in there
sidebar toggled
so this one we're going to write as a
descendant selector so anytime we have
the class of app
and then somewhere along the line a
child of sidebar toggled
we want to override a few things so
we're going to write we're just going to
write this one in manual css
so we need to change
our
sidebar itself so you'll see that that
one's up here in this
app dash sidebar
it has the media query right here for
left of negative 230.
so we're going to change that
so app dash sidebar
we're going to set the
left position to
negative 230
pixels
except this is going to be left
0. pixels
okay let's test this out
so we'll come down to our mobile that
disappears when we click this
we are getting
um
let's see this one should have
overridden that
app sidebar toggled oh whoops
this sidebar toggle is a class on the
app so it should be app dot sidebar
toggle because both of these are
together right
and then any child of app sidebar
so that should be the way that works
there we go so you can see that i can
click that
i either add the class it slides out the
left menu i click it it removes the
class which means the default left of
negative 230 is taking over and that's
how easy you can add the little toggle
here
so this is pretty much now complete
we have we could do a little bit of
extra i mean we could of course do tons
and tons of css we could maybe hide this
little toggle on desktop view maybe we
only want it to appear on mobile or
maybe we want to have the ability to
slide in and out that sidebar on desktop
it's kind of up to you
but that is now fully functional to
where we have our sidebar toggle
we have all the mobile and
responsiveness set up
and we've essentially built the
framework for a fully
responsive admin style theme based on
bootstrap 4.
i hope you've enjoyed this tutorial and
learned a few tips and tricks along the
way i'd love for you to come over and
join me on my channel and see a few
other css html design photoshop related
tutorials that i'm putting out over
there
so we will see you in the next one