[Music] welcome to code creative i'm travis Tolson alright so today we're going to kick off part six the episode that shouldn't be if we had gotten part five to to kick off properly we would not have a part six but here we are so to pick up where we left off last time we had successfully managed to break down our CSS code into basically two different style themes one using bootstrap and the other using kind of a custom set of CSS classes that we're coming up with and that's to enable supporting either plugging this widget into an existing bootstrap driven service portal theme or using it in a completely custom service portal with its own theme separate from bootstrap and insulated from as many service nail changes as possible alright so with that we've got all of these currently set to the custom theme so just to quickly recap on how the theme switching works we created some we created a instance option and we can flip from the bootstrap version to our custom version so there's an example of one flipping over the bootstrap and then we can turn around and flip it back by switching the theme class to custom and there we go okay so now at this point we can actually start digging into our CSS itself and I have my handy dandy in-house designer here with me to help work through this one we were having some conversation last you just call me your handy dandy designer like on your handy-dandy notebook or something Steve it's not clues yeah so we're actually gonna do the thing today we we fixed the JavaScript last time and made sure that all of our equal signs were double and not the assignment operator so at this point we can start theming this out a little bit more so I'm gonna get rid of my scripts hopefully we won't need them this time and we can focus on just the CSS s CSS now to get us started I've got what do I have I remember I thought we put a clasp on here somewhere no that's right we it's Steve why is it Steve know when you were playing with something and made it Steve you did something else I didn't I didn't finish setting it back apparently I didn't save it and I left the classes Steve previously happens oh thanks David thanks for yeah I've got when did we create that intro that one was yeah yeah but thanks thanks for the kudos on the intro we did that one ourselves a few years back and just I think I got to use it on like one or two videos before I stopped doing the videos because it was taking me too long to edit them so here we are alright so let's see so we were going to do cc skeleton list I think was the class we were going with last time and that's gonna be up here up on this almost top-level div might be able to actually get rid of my oh that's why that's why because I flip between the two okay so we've got that one that's just a general wrapper and then this one that's actually our basically the bootstrap panel okay so we should have a seat see see skeleton class and I'll inspect and we'll find out and there it is see see skeleton list is on that div right here in our in our class attribute so now we can use that to piggyback go on now I'm assuming the first thing you want me to do is get rid of the little bulleted list all right let's let's go for the basics so first we'll go cc skeleton list and because we're using s CSS we can nest inside and so I'm going to say ul the ul that's inside and so this is going to target any ul elements that is a child of this outside one that gets the CC skeleton list class trips me up every time I see it in somebody else's cabbage I mean I know what it is but it bothers me no you don't like the nesting no it bothers I don't know it's so much neater and clear in so the way that she prefers to do it is the traditional CSS style which would look like this now s CSS is a is basically a preprocessor and what it's going to do is it's going to take this markup and it's going to convert it to this markup in the final rendered CSS stylesheet so this is just syntactic sugar basically to help make it easier to comprehend the CSS overall I guess for me personally the reason I like this one is because if I want to get all of the styles for this particular component I can just copy the whole the whole gist of it here so it does have its advantages in some places honestly though if you're doing a will probably and we may end up breaking this one down a little bit more as we go and shuffling some stuff off to the theme I feel like most of the time if you get a really good theme set up you don't run into this so much Payet X those with you he says he likes the other way [Music] I'm not numbered alright so list I'll type none I'll get rid of the padding for now we'll crop we'll probably put the padding elsewhere you want me to put the border on now no okay there's no border by default so we should be fine there oh because you remove those classes and the borders on this classes right all right so now our bulleted list is gone and now we've just got a pile of text junk okay okay so do you have something in mind for hell you wanted me to go about it first of all I like to do kind of a I like to do kind of a flirty card look but it does better when you have the page not white so you change the background color of the page - yeah I like Greg hmm which I can give me the hex code I'm very picky about my grades let's say you do I want to say that there's a bootstrap variable for that so let's go to our bootstrap 3s CSS variables in github body background and I think there's also like a special one for the home page that may be specific to service portal now let's say yes that's variables nada well let's check it in my theme then maybe I can drop it in the theme was that just using La Jolla theme mm-hmm body background for inverse background that's it just those two okay there we go there's some more backgrounds but success but in primary all the backgrounds okay I'll stick it in the portal record so to specify you have a hex code for that one and that's just what I like I forget where I got that one other at the other ones I'll use is a illustrator has some color swatches for grays and I'll use those but a client has a specific shade of pray that they use in their style guide I'll use that and do shading them off of that okay body background thoughts too so you know you want your panel background to be white it'll show up very nicely is it changed okay I can't tell I saw it changed promise okay I will take your word for it well I'm down here your screen is tilted in such a way that the color is really weird over here so I could tell that it changed okay alright so we got our background set and so I'm assuming you want me to make the you want to go with the white background so we'll make the whole background color CSS box shadows to pixel to pixel by pixel and then use the RGB a to do two times two to five RGB a yeah okay I start with that funk shadow to pixel to pixel and what those numbers do the first two you said two to five yeah the first two numbers give you the X&Y offset and then the last one I think is your blur how far out it's going to blur and then the last number if you want to do an opacity you want to use our DBA you can however use your sass variable colors and you can also use hex code in this but this is the easiest way to use opacity I believe I want to say that hex code may actually support the Alpha layer now I don't know how cross cross brows are supported that is down o pasady needs to come down so yeah that's a little dark you don't want to look like you want it to be real subtle and that's the key and a lot of these little design items is how's that that's good maybe a little too subtle - a little - Rath would you change it from I change it from point five two point zero five are you serious no do like point - well that's a big like 50% opacity versus doesn't drive this right off a cliff will be good see you've got just enough and then if you wanted it the that blur and that offset is gonna control how off the page it looks think about the shadow of a piece of paper you're holding over your desk I don't notice now what the big deal was I still had a five in the number oh my gosh okay your let's work on the heading we need to put padding around the whole box and the way I like to handle that is by using another layer give with just padding all around it but no okay and well and that depends on where you're looking to put your borders - actually I might do a border you can start with a one pixel border where we're going we don't need this is kind of made a personal gripe that I have I like the out of box especially the newer themes for service portal but one thing I like to try and avoid is wearing out my users eyes with boxes and boxes and boxes and boxes when you have just listless listless list and each list item has a border around it it's a lot of wine so what I like to do is take out your unnecessary lines I'm already using EMS I feel like I made a mistake with that but we'll go with it lately I've been trying to shift from using em2 route a.m. just because route a.m. gives you greater consistency EMS each time you use an e/m so like if I specify a font size eeehm here and then another font size eeehm here and then another font size eeehm here when they're nested like that they multiply on one another whereas the root M is always referenced to your route elements for base font size basically so I've been trying to get back to the root EMS and I'm gonna take a risk here real quick and just see if my EMS and my route EMS are anywhere in the ballpark of each other by the way Andrew likes my black shadows - yeah well what happened I usually do like 15 pixels I don't know what that translates to in rooms you call it rims or is it like REM you have to spell out the letters oh heck if I know oh that works okay let's go down the tile all right we're good on the title you gotta go back to coding okay there um where is the time tunnel it doesn't have a class at all just ended it's just on a different Lane I can give you a title um like a h3 give it the class h3 do we want to specify an h3 on it or do we want to give it a class we can give it a class because the thing about the H the the heading titles that bootstrap use is that ServiceNow uses they come with a lot of margin attached in this way we can this way we can like pick the margin and all that yeah I will say what I'm setting up a service portal one of the first things I do is set typography I like to get away from service from the system fonts by using google fonts or base64 encoding or something like that in a separate CSS include I will set up each of the headings for the font family I'm using and I've tended to stick with the out of box sizes and I'll just change them on a widget basis funny to see all this should be handled in ideally in a CSS include outside so all you're doing is attaching the the appropriate typographical heading class and you know how many thing put in here burial alright so I'm gonna want to say it was custom no because it wasn't awesome ok told you know what's not awesome alright so second cycle tton skeleton bliss title alright let's start with 24 pixels and see what I think of it hmm this is custom EMS um let's go for REMS yet REMS to friends the OtterBox uses pixel sizes to the challenge well and again I to use the EMS and our EMS because it gives you if you go back and you decide to change this later you know once upon a time twelve point or twelve pixel font was the most common font size on the web just by nature and screen sizes screen resolutions you know and everything else in and so there was that that fairly standard size that was used across the board these days the it's more typical to see 16 pixel and 18 pixel font base font sizes and some sites I've seen going up as far as 24 and when you specify everything in terms of pixel sizes then when you ultimately go back and try to adjust that you have to adjust every single class as you go through you have to adjust every single class where you've used pixels but if you view EMS and our EMS then everything is proportional to a base value and all you have to do is change the base value and everything else responds to it is this an everyday Jase asks if this is an everyday thing um this is a anytime I can work on site project type stuff in between kids and work and if I get up early enough and get my regular job done in time then yes so far it's worked out really well but I don't think it's going to be an everyday everyday sort of thing be kind of nice though you're nodding your head but in disagree I bumped up bumped it up to 2.5 or Eames okay so I probably need to change that in here okay can we change the font can we change the font yes probably not easily right why mean easily as relative because why don't we fix everything else and then we can go back for the floor okay you need some padding what we're gonna do to this heading is we're gonna give it a underline okay so you know using just an underline no we're like oh border yeah that's what I was gonna say under excited but underlined you want it to like go all the way across and giving it like a two pixel border border bottom mm-hmm to pixel solid what colors are we do we have colored lurk not barks dude blue just to show what it does and then we can pick a color because the other thing that I like to do when I'm setting up a portal or diving into widgets is to set up my color sailor Colin yeah see um is there padding under there padding under under the board no under the title hmm it was usually I put like five pixels just a little bit of just oh just a little bit of padding under it oh it doesn't seem to need it that's why I'm wondering if there's already padding there oh that's fine now so if you want to know what padding's there we can right click inspect element and if there was padding we would see like a little green box so let me add some padding real quick 1 a.m. for example and you can see that the that over here it highlights in green the padding margin is highlighted in orange and then the the main content box is highlighted in blue and you can see a diagram of oh and borders in yellow I forgot about border but you can see the box model down here and you can see each of them highlighted in context which is amazing there we go see what that inner padding that we we set up did was it sets it so that line going across doesn't completely cut off but it's like it's more like the heading to a list and less like the panel on a window or something like that yeah the heading on window or whatever so now we need some padding to separate our title from our list items so now do we want to look well here let me just show you one way I can do that and I know I'm mixing the nesting and not nesting and never cross the streams I don't like messing it too far I some initial nesting but I don't like going too far with it see if I'm gonna nest it I'm gonna nest it like no way no no let's go point five am the star and see where that gets us see where a crash course on padding versus margin so like is it enough to have it butt up against the top as long as there's there's padding within the that the list item or does it have to have I would like a little more to separate the list items and the other thing is we're gonna put a border in between each of the list items but it's not gonna be real boxy we're talking something light very um that's too much why don't you do that for cuz we're gonna go for one side for the other and we'll bounce back and forth till we find something in the middle mind you in the early days of service portal he would put it up on our projector screen and I'd be like remove it this way note that way she will move it one pixel at a time see you need additional space at the top of the list because you got the top and bottom margin here in between so it's a wider space but see at the top it's still got it it's not big lead so big Lee Piggly Wiggly alright so how about we add it in the margin I don't like using pixels oh well and this is going to make it the same as this here I'm a pixel not see just the word I do welcome mark Scott how do you use percentages and stuff though and yes Jase that that was before she actually crossed over and started developing on service portal she's been she's been pushing pushing my pixels around for a very long time now it's more why I told you pencils yeah I see what you're going for but I have to manage the code side of it sorry I'm sorry you'll understand why soon I'm sure I will but in the meantime there's not enough space between that list and its head so it's looking like you're not wanting it to be the same then what do you mean bottom that margin bottom is 7.5 and 7.5 padding tops so they are so there's the same amount of space between that blue line and that text as there is in between yeah well actually it might be the line height making difference and yes some a good bit of this is me just putting in a value I think is approximate I have certain values I'll go to like 20 20 pixels of padding or margin is like my go to what I'm trying to set something up and I look at it and I don't like that now look at it and I don't like that do you like that yeah like that okay now you want to put a border bottom here in between each of your indictments in between the list items all right so to get this one order bottom one pixel solid - OH - OH - CJ's F - f - f - and then I think we also may end up needing to negate the last child or something like that yep you negate the last child or alternatively you can do it on the classic a my first child I can see it see it's just enough you don't want it to be a lot we may we may want to go a little darker but you don't want to go much darker and Jase as far as uh where do you go how much space needs to be there I like there to be enough space to differentiate like this is your heading then you have your list items I he's all about refreshing with f5 so I don't know I feel like when there's even spacing between the items it makes it feel like the heading is just another item in the list so I like to give a little more separation than that kind of give it room to breathe that needs to be darker well maybe that's just your monitor can't tell if there's a line over here or not there isn't is it just a separation between the between the widgets do you know what I gotta fix that real quick get some margin Bob yeah we're gonna get we gotta give some are you referring to the way I just talked about spacing it out Jase okay I feel better now I mean it's not great but it's better that's there nope I don't feel better hmm I don't feel better it's not enough okay now I feel feeling better is not you can't code based on feeling better you have it's there's got to be a point search your feelings you know that all right okay yeah III scribe to the TLA our method of this that looks about right okay now I feel like I should have gone the other way feel like I should have done margin top not margin bottom it's okay she loved it I it'll be fine this is fine wanna flip it no that's not the world and we should do this while drinking I feel better about that yeah I feel better about that - nothing drinking the margin I think you should feel better about we should do this live at knowledge while drinking now that's that's life coding happy hours stay well we should do it with them then that sounds like a plan I've never watched live coding barns sorry right okay so next we need to talk about the information within these list items and Jason case you missed it t lar that looks about right yep alright sorry what were you doing so another reason why typography is important you have your list items in here you have enough separation so you can visually look and see and might differentiate among the different list items but uh one thing that we're missing is hierarchy one thing that typography can do using your headings or different font styles and what have you no do not put that in Comic Sans one thing is you can establish the hierarchy which basically means you're showing the user which information is the most important the the normal ListView does this by putting whatever you list is the primary like the request on a number and all that as a little bit larger and in a more prominent Jase is trying to trigger me I swear no I do like mono fonts but I like some amount of words brain what's the word when they look different dress I like some amount of contrast like right now I'm in love with railway which is just a Google font and I might use that for my headings and all that and I may use that for my primary item like your primary bit of information like the request item number here but then these other ones I would have in the system font or something else like Roboto or something like that so we need to create some visual hierarchy here okay yes there are so how are we gonna create that hierarchy well you gotta go look at the thing what thing the code thing Oh coach thing Clank mmm okay so your list primary information I don't have any classes on these items you have no clients that see I will use some bootstrap classes because I'm noobish like that I guess I don't know now the bootstrap classes are fine just I plan on using some of these components that I make later on when I build my own master theme and I don't want bootstraps interference okay it's okay Jase I appreciate your love of mono fonts I can give you classes that I I am a certified font snob I like geometric fonts more right now those are those are uh fonts where the letter forms take more geometric shapes like the O's or more perfect circles things of that nature Jase are you a font snob and you're just not willing to say you could change the fonts now it would make me feel better you should dive into the deep into the pool go check out liked Eiffel is a website that I go to to look at about there yet font parents we're not there yet why we're totally not there yet what do you mean we're not there yet cuz I still have a blue line here we need to use like this color up there that one yeah alright so let's change our blue - what is that brand primary I think in it a literal ruler to the screen wow I've never seen that before mark is that it I can't tell I'm really bad at saying what the people in chat are saying so when somebody listens to this video later they're gonna be like what is she talking about sorry mark commented that he used to work for a designer that would take a literal ruler to the screen he says he was never did not designed snob for anything 1 I am for certain things I'm here to spread the good news about white space and how it is not wasted space I have not heard of fraktur is that how you pronounce that what is that now I have to look it up alright I just applied the brand primary color that is not the same as the nav bar color in this particular case oh that's so pretty I just lost her she's now checking out fraktur alright folks were on our own now no we're not Comic Sans here we come fracture is a very pretty gothic calligraphy script thank your old style Dark Ages so I'm very bad at describing things stuff yeah okay all right the line so I've given you classes okay so what are we gonna do okay we need that title bigger right yeah that tell me solicitor title okay now you say that green color because that's your primary bit of information I do like the way the out of box simplest gives you that visual hierarchy is they don't just do it with font sizes they also do it with colors making that secondary information the text muted class you're on the air live right the whole world can see live everybody can hear you so don't request anything embarrassing [Laughter] y'all he's all nervous and stuff hold on I got to catch up on the my dad yes all right let's see know what about them so that can still be a green color you said yeah hold on I have to catch up on chat Oh mark claimed that this designer made him read a typography book and you said isn't that his job no no everybody should know about good typography mark he did you a favor I did notice Jays talking about this font that there was an episode of 99% invisible that uh that was dealing with it and I'll have to say if y'all have never listened to Roman Mars talk about design it's mesmerizing his podcast is really interesting because it's not just like web design or like print design it's like the design of all kinds of different things so y'all should give it a listen what are you doing messing with numbers we were working on the title sighs that's fine I like that that's fine okay why is that on a different line now why is what on it definitely see this right here where Apple iPad 3 is on a different line that's not the that's not the title on that one it goes title description meta oh well there's a little dot there dot there yeah that's because of fix the dot she'll display value so basically the display value on this one has no value not what we wanted Mark said if I wasn't waist deep converting a system from 1.2 billion rows to an API and focusing trivalent yeah I don't why me the font would be pretty trivial to me to at that point that didn't go well though I have to say you should never discount see if there it was just an empty string oh okay we can play with that more some other time okay the the little details there on the bottom row need to be grayed out I like the way I am following a lot of the styles that the okay so let's do well I see see skeleton list [Music] uh-huh-huh-huh a lot of times the design comes down to the content you're working with with the information you have in the simplest a lot of the ways that they put the information in there is just fine so I don't tend to deviate from it that much I may change out some of the styles of the outer panel and the heading but the actual hierarchy and the way the list items display act I tend to stick with what comes out of box unless there the style guide of the client pushes me in another direction well we got for color what is this this is the meta Oh Dan you wanted a great dude the text muted color why do I knew these things I bet Nathan first when those walls and bobs back of his hand and I floated it over the right aligned it to the right okay so you align it to the right mm-hmm but why fun no don't like it because when you have the state active it sits over on the right because when you as what um or maybe this isn't the custom list widget that I do but when I have the state of the unlike whether it's opened or closed or whatever that sits on the right over by itself over here yeah yeah that's not this one okay that's mine then sorry well it's not in this one mm-hmm or the other thing is could you make it so they're like on the same level on the same level yeah Oh like that one there and that one's up on the same line next to the description yeah that may conflict with the longer ones it might well which is something you do need to keep in mind is how it's gonna look with different sizes of copy and all that just put it back on the left okay now that said if we wanted to we probably could have used flexbox to position 2 to position some of those elements can I tell y'all about flexbox and how much I love it ok mark puts out puts makes a great point designers do great work but it is a separation of concerns and it's ok that you're not great with design and it is what you say but I am I'm not the best at coding I know what the functionality should look like and know what it should do but I found that pairing with somebody that's strong with coding it lends to a superior product in the end I do have their their points and I think they're equally as important is that the math for the hex code yeah so hex hex code is just a hexadecimal representation of of the numerical red blue green or red green blue values so for example let me grab a so you say hexadecimal and I think about that old show from the 90s reboot did you watch that show so generally in CSS what the developers get to shoot nerf guns so that the the main values are usually working with with colors is going to be red green and blue and you're mixing those different colors together so for example and it's on a scale up to 255 so 255 255 255 is full red full green full blue which all the colors mixed together help I don't do color wheels that's why that's white ok zero zero zero is black that's right the absence of color black the presence of all colors has got it okay so this one would be the hundred percent presence of red green and blue and then converting that to hexadecimal you're just doing quite literally a hexadecimal conversion base-16 I think there's something like that so if we turn around and we go to decimal to hex well I was hoping I would get to Google one but that's fine so if I go 255 255 is FF and so that way in that way this RGB is equivalent to ffffff and then we just stick the the number sign up front to indicate that it's a hexadecimal value that it's a hexadecimal color you're putting math in my art I don't appreciate that oh there's a lot of math and art well even even beyond that even just from even just from colors because there's a couple of other color scales for example there's HSL and a couple of other ones and basically what is it peloton not the bicycle by the way James I did see your here thank you for joining us I think it was the math nice so let's see fine-tune not what I'm looking for how do I switch from I thought this one let me switch from between the different scales coolers does I think if you want to use it coolers mm-hmm y'all I love this website it makes me so happy now it's not what I'm looking for I actually want the color wheel itself mark said the American education system did us some dirty I think so if James was learning uh how to calculate hex codes in uh school uh we don't never got some of that it is James and I have to say that I know more from a practical standpoint more than the math behind it because I do a lot of work in Illustrator but it's really neat now basically there's if you look into some of the SCSS calculations they have a number of color functions light and dark in and there's there's a whole list of other ones and basically it is computing colors based on these numeric values based on the RGB based on the HSL and it's it's really interesting when you dig into it because I've found that you can actually come up with really really good color palettes for web design just by for example setting fixing certain values that you know fixing the HSM that the s and the L and just pivoting the hue around the color wheel you can get really really solid color palettes that way but yeah there's there's a lot of stuff in color theory that's that's really fascinating and when you look at the math behind some of it it's James I think anybody uses HSL and Jase asked what it is it's another it's like RGB it stands for hue saturation lightness so yeah HSL and HSV we could get into color theory after this yeah pretty much Jase is just it's another way to calculate yeah color but your hue is red to purple the actual hue then the saturation is kind of if it has no saturation its grayscale if it's very saturated it's very colorful i-i'll of using HSL for actually using HSL is how we came up with the selection of different colors for the different apps that's in our suite so for glide fast you know we were trying to come up with logos for an app suite that we were putting together and so we wanted all the different applications to have colors that were comparable to one another colors that worked really well together so what we did was we found ourselves a nice muted saturation and then we took and we moved the the hue slider at equal intervals across the spectrum so we basically mathematically computed an entire color palette 2 to 2 so that we had a different color for each application and they were equal those colors were equally spaced apart and you know one of those colors and I've shared this one before so I'm comfortable sharing it here storyboard huh yeah so this this orange color here is one of the colors that was selected as one of those colors and then we turn around and we worked our way around the different hues in the spectrum moving an equal distance from each two to come up with some of these different colors oh yeah you can see it in the CRM Pro I you know there's there's another huge along that same saturation and lightness but yeah there you can go down a really really deep rabbit hole on color theory design white space grids it's color psychology Oh color psychology its mind-blowing stuff in a past life I was licensed to do hair they used it there as well oh yeah yeah the lady that does our hair actually used to be a graphic designer and she carries a la those color principles over into her work now not that she's done that we do anything very colorful with our hair but yes she keeps trying man she keeps trying to sell me on it though all right so anything else that we need to do here before we get to fonts I like a hover effect a hover effect it does that light thing but I like doing the background color just to do something show them a little something different okay so in order to do hover and if the background cover color rather matches those borders we put in between each item and the borders seem to disappear went on the hover effect and it doesn't look like you have border and background hover and so you want to be the same colors as the bottom border so we've got to use the hover pseudo selector on this one now one thing I want to point out that not a lot of people or honestly a lot of people overlook I've answered this question for lots of folks that are trying to find ways to select a certain element so for example a lot of people think that these pseudo elements or sorry these pseudo selectors have to come at the end of your CSS selector that's not true that's not the case at all you can put these pseudo selectors anywhere in the overall selector so for example I can turn around and say L I hover a or let's say that I wanted to target the title for example I could grab this class here and I could come in here and basically anytime I hovered on the Li element it would change the properties of the of the title that is a child of the hover element so don't feel like you have to stick these these pseudo selectors at the end they you know they're very versatile you can use them anywhere in your CSS selector so we wanted to throw a background color instead and what color did we and she's gone and yes this is absolutely normal this is exactly how this goes she'll come in she'll push some pixels she'll disappear I'll be completely lost for a while usually I'll spend this time trying to break things and you know making things look absolutely obnoxious so that when she gets back it looks horrible but I'm not gonna I'm gonna spare her that one this time what what do you sparing me I was telling them that usually if you walk away I'll turn around and I'll change something and manipulate it to make it horrible looking to bother you [Music] James that's not funny background color tomato they do so let's talk about color psychology the color red invokes feelings of danger or warning in your users so you want to use red very very sparingly why are you doing sorry you went off on explanation I needed a killer tomato it is oh that's a pretty color though but no but I like how another thing it looks bright written on this screen it looks like this yeah yeah so red something you have to keep in mind when picking colors and this is one of the most irritating things ever different displays I don't know what's the motto at you know different displays we'll just we'll show the color differently so every display every monitor has a color accuracy and some are more accurate than others so a you know a MacBook a most of most of your Mac displays have really really really high color accuracy my samsung monitor over here that I'm actually showing you guys from has trash for color accuracy its color accuracy is terrible way off from what it's supposed to be now I don't know if I I'm guessing yet so your your color your monitor will influence the color that you're seeing so I don't think you're gonna see the color exactly as I see it but on my monitor it's completely wrong and it's completely different from what I'm what I see when I move it over to my macbook oh Mark Scott says you can even buy devices to calibrate monitor coloring if you're on that level I might have to look into that because this that might be depth I don't know I don't know me if it's cheaper than just buying the high color accuracy monitors I might have to look into that I wanna hide color accuracy monitors my birthday's in November we'll have to look into that we got absolutely James yeah for print design color calibration is totally necessary I the Pantone swatch books and I used them religiously for print design projects oh my gosh remember the first print project that you sent in to be done oh it came back so horribly off from what was on screen I learned my lesson learn yes yes I've learned about a hundred fifty two hundred dollars that's not too bad at all all right so what color did you actually want there other than Samata what out I said are the same colors that will line color up border bomb because that way when you hover the borders meld into that background color so it doesn't look like you've got a line on top of the on top of that hover it looks more seamless feeling good about that yeah I'm feeling good about all right what else you want the fonts I don't know why you say 1 fonts all right it's like the first thing I'd say heroes James Neil's wife is named Sarah with an H good she spells it right and she's a graphic designer oh we have to go to England now and have like dinner with them or something yes [Laughter] it's like everybody who works with service mail tends to have biblical names we haven't had any good puns okay you're all gone off the job sorry my bad all right so wants railway do it railway is that a Google Form it is a Google thank you is a geographic google font there's very pretty squirrel I might be using it in two of the applications I am developing right now all right so in order to use google fonts google fonts are pretty payments i can select the font family and it's going to give me import statement that I can use so I can copy this import statement and then I can drop this into I'm still a theme what I like it you know I you know I've heard a lot of divided opinions about the new service now burning I really like it and I really like the way that their marketing team has handled the the brand with all of their campaigns and stuff I like it because I love Donuts Marc Scott asked if railways gonna be Roberto three years ago it may be and fonts definitely become more they definitely fall in and out of fashion the same way clothes or anything else does I just happen to like it Jase asked me if I liked the toilet seat it's not a toilet seat it's a concerted look towards being more people centric it's the little user icon and we all know it's not toilet seat very good donut donut double o una but the color the color palette they went with was much more friendly it's easier on the eyes and like I said the way that they have the extended color palette with the lavenders and the blues it's in the way they use people and a lot of their marketing campaigns and stuff it's I think it achieved the intended objective of being more people centric yeah exactly it's a donut if you've been following along with what I'm doing I am switching out my theme so that I can manipulate it cuz I don't want to touch the La Jolla theme that one's not mine that is service snails themed and they don't want me messing it up so I've created a co-creative theme we'll quickly reload I don't know did that completely mess things up things up I wasn't paying attention [Music] no it actually stayed pretty consistent yes Andrew says you're getting a picture at Universal at the Homer donut stand so has it been confirmed are we going to Universal can anybody put in to like put in a word and say that that needs to happen alright so I am ready to import this font now so what I was saying before is I've got to grab this import statement and then I am going to go to my theme actually I got to create a CSS record this CSS stylesheet first you grab the whole import statement yeah boom oh I grab me the other thing you can do is do it as a URL and just paste in the URL as a dependency right yeah so you can do it as an import statement that's one way the alternative approach would be creating a dependency so let's leave real quick not a widget dependency I can't remember this approach I don't use it enough mark asked how do you pronounce it is it Jala or is at La Jolla La Jolla La Jolla so is it oh I've been saying it wrong all this time I have no idea I like the idea of being like lalala I kind of like Mahalo um where was I was trying to fit so what's this approach that you use of I go to my theme record you go to your theme record I go down I do a new CSS include and I pick you pick URL oh okay then I put my URL in okay well that's whew okay we'll go with that I like easy we'll go with this approach mark you're probably right what something new everyday CSS include railway oh yeah I can't get over all right so now Clark says he can place where you're from on how you pronounce it so where's Travis from mark that's the $10,000 question man that is a $10,000 question um all right so I got the railway font you went the whole thing rolling you did where did he answer my question about yes we're going to universe so ah thank you Andrew you know an important thing you know big work conference and I'm like oh good Universal I was so jealous when terms gotta go few years ago yes Oh destructed again so what needs to be real way are we doing just the titles and role in just the primary number title and title yeah all right so that one's the font-family like you're from the Midwest Midwest wow I don't think I've gotten that one before Wow the correct answer to where as Travis from is yes you've lived in the southeastern United States longer than you have any other region of I I have but you know I was born in Virginia I lived in Jersey forever lived in North Carolina for a while lived down here for a while down here being Alabama I think I think Alabama is rapidly becoming the I don't know if that's the winner or not Strang way past where I design things stuff loaded on the page where I wanted incorrect data my work is done good Co Andrew railway are these comma separated yes sir songs yes like that yes I shot government doesn't work that's future trust this probably Andrew says that North Carolina is greater than all those others are you from oh gosh no don't please don't do it Andrew don't do it let's see all right so I got railway in there no I can't play that song every time I Drive in the state anymore because we have turned hammer away that looks nice would you like something else no I think and see okay first of all there's only one item it's the last one and it shouldn't have the line there oh right I forgot to remove it a lot I can't even see the lines anyway well then make it darker or something no these kind of things you want it just noticeable to do its job and then disappear alright so for that we need you well I was at last yes North Carolina is the best state in the Union in my humble opinion that's the humble that's accurate alright did that get rid of it yeah the right places yes not the other places not the other do you okay I don't know I can actually kind of see it from this angle it's well it's it it's it's the it's it's the monitor over here can you see I can actually see it over here better on the small little the OBS the screen preview now another thing I would do which I don't know if we have time when I'm developing I do try to start with what a mobile view would look like and then branched out mostly because doing it the other way is painful fortunately simplest is one of those things that is harder to mess up so i NC bigger than yeah I did notice that what's up with that why aren't why are the learners bigger than the numbers elevating the numbers aren't bigger they are I forget what the technical term is for it but in some fonts the numbers are there push down or up depending on what number it is it's it's a it's a feature of it's a feature of railway yeah I call it a bug it's a feature of a number of typefaces some of them have it to where you can choose whether or not the numbers appear like that or appear normally so you're saying that we're happy with that okay so what you have is you taken out a lot of those lines so you can focus more on the content instead of those visual barriers between each stuff like that it's a little more clean I tend to like the panel the regular panel heading look when be heading actually does more than just showcase entitlement when you're just putting a title at the top of a list like we are here I prefer a more simple okay all right well with that there's nothing else that you're wanting to change at this point not right now okay we were just going for something passive yeah we're trying to keep it pretty simple so the last thing that I want to do here CSS default okay so for remember correctly do you remember where defaults supposed to be added a lot of words not a word what you're going to your own gum not a word oh my god going to its own guy I can't remember where default is supposed to go but I remember pass Travis answered this question for me somewhere use default on variables in the theme record in Kingston and later see I don't remember these things that I just I write it down okay yeah but it encourages baby babbles is this is my mini-me over here alright so what I wanted to do is I wanted to introduce some CAS CSS variables so for example we're about okay so this one can be dollar sign text muted which is coming from bootstrap s CSS variables and oddly enough I tend not to shy I tend to try oh goodness continue we were holding him incorrectly oddly enough I don't try to avoid the bootstrap s CSS variables in the same way that I try to avoid the bootstrap CSS itself when doing custom stuff I actually find that reusing some of the bootstrap s CSS variables to a certain extent especially when it comes to some of them base colors it actually helps improve the portability of themes a little bit so I do try to use that reuse them a little bit and actually I'm going to go in a slightly different direction on this one to start with and that's going to be CC skeleton medic color now we'll go font color cuz I really don't like the way that CSS simplifies to just color I always type font color alright so I'm going to create this variable here glad you asked so what I like to do is I like to actually set up multiple tiers and I'm gonna pull up my iPad screen and hopefully it is displayed a hot is perfect are you gonna draw I'm gonna draw handy-dandy notebook so I like to create hierarchies of SCSS variables and the way that this ends up working is so you've got your component and then you've got a theme well component slash widget and then you've got your portal level so what I like to do is within my components I will create stuff like let like our CC skeleton meta font color and it won't let me keep drawing off that side hold on wait nope that didn't work apparently I'm stuck with that you know and I'll turn around and I may actually reduce the I may reduce that to like CCS or something like that I don't know we'll see um but you know and then I may turn around and in do Cece skeleton ever color you know and I'll create a set of variables at the component level then at the theme level I'll create I'll turn around and I'll create some some next level up so you know at the theme level I might create a you know you've got your brand primary for example so I'll create a color palette I'll create a color palette I'll create a let's say card padding for example you know I will create sensible defaults at the theme level and then what I'll do is I'll assign you know our let's see what was that one you told me text muted so then I'll turn around and I'll assign this one to the text muted color now what this does is it creates a very elegant system where if you go back and look at a video that Sarah put together previously where she changes like eight CSS variables and completely redoes the entire the entire portal theme like the whole portal theme Flis i want to see if I can find that since we're actually talking about CSS today let's say can I find it can't find it can I find it can't find it medicals hosts hosts here we go let's see what happens don't worry it's muted um supposed to be muted so it starts out this blue color then she goes in and she changes a couple SCSS variables and the result is this color here was that so with just a few s CSS variables it goes from this to that by setting up your themes with these different levels of s CSS variables Andrew Barnes found it that was buried quite well well III think I may have missed the context of what you were talking about there mark but the but when you set up your your s CSS themes in a structured way you can easily change a few top-level s CSS variables to get a dramatically different result but it also gives you the ability to to drill down and change these really really my new individual ones without having to go in and oh the Universal Studios thing and goodnight James have a good one but so setting up your s CSS variables in this way allows you to do really robust changes at the theme level without having to dive in and break your widgets you know so that way you don't end up with a bunch of different versions of your widgets in different instances and stuff like that which you know if you're building for if you're an in-house developer for an organization maybe that's not as important to you you know but for those in the consulting circles where we're going from customer to customer I you know it can get annoying when you have to go back and support an older version of a widget and you're like okay how did we put this one how do we put this one together back then so this is one of those things that I like to do to you know make life easier on myself so what this looks like is I can assign the CC skeleton metaphor color to the text muted color here at the theme level I still put a question mark there did it twice there we go I'm so I'm going to give myself a little comment there to note where I actually took over from the mahalo or however we're supposed to pronounce it and then we can turn around and save this and this can also help you out if you have multiple portals with the same organization so now I can reuse my widgets I can reuse my theme across multiple portals and on a per portal basis I can potentially tweak some of those values if I need to so now if I save this it should still be muted yeah so there we go it's still I think that's still muted let's see don't think it's seven one seven one seven one now I don't know maybe it is I can find out I'm not the color expert I feel like it's a little bit darker I guess I can just inspect Elliman find out probably the easier approach I will 666 it's sick well I mean it's six sixes but it because it's six of the same digit it can be short-handed two six six six all right so yeah I mean essentially what I would normally do is I would go through and I may do this later on some other time might might not stream this one I might just work on this one quietly some random 3 a.m. or something yeah I know but usually what I would do is I would go through here and like font families I would turn around and I would replace that with maybe a cc skeleton title thawne you know go through and replace these different background colors and I would give a bunch of you know knobs and levers to improve what this what I can change about the styles of this widget without actually having to dive into the code of it exact and and that's another thing in it when you look at a lot of the native service portal widgets that exist there's a lot of little variations you know some of them will use an h2 in the in the panel some of them we use an h1 in the panel and there's a lot of differences between the widgets that are created by the different teams at ServiceNow and it can make things very complicated for trying to create very simple themes now I haven't dug so much into the the the the lauhala la jolla la jolla it's la jolla okay well good so the the Lua theme you know I haven't dug as much into that one to see if there are more very because I mean certainly it seems there are more variables in it than what I am accustomed to seeing in the previous version so it's entirely possible that there's better structure in some of the more recent widgets but I do still see a lot of variation across widgets in different instances that I'm working in so this is one thing that when I'm building custom widgets and custom themes I pay very close attention to to try and maintain as much continuity as possible across and again that's where those theme level scss variables come into play in widgets and themes where I have put a lot of time and effort into getting it just right you will see very very few font sizes borders you'll see very few actual declarations in my widgets most of it is variables with sensible default sets somewhere along the way but with that I'm actually pretty happy with what we've got on this widget so far and I think I think I feel pretty good with wrapping up this chapter calling this one done enough that when I actually need to use it for a customer it'll be there and waiting for me I actually think next I am going to be moving away from service portal specific stuff I'm sorry it'll get it'll circle back to service portal eventually it always circles back to service portal but I have an obsession over a certain app that has been driving me nuts ever since a certain higher ed organization planted the seed in my mind and it has been just tearing at me for probably about six months now and I want to build this application but it's been a struggle finding time for it so I think what I'm going to do is take that as my next project is building this app and I am going to leave it at that for now and not actually unveil what the app is well I'll leave that as a teaser a cliffhanger if you will why are you shaking your head at me I know but I do I love them I love the excitement the thrill the drama only in the theater that all right so with that guys I am going to wrap this one up for tonight and wrap up this chapter on the skeleton loading you know all of this all for that little quick brief microsecond of an animation but I'm feeling really good about well I mean if if it was like day job effort this is what about seven hours in total eight hours in total so you know in all this widget as you see it here is about one day's worth of work and at least one hour that was just me fiddling with equal signs so you know really just a great testament to the capabilities of service portal and you know how easy it makes it for building these components it really makes snapping this stuff together quick I thoroughly enjoy it so next time we will be digging into something new a scoped application and hopefully I will see you guys then fifteen if you're consulting mark Scott says I will neither confirm nor deny I don't have a send off until next time this is Travis toasted with cream I hope there's a next time this is Travis toasting creative thanks a lot guys see you next time