refactor: new project structure
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 bg-gray-100">100</div>
|
||||
<div class="p-3 bg-gray-200">200</div>
|
||||
<div class="p-3 bg-gray-300">300</div>
|
||||
<div class="p-3 bg-gray-400">400</div>
|
||||
<div class="p-3 bg-gray-500">500</div>
|
||||
<div class="p-3 bg-gray-600">600</div>
|
||||
<div class="p-3 bg-gray-700">700</div>
|
||||
<div class="p-3 bg-gray-800">800</div>
|
||||
<div class="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'colors'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Display headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Inline text elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Description list alignment
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'typography'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user