Skip to content
Snippets Groups Projects
Commit 37cb3208 authored by RANWEZ Pierre's avatar RANWEZ Pierre :anchor:
Browse files

:pencil: doc: README

parent 2e09299b
Branches
Tags
1 merge request!1✨ feat: CSSLSD V2
......@@ -1433,6 +1433,7 @@ For deported devtool, click on more (top-right) and then click on separate devto
<p>You need to use a custom CSS template, like below to map your audio or MIDI events to some CSSLSD properties. All parameters are between <strong>square brackets</strong>. You can use multiple parameters in a line. You can also type pure CSS in code editor, this CSS wil be apply on code auto-save (each time your type something in editor).</p>
<p>You can extend parameter by heritage with template <code>[&lt;parameter&gt; &lt;type&gt; &lt;option&gt; &lt;audio or midi control&gt;]</code>. This is not mandatory to type all heritage, but you need to restect the direction. This is allowed : <code>[&lt;parameter&gt; &lt;type&gt; &lt;option&gt;]</code> or <code>[&lt;parameter&gt; &lt;type&gt;]</code>. This is <strong>not</strong> allowed : <code>[&lt;parameter&gt; &lt;audio or midi control&gt;]</code>.</p>
<p>You can use without CSSLSD code without any parameters, use same template like above. How to use : <code>[&lt;type&gt; &lt;option&gt; &lt;audio or midi control&gt;]</code>.</p>
<p>Pseudo elements like <code>::after</code> or <code>::before</code> are working, if element have already a pseudo element add your CSS LSD template otherwise add pure CSS, it will create the pseudo element by adding style with class <code>CSSLSD</code> at the end of the document. For this pure CSS add : <code>position:absolute; content:''; width:10px; height:10px;</code>.</p>
<p>Code example:</p>
<pre><code class="language-css"><div><span class="hljs-selector-tag">body</span> {
<span class="hljs-comment">/* Tip : You can use comments */</span>
......@@ -1440,7 +1441,7 @@ For deported devtool, click on more (top-right) and then click on separate devto
<span class="hljs-attribute">background-color</span>:[couleur <span class="hljs-number">#000</span>:<span class="hljs-number">#fff</span>];
}
<span class="hljs-selector-tag">h1</span> {
<span class="hljs-comment">/* Simple parameter usage */</span>
<span class="hljs-comment">/* Simple parameter usage */</span>
<span class="hljs-attribute">opacity</span>: [opacité];
<span class="hljs-attribute">font-size</span>:[<span class="hljs-number">0</span>:<span class="hljs-number">20</span> d loud];
<span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment