Create the `form-group` Component Styles
We'll make a starting point for our form layout styles by creating .form-group which will add a bit of margin between fields. This will be our first design system component, and we'll also include styles for the label contained in this class.
Instructor: [0:00] Styles for our text inputs and text areas are going to affect the fields similarly. Let's create a class that will be applied directly to the text inputs as well as the text area, and we'll call this class form-field. I'm going to go ahead and copy this to the rest of the inputs and the text areas. With that, we're ready to start adding some styles.
[0:21] Within the sass directory, create the form-group Sass file, and we'll go ahead and open up our class of form-group. We're not going to do too much here. We're going to add a little bit of spacing to our layout and give a light style to the labels since that's all we really have in play right now.
[0:40] Since we are in Sass that means we're able to use nested selectors. In this case, the ampersand refers to the parent class. We'd like to give some space in between form groups, so we can use the adjacent sibling selector to indicate that a form-group that follows another form-group should receive a margin top, and we'll use the value of 1.5m. By using m, we are keeping this space relative to the font size in use.
[1:06] You may have noticed nothing happened after save. If you recall, we also need to import this file into our main style index. Because we may want to use our theme values down the line, you will import this as the last item. Now, on save, we see that our styles have been applied.
[1:23] Ideally, we would like the label to stack above the text inputs and the text areas. That will be the next item that we style. Because we are developing this in a design system-minded way, we are considering this a repeatable component. We have high confidence in the items that are going to be included.
[1:42] In other words, because this is our designated form-group component, we know that it's going to include a label. In this case, we can simply use label as an element selector rather than adding an additional class. We can lean on the cascade and the fact that the label is inside the form-group and not all labels on the page.
[2:01] The first thing we can do to begin to fix our alignment issues is to simply add a display block. We've already got the stacking sorted. Next, we'll add a few more typography related properties to bump up the size and explicitly define the font weight. We're using 500 because that's the semi-bold weight that we brought in from Roboto, which is our custom Google font.
[2:22] Finally, we're going to add a little space in between the label and the field. As you can see it's quite tight. Since we assigned the class a form-field to the text inputs and text areas, we can, again, use our nested trick with the adjacent sibling selector to attach a margin-top to the form-fields of .5m.
[2:43] In this lesson, we began to apply some layout helpers with our form-group class and also our form-field class and applied a handful of spacing utilities to get started towards our custom form-field designs.