40 guide/components/page-section/index.html
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page section | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/25.49666b34.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/26.e11a0ced.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/29.f568255d.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/30.afc6900a.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/33.fc41216d.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/35.55855461.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" aria-current="page" class="active sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-section"><a href="#page-section" class="header-anchor">#</a> Page section</h1> <p>The <code>&lt;page-section&gt;</code> component will render semantic HTML. By adding a <code>:section-title</code> prop to the <code>&lt;page-section&gt;</code> component, the localized text string will be rendered in an <code>h2</code> header element.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-section</span> <span class="token attr-name">:section-title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.settings<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue" target="_blank" rel="noopener noreferrer">View the page section component source code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webui-vue/guide/components/info-tooltip/" class="prev">
InfoTooltip
</a></span> <span class="next"><a href="/webui-vue/guide/components/page-title/">
Page title
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/25.49666b34.js" defer></script>
</body>
</html>
49 guide/components/page-title/index.html
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page title | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/26.e11a0ced.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/25.49666b34.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/29.f568255d.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/30.afc6900a.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/33.fc41216d.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/35.55855461.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" aria-current="page" class="active sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" class="sidebar-link">StatusIcon</a></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="page-title"><a href="#page-title" class="header-anchor">#</a> Page title</h1> <p>The <code>&lt;page-title&gt;</code> component will automatically render the page title that corresponds with the title property set in the route record's meta field in <code>src/router/routes.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/router/routes.js</span>
<span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'login'</span><span class="token punctuation">,</span>
component<span class="token operator">:</span> Login<span class="token punctuation">,</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
title<span class="token operator">:</span> i18n<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'appPageTitle.login'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>Optional page descriptions can be included by using the description prop <code>:description</code> prop and passing in the i18n localized text string. Translations are found in the <code>src/locales</code> folder.</p> <div class="language-vue extra-class"><pre class="language-vue"><code>// Example: `src/views/AccessControl/Ldap/Ldap.vue`
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>page-title</span> <span class="token attr-name">:description</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">'</span>pageLdap.pageDescription<span class="token punctuation">'</span>)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p><a href="https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue" target="_blank" rel="noopener noreferrer">View the page title component source code<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webui-vue/guide/components/page-section/" class="prev">
Page section
</a></span> <span class="next"><a href="/webui-vue/guide/components/status-icon/">
StatusIcon
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/26.e11a0ced.js" defer></script>
</body>
</html>
52 guide/components/status-icon/index.html

Large diffs are not rendered by default.

497 guide/components/table/index.html

Large diffs are not rendered by default.

74 guide/components/toasts/index.html

Large diffs are not rendered by default.

39 guide/guidelines/colors.html

Large diffs are not rendered by default.

