<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>KSS Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-theme-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/swipe/style.min.css">
<link rel="stylesheet" href="../style/base.css">
<link rel="stylesheet" href="../style/lms.css">
<link rel="stylesheet" href="../static/main.min.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">KSS Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-1.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Typography</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-2.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Buttons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Course Box</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Section Course</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-4.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Top-bar</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-5.html">
          <span class="kss-nav__ref">5</span
          ><span class="kss-nav__name">Inputs</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-6.html">
          <span class="kss-nav__ref">6</span
          ><span class="kss-nav__name">Top-menu</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-7.html">
          <span class="kss-nav__ref">7</span
          ><span class="kss-nav__name">User Panel</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-8.html">
          <span class="kss-nav__ref">8</span
          ><span class="kss-nav__name">Aside</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-9.html">
          <span class="kss-nav__ref">9</span
          ><span class="kss-nav__name">Footer</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-10.html">
          <span class="kss-nav__ref">10</span
          ><span class="kss-nav__name">Icons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-11.html">
          <span class="kss-nav__ref">11</span
          ><span class="kss-nav__name">Tooltip</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-12.html">
          <span class="kss-nav__ref">12</span
          ><span class="kss-nav__name">Homepage</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-1">
                <span class="kss-nav__ref ">12.1</span
                ><span class="kss-nav__name">Template</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-2">
                <span class="kss-nav__ref ">12.2</span
                ><span class="kss-nav__name">Language selector</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-3">
                <span class="kss-nav__ref ">12.3</span
                ><span class="kss-nav__name">Login</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-4">
                <span class="kss-nav__ref ">12.4</span
                ><span class="kss-nav__name">Social login</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-5">
                <span class="kss-nav__ref ">12.5</span
                ><span class="kss-nav__name">Collapsable description</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-12.html#kssref-12-6">
                <span class="kss-nav__ref ">12.6</span
                ><span class="kss-nav__name">Registration</span>
              </a>
            </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-12" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-12">
          <span class="kss-title__ref">
              12
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Homepage
        </a>
      </h1>


    </div>


      </div>
      <section id="kssref-12-1" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-1">
          <span class="kss-title__ref">
              12.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Template
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="homepage">
<div class="homepage__content">
	<div class="homepage__row homepage__row--header">Page header</div>
	<div class="homepage__row homepage__row--gray">
		<br>
		Page content (gray background)
		<br><br>
	</div>
	<div class="homepage__row">
		<br>
		Page content (white background)
		<br><br>
	</div>
	<div class="homepage__row homepage__row--footer">
		<nav class="homepage__links">
			<a href="#">Link example 1</a>
			<a href="#">Link example 2</a>
			<a href="#">Link example 3</a>
		</nav>
	</div>
</div>
<footer class="homepage__footer">
	<p class="powered_by">
		<span class="ownedby">Testing formalms - Copyright (c) forma.lms</span><br>
		<span class="poweredby"><a href="http://www.formalms.org/" target="_blank">Powered by forma.lms CE</a></span>
	</p>
</footer>
</div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;homepage&quot;&gt;
&lt;div class=&quot;homepage__content&quot;&gt;
	&lt;div class=&quot;homepage__row homepage__row--header&quot;&gt;Page header&lt;/div&gt;
	&lt;div class=&quot;homepage__row homepage__row--gray&quot;&gt;
		&lt;br&gt;
		Page content (gray background)
		&lt;br&gt;&lt;br&gt;
	&lt;/div&gt;
	&lt;div class=&quot;homepage__row&quot;&gt;
		&lt;br&gt;
		Page content (white background)
		&lt;br&gt;&lt;br&gt;
	&lt;/div&gt;
	&lt;div class=&quot;homepage__row homepage__row--footer&quot;&gt;
		&lt;nav class=&quot;homepage__links&quot;&gt;
			&lt;a href=&quot;#&quot;&gt;Link example 1&lt;/a&gt;
			&lt;a href=&quot;#&quot;&gt;Link example 2&lt;/a&gt;
			&lt;a href=&quot;#&quot;&gt;Link example 3&lt;/a&gt;
		&lt;/nav&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;footer class=&quot;homepage__footer&quot;&gt;
	&lt;p class=&quot;powered_by&quot;&gt;
		&lt;span class=&quot;ownedby&quot;&gt;Testing formalms - Copyright (c) forma.lms&lt;/span&gt;&lt;br&gt;
		&lt;span class=&quot;poweredby&quot;&gt;&lt;a href=&quot;http://www.formalms.org/&quot; target=&quot;_blank&quot;&gt;Powered by forma.lms CE&lt;/a&gt;&lt;/span&gt;
	&lt;/p&gt;
