Sebastian XmlmXmlmX

A Panini Localization Helper

This helper helps you to localize your email templates created with zurbs panini. Currently this helper will only work in a custom clone of the panini code and not as a panini-helper as described here.

Installation

Make a clone of the panini source

	// Smartphones (portrait and landscape)
	@phone-portrait-landscape: ~"only screen and (min-device-width : 320px) and (max-device-width : 480px)";

	// Smartphones (landscape)
	@phone-landscape: ~"only screen and (min-width : 321px)";

	// Smartphones (portrait)
	@phone-portrait: ~"only screen and (max-width : 320px)";

	// iPads (portrait and landscape)

	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>Just Another Webmailer</title>
	</head>
	<body>
	<header id="header" class="header-container"></header>
	<div id="content" class="content-container">

	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>Rating</title>
	</head>
	<body>
	<fieldset class="stars rating" id="rate1">
	<label>Rate this comment:</label>

	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="nw">North-West</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="n">North</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="ne">North East</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="wn">West North</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="en">East North</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="w">West</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="e">East</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="ws">West South</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="es">East South</button>
	<button role="tooltip" data-stt aria-label="Hello World!" data-stt-orientation="sw">South West</button>

	, ::before, *::after {
	outline: 1px red solid !important;
	}