---
tags: content
---

# GLOBAL STYLES

🙌 **CSS!** 🙌

At Bulb we use `styled-components` to enable styles to be developed and at a component level.

However, not everything should be a component style in the first place, things like font-families, line-heights, and focus styles are better placed as global (base) styles because:

1.  We want to use them everywhere
2.  Aside from a few exceptions, we want to use them everywhere _the same way_
3.  They should be low specificity, and easy to override where needed anyway

With focus styles, it’s particularly helpful because

1.  In almost all cases, we want to use the same focus style
2.  Focus styles are mandatory for WCAG AA accessibility, so we don’t have to think about whether one is needed or not
3.  It’s difficult to test for focus styling, and few automated accessibility testing tools report them where they are missing

We commit to having focus styles written for each component (and have a manual focus styles testing script from Heydon) but it is not systemically robust and dependable to rely on the development process to ensure these are always present and well setup.

> [https://bulbenergy.slack.com/archives/C9EB43ZHR/p1521799171000422](https://bulbenergy.slack.com/archives/C9EB43ZHR/p1521799171000422)

## Usage

```code
import { createGlobalStyle } from 'styled-components';
import { getGlobalStyles } from '@bulb/design/utils/getGlobalStyles'

// with default responsive behaviour
const GlobalStyle = createGlobalStyle`
  ${getGlobalStyles()}
`

// with custom responsive behaviour
const GlobalStyle = createGlobalStyle`
  ${getGlobalStyles({
    responsiveBehaviours: [
      { fontSize: '16px' },
      { minWidth: '731px', fontSize: '20px' },
      { minWidth: '1695px', fontSize: '26px' },
    ]
  })}
`
```

## Default viewports

```table
span: 3
rows:
  - Responsive Step: initial
    Font Size: 16px
  - Responsive Step: 667px
    Font Size: 20px
  - Responsive Step: 1695
    Font Size: 26px
```

## Two Column viewports

Used with two column layouts ie. magenta (bulb account)

```table
span: 3
rows:
  - Responsive Step: initial
    Font Size: 16px
  - Responsive Step: 1024px
    Font Size: 20px
  - Responsive Step: 1695px
    Font Size: 26px
```
