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:

@require 'core.styl'
/**
 * @doc ../docs/card.md
 * @package {package} card - Card
 * @section
 * @sectionof Components
 */

.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 variables

Variables

There are some variables you might want to use from the existing packages, rather than creating your own variables. Here is an example of using a secondary color for our card component.

For every component, `core.styl` is always required, and it contains the required core styling. With this, you will always have access to these packages: `color-variables`, `typography` and `util`.
@require 'core.styl'
/**
 * @doc ../docs/card.md
 * @package {package} card - Card
 * @section
 * @sectionof Components
 */

.if.card{
  background-color $color-background-lighter-beige
}

Extending classes

You can extend classes for reuse, for example, fonts:

@require 'core.styl'
/**
 * @doc ../docs/card.md
 * @package {package} card - Card
 * @section
 * @sectionof Components
 */

.if.card{
  background-color $color-background-lighter-beige
  @extend .if.font.family.sans
}

This will add:

  font-family $font-family sans
  font-weight normal
  font-style normal

To your card class definition.

Breakpoints

If you want to use breakpoints, you can use breakpoint.styl like this:

Add @ids-core/breakpoint to your card component package.json as a dependency:

{
  "dependencies": {
    "@ids-core/breakpoint": "5.0.2"
  }
}

Then run:

$ lerna bootstrap

To link and install dependencies. Then update your card.styl like so:

@require 'core.styl'
@require 'breakpoint.styl'
/**
 * @doc ../docs/card.md
 * @package {package} card - Card
 * @section
 * @sectionof Components
 */

.if.card{
  background-color $color-background-lighter-beige
  margin 0
  @extend .if.font.family.sans
  +IDS_BREAKPOINT_MQ_Medium_Min()
    margin 2rem
}

This will make the card component have 0 margin up until the medium breakpoint that is 960px.

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window