Docsie in a custom DIV

by Eugene Trounev

HTML

<!-- DO NOT COPY  For this example purpose ony do not copy  -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700" rel="stylesheet">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
</style>
<header>
<h1>
This example shows how to place Docseie content into a custom div on page:
</h1>
</header>
<main>
<!-- Copy from here on -->
<div data-ddsroot>
  Docsie will be rendered here
</div>
<!-- DO NOT COPY  For this example purpose ony do not copy  -->
</main>
<footer>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</footer>
<!-- Copy from here on -->
<script async type="text/javascript" src="https://lib.docsie.io/1.4.5/service.js" data-docsie="live_pk_lQgbNwSYeV6U5p1cWksm8SPZ:boo_3bZ7s7s6KN0mEewzg,language:false,viewportWidth:100%,plugins:[highlight|lightbox|emoji]"></script>
<script async="" type="text/javascript" src="https://lib.docsie.io/plugins/search/dist/docsie-search.js"></script>

SCSS

/**
* Docsie.io ERICOM documentation style
*/
#DOCSIE__ROOT {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  font-size: inherit;
  color: #404041; }
  #DOCSIE__ROOT article,
  #DOCSIE__ROOT header,
  #DOCSIE__ROOT nav {
    display: block; }
  #DOCSIE__ROOT label {
    display: inline-block;
    margin-bottom: .5em; }
  #DOCSIE__ROOT input,
  #DOCSIE__ROOT select,
  #DOCSIE__ROOT button {
    margin: 0;
    text-rendering: auto;
    color: initial;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    cursor: pointer; }
  #DOCSIE__ROOT button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .45em .9em;
    font-size: .875em;
    line-height: 1.5;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    color: #0F5DA8;
    background-color: #fff;
    border-color: #0F5DA8; }
    #DOCSIE__ROOT button:hover {
      color: #0F5DA8;
      background-color: white;
      border-color: #5fa9f1; }
    #DOCSIE__ROOT button:focus {
      color: #0F5DA8;
      background-color: white;
      border-color: #5fa9f1; }
    #DOCSIE__ROOT button:disabled {
      opacity: .65;
      color: #5c5c5c;
      background-color: white;
      border-color: #5c5c5c; }
  #DOCSIE__ROOT button,
  #DOCSIE__ROOT input {
    overflow: visible; }
  #DOCSIE__ROOT button,
  #DOCSIE__ROOT select {
    text-transform: none; }
  #DOCSIE__ROOT input {
    display: block;
    width: 100%;
    padding: .45em .9em;
    line-height: 1.5;
    color:...