Styling a component
When you have set up the folders etc for a new component, you are now ready to style it! This section will not cover how to use Stylus or CSS, but will have some key pointers on how to structure your file.
Basics
The main Stylus file for your component, card.styl
should look like this:
.if.card {
…
}
Now, does your component have states? Are there different types of the component?
Code style
If you have a component, for examples, a card, the main class name should look like this:
.if.card {
…
}
Types should look like this:
.if.card.type1 {
…
}
.if.card.type2 {
…
}
Got several states for the component? Like disabled, active, hover etc?
.if.card:hover,
.if.card.is-hovered {
…
}
.if.card:active,
.if.card.is-active {
…
}
.if.card.is-flagged {
…
}
The first to rule definitions has helper classes for :hover
and active
. This is done so we can add those class names
for the component in the documentation, when documenting states.
Using Design Tokens
Design Tokens
There are some Design Tokens you might want to use from the existing packages, rather than creating your own Design Tokens. Here is an example of using a background color for our card component.
@require '@ids-core/color/src/variables/stylus/variables.styl'
.if.card {
background-color $ids-color-background-beige-200
}
Or with CSS Variables:
@require '@ids-core/color/src/variables/stylus/variables.styl'
@require '@ids-core/color/src/variables/css/variables.css'
.if.card {
background-color var(--ids-color-background-beige-200)
}
Breakpoints
If you want to use breakpoints, you can use breakpoint.styl
like this:
Add @ids-core/breakpoint
to your card component's package.json
as a dependency:
{
"dependencies": {
"@ids-core/breakpoint": "14.18.1"
}
}
Then run:
$ npm run lerna:bootstrap-local
To link and install dependencies. Then update your card.styl
like so:
@require '@ids-core/breakpoint/src/variables/stylus/variables.styl'
@require '@ids-core/breakpoint/src/variables/css/variables.css'
@require '@ids-core/breakpoint/src/mixins/breakpoint.styl'
.if.card {
background-color $ids-color-background-beige-200
margin 0
+IDS_BREAKPOINT_MQ_Medium_Min()
margin 2rem
}
This will make the card component have 0 margin up until the medium breakpoint that is 1200px
.