Current File : //www/varak.net/wiki.varak.net/vendor/oojs/oojs-ui/demos/tutorials/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>OOUI Tutorials</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/oojs-ui-wikimediaui-icons-editing-citation.css">
<link rel="stylesheet" href="../dist/oojs-ui-wikimediaui-icons-content.css">
<link rel="stylesheet" href="../dist/oojs-ui-wikimediaui.css">
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
<script src="../node_modules/prismjs/prism.js"></script>
<link rel="stylesheet" href="tutorials.css">
</head>
<body>
<a href="#" title="Back to top" class="scroll"><span></span></a>
<div class="container">
<nav></nav>
<div class="intro">
<h1 class="header">Welcome to OOUI Tutorials!</h1>
<p>
The OOUI library was created by the Wikimedia Foundation. It has a lot
of power under the hood, and a lot of potential for super-powerful
JavaScript applications in your browser.
</p>
</div>
<div>
<a id="install" href="#install">
<h2 class="section">
Install OOUI
</h2>
</a>
<hr>
<p>For a new tutorial project, create a project folder and access it:</p>
<p><code class="inline-code">mkdir ooui-tutorial</code></p>
<p><code class="inline-code">cd ooui-tutorial</code></p>
<p>Then run <code class="inline-code">npm init</code>.</p>
<p>You can just skip the questions asked during the init process by pressing "enter",
to say 'yes' to the default configuration (unless you wish to customize your
<code>package.json</code>, in which case go ahead and customize it).
</p>
<p>Next up: install OOUI by running:</p>
<code class="inline-code">npm install oojs-ui --save</code>
<p>
That's it. Now you should have OOUI installed locally in your project folder.
You are ready to pick a tutorial and start building a project.
</p>
<a id="tutorials" href="#tutorials">
<h2 class="section">
OOUI Tutorials
</h2>
</a>
<hr>
<p>
These are the OOUI tutorials. You can access them from the links in the table below or,
or from the toolbar at the top of this page. You can even access them from the page footer.
If you are new to OOUI, start with "OOUI Basics: Part 1".
</p>
<table>
<tr>
<th>Tutorial</th>
<th>Description</th>
</tr>
<tr>
<td><a href="collection/basics1/contents.html">OOUI Basics: Part 1</a></td>
<td>
<p>
Build a simple ToDo list App.
</p>
</td>
</tr>
<tr>
<td><a href="collection/basics2/contents.html">OOUI Basics: Part 2</a></td>
<td>Add more advanced features to the ToDo list app by developing custom widgets.</td>
</tr>
</table>
</div>
</div>
<footer class="tutorials-footer">
<div class="tutorials-footer-top">
<h1>Learn more about OOUI</h1>
</div>
<div class="tutorials-footer-content">
<div class="box-container">
<div class="box box-wide">
<h3>Tutorials</h3>
<a href="collection/basics1/contents.html">Basics: ToDo App - Part 1</a>
<a href="collection/basics2/contents.html">Basics: ToDo App - Part 2</a>
</div>
<div class="box-wide">
<h3>Documentation</h3>
<a href="https://doc.wikimedia.org/oojs-ui/master/js/">API Documentation</a>
<a href="https://www.mediawiki.org/wiki/OOUI">MediaWiki Docs</a>
</div>
<div class="box">
<h3>Demos</h3>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui">Widgets</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui">Icons</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=dialogs&theme=wikimediaui">Dialogs</a>
<a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=toolbars&theme=wikimediaui">Toolbars</a>
</div>
</div>
</div>
</footer>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/oojs/dist/oojs.jquery.js"></script>
<script src="../node_modules/javascript-stringify/javascript-stringify.js"></script>
<!-- Add the individual oojs-ui files for proper sourcemap support -->
<script src="../dist/oojs-ui-core.js"></script>
<script src="../dist/oojs-ui-toolbars.js"></script>
<script src="../dist/oojs-ui-widgets.js"></script>
<script src="../dist/oojs-ui-windows.js"></script>
<script src="../dist/oojs-ui-wikimediaui.js"></script>
<!-- Tutorial scripts -->
<script src="widgets/toolbar.js"></script>
<script src="assets/init.js"></script>
<script>
$( function () {
var toolbar = new Tutorials.Toolbar();
$( 'nav' ).append(
toolbar.$element
);
$( '.line-numbers.language-javascript' ).each( function () {
Prism.highlightElement( this );
} );
} )
</script>
</body>
</html>
Mini Shell