50 guide/guidelines/motion.html
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Motion | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/29.f568255d.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/25.49666b34.js"><link rel="prefetch" href="/webui-vue/assets/js/26.e11a0ced.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/30.afc6900a.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/33.fc41216d.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/35.55855461.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" aria-current="page" class="active sidebar-link">Motion</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#easing" class="sidebar-link">Easing</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/guidelines/motion.html#duration" class="sidebar-link">Duration</a></li></ul></li><li><a href="/webui-vue/guide/guidelines/typography.html" class="sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="motion"><a href="#motion" class="header-anchor">#</a> Motion</h1> <p>The motion guidelines are based on Carbon Design System guidelines. These guidelines avoid easing curves that are unnatural, distracting, or purely decorative. <a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">The documentation below is attributed to Carbon's animation documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="easing"><a href="#easing" class="header-anchor">#</a> Easing</h2> <h3 id="productive-motion"><a href="#productive-motion" class="header-anchor">#</a> Productive motion</h3> <p>Productive motion creates a sense of efficiency and responsiveness, while remaining subtle and out of the way. Productive motion is appropriate for moments when the user needs to focus on completing tasks.</p> <h3 id="expressive-motion"><a href="#expressive-motion" class="header-anchor">#</a> Expressive motion</h3> <p>Expressive motion delivers enthusiastic, vibrant, and highly visible movement. Use expressive motion for significant moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion.</p> <h3 id="easing-tokens"><a href="#easing-tokens" class="header-anchor">#</a> Easing tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
</code></pre></div><h2 id="duration"><a href="#duration" class="header-anchor">#</a> Duration</h2> <p>Duration is calculated based on the style and size of the motion. Among the two motion styles, productive motion is significantly faster than expressive motion. Motion’s duration should be dynamic based on the size of the animation; the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.</p> <h3 id="duration-tokens"><a href="#duration-tokens" class="header-anchor">#</a> Duration tokens</h3> <div class="language- extra-class"><pre class="language-text"><code>$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
$duration--fast-02: 110ms; //Micro-interactions such as fade
$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
$duration--moderate-02: 240ms; //Expansion, system communication, toast
$duration--slow-01: 400ms; //Large expansion, important system notifications
$duration--slow-02: 700ms; //Background dimming
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webui-vue/guide/guidelines/colors.html" class="prev">
Colors
</a></span> <span class="next"><a href="/webui-vue/guide/guidelines/typography.html">
Typography
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/29.f568255d.js" defer></script>
</body>
</html>
38 guide/guidelines/typography.html
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Typography | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/30.afc6900a.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/25.49666b34.js"><link rel="prefetch" href="/webui-vue/assets/js/26.e11a0ced.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/29.f568255d.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/33.fc41216d.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/35.55855461.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guidelines</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/guidelines/colors.html" class="sidebar-link">Colors</a></li><li><a href="/webui-vue/guide/guidelines/motion.html" class="sidebar-link">Motion</a></li><li><a href="/webui-vue/guide/guidelines/typography.html" aria-current="page" class="active sidebar-link">Typography</a></li></ul></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="typography"><a href="#typography" class="header-anchor">#</a> Typography</h1></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webui-vue/guide/guidelines/motion.html" class="prev">
Motion
</a></span> <span class="next"><a href="/webui-vue/guide/unit-testing/">
Unit Testing
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/30.afc6900a.js" defer></script>
</body>
</html>
34 guide/index.html
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Getting Started | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/33.fc41216d.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/25.49666b34.js"><link rel="prefetch" href="/webui-vue/assets/js/26.e11a0ced.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/29.f568255d.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/30.afc6900a.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/35.55855461.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="active sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting Started</h1> <p>This guide outlines the architecture and technologies used to build the OpenBMC Web UI. This guide exists to serve the following goals:</p> <ol><li>Improve contributor efficiency while maintaining the quality and consistency of the user interface</li> <li>Act as a collection of community agreed-upon standards</li></ol> <h2 id="coding-standards"><a href="#coding-standards" class="header-anchor">#</a> Coding Standards</h2> <p>Having an understanding of semantic HTML, CSS, and JavaScript is the critical knowledge required to contribute to this project. The frameworks and libraries used to build this UI include:</p> <ul><li><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuex.vuejs.org/" target="_blank" rel="noopener noreferrer">Vuex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">Axios<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://bootstrap-vue.js.org/" target="_blank" rel="noopener noreferrer">Bootstrap-vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://vuelidate.js.org/" target="_blank" rel="noopener noreferrer">Vuelidate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Acquiring an understanding of these technologies will also be necessary.</p></div> <p>You will find more information about the standards and best practices in the <a href="/webui-vue/guide/coding-standards/">Coding Standards section of this guide</a>.</p> <h2 id="guidelines"><a href="#guidelines" class="header-anchor">#</a> Guidelines</h2> <p>The <a href="/guide/guidelines/colors">guidelines section</a> contains the OpenBMC community agreed-upon decisions on color, motion, and typography within the application. How to theme the application to meet company brand guidelines is documented in <a href="/themes">Themes</a>.</p> <h2 id="components"><a href="#components" class="header-anchor">#</a> Components</h2> <p>The <a href="/webui-vue/guide/components/">components section</a> is a guide to using both custom Vue components and components from the Bootstrap-Vue library.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/webui-vue/guide/coding-standards/">
Overview
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/33.fc41216d.js" defer></script>
</body>
</html>
76 guide/quickstart/page-anatomy.html

Large diffs are not rendered by default.

104 guide/quickstart/store-anatomy.html

Large diffs are not rendered by default.

40 guide/unit-testing/index.html

Large diffs are not rendered by default.

36 index.html
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.7.1">

<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">

<link rel="preload" href="/webui-vue/assets/css/0.styles.bc1b00f6.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.276b70ec.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.2d91b9ef.js" as="script"><link rel="preload" href="/webui-vue/assets/js/35.55855461.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.4bfa5e6a.js"><link rel="prefetch" href="/webui-vue/assets/js/11.6851e2ca.js"><link rel="prefetch" href="/webui-vue/assets/js/12.747f9d18.js"><link rel="prefetch" href="/webui-vue/assets/js/13.2022ee8e.js"><link rel="prefetch" href="/webui-vue/assets/js/14.94f85c84.js"><link rel="prefetch" href="/webui-vue/assets/js/15.7940cb95.js"><link rel="prefetch" href="/webui-vue/assets/js/16.51250d20.js"><link rel="prefetch" href="/webui-vue/assets/js/17.530423d5.js"><link rel="prefetch" href="/webui-vue/assets/js/18.dd274cfe.js"><link rel="prefetch" href="/webui-vue/assets/js/19.c2582323.js"><link rel="prefetch" href="/webui-vue/assets/js/20.f138460b.js"><link rel="prefetch" href="/webui-vue/assets/js/21.4135a8db.js"><link rel="prefetch" href="/webui-vue/assets/js/22.b93bac1c.js"><link rel="prefetch" href="/webui-vue/assets/js/23.f49a34cc.js"><link rel="prefetch" href="/webui-vue/assets/js/24.3e74fc63.js"><link rel="prefetch" href="/webui-vue/assets/js/25.49666b34.js"><link rel="prefetch" href="/webui-vue/assets/js/26.e11a0ced.js"><link rel="prefetch" href="/webui-vue/assets/js/27.6a44cde5.js"><link rel="prefetch" href="/webui-vue/assets/js/28.06c667c8.js"><link rel="prefetch" href="/webui-vue/assets/js/29.f568255d.js"><link rel="prefetch" href="/webui-vue/assets/js/3.6e8591a9.js"><link rel="prefetch" href="/webui-vue/assets/js/30.afc6900a.js"><link rel="prefetch" href="/webui-vue/assets/js/31.68397595.js"><link rel="prefetch" href="/webui-vue/assets/js/32.f55e823f.js"><link rel="prefetch" href="/webui-vue/assets/js/33.fc41216d.js"><link rel="prefetch" href="/webui-vue/assets/js/34.1a776f50.js"><link rel="prefetch" href="/webui-vue/assets/js/36.65db3911.js"><link rel="prefetch" href="/webui-vue/assets/js/37.3ae8431d.js"><link rel="prefetch" href="/webui-vue/assets/js/38.7d096b47.js"><link rel="prefetch" href="/webui-vue/assets/js/4.c28e7bbc.js"><link rel="prefetch" href="/webui-vue/assets/js/5.92f66819.js"><link rel="prefetch" href="/webui-vue/assets/js/6.3df42983.js"><link rel="prefetch" href="/webui-vue/assets/js/7.459974fc.js"><link rel="prefetch" href="/webui-vue/assets/js/8.7f1fa30a.js"><link rel="prefetch" href="/webui-vue/assets/js/9.626ee14b.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.bc1b00f6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" aria-current="page" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/themes/" class="nav-link">
Themes
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <!----> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="openbmc-logo.svg" alt="hero"> <h1 id="main-title">
Style Guide and Coding Conventions
</h1> <p class="description">
Guidance on code style and development for the OpenBMC browser-based UI
</p> <p class="action"><a href="/webui-vue/guide/" class="nav-link action-button">
Getting Started
</a></p></header> <!----> <div class="theme-default-content custom content__default"></div> <!----></main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.276b70ec.js" defer></script><script src="/webui-vue/assets/js/2.2d91b9ef.js" defer></script><script src="/webui-vue/assets/js/35.55855461.js" defer></script>
</body>
</html>
1 openbmc-logo.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 themes/customize.html

Large diffs are not rendered by default.

52 themes/env.html

Large diffs are not rendered by default.

211 themes/index.html

Large diffs are not rendered by default.