mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 08:23:58 +02:00
Code Issues Releases Wiki Activity

Core documentation

Browse Source 
Documented all the elements in the core module. Everything works as expected so far.
This commit is contained in:
Angelos Chalaris
2017-11-15 13:19:00 +02:00
parent c23c465c6d
commit c4a5da944f
9 changed files with 194 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/doc-fragments/images.js Normal file
View File

@@ -0,0 +1,20 @@
module.exports = {
id: 'images-captions',
title: 'Images & captions',
keywords: [`img`, `image`, `responsive`, `responsiveness`, `caption`, `figure`, `figcaption`],
description: `<p>Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.</p>
<p>If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.</p>`,
example: '<figure><img src="https://placehold.it/800x600" alt="placeholder"><figcaption class="doc">Image caption</figcaption></figure>',
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;img</span> <span class="highlight-b">src</span>=<span class="highlight-c">&quot;image.png&quot;</span> <span class="highlight-b">alt</span>=<span class="highlight-c">&quot;Image description&quot;</span><span class="highlight-a">/&gt;</span></span></pre>`,
`<pre><span class="code-line"><span class="highlight-a">&lt;figure&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;img</span> <span class="highlight-b">src</span>=<span class="highlight-c">&quot;image.png&quot;</span> <span class="highlight-b">alt</span>=<span class="highlight-c">&quot;Image description&quot;</span><span class="highlight-a">/&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;figcaption&gt;</span>Image caption<span class="highlight-a">&lt;/figcaption&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/figure&gt;</span></span></pre>`],
notes: [`While not mandatory, it is considered a good practice to always add a <code>alt</code> attribute to image elements on your web apps.`],
customization: [
`You can change the text color of <code>&lt;figcaption&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.`
],
modifiers: [],
dos: [],
donts: []
}