&lt;/footer&gt;
&lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-12-2" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-2">
          <span class="kss-title__ref">
              12.2
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Language selector
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="select-language">
<span class="hidden-xs">Language: </span>
<div class="dropdown">
	<a id="change_language" class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Current language<i class="fa fa-chevron-down"></i></a>
	<div class="dropdown-menu" aria-labelledby="change_language">
		<a class="dropdown-item" href="#" title="Language 1">Language 1</a>
		<a class="dropdown-item" href="#" title="Language 2">Language 2</a>
		<a class="dropdown-item" href="#" title="Language 3">Language 3</a>
	</div>
</div>
</div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;select-language&quot;&gt;
&lt;span class=&quot;hidden-xs&quot;&gt;Language: &lt;/span&gt;
&lt;div class=&quot;dropdown&quot;&gt;
	&lt;a id=&quot;change_language&quot; class=&quot;dropdown-toggle&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;Current language&lt;i class=&quot;fa fa-chevron-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;change_language&quot;&gt;
		&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; title=&quot;Language 1&quot;&gt;Language 1&lt;/a&gt;
		&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; title=&quot;Language 2&quot;&gt;Language 2&lt;/a&gt;
		&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot; title=&quot;Language 3&quot;&gt;Language 3&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-12-3" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-3">
          <span class="kss-title__ref">
              12.3
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Login
        </a>
      </h2>


      <div class="kss-description">
        <p>For login form, standard Bootstrap&#39;s &quot;.form-control&quot; inputs are used in this section along with Bootstrap&#39;s grid system</p>

      </div>
    </div>


      </section>
      <section id="kssref-12-4" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-4">
          <span class="kss-title__ref">
              12.4
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Social login
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="social-login">
 <p class="social-login__title">
 	<span>login with social</span>
 </p>
 <div class="social-login__list">
	<a href="#"><i class="fa fa-linkedin"></i></a>
	<a href="#"><i class="fa fa-google-plus"></i></a>
	<a href="#"><i class="fa fa-facebook"></i></a>
 </div>
</div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;social-login&quot;&gt;
 &lt;p class=&quot;social-login__title&quot;&gt;
 	&lt;span&gt;login with social&lt;/span&gt;
 &lt;/p&gt;
 &lt;div class=&quot;social-login__list&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-linkedin&quot;&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-12-5" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-5">
          <span class="kss-title__ref">
              12.5
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Collapsable description
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="homepage__row">
 <br>
 <div class="homepage__collapsed-text js-collapsed-text collapse in" id="description" aria-expanded="true" style="">
