title
CSS Variables Tutorial (CSS Custom Properties)

description
In this video we will dive into CSS variables, also called CSS custom properties. We can now have dynamic values in our CSS without the use of a CSS pre-processor like Sass or Less SPONSOR: Check out Coding Dojo - http://www.codingdojo.com/l/yt/tr CODE: Codepen for this video https://codepen.io/bradtraversy/pen/VyPNOr 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'CSS Variables Tutorial (CSS Custom Properties)', 'heatmap': [{'end': 222.874, 'start': 186.886, 'weight': 0.859}, {'end': 447.696, 'start': 425.11, 'weight': 0.874}, {'end': 489.603, 'start': 473.677, 'weight': 0.943}, {'end': 735.557, 'start': 694.87, 'weight': 0.751}, {'end': 1019.838, 'start': 940.532, 'weight': 0.756}, {'end': 1181.031, 'start': 1034.329, 'weight': 0.78}], 'summary': 'This tutorial explores css variables, comparing them with preprocessors, demonstrating their usage in styling and layout, implementing box shadows, modifying properties, and manipulating colors using javascript, emphasizing the potential diminishing need for preprocessors in the future.', 'chapters': [{'end': 91.343, 'segs': [{'end': 91.343, 'src': 'embed', 'start': 30.687, 'weight': 0, 'content': [{'end': 35.048, 'text': "And that's something that's going to be very opinionated and something that comes down to preference.", 'start': 30.687, 'duration': 4.361}, {'end': 42.01, 'text': "As you'll see, the native custom property syntax is pretty weird and it takes a little time to get used to.", 'start': 36.008, 'duration': 6.002}, {'end': 43.65, 'text': "But then again, it's native.", 'start': 42.45, 'duration': 1.2}, {'end': 45.47, 'text': "It doesn't have to be compiled.", 'start': 44.03, 'duration': 1.44}, {'end': 47.291, 'text': 'You can access them from JavaScript.', 'start': 45.49, 'duration': 1.801}, {'end': 52.032, 'text': "But then again, even though it's supported on all modern browsers except IE,", 'start': 47.731, 'duration': 4.301}, {'end': 55.433, 'text': 'what about the people with outdated browsers or the people that are using IE??', 'start': 52.032, 'duration': 3.401}, {'end': 58.298, 'text': "you'll probably want to provide fallbacks for them.", 'start': 56.093, 'duration': 2.205}, {'end': 65.104, 'text': "With SAS, variables are just compiled down to regular CSS, and you don't have to worry about that.", 'start': 59.379, 'duration': 5.725}, {'end': 67.666, 'text': "So it's up to you to weigh the pros and cons.", 'start': 65.524, 'duration': 2.142}, {'end': 72.95, 'text': 'And of course, preprocessors like SAS do other things as well, not just variables.', 'start': 68.426, 'duration': 4.524}, {'end': 79.595, 'text': "If you ask my opinion, I think that within time, there's not going to be much need for preprocessors.", 'start': 73.85, 'duration': 5.745}, {'end': 83.518, 'text': "But that won't be for at least a couple years, in my opinion.", 'start': 80.435, 'duration': 3.083}, {'end': 85.479, 'text': 'I think CSS is advancing.', 'start': 83.818, 'duration': 1.661}, {'end': 89.322, 'text': "There's a lot of things that are coming out that are really cool.", 'start': 85.519, 'duration': 3.803}, {'end': 91.343, 'text': "so that's just my opinion.", 'start': 89.322, 'duration': 2.021}], 'summary': 'Preprocessors like sas offer benefits, but css is advancing with native custom properties and broader browser support.', 'duration': 60.656, 'max_score': 30.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I30687.jpg'}], 'start': 7.577, 'title': 'Css variables vs preprocessors', 'summary': 'Discusses the comparison between css variables and preprocessors like sas, highlighting the advantages and disadvantages of using native css custom properties and the potential diminishing need for preprocessors in the future.', 'chapters': [{'end': 91.343, 'start': 7.577, 'title': 'Css variables vs preprocessors', 'summary': 'Discusses the comparison between css variables and preprocessors like sas, highlighting the advantages and disadvantages of using native css custom properties and the potential diminishing need for preprocessors in the future.', 'duration': 83.766, 'highlights': ["The native custom property syntax is pretty weird and it takes a little time to get used to, but it's native and doesn't have to be compiled, allowing access from JavaScript.", 'Preprocessors like SAS provide the benefit of automatically compiling variables down to regular CSS, eliminating the need to worry about providing fallbacks for outdated browsers or IE users.', 'The speaker believes that there may not be much need for preprocessors in the future, as CSS is advancing with new features and capabilities.']}], 'duration': 83.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I7577.jpg', 'highlights': ['Preprocessors like SAS provide the benefit of automatically compiling variables down to regular CSS, eliminating the need to worry about providing fallbacks for outdated browsers or IE users.', "The native custom property syntax is pretty weird and it takes a little time to get used to, but it's native and doesn't have to be compiled, allowing access from JavaScript.", 'The speaker believes that there may not be much need for preprocessors in the future, as CSS is advancing with new features and capabilities.']}, {'end': 597.564, 'segs': [{'end': 112.919, 'src': 'embed', 'start': 91.343, 'weight': 0, 'content': [{'end': 101.37, 'text': "but in this video we're going to look at how to use variables in CSS and we'll even jump into some JavaScript and I'll show you how we can access the values from there.", 'start': 91.343, 'duration': 10.027}, {'end': 105.073, 'text': "we're going to create this little mini layout, nothing special now.", 'start': 101.37, 'duration': 3.703}, {'end': 112.919, 'text': 'I could show you how to use a CSS variable in three minutes, but you know I want to go in and I want to create a little layout.', 'start': 105.073, 'duration': 7.846}], 'summary': 'Learn how to use variables in css and access values in javascript to create a mini layout.', 'duration': 21.576, 'max_score': 91.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I91343.jpg'}, {'end': 157.037, 'src': 'embed', 'start': 131.244, 'weight': 4, 'content': [{'end': 137.105, 'text': 'Over 90% of their grads land jobs within three months of graduating, often making over $70,000 per year.', 'start': 131.244, 'duration': 5.861}, {'end': 141.206, 'text': 'To learn more, visit codingdojo.com or click the link in the description below.', 'start': 137.405, 'duration': 3.801}, {'end': 142.727, 'text': 'all right guys.', 'start': 141.906, 'duration': 0.821}, {'end': 149.452, 'text': "so what i've done here is i have an index.html file and a blank style.css file.", 'start': 142.727, 'duration': 6.725}, {'end': 154.595, 'text': "okay, so i've removed all the styling from the markup, and the markup is very simple.", 'start': 149.452, 'duration': 5.143}, {'end': 157.037, 'text': "it's just basically a header.", 'start': 154.595, 'duration': 2.442}], 'summary': 'Over 90% of grads land jobs within 3 months, earning $70,000+. visit codingdojo.com for more information.', 'duration': 25.793, 'max_score': 131.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I131244.jpg'}, {'end': 225.937, 'src': 'heatmap', 'start': 186.886, 'weight': 1, 'content': [{'end': 197.454, 'text': "So what I want to do first is define variables for, we'll say for, the root element.", 'start': 186.886, 'duration': 10.568}, {'end': 200.756, 'text': 'So to do that, we use colon root.', 'start': 197.634, 'duration': 3.122}, {'end': 210.744, 'text': "So anything that we put in here, any variables we define in here, we'll be able to use throughout all of the elements,", 'start': 202.978, 'duration': 7.766}, {'end': 212.586, 'text': 'throughout all the scope of the CSS.', 'start': 210.744, 'duration': 1.842}, {'end': 216.389, 'text': "So let's go ahead and define just a main background color.", 'start': 213.266, 'duration': 3.123}, {'end': 219.652, 'text': 'Now, to define a variable, you want to use dash dash.', 'start': 216.749, 'duration': 2.903}, {'end': 222.874, 'text': "And I know that that's a weird looking syntax for variables.", 'start': 219.692, 'duration': 3.182}, {'end': 225.937, 'text': "If you're used to SAS, then you're used to a money sign.", 'start': 223.275, 'duration': 2.662}], 'summary': 'Defining variables for the root element using dash dash syntax for css.', 'duration': 22.959, 'max_score': 186.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I186886.jpg'}, {'end': 450.318, 'src': 'heatmap', 'start': 425.11, 'weight': 0.874, 'content': [{'end': 431.552, 'text': "Let's also create a text color and make sure that that's light, so we'll do white for that.", 'start': 425.11, 'duration': 6.442}, {'end': 443.058, 'text': "Okay, and then down here, we can just say var, and we'll do header BG color, and then let's change the color of the text to var.", 'start': 432.553, 'duration': 10.505}, {'end': 447.696, 'text': 'header text color and save.', 'start': 446.035, 'duration': 1.661}, {'end': 450.318, 'text': 'And now we have our black background.', 'start': 447.896, 'duration': 2.422}], 'summary': 'Creating a light-colored header with white text and a black background', 'duration': 25.208, 'max_score': 425.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I425110.jpg'}, {'end': 501.708, 'src': 'heatmap', 'start': 473.677, 'weight': 3, 'content': [{'end': 475.758, 'text': 'What did I do? Oh, we need to put h1 here.', 'start': 473.677, 'duration': 2.081}, {'end': 478.959, 'text': 'All right, so that gets rid of that space.', 'start': 475.778, 'duration': 3.181}, {'end': 481.48, 'text': "So you can see we're doing more than just variables here.", 'start': 479.459, 'duration': 2.021}, {'end': 482.861, 'text': "We're just creating a little layout.", 'start': 481.5, 'duration': 1.361}, {'end': 489.603, 'text': 'Okay, so now what I want to do is show you basically what I call scoped variables.', 'start': 483.681, 'duration': 5.922}, {'end': 494.925, 'text': "I don't know if that's the correct term, but you can create variables on certain elements or certain scopes.", 'start': 489.663, 'duration': 5.262}, {'end': 498.267, 'text': "So let's say we'll put a comment here.", 'start': 495.065, 'duration': 3.202}, {'end': 501.708, 'text': "We'll say define box vars.", 'start': 498.307, 'duration': 3.401}], 'summary': 'Demonstrated creating scoped variables with h1 and layout.', 'duration': 28.031, 'max_score': 473.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I473677.jpg'}], 'start': 91.343, 'title': 'Using and styling css and javascript variables', 'summary': 'Covers using variables in css and accessing values in javascript, creating a mini layout using a grid system, and discussing the scoping of variables, while also introducing the concept of css variables and demonstrating their usage to define and apply colors, font styles, and layout dimensions.', 'chapters': [{'end': 154.595, 'start': 91.343, 'title': 'Using variables in css and javascript', 'summary': 'Covers using variables in css and accessing values in javascript, creating a mini layout using a grid system, and discussing the scoping of variables, while also promoting coding dojo as a programming school with a high job placement rate and salary potential.', 'duration': 63.252, 'highlights': ['The chapter covers using variables in CSS and accessing values in JavaScript.', 'We will create a mini layout using a grid system and discuss the scoping of variables.', 'Coding Dojo is a programming school with over 90% of their graduates landing jobs within three months, often making over $70,000 per year.']}, {'end': 597.564, 'start': 154.595, 'title': 'Css variables and styling', 'summary': 'Introduces the concept of css variables and demonstrates their usage to define and apply colors, font styles, and layout dimensions. it also showcases the use of scoped variables for specific elements and discusses their limitations in other contexts.', 'duration': 442.969, 'highlights': ['The chapter demonstrates the usage of CSS variables to define main background color, main text color, and container width, showcasing the flexibility of variables in managing design elements. The tutorial illustrates the creation of CSS variables for main background color (F4 three times), main text color (333), and container width (90%), highlighting the adaptability of variables in controlling design elements.', 'The tutorial showcases the application of CSS variables to modify the background color and text color of the header, providing an example of utilizing variables for specific design components. It exemplifies the utilization of CSS variables to adjust the background color (333) and text color (white) of the header, emphasizing the practical implementation of variables for individual design elements.', 'The chapter discusses the creation of scoped variables for specific elements like the box class, highlighting their localized applicability and limitations in other contexts. It explains the concept of scoped variables for elements such as the box class, emphasizing their restricted scope and inability to work outside their defined context.']}], 'duration': 506.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I91343.jpg', 'highlights': ['The chapter covers using variables in CSS and accessing values in JavaScript.', 'The tutorial illustrates the creation of CSS variables for main background color (F4 three times), main text color (333), and container width (90%), highlighting the adaptability of variables in controlling design elements.', 'The tutorial showcases the application of CSS variables to modify the background color and text color of the header, providing an example of utilizing variables for specific design components.', 'The chapter discusses the creation of scoped variables for specific elements like the box class, highlighting their localized applicability and limitations in other contexts.', 'Coding Dojo is a programming school with over 90% of their graduates landing jobs within three months, often making over $70,000 per year.']}, {'end': 878.001, 'segs': [{'end': 735.557, 'src': 'heatmap', 'start': 626.788, 'weight': 0, 'content': [{'end': 628.329, 'text': 'We could do pixels here.', 'start': 626.788, 'duration': 1.541}, {'end': 629.25, 'text': 'We could do like 100 pixels.', 'start': 628.369, 'duration': 0.881}, {'end': 634.733, 'text': '100 pixels, that will give us two columns, 100 pixels each.', 'start': 631.071, 'duration': 3.662}, {'end': 638.695, 'text': 'What I want to use is fractional units, so FRs.', 'start': 635.213, 'duration': 3.482}, {'end': 646.039, 'text': "So we'll say one FR for the first box and one FR for the second, which will give us two even boxes here.", 'start': 638.895, 'duration': 7.144}, {'end': 646.939, 'text': 'All right.', 'start': 646.679, 'duration': 0.26}, {'end': 656.264, 'text': "And if we want space in the middle, we can go ahead and we can say grid gap and set that to, let's say, 20 pixels gives us some space.", 'start': 646.959, 'duration': 9.305}, {'end': 660.106, 'text': "And let's just align items.", 'start': 657.224, 'duration': 2.882}, {'end': 663.176, 'text': 'to the center.', 'start': 662.355, 'duration': 0.821}, {'end': 665.478, 'text': 'All right.', 'start': 663.196, 'duration': 2.282}, {'end': 666.959, 'text': "So we'll leave that for now.", 'start': 665.598, 'duration': 1.361}, {'end': 668.58, 'text': "Let's go back down to the box.", 'start': 666.999, 'duration': 1.581}, {'end': 675.526, 'text': 'And I want to use this main color variable for a few things, actually.', 'start': 671.022, 'duration': 4.504}, {'end': 677.267, 'text': 'So first thing is going to be the border.', 'start': 675.626, 'duration': 1.641}, {'end': 681.07, 'text': "So we're going to say one pixel solid.", 'start': 677.988, 'duration': 3.082}, {'end': 685.894, 'text': "And we're going to use our main color variable.", 'start': 682.151, 'duration': 3.743}, {'end': 690.878, 'text': 'So we can go ahead and say var dash dash box main color.', 'start': 685.914, 'duration': 4.964}, {'end': 693.969, 'text': 'and save, and now we have that blue border.', 'start': 691.727, 'duration': 2.242}, {'end': 709.541, 'text': "So the H1, I also want that to have that color, so we'll say box H1 down here, and set the color to var box main color, save, and now it's blue.", 'start': 694.87, 'duration': 14.671}, {'end': 717.207, 'text': "Now, even if I were to get rid of this dot box and just have H1 and save, that's also going to be blue.", 'start': 709.882, 'duration': 7.325}, {'end': 722.786, 'text': "and if I were to add an H1 somewhere else, we'll just say h1 test.", 'start': 717.207, 'duration': 5.579}, {'end': 731.633, 'text': "you'll see, that's not blue, because this is only going to work this variable here inside of the box class,", 'start': 722.786, 'duration': 8.847}, {'end': 735.557, 'text': "even though we just used h1 here and we didn't even define box h1..", 'start': 731.633, 'duration': 3.924}], 'summary': 'Using css grid with fr units, setting grid gap and aligning items to center. utilizing main color variable for border and h1 element.', 'duration': 82.753, 'max_score': 626.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I626788.jpg'}, {'end': 769.108, 'src': 'embed', 'start': 738.079, 'weight': 4, 'content': [{'end': 739.2, 'text': "I'm just going to get rid of that.", 'start': 738.079, 'duration': 1.121}, {'end': 746.085, 'text': "So I'm just going to put that .box back there, but you don't actually need it to use the variable.", 'start': 740, 'duration': 6.085}, {'end': 750.289, 'text': 'All right, so the next thing I want to do is add some box shadow.', 'start': 746.105, 'duration': 4.184}, {'end': 758.701, 'text': 'Okay, so for box shadow, we have a few different values that we need.', 'start': 753.157, 'duration': 5.544}, {'end': 762.744, 'text': 'One is the horizontal offset, which will be 10 pixels.', 'start': 758.821, 'duration': 3.923}, {'end': 766.266, 'text': 'The vertical offset will say 5 pixels.', 'start': 763.344, 'duration': 2.922}, {'end': 769.108, 'text': 'The blur, which will say 5 pixels.', 'start': 766.727, 'duration': 2.381}], 'summary': 'Adding box shadow with 10px horizontal offset, 5px vertical offset, and 5px blur.', 'duration': 31.029, 'max_score': 738.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I738079.jpg'}, {'end': 851.94, 'src': 'embed', 'start': 790.729, 'weight': 3, 'content': [{'end': 799.614, 'text': 'for instance with a border we could say like border color and set that to red, but with the box shadow it all has to be in here.', 'start': 790.729, 'duration': 8.885}, {'end': 803.316, 'text': 'so having a variable for each one of these is kind of nice.', 'start': 799.614, 'duration': 3.702}, {'end': 804.257, 'text': "so that's what we're going to do.", 'start': 803.316, 'duration': 0.941}, {'end': 816.561, 'text': "we're going to set box shadow, dash H dash offset, and we'll set that to what 10 pixels.", 'start': 804.257, 'duration': 12.304}, {'end': 825.864, 'text': "and then let's see, we'll just bring this down and this one will be five pixels and this will be the the V offset.", 'start': 816.561, 'duration': 9.303}, {'end': 831.506, 'text': "and then let's do what else, the blur.", 'start': 825.864, 'duration': 5.642}, {'end': 836.735, 'text': "so we'll say shadow blur and we'll set that to five pixels.", 'start': 831.506, 'duration': 5.229}, {'end': 840.236, 'text': 'so then down here we can just put in our variables.', 'start': 836.735, 'duration': 3.501}, {'end': 842.157, 'text': "so I'll just grab that.", 'start': 840.236, 'duration': 1.921}, {'end': 843.457, 'text': 'this is the blur.', 'start': 842.157, 'duration': 1.3}, {'end': 847.059, 'text': "so we'll say box, what is it shadow blur?", 'start': 843.457, 'duration': 3.602}, {'end': 851.94, 'text': 'no blur.', 'start': 847.059, 'duration': 4.881}], 'summary': 'Setting box shadow with h and v offsets of 10 and 5 pixels, and a blur of 5 pixels.', 'duration': 61.211, 'max_score': 790.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I790729.jpg'}], 'start': 599.628, 'title': 'Css variables and box shadow implementation', 'summary': 'Discusses utilizing grid system and css variables to create a layout with two even boxes, using fractional units (frs) and main color variable for styling, with a 20-pixel gap and center alignment. it also covers implementing box shadow using variables, with key points including setting the horizontal offset to 10 pixels, vertical offset to 5 pixels, blur to 5 pixels, and utilizing variables for easier property adjustment.', 'chapters': [{'end': 738.059, 'start': 599.628, 'title': 'Grid system and css variables', 'summary': 'Discusses the use of the grid system and css variables to create a layout with two even boxes, using fractional units (frs) and main color variable for styling, with a 20-pixel gap and center alignment.', 'duration': 138.431, 'highlights': ['Using fractional units (FRs) to create two even boxes The chapter explains the use of fractional units (FRs) to create two even boxes in the layout, providing a balanced distribution of space.', 'Defining and applying main color variable for styling It discusses the use of the main color variable to apply a consistent color to the border and H1 elements, demonstrating the reusability and scope of CSS variables.', 'Setting grid gap and aligning items to the center It covers setting a 20-pixel grid gap and aligning items to the center, enhancing the visual appeal and structure of the layout.']}, {'end': 878.001, 'start': 738.079, 'title': 'Css box shadow variable implementation', 'summary': 'Covers implementing box shadow using variables, with key points including setting the horizontal offset to 10 pixels, vertical offset to 5 pixels, blur to 5 pixels, and utilizing variables for easier property adjustment.', 'duration': 139.922, 'highlights': ['The chapter demonstrates setting the horizontal offset of the box shadow to 10 pixels, providing a quantifiable value for implementation.', 'It explains the utilization of variables for the vertical offset of the box shadow, specifying a quantifiable value of 5 pixels for ease of adjustment.', 'The section details the implementation of blur for the box shadow, setting a quantifiable value of 5 pixels and utilizing variables for easier property adjustment.']}], 'duration': 278.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I599628.jpg', 'highlights': ['Using fractional units (FRs) to create two even boxes in the layout, providing a balanced distribution of space.', 'Defining and applying main color variable for styling, demonstrating the reusability and scope of CSS variables.', 'Setting grid gap and aligning items to the center, enhancing the visual appeal and structure of the layout.', 'Demonstrating setting the horizontal offset of the box shadow to 10 pixels for implementation.', 'Utilization of variables for the vertical offset of the box shadow, specifying a quantifiable value of 5 pixels for ease of adjustment.', 'Implementation of blur for the box shadow, setting a quantifiable value of 5 pixels and utilizing variables for easier property adjustment.']}, {'end': 1088.339, 'segs': [{'end': 924.709, 'src': 'embed', 'start': 878.001, 'weight': 0, 'content': [{'end': 884.005, 'text': "if we want to change that to two pixels and save, you can see that that this side has been it's thinner.", 'start': 878.001, 'duration': 6.004}, {'end': 892.99, 'text': "if we want to change the blur to, let's say, uh, 25 and save, you see, now we have a a higher blur rate.", 'start': 884.005, 'duration': 8.985}, {'end': 893.511, 'text': 'blur rate.', 'start': 892.99, 'duration': 0.521}, {'end': 899.274, 'text': "I don't know if that's the right word, but you can see we can easily change stuff from the shadow.", 'start': 893.531, 'duration': 5.743}, {'end': 900.255, 'text': 'All right.', 'start': 900.035, 'duration': 0.22}, {'end': 903.617, 'text': "And I think that's a good use of of CSS variables.", 'start': 900.275, 'duration': 3.342}, {'end': 907.88, 'text': "Now, a lot we're using this main color in quite a few places.", 'start': 904.178, 'duration': 3.702}, {'end': 911.542, 'text': 'So this is a this is the benefit of using variables.', 'start': 908.3, 'duration': 3.242}, {'end': 916.326, 'text': 'If we were to change this to red and save, all that stuff will change to red.', 'start': 911.603, 'duration': 4.723}, {'end': 924.709, 'text': 'So you can have an entire template where you have maybe a main or primary color, secondary color, maybe button colors.', 'start': 916.366, 'duration': 8.343}], 'summary': 'Demonstration of changing css variables to alter pixel width and blur rate, illustrating the benefits of using variables for color changes.', 'duration': 46.708, 'max_score': 878.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I878001.jpg'}, {'end': 1062.754, 'src': 'heatmap', 'start': 940.532, 'weight': 2, 'content': [{'end': 946.035, 'text': "Now one thing that I want to show you real quick is let's go up to the grid where we have the gap.", 'start': 940.532, 'duration': 5.503}, {'end': 956.621, 'text': 'Now with SAS we could put like a variable like 20 inside of a variable and then use that and then put px and kind of concatenate it.', 'start': 946.516, 'duration': 10.105}, {'end': 961.624, 'text': "We can't do that with custom properties.", 'start': 956.982, 'duration': 4.642}, {'end': 975.292, 'text': 'So if I were to set a variable here of gap to just 20, not 20 pixels, but just the number 20, and then go in here and say var dash dash gap and save.', 'start': 961.684, 'duration': 13.608}, {'end': 977.593, 'text': "You'll see that there's no more gap.", 'start': 975.312, 'duration': 2.281}, {'end': 978.373, 'text': "It doesn't work.", 'start': 977.633, 'duration': 0.74}, {'end': 986.137, 'text': 'So a fix for this is to use calc, okay? We can use the calc function in CSS.', 'start': 979.354, 'duration': 6.783}, {'end': 987.418, 'text': "So we'll say calc.", 'start': 986.258, 'duration': 1.16}, {'end': 988.219, 'text': "We'll wrap this.", 'start': 987.458, 'duration': 0.761}, {'end': 994.294, 'text': 'then what we can do is we can take that this variable, which is actually 20,', 'start': 989.389, 'duration': 4.905}, {'end': 1001.019, 'text': "and we can say times one pixel and save and then that'll give us 20 pixels.", 'start': 994.294, 'duration': 6.725}, {'end': 1003.101, 'text': "okay, so that's a solution for that.", 'start': 1001.019, 'duration': 2.082}, {'end': 1007.625, 'text': 'okay, we can also overwrite variables.', 'start': 1003.101, 'duration': 4.524}, {'end': 1019.838, 'text': "so let's say for the paragraph in the box, Let's say we wanted say color var and set that to box, main color, save,", 'start': 1007.625, 'duration': 12.213}, {'end': 1021.74, 'text': 'and now you can see the paragraphs are blue.', 'start': 1019.838, 'duration': 1.902}, {'end': 1031.707, 'text': "Now we could overwrite this value right here, this box main color for just the paragraph, if we wanted to, by setting it here to, let's say, 555,", 'start': 1022.26, 'duration': 9.447}, {'end': 1032.728, 'text': 'which is a light gray.', 'start': 1031.707, 'duration': 1.021}, {'end': 1041.974, 'text': "So if I save this, you'll see that the paragraph text updates the color, but none of the other box main colors update.", 'start': 1034.329, 'duration': 7.645}, {'end': 1045.297, 'text': 'OK, because we overrode it inside of the paragraph.', 'start': 1041.974, 'duration': 3.323}, {'end': 1053.523, 'text': 'Now another thing we have is a fallback option so if we say color and we set that to a variable.', 'start': 1046.238, 'duration': 7.285}, {'end': 1058.728, 'text': "called, let's say, box-p-color, which doesn't exist.", 'start': 1054.622, 'duration': 4.106}, {'end': 1062.754, 'text': "If I save that, it's just going to be black, which is the default.", 'start': 1059.429, 'duration': 3.325}], 'summary': 'Using calc function in css to set custom properties, overwriting variables, and fallback options for css variables.', 'duration': 83.4, 'max_score': 940.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I940532.jpg'}], 'start': 878.001, 'title': 'Css variables and their impact', 'summary': "Discusses the usage of css variables to modify properties like shadow, color, and gap, impacting the entire template's look and demonstrating the need for calc function in certain cases. it also covers css variable fallbacks, overrides for color, and provides examples of color changes and fallback options.", 'chapters': [{'end': 1007.625, 'start': 878.001, 'title': 'Css variables and their impact', 'summary': "Discusses the usage of css variables to easily modify properties like shadow, color, and gap, demonstrating its impact on the entire template's look and the need for calc function in certain cases.", 'duration': 129.624, 'highlights': ['Demonstrates usage of CSS variables to easily modify properties like shadow and color The speaker showcases how CSS variables enable easy modification of properties such as shadow and color, demonstrating the impact of these changes on the appearance of the template.', "Illustrates the impact of modifying variables on the entire template's look The chapter emphasizes the impact of modifying variables, such as main color, on the entire template's appearance, highlighting the convenience of updating the entire look by simply changing variable values.", 'Explains the need for using calc function to handle variable concatenation The speaker explains the need for using the calc function in CSS to handle variable concatenation, particularly in cases where direct concatenation with variables is not supported, providing a solution for such scenarios.']}, {'end': 1088.339, 'start': 1007.625, 'title': 'Css variable fallbacks and overrides', 'summary': 'Discusses how to use css variables for color and demonstrates how to override and provide fallback colors using variables, with examples of color changes and fallback options.', 'duration': 80.714, 'highlights': ["The chapter demonstrates the use of CSS variables to set the color of paragraphs, with an example of using 'color var' to set the paragraph color to blue.", 'It explains how to override a CSS variable for a specific element, showing an example of setting the color to light gray for a paragraph while not affecting other elements using the same variable.', "The chapter also covers the concept of fallback options for CSS variables, with an example of using a fallback color (555) for a variable that doesn't exist, and then providing a lighter fallback color to demonstrate the concept."]}], 'duration': 210.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I878001.jpg', 'highlights': ['Demonstrates usage of CSS variables to easily modify properties like shadow and color', "Illustrates the impact of modifying variables on the entire template's look", 'Explains the need for using calc function to handle variable concatenation', 'The chapter demonstrates the use of CSS variables to set the color of paragraphs', 'It explains how to override a CSS variable for a specific element', 'The chapter also covers the concept of fallback options for CSS variables']}, {'end': 1384.063, 'segs': [{'end': 1291.134, 'src': 'embed', 'start': 1200.067, 'weight': 0, 'content': [{'end': 1202.027, 'text': 'And then we can simply pass in the variable.', 'start': 1200.067, 'duration': 1.96}, {'end': 1207.469, 'text': 'So dash dash box dash main dash color.', 'start': 1202.107, 'duration': 5.362}, {'end': 1210.81, 'text': "And then let's go ahead and console log that.", 'start': 1208.269, 'duration': 2.541}, {'end': 1217.246, 'text': 'And save, and there it is, 06C.', 'start': 1214.565, 'duration': 2.681}, {'end': 1220.847, 'text': 'So we can get those variables in our JavaScript,', 'start': 1217.286, 'duration': 3.561}, {'end': 1228.569, 'text': 'which opens up a whole range of possibilities in terms of things we can do in the UI and with our templates.', 'start': 1220.847, 'duration': 7.722}, {'end': 1232.07, 'text': 'Now, if we want to change a value,', 'start': 1229.369, 'duration': 2.701}, {'end': 1241.132, 'text': "what I'm going to do is I'm going to take the header and change the header BG color to the value that we got from the box main color.", 'start': 1232.07, 'duration': 9.062}, {'end': 1242.793, 'text': "So I'll make it blue through JavaScript.", 'start': 1241.272, 'duration': 1.521}, {'end': 1245.994, 'text': 'So, first of all, we want to grab the header.', 'start': 1244.193, 'duration': 1.801}, {'end': 1248.956, 'text': "We'll use document.queryselector.", 'start': 1246.735, 'duration': 2.221}, {'end': 1259.323, 'text': "And by the way, if you don't know about these selectors and the DOM and all that, check out my modern JavaScript course on Udemy.", 'start': 1250.177, 'duration': 9.146}, {'end': 1261.064, 'text': "I'll put a link in the description.", 'start': 1259.363, 'duration': 1.701}, {'end': 1262.706, 'text': 'We go over all of this stuff.', 'start': 1261.084, 'duration': 1.622}, {'end': 1266.708, 'text': 'So, from here, we want to select the main header.', 'start': 1263.846, 'duration': 2.862}, {'end': 1269.83, 'text': 'So, it had an ID of main header.', 'start': 1268.129, 'duration': 1.701}, {'end': 1272.052, 'text': "And then I'm simply going to take the header.", 'start': 1270.311, 'duration': 1.741}, {'end': 1278.539, 'text': 'and just change the style and say .setproperty.', 'start': 1273.613, 'duration': 4.926}, {'end': 1285.247, 'text': 'So header.style.setproperty.', 'start': 1282.644, 'duration': 2.603}, {'end': 1291.134, 'text': 'And then in here, pass in the variable we want to change or set, which is header.', 'start': 1285.728, 'duration': 5.406}], 'summary': 'Using javascript to dynamically change ui colors, opening up possibilities for templates and interactions.', 'duration': 91.067, 'max_score': 1200.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I1200067.jpg'}], 'start': 1089.26, 'title': 'Javascript variables and header color manipulation', 'summary': "Covers accessing and manipulating css variables in javascript using document.queryselector and getcomputedstyle, allowing for diverse ui and template customization. it also explains changing the header background color with javascript, emphasizing the use of css variables and dom manipulation, and contains a promotional message for coding dojo's programming school.", 'chapters': [{'end': 1232.07, 'start': 1089.26, 'title': 'Accessing variables in javascript', 'summary': 'Explains how to access and manipulate css variables in javascript using document.queryselector and getcomputedstyle, enabling a wide range of possibilities in ui and template customization.', 'duration': 142.81, 'highlights': ['The chapter demonstrates how to access the value of a CSS variable in JavaScript using document.querySelector and getComputedStyle, enabling the manipulation of UI and template customization.', "The tutorial explains the process of creating variables such as 'box' and 'boxStyles' to access and manipulate CSS variables in JavaScript.", 'The speaker emphasizes the potential for a wide range of possibilities in UI and template customization once the variables are accessed and manipulated in JavaScript.', 'The tutorial highlights the capability to change values using JavaScript, showcasing the potential for dynamic UI and template manipulation.']}, {'end': 1384.063, 'start': 1232.07, 'title': 'Change header bg color with javascript', 'summary': "Demonstrates how to change the header background color to a specific value using javascript, with an emphasis on using css variables and dom manipulation, and concludes with a promotional message about coding dojo's programming school.", 'duration': 151.993, 'highlights': ['Using JavaScript to change the header background color to a specific value is demonstrated, emphasizing the use of CSS variables and DOM manipulation.', 'The process involves grabbing the header using document.querySelector, setting the property using header.style.setProperty, and passing the variable to be changed along with its new value.', 'The speaker encourages viewers to check out their modern JavaScript course on Udemy for further learning, highlighting the importance of understanding selectors and the DOM.', "A promotional message about Coding Dojo's programming school is conveyed, emphasizing the school's ability to turn beginners into developers in 14 weeks, with over 3,000 graduates and over 90% landing jobs within three months of graduating."]}], 'duration': 294.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sQUB039MG0I/pics/sQUB039MG0I1089260.jpg', 'highlights': ['The tutorial emphasizes the potential for a wide range of possibilities in UI and template customization once the variables are accessed and manipulated in JavaScript.', 'Using JavaScript to change the header background color to a specific value is demonstrated, emphasizing the use of CSS variables and DOM manipulation.', 'The process involves grabbing the header using document.querySelector, setting the property using header.style.setProperty, and passing the variable to be changed along with its new value.', 'The speaker encourages viewers to check out their modern JavaScript course on Udemy for further learning, highlighting the importance of understanding selectors and the DOM.']}], 'highlights': ['The tutorial emphasizes the potential for a wide range of possibilities in UI and template customization once the variables are accessed and manipulated in JavaScript.', 'Using JavaScript to change the header background color to a specific value is demonstrated, emphasizing the use of CSS variables and DOM manipulation.', 'The process involves grabbing the header using document.querySelector, setting the property using header.style.setProperty, and passing the variable to be changed along with its new value.', 'The speaker encourages viewers to check out their modern JavaScript course on Udemy for further learning, highlighting the importance of understanding selectors and the DOM.', 'Preprocessors like SAS provide the benefit of automatically compiling variables down to regular CSS, eliminating the need to worry about providing fallbacks for outdated browsers or IE users.', "The native custom property syntax is pretty weird and it takes a little time to get used to, but it's native and doesn't have to be compiled, allowing access from JavaScript.", 'The speaker believes that there may not be much need for preprocessors in the future, as CSS is advancing with new features and capabilities.', 'The chapter covers using variables in CSS and accessing values in JavaScript.', 'The tutorial illustrates the creation of CSS variables for main background color (F4 three times), main text color (333), and container width (90%), highlighting the adaptability of variables in controlling design elements.', 'The tutorial showcases the application of CSS variables to modify the background color and text color of the header, providing an example of utilizing variables for specific design components.', 'The chapter discusses the creation of scoped variables for specific elements like the box class, highlighting their localized applicability and limitations in other contexts.', 'Using fractional units (FRs) to create two even boxes in the layout, providing a balanced distribution of space.', 'Defining and applying main color variable for styling, demonstrating the reusability and scope of CSS variables.', 'Setting grid gap and aligning items to the center, enhancing the visual appeal and structure of the layout.', 'Demonstrating setting the horizontal offset of the box shadow to 10 pixels for implementation.', 'Utilization of variables for the vertical offset of the box shadow, specifying a quantifiable value of 5 pixels for ease of adjustment.', 'Implementation of blur for the box shadow, setting a quantifiable value of 5 pixels and utilizing variables for easier property adjustment.', 'Demonstrates usage of CSS variables to easily modify properties like shadow and color', "Illustrates the impact of modifying variables on the entire template's look", 'Explains the need for using calc function to handle variable concatenation', 'The chapter demonstrates the use of CSS variables to set the color of paragraphs', 'It explains how to override a CSS variable for a specific element', 'The chapter also covers the concept of fallback options for CSS variables', 'Coding Dojo is a programming school with over 90% of their graduates landing jobs within three months, often making over $70,000 per year.']}