@internetstiftelsen/styleguide 2.22.0 → 2.22.3

package/src/brandbook/internetstiftelsen/identitet/identitet.hbs

@@ -1,426 +0,0 @@
-<div class="site__main" id="siteMain">
-	<div class="site__main__content">
-		<div class="wrapper">
-			<div class="row justify-content-center">
-				<div class="grid-18">
-					<div class="section section--tight">
-						<div class="row">
-							<div class="grid-18 grid-lg-12">
-								<h1 class="supersize">Identitet for Internetstiftelsen</h1>
-
-								<div class="article__content">
-									<h2>Logotyp</h2>
-									<svg class="logotype">
-										<use xlink:href="#logotype-default"></use>
-									</svg>
-
-									<div class="m-download">
-										<div class="row align-items-center justify-content-center">
-											<div class="grid-auto">
-												<figure class="m-download__icon-file">
-													<svg class="icon">
-														<use xlink:href="#icon-file"></use>
-													</svg>
-												</figure>
-											</div>
-											<div class="grid u-position-static">
-												<div class="row flex-column">
-													<div class="grid-18 u-position-static">
-														<a href="/assets/zip/Internetstiftelsen-logotyp.zip" class="beta m-download__link" download>
-															Ladda ner logotyp
-														</a>
-													</div>
-													<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
-														<p class="u-m-b-0">Ladda ner logotyp som EPS, SVG och PNG</p>
-														<div class="display-flex align-self-end flex-nowrap m-download__trigger">
-															<strong class="m-download__text">Ladda ner</strong>
-															<figure class="m-download__icon-download">
-																<svg class="icon">
-																	<use xlink:href="#icon-download"></use>
-																</svg>
-															</figure>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-
-									<h2>Namn</h2>
-									<p>Vi använder "Internetstiftelsen" i löpande text. Vi använder inte förkortningar som "IIS" eller "NIC" eller andra tidigare använda begrepp.</p>
-									<p>På engelska kallar vi oss "The Swedish Internet Foundation", versaliserat på just detta sätt.</p>
-								</div>
-							</div>
-							<div class="grid-18 grid-lg-6">
-								<aside class="sidebar u-position-sticky-top-4">
-									<div class="row">
-										<div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
-											<section class="m-card m-card--padded">
-												<div class="m-card__content">
-													<h1 class="beta">Brandbook</h1>
-													<div class="textwidget">
-														<dl>
-															<dt>Internetstiftelsen</dt>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean u-p-l-2">
-																	<li><a href="/components/preview/identitet.html" class="u-link"><strong>Identitet</strong></a></li>
-																	<li><a href="/components/preview/bildmaner.html" class="u-link">Bildmanér</a></li>
-																	<li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link">Tonalitet och språkbruk</a></li>
-																</ol>
-															</dd>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean">
-																	<li><a href="/components/preview/goto10.html" class="u-link">Goto 10</a></li>
-																</ol>
-															</dd>
-														</dl>
-													</div>
-												</div>
-											</section>
-										</div>
-									</div>
-								</aside>
-							</div>
-						</div>
-						<div class="row">
-							<div class="grid-18">
-								<h2>Färger</h2>
-								<div class="colors">
-									<div class="color">
-										<div class="background-ruby"></div>
-										<p class="beta color-name">ruby</p>
-										<p><strong>SASS:</strong> $color-ruby</p>
-										<p><strong>HEX:</strong> #ff4069</p>
-										<p><strong>RGB:</strong> 255 64 105</p>
-										<p><strong>CMYK:</strong> 0 84 38 0</p>
-										<p><strong>PMS:</strong> 1925U</p>
-									</div>
-									<div class="color">
-										<div class="background-ruby-light"></div>
-										<p class="beta color-name">ruby-light</p>
-										<p><strong>SASS:</strong> $color-ruby-light</p>
-										<p><strong>HEX:</strong> #ff9fb4</p>
-										<p><strong>RGB:</strong> 255 109 180</p>
-										<p><strong>CMYK:</strong> 0 51 13 0</p>
-										<p><strong>PMS:</strong> 708UP</p>
-									</div>
-									<div class="color">
-										<div class="background-peacock"></div>
-										<p class="beta color-name">peacock</p>
-										<p><strong>SASS:</strong> $color-peacock</p>
-										<p><strong>HEX:</strong> #c27fec</p>
-										<p><strong>RGB:</strong> 194 127 236</p>
-										<p><strong>CMYK:</strong> 41 54 0 0</p>
-										<p><strong>PMS:</strong> 2655U</p>
-									</div>
-									<div class="color">
-										<div class="background-peacock-light"></div>
-										<p class="beta color-name">peacock-light</p>
-										<p><strong>SASS:</strong> $color-peacock-light</p>
-										<p><strong>HEX:</strong> #e0bff5</p>
-										<p><strong>RGB:</strong> 224 191 245</p>
-										<p><strong>CMYK:</strong> 17 30 0 0</p>
-										<p><strong>PMS:</strong> 2635U</p>
-									</div>
-									<div class="color">
-										<div class="background-jade"></div>
-										<p class="beta color-name">jade</p>
-										<p><strong>SASS:</strong> $color-jade</p>
-										<p><strong>HEX:</strong> #55c7b4</p>
-										<p><strong>RGB:</strong> 85 199 180</p>
-										<p><strong>CMYK:</strong> 58 0 30 0</p>
-										<p><strong>PMS:</strong> 325U</p>
-									</div>
-									<div class="color">
-										<div class="background-jade-light"></div>
-										<p class="beta color-name">jade-light</p>
-										<p><strong>SASS:</strong> $color-jade-light</p>
-										<p><strong>HEX:</strong> #aae3d9</p>
-										<p><strong>RGB:</strong> 170 227 217</p>
-										<p><strong>CMYK:</strong> 28 0 20 0</p>
-										<p><strong>PMS:</strong> 324U</p>
-									</div>
-									<div class="color">
-										<div class="background-sandstone"></div>
-										<p class="beta color-name">sandstone</p>
-										<p><strong>SASS:</strong> $color-sandstone</p>
-										<p><strong>HEX:</strong> #f99963</p>
-										<p><strong>RGB:</strong> 249 153 99</p>
-										<p><strong>CMYK:</strong> 0 39 50 0</p>
-										<p><strong>PMS:</strong> 473U</p>
-									</div>
-									<div class="color">
-										<div class="background-sandstone-light"></div>
-										<p class="beta color-name">sandstone-light</p>
-										<p><strong>SASS:</strong> $color-sandstone-light</p>
-										<p><strong>HEX:</strong> #fcccb1</p>
-										<p><strong>RGB:</strong> 252 204 177</p>
-										<p><strong>CMYK:</strong> 1 20 30 0</p>
-										<p><strong>PMS:</strong> 719UP</p>
-									</div>
-									<div class="color">
-										<div class="background-lemon"></div>
-										<p class="beta color-name">lemon</p>
-										<p><strong>SASS:</strong> $color-lemon</p>
-										<p><strong>HEX:</strong> #ffce2e</p>
-										<p><strong>RGB:</strong> 255 206 46</p>
-										<p><strong>CMYK:</strong> 0 20 86 0</p>
-										<p><strong>PMS:</strong> 120U</p>
-									</div>
-									<div class="color">
-										<div class="background-lemon-light"></div>
-										<p class="beta color-name">lemon-light</p>
-										<p><strong>SASS:</strong> $color-lemon-light</p>
-										<p><strong>HEX:</strong> #ffe696</p>
-										<p><strong>RGB:</strong> 255 230 150</p>
-										<p><strong>CMYK:</strong> 0 9 50 0</p>
-										<p><strong>PMS:</strong> 1215UP</p>
-									</div>
-									<div class="color">
-										<div class="background-ocean"></div>
-										<p class="beta color-name">ocean</p>
-										<p><strong>SASS:</strong> $color-ocean</p>
-										<p><strong>HEX:</strong> #50b2fc</p>
-										<p><strong>RGB:</strong> 80 178 256</p>
-										<p><strong>CMYK:</strong> 69 10 0 0</p>
-										<p><strong>PMS:</strong> 299U</p>
-									</div>
-									<div class="color">
-										<div class="background-ocean-light"></div>
-										<p class="beta color-name">ocean-light</p>
-										<p><strong>SASS:</strong> $color-ocean-light</p>
-										<p><strong>HEX:</strong> #a7d8fd</p>
-										<p><strong>RGB:</strong> 167 216 253</p>
-										<p><strong>CMYK:</strong> 35 5 1 0</p>
-										<p><strong>PMS:</strong> 2830U</p>
-									</div>
-									<div class="color">
-										<div class="background-black"></div>
-										<p class="beta color-name">black</p>
-										<p><strong>SASS:</strong> $color-black</p>
-										<p><strong>HEX:</strong> #000000</p>
-										<p><strong>RGB:</strong> 0 0 0</p>
-										<p><strong>CMYK:</strong> 50 50 50 100</p>
-										<p><strong>PMS:</strong> n/a</p>
-									</div>
-									<div class="color">
-										<div class="background-cyberspace"></div>
-										<p class="beta color-name">cyberspace</p>
-										<p><strong>SASS:</strong> $color-cyberspace</p>
-										<p><strong>HEX:</strong> #1f2a36</p>
-										<p><strong>RGB:</strong> 31 42 54</p>
-										<p><strong>CMYK:</strong> 88 71 52 41</p>
-										<p><strong>PMS:</strong> PMS 289U</p>
-									</div>
-									<div class="color">
-										<div class="background-granit"></div>
-										<p class="beta color-name">granit</p>
-										<p><strong>SASS:</strong> $color-granit</p>
-										<p><strong>HEX:</strong> #8E9297</p>
-										<p><strong>RGB:</strong> n/a</p>
-										<p><strong>CMYK:</strong> n/a</p>
-										<p><strong>PMS:</strong> n/a</p>
-									</div>
-									<div class="color">
-										<div class="background-concrete"></div>
-										<p class="beta color-name">concrete</p>
-										<p><strong>SASS:</strong> $color-concrete</p>
-										<p><strong>HEX:</strong> #d8d8d8</p>
-										<p><strong>RGB:</strong> n/a</p>
-										<p><strong>CMYK:</strong> n/a</p>
-										<p><strong>PMS:</strong> n/a</p>
-									</div>
-									<div class="color">
-										<div class="background-ash has_border"></div>
-										<p class="beta color-name">ash</p>
-										<p><strong>SASS:</strong> $color-ash</p>
-										<p><strong>HEX:</strong> #ededed</p>
-										<p><strong>RGB:</strong> n/a</p>
-										<p><strong>CMYK:</strong> n/a</p>
-										<p><strong>PMS:</strong> n/a</p>
-									</div>
-									<div class="color">
-										<div class="background-snow"></div>
-										<p class="beta color-name">snow</p>
-										<p><strong>SASS:</strong> $color-snow</p>
-										<p><strong>HEX:</strong> #ffffff</p>
-										<p><strong>RGB:</strong> 255 255 255</p>
-										<p><strong>CMYK:</strong> 0 0 0 0</p>
-										<p><strong>PMS:</strong> n/a</p>
-									</div>
-								</div>
-
-								<style>
-									.colors {
-										display: flex;
-										flex-wrap: wrap;
-										margin-bottom: 2em;
-									}
-
-									.color {
-										flex: 100% 1 0;
-										max-width: 100vw;
-									}
-
-									@media (min-width: 768px) {
-										.color {
-											flex: 50% 1 0;
-										}
-									}
-
-									.color div {
-										width: 100%;
-										height: 80px;
-										margin-bottom: 10px;
-									}
-
-									.has_border {
-										border: 1px solid #d8d8d8;
-									}
-
-									.color p {
-										line-height: 1.25;
-										margin: 0 10px;
-									}
-
-									.color p:last-child {
-										margin-bottom: 40px;
-									}
-
-									.color p strong {
-										font-family: 'Roboto Mono Regular', monotype;
-									}
-
-									.color-name::first-letter {
-										text-transform: uppercase;
-									}
-								</style>
-							</div>
-						</div>
-						<div class="row">
-							<div class="grid-18 grid-lg-12">
-								<div class="article__content">
-									<h2>Typografi</h2>
-									<div class="row u-m-y-6">
-										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
-											<span class="meta u-m-b-1">Rubriker</span>
-										</div>
-										<div class="grid-18 grid-md-14">
-											<h1>HK Grotesk Semibold</h1>
-										</div>
-									</div>
-									<div class="row u-m-b-6">
-										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
-											<p class="meta">Brödtext</p>
-										</div>
-										<div class="grid-18 grid-md-14">
-											<p>HK Grotesk Regular</p>
-										</div>
-									</div>
-									<div class="row u-m-b-6">
-										<div class="grid-md-3 display-flex align-items-md-center align-self-stretch display-flex justify-content-md-center">
-											<span class="meta u-m-b-1">Accent</span>
-										</div>
-										<div class="grid-18 grid-md-14">
-											<span class="a-meta">Roboto Mono</a>
-										</div>
-									</div>
-									<div class="m-info-box">
-										<h3>Typsnitt för nedladdning</h3>
-										<ul>
-											<li>
-												<a href="https://hanken.co/collections/free/products/hk-grotesk" target="_blank">HK Grotesk
-													<svg class="icon o-mega-menu__link__icon">
-														<use xlink:href="#icon-external-link"></use>
-													</svg>
-												</a>
-											</li>
-											<li>
-												<a href="https://fonts.google.com/specimen/Roboto+Mono" target="_blank">Roboto Mono
-													<svg class="icon o-mega-menu__link__icon">
-														<use xlink:href="#icon-external-link"></use>
-													</svg>
-												</a>
-											</li>
-										</ul>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="row">
-							<div class="grid-18">
-								<h2>Undervarumärken</h2>
-								<div class="row background-snow u-m-b-4">
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
-									</div>
-									<div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
-										<img alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="row">
-							<div class="grid-18 grid-lg-12">
-								<div class="article__content">
-
-									<div class="m-download">
-										<div class="row align-items-center justify-content-center">
-											<div class="grid-auto">
-												<figure class="m-download__icon-file">
-													<svg class="icon">
-														<use xlink:href="#icon-file"></use>
-													</svg>
-												</figure>
-											</div>
-											<div class="grid u-position-static">
-												<div class="row flex-column">
-													<div class="grid-18 u-position-static">
-														<a href="/assets/zip/undervarumarken.zip" class="beta m-download__link" download>
-															Varumärkeslogotyper för nedladdning
-														</a>
-													</div>
-													<div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
-														<p class="u-m-b-0">Ladda ner logotyper som EPS, SVG och PNG</p>
-														<div class="display-flex align-self-end flex-nowrap m-download__trigger">
-															<strong class="m-download__text">Ladda ner</strong>
-															<figure class="m-download__icon-download">
-																<svg class="icon">
-																	<use xlink:href="#icon-download"></use>
-																</svg>
-															</figure>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-
-									<h2>Placering logotyp</h2>
-									<img class="u-m-b-4" src="/assets/images/placeringsriktlinjer.png" alt="Placeringsregler för Internetstiftelsens logotyp">
-									<h2>Friutrymme, logotyp</h2>
-									<img class="u-m-b-4" src="/assets/images/Friutrymme-logotyp.png" alt="Friutrymme för Internetstiftelsens logotyp">
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.hbs"

