Initialize the Form Design System Setup with Sass and CSS Variables

Instructor: [0:00] In this lesson, we will define the color palette and prepare the base screen styles for our project. In the Sass directory, we're first going to create a new file named _theme.scss. The underscore indicates to Sass that the file should not be directly compiled as its own individual style sheet, so that we don't forget, let's go ahead and go into style.css and import the theme file.

[0:25] We also do not need to include the underscore in the import name. The first item in our theme file will be our color palette. Now, for our form's design, we only need a couple colors, a primary, which will be a blue and an error color, which is a red.

[0:41] We're also going to begin to define our variables using the default flag. This will allow you to import our final form styles into a different project and override the variables. Another color that we need in our palette is the background, which will be used for the page background. For this we'll use the Sass color function of mix, which will mix white with our color primary value at 95 percent strength.

[1:07] This is like mixing colors in a paint can. In this case, we're adding white to our color, which will essentially give us a very light variant of our primary color. The final color will defined is for text, meaning all of the text content across the page and within inputs.

[1:24] For this, we'll use the Sass color function of scale color, as opposed to mix where we explicitly were mixing white into our color. Scale color allows us to smoothly change the color value.

[1:35] In this case, we'll take our compiled color background color and darken it 65 percent, which in this case will give us a nice dark blue grey. Now, we'd like to create a few methods to make accessing our colors easier.

[1:50] We'll create a colors map, and within our map we will use our various color keys and turn those into the key in the map and retrieve the unique colors as their values. For ease of reference we'll also include white as one of our values in the map.

[2:09] The reason we've defined our variables separately prior to creating our map, rather than directly defining them within the map is so that we could include that default flag, and make future overriding of our theme easier.

[2:21] Now that we have our colored map, we'll also create a function that will let us retrieve the color by its key name. To return our color value, we'll use the built in Sass map get function, which will look at our colors map and return the value based on that past key.

[2:40] All of this setup work means you will not have to remember any hex codes just the key to retrieve a color such as primary.

[2:47] It also means that our color names are not tied to the color values. The purpose of this is to enable extending this theme to be used in any project. We have one more variable that will provide, which is a border radius. With that we have the essential Sass variables set up.

[3:04] The last thing we'll do before we leave our theme file is to pass our variables into the root element to be used as CSS custom properties. For the rest of this project we will then use the custom property values instead of the Sass variables directly, which will enable a lot of flexibility, as you'll see throughout the next lessons.

[3:24] Thanks to having the map created for our colors, we can use the Sass each function to loop through those colors. We'll give local variables, of key and color, and look for those in the colors map. Then we'll name our variables, color. Here we will compile the key name and then compile the color value.

[3:47] In a moment when we run our server, we'll see the compiled output of this map. Lastly, we'll also pass in our border radius as a custom property, as well. At this point, we'll run our project with npm-start. This will launch Eleventy's build process, which also includes browser sync for assisting in hosting a local server and providing hot reload as we continue to make changes to our files.

[4:12] The default location is localhost 8080. You will have to manually open that in your browser. Now, the first thing we can look at is to check out our HTML element, which is the default element used for root, and we can see the output of our color variables and verify those, and also our border radius.

[4:31] The final thing we'll do is apply a few styles to style the base page for this project. For that, we'll create the file, screen. Once again, we'll import this into our style file. In order to use our color variables and color function, this import must follow previous theme import.

[4:52] Now, within screen, we'll create a handful of rules on the body. First, we'll define the background color. This will be the first instance we use our CSS custom properties. Those are accessed with the CSS function var, and we'll define that this should use the color background value.

[5:12] If our theme did not include that value, or for some reason, the browser could not find that value when parsing the style sheet, it is a good idea to provide a fallback value to be used. This is where we'll use our color function and retrieved the background value. On save, we can inspect the body and see that that color has been correctly pulled in and applied.

[5:34] Next, we'll set the color and use a similar idea to apply our color of text and ensure we pass our fallback, as well. On save, we can see that our current text has been changed to that shade of blue that we computed using the Sass color functions.

[5:50] Finally, we'd like to add a custom Google font. The first step here is to go into our base layout. In your own custom project this would be any point at which you are rendering the base HTML. For this project, we're going to use the Roboto font from Google fonts.

[6:09] Our last rule within the body is to define that as the font family with the fallback of sans serif. In our base template, we see that we have two wrapping HTML tags, a header and a name.

[6:22] Our final piece for this lesson is to apply a couple of rules to limit width. To make our demos a little more appealing, lets limit the width to 60CH, and for responsiveness set a max width of 100 percent.

[6:38] Then, use the good old margin trick to center it within the page. With only our header on here, it's a little difficult to see, but on inspect you can see that width limited and the element centered on the page.

[6:50] We covered a lot in this lesson, but the outcome is that we now have color variables setup in a way that will be extendable to future projects through overriding, and that are easily accessible by a color function, as well as, the output SCS custom properties. We also began using our color variables to set a few base-line styles for our screen.