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

For this guide, we assume that you are making a card component, so the main file is card.styl

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.