@ta-interaktiv/semantic-ui

Semantic UI

These are stylesheets used for interactive visualisations for tagesanzeiger.ch and other paid media titles by Tamedia.

The styles are based on Semantic UI and adapted to conform to the art direction.

Usage within React

Installation

Yarn:

yarn add @ta-interaktiv/semantic-ui @ta-interaktiv/react-theme-switch

NPM:

npm install @ta-interaktiv/semantic-ui @ta-interaktiv/react-theme-switch

Inclusion

Base styles that should be included in main.js:

import '@ta-interaktiv/semantic-ui/semantic/dist/components/reset.css';
import '@ta-interaktiv/semantic-ui/semantic/dist/components/site.css';

Also include the React Theme Switch component in your main.js, so the correct fonts are being used:

import React from 'react'
import { ThemeSwitch } from '@ta-interaktiv/react-theme-switch'

export const Main = () => (
  <div className='index'>
    <ThemeSwitch />
  </div>
)

Refer to the Theme Switch Documentation for further instructions.

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

import '@ta-interaktiv/semantic-ui/semantic/dist/components/button.css';
import '@ta-interaktiv/semantic-ui/semantic/dist/components/image.css';
import '@ta-interaktiv/semantic-ui/semantic/dist/components/icon.css';
import '@ta-interaktiv/semantic-ui/semantic/dist/components/segment.css';

Accessing font stacks

This version of Semantic UI has four different font stacks exposed as CSS custom properties. Since the theming functionality mostly works over the use of different fonts, direct references to Benton Sans Cond or similar should be avoided. Instead do the following:

/* Chart label that should be using the chart / infographic font */
.chart-label {
    font-family: var(--chart-font-stack);
}

/* Header class that should use the text header font */
.header {
    font-family: var(--display-font-stack);
}

The following font stacks are available:

Custom Property Name	Usage	Original font for tagesanzeiger.ch
--text-font-stack	Body text	Georgia
--display-font-stack	Article headers	Publico Headline
--chart-font-stack	Infographics, charts, side bars	Benton Sans Cond
--infographic-font-stack	Alias of --chart-font-stack	see above
--ui-font-stack	UI elements like buttons, form fields	Source Sans and/or Benton Sans Cond

Using Colors

The colors as defined by @ta-interaktiv/semantic-ui and the infographics department are also available as CSS custom properties.

By default these are

// Base Colors
--primary: @primaryColor;
--secondary: @secondaryColor;
--red: @red;
--orange: @orange;
--yellow: @yellow;
--olive: @olive;
--green: @green;
--teal: @teal;
--blue: @blue;
--violet: @violet;
--purple: @purple;
--pink: @pink;
--brown: @brown;
--grey: @grey;
--black: @black;

// Light Colors
--light-red: @redBackground;
--light-orange: @orangeBackground;
--light-yellow: @yellowBackground;
--light-olive: @oliveBackground;
--light-green: @greenBackground;
--light-teal: @tealBackground;
--light-blue: @blueBackground;
--light-violet: @violetBackground;
--light-purple: @purpleBackground;
--light-pink: @pinkBackground;
--light-brown: @brownBackground;

// Text Colors
--red-text-color: @redTextColor;
--orange-text-color: @orangeTextColor;
--yellow-text-color: @yellowTextColor;
--olive-text-color: @oliveTextColor;
--green-text-color: @greenTextColor;
--teal-text-color: @tealTextColor;
--blue-text-color: @blueTextColor;
--violet-text-color: @blueTextColor;
--purple-text-color: @purpleTextColor;
--pink-text-color: @pinkTextColor;
--brown-text-color: @brownTextColor;
--dark-text-color: @darkTextColor;
--text-color: @textColor;
--muted-text-color: @mutedTextColor;
--light-text-color: @lightTextColor;

// Alpha Colors
--subtle-transparent-black: @subtleTransparentBlack;
--transparent-black: @transparentBlack;
--strong-transparent-black: @strongTransparentBlack;
--very-strong-transparent-black: @veryStrongTransparentBlack;
--subtle-transparent-white: @subtleTransparentWhite;
--transparent-white: @transparentWhite;
--strong-transparent-white: @strongTransparentWhite;
--off-white: @offWhite;
--dark-white: @darkWhite;
--mid-white: @midWhite;  
--light-grey: #E7F1F6;
--mid-grey: #CDD2D3;

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.