Lab 03: Apply Component Styling - andreaswissel/design-systems-workshop GitHub Wiki

Hint: if you got lost, you can always check out the corresponding branch for the lab. If you want to start over, you can reset it by typing executing git reset --hard origin/lab-2

Now that we have our first component in place and made it function, we will want to apply some styling to it.

• Open the your Figma component library

In the component library, you will find an overview of all the Pages and Frames in the left panel. By ⌘/Ctrl-clicking the button component in the current Artboard, the component will be selected and highlighted in the Frames section. In the right pane, you will now be able to see the CSS for this component, as well.

• Select the rectangle of the button component and copy the CSS to src/app/button/button.component.scss

For this example, the positioning (attributes position, left, top, bottom, right) of the component isn't relevant, as we will take care of the layouting in another component. So we take all the CSS of the second block, and copy it into a button-selector inside button.component.scss.

Hint: If you want to take a shortcut, I've provided a complete solution at the end of this lab

Once Storybook has updated, your button should now have a styling, just like in the Figma component library. However, we are still missing the styling for the label.

• Select the label of the button component and copy the CSS to src/app/button/button.component.scss

You can now either select the label directly in the left pane, or, if you're good with pointing devices, ⌘/Ctrl-click it. The respective CSS should then appear in the right pane. Copy this to your SCSS file, as well. Also, since not everybody is using macOS, we need to alter the font-family value slightly, to represent other OS's as well:

-  font-family: Inter;
+  font-family: "Inter", Helvetica, Arial, sans-serif;

• Measure the spacing for the label and add it to your CSS file

Finally, we need to add a bit of padding to the button, to position the label correctly. We can get these measurements by keeping the label-element selected, and hovering over the rectangle from the last step. Add the visible values to the end of your CSS file.

Hint: If you want to see an element's respective spacing to another element, you can always select it and hover over other elements while pressing Alt. Figma will show you rulers indicating the amount of pixels to hovered element's border.

There we go! That's it already. Styling can be easy!

• Adjust global CSS

Finally, let’s prepare some global styles for the labs that are going to follow. Please add the following styles to the file src/styles.scss:

* {
  box-sizing: border-box;
}

app-button,
app-input,
app-login,
app-form-group {
  display: flex;
}

button {
  display: inline-flex;
  padding: 11px 16px;
  align-items: flex-start;

  border-radius: 5px;
  border: 1px solid var(--blue-700, #0357a3);
  background: #0085fc;
  box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.15) inset;

  color: var(--white, #fff);
  font-size: 13px;
  font-family: "Inter", Helvetica, Arial, Helvetica, sans-serif;
}

/* These are our global styles */

* {
  box-sizing: border-box;
}

app-button,
app-input,
app-login,
app-form-group {
  display: block;
}

Hint: if you got lost, you can always check out the corresponding branch for the lab. need the solution, you can reset it by typing executing git reset --hard origin/lab-3