# Setup & Structure

**Framework:** SCSS/Bootstrap-based  
**Package:** `testio-designsystem`

## Installation

```bash
npm install testio-designsystem
```

```css
@import 'testio-designsystem/dist/static/app.bundled.css';
```

```javascript
import 'testio-designsystem/dist/static/app.bundled.js';
```

## Directory Structure

```
src/pages/
├── buttons/             # Button components and variants
├── charts/              # ECharts data visualization
├── components/          # UI components (cards, alerts, modals, tables, etc.)
├── forms/               # Form components
├── layout/              # Layout utilities
├── navigation/          # Navigation components
├── typography/          # Typography examples
├── icons/               # Icon documentation
└── layouts/             # Full layout examples
```

## HAML Conventions

```haml
<!-- HAML -->
%button.btn.btn-primary{type:'submit', disabled:''}
  %span.icon.icon-save.mr-icon-spacing
  Save Changes

<!-- Renders as -->
<button class="btn btn-primary" type="submit" disabled="">
  <span class="icon icon-save mr-icon-spacing"></span>
  Save Changes
</button>
```

- Use curly braces for attributes: `{key:'value'}`
- Boolean attributes: `{checked:''}` or `{disabled:''}`
- Use short forms: `%div.class` instead of `%div{class:'class'}`
- Use single quotes for attribute values