Frontend components

Checklist

Component is done and ready for use, if all the items in the list below are completed

  • Component is responsive
  • Component should work in all browsers (Chrome, FireFox, Safari, Edge and IE), if not, add a note to component
  • Scss and html uses BEM naming convention (DSM SCSS syntax)
  • JavaScript is made with TypeScript module/class approach. And uses the rules from DSM (DSM TypeScript syntax)
  • List of requirements/dependencies (if needed)

Preview source code

Docs: https://highlightjs.org/

Formatter: https://www.freeformatter.com/html-escape.html#ad-output

Highlight themes: https://highlightjs.org/static/demo/

Hihlight source code

  • Add "Html" code with "pre" and "code" tag for each section, with correct class and data-attr "data-copy-all".
  • Html: Use Formatter to escape html: https://www.freeformatter.com/html-escape.html#ad-output to format raw html, then paste into code tag
  • Scss and JavaScript: copy code into code tags.

Html


            <h2>Html</h2>
<pre>
<code class="html" data-copy-all>
<!-- Html code here -->
</code>
</pre>
            <h2>Scss</h2>
<pre>
<code class="scss" data-copy-all>
// Scss here
</code>
</pre>
            <h2>JavaScript</h2>
<pre>
<code class="javascript" data-copy-all>		
// JavaScript code here
</code>
</pre>