1 line
14 KiB
HTML
1 line
14 KiB
HTML
<!DOCTYPE html><html lang="en-US"><head><title>Components - Vite Frontend Starter</title><meta charset="utf-8"><meta name="author" content="Oleksandr Zakandaiev"><meta name="mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta name="keywords" content="vite,vituum,builder,frontend,starter,boilerplate,kit,twig,html,css,sass,scss,javascript,js,es6,optimized,autoprefixer,404,grid,htaccess,robots.txt,sitemap.xml,favicon"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta property="og:url" content=""><meta property="og:title" content="Components - Vite Frontend Starter"><meta property="og:description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta property="og:keywords" content="vite,vituum,builder,frontend,starter,boilerplate,kit,twig,html,css,sass,scss,javascript,js,es6,optimized,autoprefixer,404,grid,htaccess,robots.txt,sitemap.xml,favicon"><meta property="og:image" content=""><meta property="twitter:card" content="summary"><meta property="twitter:url" content=""><meta property="twitter:title" content="Components - Vite Frontend Starter"><meta property="twitter:description" content="Vite FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Vite builder"><meta property="twitter:image" content=""><link rel="canonical" href=""><link rel="image_src" href=""><link rel="icon shortcut" type="image/x-icon" sizes="any" href="/vite-frontend-starter/favicon.ico"><link rel="icon" type="image/svg+xml" href="/vite-frontend-starter/favicon.svg"><link rel="icon" type="image/png" href="/vite-frontend-starter/favicon.png"><link rel="apple-touch-icon" href="/vite-frontend-starter/favicon.png"><script type="module" crossorigin src="/vite-frontend-starter/js/KOn_KdpT.js"></script><link rel="stylesheet" crossorigin href="/vite-frontend-starter/css/CqaSHwNd.css"></head><body><script src="/vite-frontend-starter/data-theme.js"></script><header id="header" class="header"><div class="container"><div class="header__wrapper"><a href="/vite-frontend-starter" class="header__logo"><img class="header__logo-image" src="/vite-frontend-starter/img/BK4y5Bv0.svg" alt="Vite Logo" height="24"> <span class="header__logo-text">Vite Frontend Starter</span> <span class="label label_primary header__logo-label">v1.3.2</span></a><nav class="header__nav"><a href="/vite-frontend-starter" class="header__nav-item">Home</a> <a href="/vite-frontend-starter/guide" class="header__nav-item">Guide</a> <a href="/vite-frontend-starter/components" class="header__nav-item active">Components</a></nav><div class="header__appearance"><span data-theme-set="dark" class="header__appearance-item" title="Switch to dark theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/></svg></span><span data-theme-set="light" class="header__appearance-item" title="Switch to light theme"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/></svg></span></div><div class="header__social"><a href="https://github.com/zakandaiev/vite-frontend-starter" target="_blank" class="header__social-item" title="View on GitHub"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/></svg></a></div></div></div></header><main class="page-content"><div class="container"><div class="row gap-xs"><div class="col-xs-12 col-md-8 order-xs-2 order-md-1"><div class="section section_offset-bottom"><h1>Components</h1></div><section class="section section_offset border-top"><h2 class="section__title">Overview</h2><div class="section__body"><p>This starter is delivering with ready-to-use utils, styled components, helpers and much more. Some majors of these are described in this section.</p></div></section><section class="section section_offset border-top"><h2 class="section__title">Button</h2><div class="section__body"><div class="d-flex flex-wrap gap-1"><button type="button" class="btn">Default</button> <button type="button" class="btn btn_cancel">Cancel</button> <button type="button" class="btn btn_primary">Primary</button> <button type="button" class="btn btn_secondary">Secondary</button> <button type="button" class="btn btn_success">Success</button> <button type="button" class="btn btn_info">Info</button> <button type="button" class="btn btn_warning">Warning</button> <button type="button" class="btn btn_error">Error</button></div></div></section><section class="section section_offset border-top"><h2 class="section__title">Label</h2><div class="section__body"><div class="d-flex flex-wrap gap-1"><span class="label">Default</span> <span class="label label_cancel">Cancel</span> <span class="label label_primary">Primary</span> <span class="label label_secondary">Secondary</span> <span class="label label_success">Success</span> <span class="label label_info">Info</span> <span class="label label_warning">Warning</span> <span class="label label_error">Error</span></div></div></section><section class="section section_offset border-top"><h2 class="section__title">Loader</h2><div class="section__body"><div class="d-flex align-items-center flex-wrap gap-1"><span class="loader loader_xs"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none"/></svg> </span><span class="loader loader_sm"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none"/></svg> </span><span class="loader"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none"/></svg> </span><span class="loader loader_lg"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none"/></svg> </span><span class="loader loader_xl"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none"/></svg></span></div></div></section><section class="section section_offset border-top"><h2 class="section__title">Grid</h2><div class="section__body"><h4 class="mt-8">Grow and auto width columns controlled with <span class="label label_info">.fill</span> class</h4><div class="row fill"><div class="col"><div class="border radius p-2 text-center">Grow column</div></div><div class="col col-auto"><div class="border radius p-2 text-center">Auto column</div></div><div class="col"><div class="border radius p-2 text-center">Grow column</div></div></div><h4 class="mt-8">Equal-width columns defined in <span class="label label_info">.row</span> with <span class="label label_info">.cols-{breakpoint}-{size}</span> syntax</h4><div class="row cols-xs-2 cols-md-4"><div class="col"><div class="border radius p-2 text-center">1 column</div></div><div class="col"><div class="border radius p-2 text-center">2 column</div></div><div class="col"><div class="border radius p-2 text-center">3 column</div></div><div class="col"><div class="border radius p-2 text-center">4 column</div></div><div class="col"><div class="border radius p-2 text-center">5 column</div></div><div class="col"><div class="border radius p-2 text-center">6 column</div></div><div class="col"><div class="border radius p-2 text-center">7 column</div></div><div class="col"><div class="border radius p-2 text-center">8 column</div></div></div><h4 class="mt-8">Control column width in each <span class="label label_info">.col</span> with <span class="label label_info">.col-{breakpoint}-{size}</span> syntax</h4><div class="row"><div class="col-xs-12 col-md-3"><div class="border radius p-2 text-center">1 column</div></div><div class="col-xs-12 col-md-6"><div class="border radius p-2 text-center">2 column</div></div><div class="col-xs-12 col-md-3"><div class="border radius p-2 text-center">3 column</div></div><div class="col-xs-12"><div class="border radius p-2 text-center">4 column</div></div></div><h4 class="mt-8">Offset columns with <span class="label label_info">.offset-{breakpoint}-{size}</span> syntax</h4><div class="row"><div class="col-xs-12 col-md-3"><div class="border radius p-2 text-center">1 column</div></div><div class="col-xs-12 col-md-3 offset-md-3"><div class="border radius p-2 text-center">2 column</div></div><div class="col-xs-12 col-md-3 offset-md-3"><div class="border radius p-2 text-center">3 column</div></div><div class="col-xs-12 col-md-3 offset-md-3"><div class="border radius p-2 text-center">4 column</div></div></div><h4 class="mt-8">Gaps controlled with <span class="label label_info">.gap-{breakpoint}</span> for XY axes, <span class="label label_info">.gap-{breakpoint}-x</span> for X axis or <span class="label label_info">.gap-{breakpoint}-y</span> for Y axis syntax defined in <span class="label label_info">.row</span> class</h4><div class="row fill gap-xs cols-xs-2 cols-md-4"><div class="col"><div class="border radius p-2 text-center">1 column</div></div><div class="col"><div class="border radius p-2 text-center">2 column</div></div><div class="col"><div class="border radius p-2 text-center">3 column</div></div><div class="col"><div class="border radius p-2 text-center">4 column</div></div><div class="col"><div class="border radius p-2 text-center">5 column</div></div><div class="col"><div class="border radius p-2 text-center">6 column</div></div></div></div></section><section class="section section_offset border-top"><h2 class="section__title">Helper</h2><div class="section__body"><p>There are a bunch of different css helper classes such as <span class="label label_info">.d-flex</span>, <span class="label label_info">.mt-4</span>, <span class="label label_info">.bg-primary</span>, <span class="label label_info">.color-error</span> etc.</p><p>Full list you can view in <span class="label label_info">@/src/sass/component/helper.scss</span> file.</p></div></section><section class="section section_offset border-top"><h2 class="section__title">Table</h2><div class="section__body"><h4 class="mt-8">Default table</h4><table><thead><tr><th>Lorem ipsum</th><th>Dolor sit</th></tr></thead><tbody><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr></tbody></table><h4 class="mt-8">Table with <span class="label label_info">.table_striped</span> and <span class="label label_info">.table_sm</span> class</h4><table class="table_striped table_sm"><thead><tr><th>Lorem ipsum</th><th>Dolor sit</th></tr></thead><tbody><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr></tbody></table><h4 class="mt-8">Table with <span class="label label_info">.table_borderless</span> and <span class="label label_info">.table_sm</span> class</h4><table class="table_borderless table_sm"><thead><tr><th>Lorem ipsum</th><th>Dolor sit</th></tr></thead><tbody><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr><tr><td>Lorem ipsum</td><td>Dolor sit</td></tr></tbody></table></div></section><section class="section section_offset border-top"><h2 class="section__title">Toast</h2><div class="section__body"><p>Controls with <span class="label label_info">data-toast</span>, <span class="label label_info">data-toast-type</span> and <span class="label label_info">data-toast-duration</span> attributes.</p><p>If the <span class="label label_info">data-toast</span> is empty then toast text will be equal <span class="label label_info">event.target.textContent</span> .</p><div class="d-flex flex-wrap gap-1"><button type="button" class="btn" data-toast>Default</button> <button type="button" class="btn btn_success" data-toast data-toast-type="success">Success</button> <button type="button" class="btn btn_info" data-toast data-toast-type="info">Info</button> <button type="button" class="btn btn_warning" data-toast data-toast-type="warning">Warning</button> <button type="button" class="btn btn_error" data-toast data-toast-type="error">Error</button></div><p>Example with custom text, primary type and 10s duration.</p><button type="button" class="btn btn_cancel" data-toast="Lorem ipsum" data-toast-type="primary" data-toast-duration="10000">Customization example</button></div></section><section class="section section_offset border-top"><h2 class="section__title">Copy to clipboard</h2><div class="section__body"><p>Controls with <span class="label label_info">data-copy</span> attribute.</p><p>If the <span class="label label_info">data-copy</span> is empty then text to copy will be equal <span class="label label_info">event.target.textContent</span> .</p><p>Also you can combine data attributes and set <span class="label label_info">data-toast</span> to notify user.</p><button type="button" class="btn btn_cancel" data-copy="Lorem ipsum" data-toast="Copied to clipboard" data-toast-type="info">Example</button></div></section></div><div class="col-xs-12 col-md-3 offset-md-1 align-self-start position-sticky order-xs-1 order-md-2 bg-body"><div class="section__navigation"></div></div></div></main><footer id="footer" class="footer section_offset"><div class="container">Made by <a href="https://github.com/zakandaiev" target="_blank">Oleksandr Zakandaiev</a></div></footer></body></html> |