@@ -1,79 +0,0 @@
-<div class="site__main" id="siteMain">
-	<div class="site__main__content">
-		<div class="wrapper">
-			<div class="row justify-content-center">
-				<div class="grid-18">
-					<div class="section section--tight">
-						<div class="row">
-							<div class="grid-18 grid-lg-12">
-								<main role="main" class="article">
-									<h1 class="supersize">Internetstiftelsens tonalitet och språkbruk</h1>
-
-									<div class="article__content">
-										<p class="preamble">Tonaliteten är Internetstiftelsens röst och speglar hur vi vill uppfattas. Det handlar om vilka ord vi väljer och sättet vi komponerar meningar på. Vi strävar alltid efter att skriva tydligt och korrekt.</p>
-										<p>Eftersom vi vill inkludera alla och dela med oss av vår kunskap, vill vi att alla ska förstå och tycka att vi skriver på ett lättförståeligt sätt. Därför ska språket vara enkelt och rakt på sak, motsatsen till byråkratiskt. Personliga manér ska inte finnas på Internetstiftelsens webbplats men ibland kan det finnas rum för det i annan extern kommunikation – situationen avgör. För att uppfylla kraven vi har på oss själva är det viktigt att alla förmedlar samma tonalitet genom ett gemensamt språkbruk. Därför har vi några enkla riktlinjer.</p>
-										<h2>Skriv enkelt, kort och konkret</h2>
-										<p>Skriv raka meningar och förklara svåra begrepp, till exempel alla facktermer som vi är vana vid men inte alla i vår omvärld. Ett exempel på en rak mening är: “Internetstiftelsen anordnar ett seminarium där vi berättar om hur domännamnssystemet, DNS, fungerar”. Jämför med meningen: “Hur DNS fungerar kommer Internetstiftelsen att berätta under ett seminarium”. I den andra meningen har vi inte använt rak ordföljd och inte heller förklarat vad förkortningen DNS är. Det blir följaktligen svårare att förstå vad vi menar.</p>
-										<p>Använd aktiva verbformer, till exempel “Internetstiftelsen anordnar...”, “Tjänsten ger...” etcetera. Använd svenska begrepp – inte svengelska, till exempel “publiceringsverktyg” istället för “CMS”.</p>
-										<p>Använd vardagligt språk. Vi skriver “ska”, aldrig “skall”. Vi skriver “du” och “ni” med gemen (liten) begynnelsebokstav. Vi använder “du” i tilltal, inte “ni” om det inte avser en grupp personer.</p>
-										<h2>Tilltal</h2>
-										<p>Tala till läsaren, inte om läsaren. Skriv det som är relevant för läsaren och situationen. Begränsa alltså informationen till det viktiga – utelämna onödiga detaljer. Var inkluderande och undvik att ta saker för givet när det gäller vem läsaren är. Det gäller till exempel läsarens erfarenheter, åsikter, kön och identitet. Utgå inte heller från att läsaren använder en viss typ av enhet när de använder internet.</p>
-										<h2>Förkortningar</h2>
-										<p>Vi skriver ut förkortningar som “till exempel” och “etcetera”, vi skriver inte “t ex” och “etc”. Vissa vedertagna förkortningar går dock bra att använda. Förkortningen “app” är så pass vedertagen att förkortningen är att föredra framför “applikation” som lätt uppfattas som omständlig. Ibland kan det då vara lämpligt att ge en kortare förklaring: ”App, eller applikation som det är en förkortning av, är helt enkelt ett program som man installerar på sin mobiltelefon. Begreppet appar började användas mer omfattande 2008, när Apple lanserade App Store till Iphone, som är en programbutik för Apples mobiltelefon.”</p>
-										<p>Initialförkortningar som utläses som ett ord skrivs med stor begynnelsebokstav och därefter gemener, till exempel: Nato, Dagab, Stim. Initialförkortningar som utläses bokstav för bokstav brukar traditionellt skrivas med versaler för att läsaren ska få en signal om att förkortningen ska utläsas bokstav för bokstav, till exempel: SKF, USA, TCO, MSB.</p>
-										<p>Undantaget är om förkortningen anses vara så vanligt förekommande att den är vedertagen. Exempelvis skriver vi inte "IT", "TV" och "WIFI" utan "it", "tv" och "wifi". Det är förstås viktigt att ta ställning till om en initialförkortning är tillräckligt välkänd och blir tillräckligt tydlig för läsaren när den skrivs med små bokstäver. Vet man inte hur det förhåller sig eller om bruket varierar, skriv med stora bokstäver.</p>
-										<h2>Skriv ut siffror under tolv</h2>
-										<p>Vi skriver ut siffror under tolv med bokstäver i brödtext. I texter med mycket siffror kan man göra undantag för att det ska bli tydligare, till exempel i en ekonomisk redovisning.</p>
-										<h2>Svenska ord och uttryck</h2>
-										<p>I största möjliga mån ska vi använda svenska ord och uttryck. Exempelvis skriver vi “webbläsare”, aldrig “browser”; “e-post” eller “mejl”, aldrig “e-mail” eller “mail”. Vi skriver heller aldrig “e-brev”. Ordet “e-post” syftar på tjänsten e-post och vi skriver därmed aldrig “ett e-post”. Utan vi skriver “ett e-postmeddelande” eller “ett mejl”. Som verb använder vi “e-posta” eller “mejla”.</p>
-										<h2>Korrekt begreppsanvändning</h2>
-										<p>På Internetstiftelsen benämner vi webben med ordet “webben” (alltid gement). Aldrig “web” (engelsk stavning), “www” eller “World Wide Web”. Det är viktigt att vi använder ordet “webb” och “internet” korrekt och inser att de inte är synonymer. Vi skriver “webbplats” eller den lite vardagligare benämningen “sajt”, inte “hemsida”. Vi använder inte “hemsida” eftersom det kan syfta på en webbplats startsida och därför skriver vi den mer precisa termen “webbplats”. Vi skriver "internet" och "nätet" med gemen (liten) begynnelsebokstav, inte “Internet” och "Nätet".</p>
-										<h2>Produktnamn och företagsnamn</h2>
-										<p>Vi följer i möjligaste mån svenska skriftnormer och normaliserar namn som avviker, exempel genom att ha en versal mitt i ordet. Vi undviker stavningssätt som kan uppfattas som textreklam och använder inte företags logotyper eller motsvarande i löpande text. Vi skriver exempelvis inte MatXtra, BankID och YouTube, utan Matextra, Bank-id och Youtube. Vi skriver inte iPhone och iCloud utan Iphone och Icloud.</p>
-										<h2>Beskriva Internetstiftelsen</h2>
-										<p>När vi pratar om oss själva skriver vi alltid Internetstiftelsen (med stort I). På engelska är motsvarande “The Swedish Internet Foundation”. Vi talar enbart om Internetstiftelsen och använder ingen förkortning. När vi uttrycker genitiv (som beskriver ägande) skriver vi Internetstiftelsens. På engelska är motsvarigheten The Swedish Internet Foundation's.</p>
-										<h2>Resurser</h2>
-										<p>Vi utgår från TT-språket som grund för våra texter, och Svenska datatermgruppen för specifika tekniska termer. Se dessa för vägledning.</p>
-										<p>TT-språket är en samling skrivregler, ord och begrepp till hjälp för alla som skriver. Reglerna är utformade för TT:s egna medarbetare, men de följs i stor utsträckning av svenska medier och av personer som gillar språk.<br><a href="https://tt.se/tt-spraket/" target="_blank">https://tt.se/tt-spraket/</a></p>
-										<p>Svenska datatermgruppen är en brett sammansatt grupp som ger rekommendationer om hur aktuella datatermer bör hanteras på svenska.<br><a href="http://dataterm.termado.net" target="_blank">http://dataterm.termado.net</a></p>
-										<p>En bra resurs är också Språkrådets klarspråksarbete. Klarspråk är myndighetstexter skrivna på ett vårdat, enkelt och begripligt språk. Språkrådet arbetar med att främja klarspråk på myndigheter, kommuner, regioner, universitet, organisationer och företag.<br><a href="https://www.isof.se/sprak/klarsprak.html" target="_blank">https://www.isof.se/sprak/klarsprak.html</a></p>
-									</div>
-								</main>
-							</div>
-							<div class="grid-18 grid-lg-6">
-								<aside class="sidebar u-position-sticky-top-4">
-									<div class="row">
-										<div class="grid-18 grid-md-9 grid-lg-18 u-m-b-2">
-											<section class="m-card m-card--padded">
-												<div class="m-card__content">
-													<h1 class="beta">Brandbook</h1>
-													<div class="textwidget">
-														<dl>
-															<dt>Internetstiftelsen</dt>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean u-p-l-2">
-																	<li><a href="/components/preview/identitet.html" class="u-link">Identitet</a></li>
-																	<li><a href="/components/preview/bildmaner.html" class="u-link">Bildmanér</a></li>
-																	<li><a href="/components/preview/tonalitet-och-sprakbruk.html" class="u-link"><strong>Tonalitet och språkbruk</strong></a></li>
-																</ol>
-															</dd>
-															<dd class="u-m-l-0">
-																<ol class="u-list-clean">
-																	<li><a href="/components/preview/goto10.html" class="u-link">Goto 10</a></li>
-																</ol>
-															</dd>
-														</dl>
-													</div>
-												</div>
-											</section>
-										</div>
-									</div>
-								</aside>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

