diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index bdf27ce..aa1b228 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -14,11 +14,13 @@ var header = require('./header'); var navigationBar = require('./navigationBar'); var footer = require('./footer'); var drawer = require('./drawer'); +var textHighlighting = require('./textHighlighting'); module.exports = [ gettingStarted, commonTextualElements, headings, images, lists, codeAndQuotations, grid, cards, cardSections, formsAndInput, buttons, inputGrouping, - header, navigationBar, footer, drawer + header, navigationBar, footer, drawer, + textHighlighting ] diff --git a/docs/doc-fragments/textHighlighting.js b/docs/doc-fragments/textHighlighting.js new file mode 100644 index 0000000..fa926ff --- /dev/null +++ b/docs/doc-fragments/textHighlighting.js @@ -0,0 +1,43 @@ +module.exports = { + id: 'text-highlighting', + title: 'Text highlighting', + keywords: [`mark`, `highlight`, `text highlighting`, `tag`, `primary`, `secondary`, `tertiary`, `inline-block`], + description: `

The native HTML5 mark element has been minimally styled to allow for easy text highlighting.

`, + example: `

This is a paragraph with some highlighted text.

`, + samples: [`
<p>This is some <mark>highlighted text</mark>.</p>
`], + notes: [ + `Highlighted text scales according to its parent element, so it can be used inside any kind of element (headings, forms, paragraphs etc.).` + ], + customization: [ + `Text color for highlighted text can be changed by changing the value of the --mark-fore-color variable.`, + `Background color for highlighted text can be changed by changing the value of the --mark-back-color variable.`, + `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`, + `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` + ], + modifiers: [ + { + title : 'Color variants', + description: '

You can change the color of highlighted text, based on context by applying the appropriate class (secondary - .secondary or tertiary - .tertiary).

', + example: `

This is a secondary highlight and this is a tertiary highlight.

`, + samples: [`
<p>This is a <mark class="secondary">secondary highlight</mark> and this is a <mark class="tertiary">tertiary highlight</mark>.</p>
`] + }, + { + title : 'Style variants', + description: `

You can make highlights look like tags (.tag) or display as inline blocks (.inline-block), by applying the appropriate class.

`, + example: `

This is a highlight styled as a tag.

This is some highlighted text that is displayed as an inline block.

`, + samples: [`
<p>This is a highlight styled as a <mark class="tag">tag</mark>.</p>
+<p><mark class="inline-block">This is some highlighted text that is displayed as an inline block.</mark></p>
`] + } + ], + dos: [{ + description: `You can nest a highlight inside another one, if the outer one is displayed as an inline-block.`, + sample: `
<mark class="inline-block"><mark class="secondary">Secondary highlight</mark> inside a inline block.</mark>
` + }], + donts: [ + { + description: `Avoid applying multiple color modifiers on the same highlight.`, + sample: `
<mark class="primary inverse">Highlight</mark>
+
` + } + ] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 72cc0a9..cc71da3 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -226,3 +226,4 @@ - Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them. - **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it. - Moved component-specific variable definitions in `contextual` under the related conditionals. +- Documented `mark` elements. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 47ac250..43dfa5c 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -26,7 +26,7 @@
- +

Getting started

You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:

@@ -608,10 +608,22 @@ </div>

Don't: You should not place anything between the checkbox controlling the drawer and the container.

Notes

Customization

+
+

Text highlighting

+

The native HTML5 mark element has been minimally styled to allow for easy text highlighting.

+

Example

This is a paragraph with some highlighted text.

+

Sample code

<p>This is some <mark>highlighted text</mark>.</p>
+

Modifiers

+

Color variants

You can change the color of highlighted text, based on context by applying the appropriate class (secondary - .secondary or tertiary - .tertiary).

Example

This is a secondary highlight and this is a tertiary highlight.

Sample code
<p>This is a <mark class="secondary">secondary highlight</mark> and this is a <mark class="tertiary">tertiary highlight</mark>.</p>

Style variants

You can make highlights look like tags (.tag) or display as inline blocks (.inline-block), by applying the appropriate class.

Example

This is a highlight styled as a tag.

This is some highlighted text that is displayed as an inline block.

Sample code
<p>This is a highlight styled as a <mark class="tag">tag</mark>.</p>
+<p><mark class="inline-block">This is some highlighted text that is displayed as an inline block.</mark></p>
+

Best practices

<mark class="inline-block"><mark class="secondary">Secondary highlight</mark> inside a inline block.</mark>

Do: You can nest a highlight inside another one, if the outer one is displayed as an inline-block.

<mark class="primary inverse">Highlight</mark>
+

Don't: Avoid applying multiple color modifiers on the same highlight.

+

Notes

+

Customization