Add files
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Buttons
|
||||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Buttons
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Basic button styles
|
||||
|
||||
### Links that look like buttons
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-purple }
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-green }
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-outline }
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-purple }
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-green }
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn .btn-outline }
|
||||
```
|
||||
|
||||
### Button element
|
||||
|
||||
GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
|
||||
|
||||
<div class="code-example">
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
</div>
|
||||
```html
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Using utilities with buttons
|
||||
|
||||
### Button size
|
||||
|
||||
Wrap the button in a container that uses the [font-size utility classes]({% link docs/utilities/typography.md %}) to scale buttons:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<span class="fs-6">
|
||||
[Big ass button](https://just-the-docs.com){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](https://just-the-docs.com){: .btn }
|
||||
</span>
|
||||
</div>
|
||||
```markdown
|
||||
<span class="fs-8">
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](https://just-the-docs.com){: .btn }
|
||||
</span>
|
||||
```
|
||||
|
||||
### Spacing between buttons
|
||||
|
||||
Use the [margin utility classes]({% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
[Button with space](https://just-the-docs.com){: .btn .btn-purple .mr-2 }
|
||||
[Button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
|
||||
[Button with more space](https://just-the-docs.com){: .btn .btn-green .mr-4 }
|
||||
[Button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
</div>
|
||||
```markdown
|
||||
[Button with space](https://just-the-docs.com){: .btn .btn-purple .mr-2 }
|
||||
[Button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
|
||||
[Button with more space](https://just-the-docs.com){: .btn .btn-green .mr-4 }
|
||||
[Button](https://just-the-docs.com){: .btn .btn-blue }
|
||||
```
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
title: Callouts
|
||||
parent: UI Components
|
||||
nav_order: 7
|
||||
---
|
||||
|
||||
# Callouts
|
||||
{: .d-inline-block }
|
||||
|
||||
New (v0.4.0)
|
||||
{: .label .label-green }
|
||||
|
||||
Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: [*block IALs*](https://kramdown.gettalong.org/quickref.html#block-attributes).
|
||||
|
||||
Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`.
|
||||
|
||||
{: .warning }
|
||||
These callout names are *not* pre-defined by the theme: you need to define your own names.
|
||||
|
||||
When you have [configured]({% link docs/configuration.md %}#callouts) the `color` and (optional) `title` for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.[^postfix]
|
||||
|
||||
[^postfix]:
|
||||
You can put the callout markup either before or after its content.
|
||||
|
||||
## An untitled callout
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
{: .highlight }
|
||||
A paragraph
|
||||
```
|
||||
|
||||
{: .highlight }
|
||||
A paragraph
|
||||
|
||||
|
||||
## A single paragraph callout
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
{: .note }
|
||||
A paragraph
|
||||
```
|
||||
|
||||
{: .note }
|
||||
A paragraph
|
||||
|
||||
```markdown
|
||||
{: .note-title }
|
||||
> My note title
|
||||
>
|
||||
> A paragraph with a custom title callout
|
||||
```
|
||||
|
||||
{: .note-title }
|
||||
> My note title
|
||||
>
|
||||
> A paragraph with a custom title callout
|
||||
|
||||
## A multi-paragraph callout
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
{: .important }
|
||||
> A paragraph
|
||||
>
|
||||
> Another paragraph
|
||||
>
|
||||
> The last paragraph
|
||||
```
|
||||
|
||||
{: .important }
|
||||
> A paragraph
|
||||
>
|
||||
> Another paragraph
|
||||
>
|
||||
> The last paragraph
|
||||
|
||||
```markdown
|
||||
{: .important-title }
|
||||
> My important title
|
||||
>
|
||||
> A paragraph
|
||||
>
|
||||
> Another paragraph
|
||||
>
|
||||
> The last paragraph
|
||||
```
|
||||
|
||||
{: .important-title }
|
||||
> My important title
|
||||
>
|
||||
> A paragraph
|
||||
>
|
||||
> Another paragraph
|
||||
>
|
||||
> The last paragraph
|
||||
|
||||
## An indented callout
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
> {: .highlight }
|
||||
A paragraph
|
||||
```
|
||||
|
||||
> {: .highlight }
|
||||
A paragraph
|
||||
|
||||
## Indented multi-paragraph callouts
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
> {: .new }
|
||||
> > A paragraph
|
||||
> >
|
||||
> > Another paragraph
|
||||
> >
|
||||
> > The last paragraph
|
||||
```
|
||||
|
||||
> {: .new }
|
||||
> > A paragraph
|
||||
> >
|
||||
> > Another paragraph
|
||||
> >
|
||||
> > The last paragraph
|
||||
|
||||
|
||||
## Nested callouts
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
{: .important }
|
||||
> {: .warning }
|
||||
> A paragraph
|
||||
```
|
||||
|
||||
{: .important }
|
||||
> {: .warning }
|
||||
> A paragraph
|
||||
|
||||
## Opaque background
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
```markdown
|
||||
{: .important }
|
||||
> {: .opaque }
|
||||
> <div markdown="block">
|
||||
> {: .warning }
|
||||
> A paragraph
|
||||
> </div>
|
||||
```
|
||||
|
||||
{: .important }
|
||||
> {: .opaque }
|
||||
> <div markdown="block">
|
||||
> {: .warning }
|
||||
> A paragraph
|
||||
> </div>
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
title: Code
|
||||
parent: UI Components
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# Code
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Inline code
|
||||
|
||||
Code can be rendered inline by wrapping it in single back ticks.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
## Heading with `<inline code snippet>` in it.
|
||||
{: .no_toc }
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
## Heading with `<inline code snippet>` in it.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Syntax highlighted code blocks
|
||||
|
||||
Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
||||
Syntax highlighting, line numbers, and HTML compression do not work together; **the combination of these features generates invalid HTML that renders incorrectly**. To learn more, see ["Code with line numbers"]({% link docs/ui-components/code/line-numbers.md %}).
|
||||
|
||||
---
|
||||
|
||||
## Code blocks with rendered examples
|
||||
|
||||
To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
```
|
||||
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](https://just-the-docs.com){: .btn }
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
||||
---
|
||||
|
||||
## Mermaid diagram code blocks
|
||||
{: .d-inline-block }
|
||||
|
||||
New (v0.4.0)
|
||||
{: .label .label-green }
|
||||
|
||||
[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. **It is disabled by default**. However, you can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`.
|
||||
|
||||
The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)):
|
||||
|
||||
```yaml
|
||||
mermaid:
|
||||
# Version of mermaid library
|
||||
# Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
|
||||
version: "9.1.3"
|
||||
```
|
||||
|
||||
Additional configuration options are loaded through `_includes/mermaid_config.js`. By default, the contents of the file are the empty object:
|
||||
|
||||
```js
|
||||
// _includes/mermaid_config.js
|
||||
{}
|
||||
```
|
||||
|
||||
This loads the default settings.
|
||||
|
||||
The contents of this object should follow [mermaid's configuration API](https://mermaid.js.org/config/configuration.html). For example, to override the theme, change `_includes/mermaid_config.js` to:
|
||||
|
||||
```js
|
||||
// _includes/mermaid_config.js
|
||||
{
|
||||
theme: "forest"
|
||||
}
|
||||
```
|
||||
|
||||
Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following:
|
||||
|
||||
{% highlight markdown %}
|
||||
```mermaid
|
||||
graph TD;
|
||||
accTitle: the diamond pattern
|
||||
accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
||||
which renders:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
accTitle: the diamond pattern
|
||||
accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.*
|
||||
|
||||
### Using a local mermaid library
|
||||
|
||||
To load a local version of mermaid, also use the `path` key to specify the location of the library; e.g.
|
||||
|
||||
```yaml
|
||||
mermaid:
|
||||
version: "10.1.0"
|
||||
# for (v10+)
|
||||
path: "/assets/js/mermaid.esm.min.mjs"
|
||||
# for (<v10):
|
||||
# path: "/assets/js/mermaid.min.js"
|
||||
# Note: copy both `mermaid.esm.min.mjs` (v10+) or `mermaid.min.js` (<v10) and the associated
|
||||
# `.map` file from the specified version of `mermaid/dist` to `/assets/js/`.
|
||||
```
|
||||
|
||||
For mermaid versions `>=10`, this file is imported directly as an ESM module (rather than as a plain `<script>` tag); users should use the `mermaid.esm.min.mjs` file. In contrast, for mermaid versions `<10`, this file is loaded as a script tag; it should be a standalone CJS file (i.e. `mermaid.min.js`).
|
||||
|
||||
{: .warning }
|
||||
Mermaid versions `10.0` - `10.1` (and possibly, future releases) still encode relative imports in `mermaid.esm.min.mjs`. Local users must copy *all* of the contents of the `dist` folder to the specified path (preserving the relative location of the files). Just the Docs is actively monitoring mermaid releases; an upstream fix is planned.
|
||||
|
||||
### Using mermaid with AsciiDoc
|
||||
|
||||
Users of [AsciiDoc](https://asciidoc.org/) (e.g. via [jekyll-asciidoc](https://github.com/asciidoctor/jekyll-asciidoc)) may need additional configuration to use mermaid.
|
||||
|
||||
By default, AsciiDoc generates HTML markup that mermaid cannot properly parse. The simplest way to resolve this is to use a [passthrough block](https://docs.asciidoctor.org/asciidoc/latest/pass/pass-block/):
|
||||
{% highlight asciidoc %}
|
||||
++++
|
||||
<pre class="language-mermaid">
|
||||
graph TD;
|
||||
accTitle: the diamond pattern
|
||||
accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
</pre>
|
||||
++++
|
||||
{% endhighlight %}
|
||||
|
||||
Alternatively, community member [@flyx](https://github.com/flyx) has contributed a Ruby extension that does not require extra markup. The extension is available [as a GitHub Gist](https://gist.github.com/flyx/9fff080cf4edc95d495bc661a002232c). Thank you to [@flyx](https://github.com/flyx)!
|
||||
|
||||
The [asciidoctor-diagram](https://docs.asciidoctor.org/diagram-extension/latest/) extension which also supports mermaid is not recommended for use with Just the Docs, since it requires separate configuration e.g. for theming, and is known to not be trivial to set up.
|
||||
|
||||
## Copy button
|
||||
{: .d-inline-block }
|
||||
|
||||
New (v0.4.0)
|
||||
{: .label .label-green }
|
||||
|
||||
The copy button for code blocks can be enabled or disabled via the `enable_copy_code_button` key in `_config.yml`. By default, the value of this key is `false`; users need to opt-in.
|
||||
|
||||
```yaml
|
||||
# For copy button on code
|
||||
enable_copy_code_button: true
|
||||
```
|
||||
|
||||
Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work. In addition, this feature uses `navigator.clipboard`, which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (such as over HTTPS). If the site is viewed in an insecure context, the copy button will not work ([relevant issue: #1202](https://github.com/just-the-docs/just-the-docs/issues/1202)).
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: Line Numbers
|
||||
parent: Code
|
||||
---
|
||||
|
||||
# Code Snippets with Line Numbers
|
||||
|
||||
{: .warning }
|
||||
In prior versions of the docs, we provided "workarounds" to rendering issues arising from code snippets with line numbers. While these seemed to resolve visual layout issues, they did not resolve core issues with Jekyll generating invalid HTML. See [the detailed explanation](#detailed-error-explanation) for more information.
|
||||
|
||||
The default settings for HTML compression are incompatible with the HTML
|
||||
produced by Jekyll for line numbers from highlighted code
|
||||
-- both when using Kramdown code fences and when using Liquid highlight tags.
|
||||
|
||||
To avoid non-conforming HTML and unsatisfactory layout, HTML compression
|
||||
can be turned off by using the following configuration option:
|
||||
|
||||
{% highlight yaml %}
|
||||
compress_html:
|
||||
ignore:
|
||||
envs: all
|
||||
{% endhighlight %}
|
||||
|
||||
When using Kramdown code fences, line numbers are turned on globally by the
|
||||
following configuration option:
|
||||
|
||||
{% highlight yaml %}
|
||||
kramdown:
|
||||
syntax_highlighter_opts:
|
||||
block:
|
||||
line_numbers: true
|
||||
{% endhighlight %}
|
||||
|
||||
Line numbers can then be suppressed locally using Liquid tags (_without_ the
|
||||
`linenos` option) instead of fences:
|
||||
|
||||
{% highlight yaml %}
|
||||
{% raw %}{% highlight some_language %}
|
||||
Some code
|
||||
{% endhighlight %}{% endraw %}
|
||||
{% endhighlight %}
|
||||
|
||||
## Detailed Error Explanation
|
||||
|
||||
Consider this following code snippet, intended to highlight a simple Ruby program:
|
||||
|
||||
```
|
||||
{% raw %}{% highlight ruby linenos %}
|
||||
def foo
|
||||
puts 'foo'
|
||||
end
|
||||
{% endhighlight %}{% endraw %}
|
||||
```
|
||||
|
||||
If this is directly placed within a file processed by Jekyll (via Just the Docs, with HTML compression enabled), the following markup will be generated:
|
||||
|
||||
```html
|
||||
<figure class="highlight">><code class="language-ruby" data-lang="ruby"><div class="table-wrapper"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
|
||||
2
|
||||
3
|
||||
</pre><td class="code"><pre><span class="k">def</span> <span class="nf">foo</span>
|
||||
<span class="nb">puts</span> <span class="s1">'foo'</span>
|
||||
<span class="k">end</span>
|
||||
</pre></figure>
|
||||
```
|
||||
|
||||
This HTML is invalid; in particular, there are two issues:
|
||||
|
||||
1. there are many missing closing tags, and a superfluous `>`, which produce visually garbled output
|
||||
2. a `<table>` is placed within a `<code>` element, which is syntactically invalid HTML (but is often allowed by browsers)
|
||||
|
||||
To emphasize this first difference, here is the same markup output, indented by tag:
|
||||
|
||||
```html
|
||||
<figure class="highlight">
|
||||
>
|
||||
<code class="language-ruby" data-lang="ruby">
|
||||
<div class="table-wrapper">
|
||||
<table class="rouge-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter gl">
|
||||
<pre class="lineno">
|
||||
1
|
||||
2
|
||||
3
|
||||
</pre>
|
||||
<td class="code">
|
||||
<pre>
|
||||
<span class="k">def</span>
|
||||
<span class="nf">foo</span>
|
||||
<span class="nb">puts</span>
|
||||
<span class="s1">'foo'</span>
|
||||
<span class="k">end</span>
|
||||
</pre>
|
||||
</figure>
|
||||
```
|
||||
|
||||
In order, there are missing `</td>`, `</td>`, `</tr>`, `</tbody>`, `</table>`, `</div>`, and `</code>` tags. As a result, the following elements of the page - including the site footer - become visually garbled as browsers attempt to recover gracefully.
|
||||
|
||||
Prior workarounds we suggested (such as [Dmitry Hrabrov's in `jekyll-compress-html`#71](https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901)) resolve the missing tag problem. However, they still place a `<table>` within a `<code>` element. The HTML spec normatively states that `<code>` elements should only contain "[phrasing content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2)", which does not include `<table>` ([spec ref](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element)). To avoid incorrectly rendered HTML, the previously-suggested workaround using the current version of `_includes/fix_linenos.html` should _not_ be used!
|
||||
@@ -0,0 +1,9 @@
|
||||
<!-- ---
|
||||
title: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# UI Components
|
||||
|
||||
To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
|
||||
{: .fs-6 .fw-300 } -->
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Labels
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Labels
|
||||
|
||||
Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
</div>
|
||||
```markdown
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue }
|
||||
|
||||
Stable
|
||||
{: .label .label-green }
|
||||
|
||||
New release
|
||||
{: .label .label-purple }
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow }
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red }
|
||||
```
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
title: Lists
|
||||
parent: UI Components
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Lists
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
Most lists can be rendered with pure Markdown.
|
||||
|
||||
## Unordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
</div>
|
||||
```markdown
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
_or_
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 3
|
||||
```
|
||||
|
||||
## Ordered list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
</div>
|
||||
```markdown
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
```
|
||||
|
||||
## Task list
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
</div>
|
||||
```markdown
|
||||
- [ ] hello, this is a todo item
|
||||
- [ ] hello, this is another todo item
|
||||
- [x] goodbye, this item is done
|
||||
```
|
||||
|
||||
## Definition list
|
||||
|
||||
Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
</div>
|
||||
```html
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Tables
|
||||
parent: UI Components
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Tables
|
||||
|
||||
Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Typography
|
||||
parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Typography
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font stack
|
||||
|
||||
By default, Just the Docs uses a native system font stack for sans-serif fonts:
|
||||
|
||||
```scss
|
||||
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji"
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .code-example }
|
||||
|
||||
For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||
|
||||
```scss
|
||||
"SFMono-Regular", Menlo, Consolas, Monospace
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .text-mono .code-example }
|
||||
|
||||
---
|
||||
|
||||
## Responsive type scale
|
||||
|
||||
Just the Docs uses a responsive type scale that shifts depending on the viewport size.
|
||||
|
||||
| Selector | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:----------------------|:---------------------------------|:------------------------------|
|
||||
| `h1`, `.text-alpha` | 32px | 36px |
|
||||
| `h2`, `.text-beta` | 18px | 24px |
|
||||
| `h3`, `.text-gamma` | 16px | 18px |
|
||||
| `h4`, `.text-delta` | 14px | 16px |
|
||||
| `h5`, `.text-epsilon` | 16px | 18px |
|
||||
| `h6`, `.text-zeta` | 18px | 24px |
|
||||
| `body` | 14px | 16px |
|
||||
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
Headings are rendered like this:
|
||||
|
||||
<div class="code-example">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Body text
|
||||
|
||||
Default body text is rendered like this:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Inline elements
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page]({{site.baseurl}}/).
|
||||
</div>
|
||||
```markdown
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page]({{site.baseurl}}/).
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
|
||||
|
||||
[View typography utilities]({% link docs/utilities/typography.md %}){: .btn .btn-outline }
|
||||
Reference in New Issue
Block a user