Commit 1226eb16 authored by Leon Rick Fokken's avatar Leon Rick Fokken

replaced use of Uno material from Gitlab pages with status message

parent 78f1566c
Pipeline #128116491 passed with stages
in 8 minutes and 30 seconds
......@@ -7,8 +7,6 @@ pages:
- public
dependencies:
- build docs
only:
- master
when: manual
release package:
......
{
"name": "duo-ux-library-docs",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.4.3"
},
"dependencies": {
"hexo": "^3.9.0",
"hexo-browsersync": "^0.2.0",
"hexo-generator-index": "^0.2.1",
"hexo-generator-search": "^2.1.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-renderer-sass": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.2.2",
"node-sass": "^4.13.1"
}
"name": "duo-ux-library-docs",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.9.0"
},
"dependencies": {
"hexo": "^3.9.0",
"hexo-browsersync": "^0.2.0",
"hexo-generator-index": "^0.2.1",
"hexo-generator-search": "^2.1.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-renderer-sass": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.2.2",
"node-sass": "^4.13.1"
}
}
\ No newline at end of file
{
"colors": [
"violet",
"roze",
"rood",
"robijnrood",
"paars",
"oranje",
"lichtblauw",
"hemelblauw",
"donkerblauw",
"geel",
"donkergeel",
"mintgroen",
"mosgroen",
"groen",
"donkergroen",
"bruin",
"donkerbruin"
],
"grijstinten": [
"grijs-1",
"grijs-2",
"grijs-3",
"grijs-4",
"grijs-5",
"grijs-6",
"grijs-7"
]
}
\ No newline at end of file
{
"pages": [
{
"title": "Installatie",
"url": "index.html"
},
{
"title": "Configuratie",
"url": "uno-gebruiken.html"
},
{
"title": "Documentstructuur",
"url": "document-structuur.html"
},
{
"title": "Pagina opbouw",
"url": "pagina-opbouw.html"
}
]
}
\ No newline at end of file
{
"pages": [
{
"title": "Aan de slag",
"url": "aan-de-slag/index.html"
},
{
"title": "Basis",
"url": "core/index.html",
"pages": [
{
"title": "Colors",
"url": "core/colors/index.html"
},
{
"title": "Grid",
"url": "core/grid/index.html"
},
{
"title": "Icons",
"url": "core/icons/index.html"
},
{
"title": "Typography",
"url": "core/typografie/index.html"
}
]
},
{
"title": "Componenten",
"url": "componenten/index.html",
"pages": [
{
"title": "Backlink",
"url": "componenten/backlink/index.html"
},
{
"title": "Bottom bar",
"url": "componenten/bottom-bar/index.html"
},
{
"title": "Button",
"url": "componenten/button/index.html"
},
{
"title": "Card",
"url": "componenten/card/index.html"
},
{
"title": "Chart",
"url": "componenten/donutchart/index.html"
},
{
"title": "Checkbox",
"url": "componenten/checkbox/index.html"
},
{
"title": "Collapse",
"url": "componenten/collapse/index.html"
},
{
"title": "Combobox",
"url": "componenten/combobox/index.html"
},
{
"title": "Definition list",
"url": "componenten/definition-list/index.html"
},
{
"title": "Footer",
"url": "componenten/footer/index.html"
},
{
"title": "File",
"url": "componenten/file/index.html"
},
{
"title": "Filter",
"url": "componenten/filter/index.html"
},
{
"title": "Form",
"url": "componenten/form/index.html"
},
{
"title": "Header",
"url": "componenten/header/index.html"
},
{
"title": "Hint",
"url": "componenten/hint/index.html"
},
{
"title": "Images",
"url": "componenten/images/index.html"
},
{
"title": "Labels & badges",
"url": "componenten/label/index.html"
},
{
"title": "Lists",
"url": "componenten/lists/index.html"
},
{
"title": "Modal",
"url": "componenten/modal/index.html"
},
{
"title": "Meta",
"url": "componenten/meta/index.html"
},
{
"title": "Navigation",
"url": "componenten/navigation/index.html"
},
{
"title": "Notification",
"url": "componenten/notification/index.html"
},
{
"title": "Pagination",
"url": "componenten/pagination/index.html"
},
{
"title": "Quote",
"url": "componenten/quote/index.html"
},
{
"title": "Radiobutton",
"url": "componenten/radio/index.html"
},
{
"title": "Section",
"url": "componenten/sections/index.html"
},
{
"title": "Skiplink",
"url": "componenten/skiplink/index.html"
},
{
"title": "Spinner",
"url": "componenten/spinner/index.html"
},
{
"title": "Switch",
"url": "componenten/switch/index.html"
},
{
"title": "Table",
"url": "componenten/table/index.html"
},
{
"title": "Tabs",
"url": "componenten/tabs/index.html"
},
{
"title": "Timeline",
"url": "componenten/timeline/index.html"
},
{
"title": "Tooltip",
"url": "componenten/tooltip/index.html"
},
{
"title": "Video",
"url": "componenten/videos/index.html"
}
]
},
{
"title": "Voorbeelden",
"url": "templates/index.html",
"pages": [
{
"title": "Starterspagina",
"url": "templates/starter-page/index.html"
},
{
"title": "Tekstpagina",
"url": "templates/full-text/index.html"
},
{
"title": "Pagina zonder navigatie",
"url": "templates/no-nav/index.html"
},
{
"title": "Nieuwsbericht",
"url": "templates/news-item/index.html"
},
{
"title": "Componenten",
"url": "templates/componenten-page/index.html"
},
{
"title": "Landingspagina",
"url": "templates/landing-page/index.html"
},
{
"title": "White label",
"url": "templates/white-label/index.html"
}]
}
]
}
---
title: Aan de slag
layout: content-page
permalink: aan-de-slag/document-structuur.html
skipBacklink: true
inpagenav: true
additionalStyles: [
'uno/components/navigation/inpage.css'
]
---
<h1>Documentstructuur</h1>
<p>Onderstaande <span lang="en-US">snippet</span> bevat de minimale inhoud van een uno-pagina:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="nl"&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="/node_modules/uno/dist/core/uno.css" media="screen" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
&lt;/head&gt;
&lt;body&gt;
HIER KOMT DE INHOUD VAN JE PAGINA
&lt;script src="/node_modules/when/es6-shim/Promise.min.js"&gt;&lt;/script&gt;
&lt;script src="/node_modules/systemjs/dist/system.js"&gt;&lt;/script&gt;
&lt;script&gt;
System.config({
packages: {
'/': {
defaultExtension: 'js'
}
}
});
System.import('/uno/core/a11y.js').then(function (module) {
new module.A11y();
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<ul>
<li>Uno bevat HTML5 elementen. Begin daarom altijd met de <code>!DOCTYPE html</code> declaratie.</li>
<li>Uno is <span lang="en-US">mobile-first</span>. Om de juiste weergave en <span lang="en-US">touch zooming</span> te garanderen voeg je de <span lang="en-US">viewport meta tag</span> toe
aan de <code lang="en-US">head</code></li>
<li>Voor oudere versies van internet <span lang="en-US">explorer</span> voegen we de <span lang="en-US">meta tag</span> <code lang="en-US">x-ua-compatible</code> toe
aan de <code lang="en-US">head</code>, zodat deze zich altijd als de laatst beschikbare versie gedraagt.</li>
</ul>
<div class="prev-next">
<a href="../aan-de-slag/uno-gebruiken.html" class="prev-next__prev">
<span class="prev-next__meta">VORIGE</span>
<span class="prev-next__text">2. Configuratie</span>
</a>
<a href="../aan-de-slag/pagina-opbouw.html" class="prev-next__next">
<span class="prev-next__meta">VOLGENDE</span>
<span class="prev-next__text">4. Pagina opbouw</span>
</a>
</div>
\ No newline at end of file
---
title: Aan de slag
layout: content-page
permalink: aan-de-slag/
skipBacklink: true
inpagenav: true
additionalStyles: [
'uno/components/hint/hint.css',
'uno/components/meta/meta.css',
'uno/components/navigation/inpage.css'
]
---
<h1>Installatie</h1>
<aside class="hint">
<span class="hint__title" lang="en-US">Uno en Uno Angular</span>
Je bekijkt nu de documentatie van Uno. Er is ook een <a href="http://uno-angular.scs-lsz.ota.duo.nl/docs/demo#/introductiepagina">Uno Angular library</a>. Als je die gebruikt hoeft je
deze versie van Uno niet apart te installeren.</p>
</aside>
<p>
We maken gebruik van een <span lang="en-US">private npm-package</span> die alleen toegankelijk is via het DUO-netwerk.
Gebruik hiervoor <a href="https://wiki.prd.duo.nl/display/JAVA/Artifactory+Gebruiker+Handleiding"
rel="external" lang="en-US">artifactory</a> als <span lang="en-US">registry</span>.
</p>
<ol class="list list--decimal-circled">
<li>Installeer <a href="https://nodejs.org/en/" rel="external">nodejs</a>.
<li>Voer het commando <code lang="en-US">npm install uno --save</code> uit in je <span lang="en-US">terminal</span> om uno te installeren.</li>
</ol>
<!--TODO: -->
<!--<p>Werk je vanaf een externe werkplek? Gezipte versies van de dist-folder vind je hier. In je package.json kun je dan verwijzen naar 4.0.0.tgzip</p>-->
<div class="prev-next">
<a href="uno-gebruiken.html" class="prev-next__next">
<span class="prev-next__meta">VOLGENDE</span>
<span class="prev-next__text">2. Configuratie</span>
</a>
</div>
\ No newline at end of file
---
title: Aan de slag
layout: content-page
permalink: aan-de-slag/pagina-opbouw.html
skipBacklink: true
inpagenav: true
additionalStyles: [
'uno/components/navigation/inpage.css'
]
---
<h1>Pagina opbouw</h1>
<p>Hier komt een stukje tekst over de pagina opbouw.</p>
<h2>Wrapper</h2>
<p>Elke pagina begint met een <code>&lt;div class="wrapper"&gt;</code>. Alle inhoud van
de pagina bevindt zich binnen deze <span lang="en-US">wrapper</span></p>
<h2>Breedte</h2>
<p>De breedte van de <span lang="en-US">content</span> wordt zo ingesteld, zodat de regellengte maximaal
600&nbsp;pixels is. Dit wordt bereikt door verschillende <code>.col-{screensize}</code>
toe te passen.<br/>
Door een <code>.col-<em>xx</em>-offset-<em>##</em></code> op de div te zetten
wordt het <span lang="en-US">content</span> blok worden gecentreerd op de pagina.</p>
<pre><code>&lt;div class="row"&gt;
&lt;div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1"&gt;
&lt;div class="content-background"&gt;
&lt;div class="content"&gt;
&lt;p&gt;Inhoud van de pagina&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<h2>Main</h2>
<p>Zet alle <span lang="en-US">content</span> van een pagina (alle zaken behalve het DUO logo, de navigatie en de <span lang="en-US">footer</span>) in een <code lang="en-US">main</code> element.
De <span lang="en-US">main</span> heeft een minimale hoogte van 70vh (70% van de <span lang="en-US">view height</span>). Als je teveel zaken buiten de <span lang="en-US">main</span> zet heb je kans dat er zaken buiten beeld gedrukt worden.</p>
<p>Zorg er wel voor dat niet meer dan één <code lang="en-US">main</code> element per pagina is. <span lang="en-US">Screenreaders</span> verwachten ook maar één keer een <span lang="en-US">main</span> per pagina, namelijk het stuk waar de pagina over gaat.</p>
<p>Meestal zal een <code lang="en-US">skiplinks</code> ook verwijzen naar de <span lang="en-US">main</span>.</p>
<pre><code>
&lt;main class=&quot;skiplink-target main&quot; id=&quot;content&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
[content bijvoorbeeld intro]
&lt;/div&gt;
&lt;/main&gt;
</code>
</pre>
<h2>Achtergrondkleur</h2>
<p>De inhoud van de pagina wordt weergegeven op een witte achtergrond, dit
wordt bereikt door het <code>.content</code> blok in een
<code>&lt;div class="content-background"&gt;</code> te plaatsen.</p>
<pre><code>&lt;div class="row"&gt;
&lt;div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1"&gt;
&lt;!-- Geeft deze content een achtergrond --&gt;
&lt;div class="content-background"&gt;
&lt;div class="content"&gt;
&lt;p&gt;Inhoud van de pagina&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3>Alternatieve achtergrond kleur</h3>
<p>De achtergrond
kan gewijzigd door een extra <span lang="en-US">class</span> toe te voegen <code>.background-{<em><a href="../core/colors/index.html">rijkshuisstijl kleur</a></em>}</code>.
Gebruik dit alleen voor bijvoorbeeld een <span lang="en-US">link list</span>, niet voor tekst blokken.</p>
<h2>Content</h2>
<p>Een pagina bestaat altijd uit <code>.content</code> blokken. Binnen de contentvlak kun je de pagina beginnen met een intro <code>.content__header</code></p>
<h3>Content Header</h3>
<p>De meeste pagina's beginnen met een intro. Deze bevat de titel van de pagina
met een korte introductie. De titel & de introductie paragraaf worden geplaatst
in een <code lang="en-US">header</code> element met de class <code>.content__header</code>.
Het intro blok bevat ook de eventuele <code>.backlink</code>.</p>
<pre><code>&lt;section class="row"&gt;
&lt;div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1"&gt;
&lt;div class="content"&gt;
&lt;a href="#" class="content__header-backlink backlink"&gt;Terug&lt;/a&gt;
&lt;header class="content__header"&gt;
&lt;h1 class="content__header-title">Titel&lt;/h1&gt;
&lt;p class="content__header-paragraph"&gt;Intro&lt;/p&gt;
&lt;/header&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</code></pre>
<h3>Titel met subtitel</h3>
<p>De subtitel is <em>geen</em> <code>&lt;h2&gt;</code> maar een gewone paragraaf</p>
<blockquote class="quote">
<span lang="en-US">
<code>h1–h6</code> elements must not be used to markup subheadings,
subtitles, alternative titles and taglines unless intended to be the
heading for a new section or subsection.
</span>
<span class="meta">– W3</span><br>
<a href="https://www.w3.org/TR/html5/common-idioms.html" title="Lees meer">Lees meer over html5</a>
</blockquote>
<div class="example">
<header class="content__header">
<h1 class="content__header-title">Titel van de pagina</h1>
<p class="subheading">Subtitel van de pagina</p>
<p class="content__header-paragraph">Eventuele introductie text</p>
</header>
</div>
<h3>Titel met meta informatie</h3>
<div class="example">
<header class="content__header">
<h1 class="content__header-title">Terugmeldingen 2e voorlopige foto
2015 mbo vavo beschikbaar</h1>
<ul class="meta">
<li class="meta__item">9 Maart 2016</li>
<li class="meta__item">Leerlingenadministratie</li>
</ul>
</header>
</div>
<h3>Titel met voortgangsindicatie</h3>
<div class="example">
<header class="content__header">
<h1 class="content__header-title">Contactgegevens instelling</h1>
<p class="meta meta--progress">Stap 1 van 4 – Eerste opvang nieuwkomers VO</p>
</header>
</div>
<h3>Extra kolom witruimte</h3>
<p>Op grotere schermen kan het wenselijk zijn een extra kolom witruimte aan de linker
en rechter kant van het content vlak toe te voegen. Hiervoor moet op de <code lang="us-EN">body</code>
<span lang="en-US">tag</span> een <span lang="en-US">class</span> worden toegevoegd <code>.theme--large-padding</code>.</p>
<h3>Minder witruimte</h3>
<p>Voor o.a. medewerkersschermen kan het juist wenselijk zijn om minder witruimte
tussen de verschillende content blokken te hebben. Voeg hiervoor de <span lang="en-US">modifier</span>
<code>.content--compact</code> toe aan het <code>.content</code> blok. De witruimte
bovenaan het <span lang="en-US">content</span> vlak wordt hiermee verkleind. Deze <span lang="en-US">modifier</span> kan <em>niet</em> worden
gebruikt in combinatie met <code>.theme--large-padding</code>.</p>
<pre><code>&lt;div class="row"&gt;
&lt;div class="col-xs-12 col-lg-10 col-lg-offset-1"&gt;
&lt;div class="content-background"&gt;