Plain HTML & CSS

HTML & CSS is in output of the original React code. It has been built with having a clean code in mind. SCSS files are avaiable in the React source code as they have been built with CSS Modules (css-loader) with a localIndentSettings: uik-[name]__[local], where name is filename and local is local class name.

Because all javascript interactions were written in React, there is currently no support of JS actions and events in this plain html/css template, such as opening custom selects

Disclaimer: Because the HTML is an output of React code, chartjs and refractor are not initialized and not rendered. Sorry for incoveniency

Folder Structure

  • /root
    • /html
      • /static
      • /pages.html

Sample Code

markupcss
<html lang="en" data-reactroot="">
  <head>
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
     <meta charSet="utf-8"/>
     <title>Dashboard UI Kit 3.0</title>
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
     <link href="/static/css/client.b320dff3.css" rel="stylesheet"/>
     <script defer="" src="/static/js/bundle.d88b05a3.js"></script>
  </head>
  <body>
     <link async="" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet"/>
     <div id="root">
        <div class="uik-PageFade__animationWrapper uik-App__app" style="position:relative">
           <div class="uik-container-v__container">
              <div class="uik-header__wrapper">
                 <div class="uik-header__section">
                    <h2 class="uik-header-title__wrapper"><i class="uikon">help</i>Knowledge</h2>
                 </div>
                 <div class="uik-header__section">
                    <div class="uik-input__clear">
                       <label></label>
                       <div class="uik-input__inputWrapper"><span class="uik-input__iconWrapper"><i class="uikon">search_left</i></span><input type="text" class="uik-input__input" placeholder="Type to search..."/></div>
                    </div>
                    <div style="position:relative;display:inline-block">
                       <div class="uik-header-user-dropdown__wrapper">
                          <div class="uik-avatar__wrapper">
                             <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a01.ea2142d9.png"/></div>
                             <div class="uik-avatar__info"><span class="uik-avatar__name">Bob Stuart</span></div>
                          </div>
                          <i class="uikon uik-header-user-dropdown__dropdownArrow">arrow_dropdown</i>
                       </div>
                    </div>
                 </div>
              </div>
              <div class="uik-container-h__wrapper">
                 <div class="uik-layout-main__wrapper">
                    <div class="uik-layout-main__wrapperInner uik-knowledge-home__content uik-layout-main__contentCenter">
                       <div>
                          <div class="uik-content__wrapper">
                             <h2 class="uik-headline__wrapper">Knowledge Documentation</h2>
                             <p class="uik-headline-desc__wrapper">Home / All Tutorials</p>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper blue uik-icon-wrap__circle"><i class="uikon">love</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Getting Started</a><span class="uik-tag__wrapper uik-knowledge-topic__tag green">Admin</span></h2>
                                   <p>Last edited 2 days ago by Eugene Jenkins</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a01.ea2142d9.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a03.1f0e020e.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-comment.85446a95.svg"/></div>
                                   </div>
                                </div>
                                <div class="uik-select__wrapper uik-knowledge-topic__select">
                                   <button class="uik-btn__base uik-select__valueRendered" type="button">
                                      <div class="uik-btn__content">
                                         <div class="uik-select__valueRenderedWrapper">
                                            <span class="uik-select__valueWrapper uik-select__placeholderEmpty">Action</span>
                                            <div class="uik-select__arrowWrapper"></div>
                                         </div>
                                      </div>
                                   </button>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper violet uik-icon-wrap__circle"><i class="uikon">image_picture</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Responsive Design</a></h2>
                                   <p>Last edited 3 days ago by Erik Page</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a04.44e3f741.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a01.ea2142d9.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper red uik-icon-wrap__circle"><i class="uikon">container</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Layout &amp; Positioning Basics</a></h2>
                                   <p>Last edited a week ago by Joana Jenkins</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a03.1f0e020e.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-comment.85446a95.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a02.b395b70c.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-comment.85446a95.svg"/></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper green uik-icon-wrap__circle"><i class="uikon">edit</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Photoshop Fundamentals</a><span class="uik-tag__wrapper uik-knowledge-topic__tag green">Admin</span></h2>
                                   <p>Last edited a week ago by Todd Singleton</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a04.44e3f741.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a02.b395b70c.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-comment.85446a95.svg"/></div>
                                   </div>
                                </div>
                                <div class="uik-select__wrapper uik-knowledge-topic__select">
                                   <button class="uik-btn__base uik-select__valueRendered" type="button">
                                      <div class="uik-btn__content">
                                         <div class="uik-select__valueRenderedWrapper">
                                            <span class="uik-select__valueWrapper uik-select__placeholderEmpty">Action</span>
                                            <div class="uik-select__arrowWrapper"></div>
                                         </div>
                                      </div>
                                   </button>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper orange uik-icon-wrap__circle"><i class="uikon">gallery_grid_view</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Sketch Fundamentals</a></h2>
                                   <p>Last edited a week ago by Erik Page</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a03.1f0e020e.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-comment.85446a95.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a01.ea2142d9.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper violet uik-icon-wrap__circle"><i class="uikon">image_picture</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">Advanced Sketch</a></h2>
                                   <p>Last edited a week ago by Myrtie Greer</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a03.1f0e020e.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a02.b395b70c.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper uik-knowledge-topic__wrapper uik-widget__padding">
                                <div class="uik-icon-wrap__wrapper uik-icon-wrap__circle"><i class="uikon">multitasking</i></div>
                                <div class="uik-knowledge-topic__content">
                                   <h2 class="uik-knowledge-topic__title"><a class="uik-knowledge-topic__link">How to setup 1170px grid in Sketch</a></h2>
                                   <p>Last edited a week ago by Myrtie Greer</p>
                                </div>
                                <div class="uik-knowledge-topic__users">
                                   <div class="uik-avatar__wrapper">
                                      <div class="uik-avatar__avatarWrapper"><img alt="" class="uik-avatar__avatar" src="/static/media/a02.b395b70c.png"/><img alt="action" class="uik-avatar__avatarAction" src="/static/media/user-like.b71c26ef.svg"/></div>
                                   </div>
                                </div>
                             </div>
                          </div>
                       </div>
                       <div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper">
                                <div class="uik-widget-title__wrapper">
                                   <h3>Navigation</h3>
                                </div>
                                <a class="uik-widget-link__wrapper">
                                   <div class="uik-icon-wrap__wrapper uik-widget-link__icon blue uik-icon-wrap__square"><i class="uikon">love</i></div>
                                   <span class="uik-widget-link__title">For Beginners</span><span>17</span>
                                </a>
                                <a class="uik-widget-link__wrapper">
                                   <div class="uik-icon-wrap__wrapper uik-widget-link__icon violet uik-icon-wrap__square"><i class="uikon">image_picture</i></div>
                                   <span class="uik-widget-link__title">Advanced Techniques</span><span>18</span>
                                </a>
                                <a class="uik-widget-link__wrapper">
                                   <div class="uik-icon-wrap__wrapper uik-widget-link__icon red uik-icon-wrap__square"><i class="uikon">container</i></div>
                                   <span class="uik-widget-link__title">Design Principles</span><span>1</span>
                                </a>
                                <a class="uik-widget-link__wrapper">
                                   <div class="uik-icon-wrap__wrapper uik-widget-link__icon orange uik-icon-wrap__square"><i class="uikon">gallery_grid_view</i></div>
                                   <span class="uik-widget-link__title">Integrations</span><span>12</span>
                                </a>
                                <a class="uik-widget-link__wrapper">
                                   <div class="uik-icon-wrap__wrapper uik-widget-link__icon uik-icon-wrap__square"><i class="uikon">multitasking</i></div>
                                   <span class="uik-widget-link__title">Others</span><span>7</span>
                                </a>
                                <a class="uik-widget-link__wrapper"><span class="uik-widget-link__title">Without icon here</span><span>12</span></a><a class="uik-widget-link__wrapper"><span class="uik-widget-link__title">Just a navigation title</span></a>
                             </div>
                          </div>
                          <div class="uik-content__wrapper">
                             <div class="uik-widget__wrapper">
                                <div class="uik-widget-title__wrapper">
                                   <h3>Popular Video Tutorials</h3>
                                </div>
                                <div class="uik-widget-video-preview-container__wrapper">
                                   <a class="uik-widget-video-preview__wrapper">
                                      <div class="uik-widget-video-preview__previewImage" style="background-image:url(/static/media/vt01.aa2e7094.png)"></div>
                                      <div>
                                         <h4 class="uik-widget-video-preview__title">Your first platform</h4>
                                         <span class="uik-widget-video-preview__views">
                                            Views:<!-- --> <!-- -->3874
                                         </span>
                                      </div>
                                   </a>
                                   <a class="uik-widget-video-preview__wrapper">
                                      <div class="uik-widget-video-preview__previewImage" style="background-image:url(/static/media/vt05.ff8355c2.png)"></div>
                                      <div>
                                         <h4 class="uik-widget-video-preview__title">Intro to web design</h4>
                                         <span class="uik-widget-video-preview__views">
                                            Views:<!-- --> <!-- -->19238
                                         </span>
                                      </div>
                                   </a>
                                   <a class="uik-widget-video-preview__wrapper">
                                      <div class="uik-widget-video-preview__previewImage" style="background-image:url(/static/media/vt04.47307e51.png)"></div>
                                      <div>
                                         <h4 class="uik-widget-video-preview__title">Web elements</h4>
                                         <span class="uik-widget-video-preview__views">
                                            Views:<!-- --> <!-- -->2843
                                         </span>
                                      </div>
                                   </a>
                                   <a class="uik-widget-video-preview__wrapper">
                                      <div class="uik-widget-video-preview__previewImage" style="background-image:url(/static/media/vt03.6c41a4b4.png)"></div>
                                      <div>
                                         <h4 class="uik-widget-video-preview__title">CSS styling</h4>
                                         <span class="uik-widget-video-preview__views">
                                            Views:<!-- --> <!-- -->16482
                                         </span>
                                      </div>
                                   </a>
                                   <a class="uik-widget-video-preview__wrapper">
                                      <div class="uik-widget-video-preview__previewImage" style="background-image:url(/static/media/vt02.f7881f92.png)"></div>
                                      <div>
                                         <h4 class="uik-widget-video-preview__title">Interaction &amp; Animations</h4>
                                         <span class="uik-widget-video-preview__views">
                                            Views:<!-- --> <!-- -->7894
                                         </span>
                                      </div>
                                   </a>
                                </div>
                                <a class="uik-widget-bottom-cta__wrapper">View All Videos</a>
                             </div>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>