<p style="line-height: 26px;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, est id consectetur sodales, massa diam ultricies nibh, eget facilisis turpis risus quis dui. Duis viverra odio non accumsan feugiat. Donec placerat tincidunt dignissim. Phasellus finibus ex non finibus placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in odio ac dui tempus posuere. Phasellus auctor velit mi, vitae viverra mauris vulputate non. Quisque quis turpis scelerisque, suscipit neque nec, volutpat erat. Nulla posuere nunc non semper placerat. Sed id mauris leo. Aenean et leo hendrerit, pellentesque lacus non, molestie purus. Cras augue ante, viverra id consequat id, sodales non lacus. Ut massa sem, tempor sed velit eget, molestie finibus tellus. Nunc bibendum ante at neque euismod vestibulum. Praesent tincidunt libero vitae semper pretium. Donec felis mi, sodales vel vestibulum vel, luctus id nisl. Praesent accumsan velit eget massa laoreet suscipit. Quisque efficitur nisl libero, et tempus nunc finibus non. Proin vel pretium ante. Cras cursus neque fermentum consectetur fermentum. Vestibulum vel est neque. Vivamus sit amet tempor ipsum, in imperdiet ligula. Fusce vitae magna in ante consectetur finibus ac in turpis. Mauris et orci ut justo efficitur mollis vitae non mi. Etiam vel metus ante. Nunc efficitur non neque eget pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
 </div>
 <div class="collapse-wrapper" data-toggle="collapse" data-target="#description" aria-expanded="true">
<a class="forma-button forma-button--orange js-show-collapsed-text" href="javascript:void(0)">Read More</a>
<span class="glyphicon glyphicon-remove icon icon--close">Close</span>
<br><br>
 </div>
</div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;homepage__row&quot;&gt;
 &lt;br&gt;
 &lt;div class=&quot;homepage__collapsed-text js-collapsed-text collapse in&quot; id=&quot;description&quot; aria-expanded=&quot;true&quot; style=&quot;&quot;&gt;
&lt;p style=&quot;line-height: 26px;&quot;&gt;
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, est id consectetur sodales, massa diam ultricies nibh, eget facilisis turpis risus quis dui. Duis viverra odio non accumsan feugiat. Donec placerat tincidunt dignissim. Phasellus finibus ex non finibus placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in odio ac dui tempus posuere. Phasellus auctor velit mi, vitae viverra mauris vulputate non. Quisque quis turpis scelerisque, suscipit neque nec, volutpat erat. Nulla posuere nunc non semper placerat. Sed id mauris leo. Aenean et leo hendrerit, pellentesque lacus non, molestie purus. Cras augue ante, viverra id consequat id, sodales non lacus. Ut massa sem, tempor sed velit eget, molestie finibus tellus. Nunc bibendum ante at neque euismod vestibulum. Praesent tincidunt libero vitae semper pretium. Donec felis mi, sodales vel vestibulum vel, luctus id nisl. Praesent accumsan velit eget massa laoreet suscipit. Quisque efficitur nisl libero, et tempus nunc finibus non. Proin vel pretium ante. Cras cursus neque fermentum consectetur fermentum. Vestibulum vel est neque. Vivamus sit amet tempor ipsum, in imperdiet ligula. Fusce vitae magna in ante consectetur finibus ac in turpis. Mauris et orci ut justo efficitur mollis vitae non mi. Etiam vel metus ante. Nunc efficitur non neque eget pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&quot;collapse-wrapper&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#description&quot; aria-expanded=&quot;true&quot;&gt;
&lt;a class=&quot;forma-button forma-button--orange js-show-collapsed-text&quot; href=&quot;javascript:void(0)&quot;&gt;Read More&lt;/a&gt;
&lt;span class=&quot;glyphicon glyphicon-remove icon icon--close&quot;&gt;Close&lt;/span&gt;
&lt;br&gt;&lt;br&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-12-6" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-12-6">
          <span class="kss-title__ref">
              12.6
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Registration
        </a>
      </h2>


      <div class="kss-description">
        <p>For registration forms, standard Bootstrap&#39;s &quot;.form-control&quot; inputs are used in this section along with Bootstrap&#39;s grid system</p>

      </div>
    </div>


      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="../../../addons/jquery/core/jquery-1.12.3.min.js"></script>
<script src="../../../addons/jquery/core/ui/js/jquery-ui-1.11.4.min.js"></script>
<script src="../../../addons/jquery/bootstrap/js/bootstrap-3.3.6.min.js"></script>
<script src="../static/main.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
