Skip to content

Latest commit

 

History

History
83 lines (45 loc) · 3.86 KB

style-sheet.md

File metadata and controls

83 lines (45 loc) · 3.86 KB
Raw
sidebar_position
4

Style sheet

A Style Sheet is a document that store styles values. Inside this file, you can store css styles, use design tokens as style variable or import an existing style sheet as a reusable block.

In the example above, to style our primary button, we're using the default button reusable block and we're adding a blue background-color and a white color (both stored as Design Tokens).

How to create a Style Sheet?

To create a Style Sheet, click on the top right Add button and select Style Sheet.


<iframe width="560" height="215" src="https://www.youtube.com/embed/fj-ReuoOkl0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></iframe>

How to edit Style Sheet?

Editing a style sheet is pretty similar than how to edit styles using the Chrome devtool. The difference here is that you can use your Design tokens and add Reusable blocks (i.e. previously saved Style Sheets).


<iframe width="560" height="215" src="https://www.youtube.com/embed/evjuXAO-hME" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></iframe>

How to add a selector?

You can add selector to a Style Sheet. To do so, you need to click on the + selector button and add your selector.

For more information about selector, take a look at this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors.


<iframe width="560" height="215" src="https://www.youtube.com/embed/bXL7Wiosxb0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen></iframe>

How to edit a selector?

<iframe width="560" height="315" src="https://www.youtube.com/embed/CiAHkvAzXEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to remove a selector?

<iframe width="560" height="315" src="https://www.youtube.com/embed/r_xsc1R8NCk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to use a Design Token?

<iframe width="560" height="315" src="https://www.youtube.com/embed/zMqQxa_cz4c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to use a Reusable block?

<iframe width="560" height="315" src="https://www.youtube.com/embed/1yj5t-7IPHw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to remove a Reusable block?

<iframe width="560" height="315" src="https://www.youtube.com/embed/gBiMeVNpLT4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to reorder elements?

<iframe width="560" height="315" src="https://www.youtube.com/embed/A5MmNSvTW30" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to get info about the style element?

<iframe width="560" height="315" src="https://www.youtube.com/embed/t9yBwB3WJhM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>