# TA Semantic UI

These are stylesheets used for interactive visualisations for tagesanzeiger.ch.

The styles are based on Semantic UI and adapted to conform to the art 
direction. (Work in Progress)

## Usage within React

### Installation

Yarn:
~~~bash
yarn add ta-semantic-ui
~~~

NPM:
~~~bash
npm install ta-semantic-ui
~~~

### Inclusion

Base styles that should be included in `main.js`:
~~~js
require('ta-semantic-ui/semantic/dist/components/reset.css');
require('ta-semantic-ui/semantic/dist/components/site.css');
~~~

In all other react components, only the necessary Semantic UI components 
should be included, like this:

~~~js
require('ta-semantic-ui/semantic/dist/components/button.css');
require('ta-semantic-ui/semantic/dist/components/image.css');
require('ta-semantic-ui/semantic/dist/components/icon.css');
require('ta-semantic-ui/semantic/dist/components/segment.css');
~~~

## Other usages
A complete Version of Semantic UI for use in other projects is here:

`http://interaktiv.tagesanzeiger.ch/static/semantic/[current version 
number]/semantic.min.css` (533KB!)
`http://interaktiv.tagesanzeiger.ch/static/semantic/[current version 
number]/semantic.min.js` (264KB!)

Separate components are available as well.