package/src/configurations/colors/colors.hbs

@@ -1,85 +0,0 @@
-<!--htmlhint style-disabled:false -->
-<h1>Default colors</h1>
-<div class="colors">
-	{{#each colors}}
-	<div class="color">
-		<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
-		<p class="beta color-name">{{name}}</p>
-		<p><strong>{{../sass}}:</strong> {{title}}</p>
-		<p><strong>{{../hex}}:</strong> {{hex}}</p>
-		<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
-		<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
-		<p><strong>{{../pms}}:</strong> {{pms}}</p>
-	</div>
-	{{/each}}
-</div>
-
-<h2 class="alpha">Accessibility colors</h2>
-<div class="row no-gutters">
-	<div class="grid-xl-7 grid-lg-10 grid-md-12 grid-18">
-		<p>This set of colors are to be used only for accessibility purposes when the default colors doesn't meet the WCAG AA baseline. Any use of these colors must be approved by Internetstiftelsen.</p>
-	</div>
-</div>
-
-<div class="colors">
-{{#each specialColors}}
-	<div class="color color-33">
-		<div class="background-{{name}}{{#if hasBorder}} has_border{{/if}}"></div>
-		<p class="beta color-name">{{name}}</p>
-		<p><strong>{{../sass}}:</strong> {{title}}</p>
-		<p><strong>{{../hex}}:</strong> {{hex}}</p>
-		<p><strong>{{../rgb}}:</strong> {{rgb}}</p>
-		<p><strong>{{../cmyk}}:</strong> {{cmyk}}</p>
-		<p><strong>{{../pms}}:</strong> {{pms}}</p>
-	</div>
-	{{/each}}
-</div>
-
-<style>
-	.colors {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: 2em;
-	}
-
-	.color {
-		flex: 100% 1 0;
-		max-width: 100vw;
-	}
-
-	@media (min-width: 768px) {
-		.color {
-			flex: 50% 1 0;
-		}
-		.color-33 {
-			flex: 33.333333% 1 0;
-		}
-	}
-
-	.color div {
-		width: 100%;
-		height: 80px;
-		margin-bottom: 10px;
-	}
-
-	.has_border {
-		border: 1px solid #d8d8d8;
-	}
-
-	.color p {
-		line-height: 1.25;
-		margin: 0 10px;
-	}
-
-	.color p:last-child {
-		margin-bottom: 40px;
-	}
-
-	.color p strong {
-		font-family: 'Roboto Mono Regular', monotype;
-	}
-
-	.color-name::first-letter {
-		text-transform: uppercase;
-	}
-</style>

package/src/configurations/css-utility-classes.hbs

@@ -1,47 +0,0 @@
-<div>
-	<div class="wrapper">
-		<div class="row">
-			<div class="grid-18 grid-lg-12">
-				<h1>CSS utility classes</h1>
-				<p class="preamble">The styleguide provides a bunch of CSS utility classes designed to allow you to style your markup directly without the need for writing custom CSS.</p>
-				<p>These classes all use <code class="u-display-inline background-concrete u-border-radius u-p-y-0 u-p-x-1">!important</code> to overwrite any custom CSS already applied to an element. <a href="https://github.com/sewebb/iis-styleguide/tree/master/src/utilities" target="_blank">All available classes can be found on Github</a>.</p>
-				<div class="m-alert m-alert--warning">
-					Use utility classes with caution!
-				</div>
-				<p>Most classes are self explanatory but some, like paddings and margins which are the most commonly used classes needs some explanation for how they are contructed.</p>
-
-				<h2>How the classes are contructed</h2>
-				<fieldset>
-					<legend class="u-m-b-0">All classes start with "u" for "utility"</legend>
-					<pre>u = utility</pre>
-				</fieldset>
-				<fieldset>
-					<legend class="u-m-b-0">"m" is for "margin"</legend>
-					<pre>m = margin</pre>
-				</fieldset>
-				<fieldset>
-					<legend class="u-m-b-0">"p" is for "padding"</legend>
-					<pre>p = padding</pre>
-				</fieldset>
-				<fieldset>
-					<legend class="u-m-b-0">Next is directions</legend>
-					<pre>t = top
-r = right
-b = bottom
-l = left
-x = x-axis
-y = y-axis</pre>
-				</fieldset>
-				<fieldset>
-					<legend class="u-m-b-0">And finally numerical value</legend>
-					<pre>0 - 8</pre>
-				</fieldset>
-				<fieldset>
-					<legend class="u-m-b-0">This means a complete utility class would look something like this giving this class a bottom margin with the value 4</legend>
-					<pre>u-m-b-4</pre>
-				</fieldset>
-				<p>The values are typography baselines. 1 baseline = ½ of the document line-height meaning a value of 4 equals twice the document line-height.</p>
-			</div>
-		</div>
-	</div>
-</div>

package/src/configurations/favicon/favicon.hbs

@@ -1,9 +0,0 @@
-<link rel="apple-touch-icon" sizes="180x180" href="{{url}}apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{url}}favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{url}}favicon-16x16.png">
-<link rel="manifest" href="{{url}}site.webmanifest">
-<link rel="mask-icon" href="{{url}}safari-pinned-tab.svg" color="#ff4069">
-<link rel="shortcut icon" href="{{url}}favicon.ico">
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-config" content="{{url}}browserconfig.xml">
-<meta name="theme-color" content="#ffffff">