Grid

Разметка включает в себя адаптивную систему разметки, которая масштабируется до 12 столбцов.
.row должны быть помещены в .cont (full-width) для правильного выравнивания и заполнения

	Phone ( <768px)	Tablet (≥768px)	Desktop (≥1200px)
class	.s	.m	.l
row	12	12	12

s10 of-s2

.s3

  <div class="row">
    <div class="s10 of-s2">.s10 .of-s2</div>
  </div>
  <div class="row">
    <div class="s3">.s3</div>
    <div class="s3">.s3</div>
    <div class="s3">.s3</div>
    <div class="s3">.s3</div>
  </div>

.s1

.s11

.s2

.s10

.s3

.s9

.s4

.s4 .of-s4

.s5 .of-s3

.s4

.s6

.s7

.s8

.s9

.s10

.s11

.s12


  <div class="row">
    <div class="s1">.s1</div>
    <div class="s11">.s11</div>
  </div>
  <div class="row">
    <div class="s2">.s2</div>
    <div class="s10">.s10</div>
  </div>
  <div class="row">
    <div class="s3">.s3</div>
    <div class="s9">.s9</div>
  </div>
  <div class="row">
    <div class="s4">.s4</div>
    <div class="s4 of-s4">.s4 .of-s4</div>
  </div>
  <div class="row">
    <div class="s5 of-s3">.s5 .of-s3</div>
    <div class="s4">.s4</div>
  </div>
  <div class="row">
    <div class="s6">.s6</div>
  </div>
  <div class="row">
    <div class="s7">.s7</div>
  </div>
  <div class="row">
    <div class="s8">.s8</div>
  </div>
  <div class="row">
    <div class="s9">.s9</div>
  </div>
  <div class="row">
    <div class="s10">.s10</div>
  </div>
  <div class="row">
    <div class="s11">.s11</div>
  </div>
  <div class="row">
    <div class="s12">.s12</div>
  </div>

Phone (.s), Tablet (.m), Decktop (.l)

.s10 .of-s2 .m8 .of-m0 .l6 .of-l4

.s12 .m6 .l3
.s12 .m6 .l3
.s12 .m6 .l3
.s12 .m6 .l3

  <div class="row">
    <div class="s10 of-s2">.s10 .of-s2</div>
  </div>
  <div class="row">
    <div class="s12 m6 l3">.s12 .m6 .l3</div>
    <div class="s12 m6 l3">.s12 .m6 .l3</div>
    <div class="s12 m6 l3">.s12 .m6 .l3</div>
    <div class="s12 m6 l3">.s12 .m6 .l3</div>
  </div>

Вложенные столбцы

Level 1: .s12

Level 2: .s6

  <div class="row">
   <div class="s12">
    <div class="row">
     <div class="s6"></div>
     <div class="s6"></div>
    </div>
   </div>
  </div>

Navigation

 
      
  <ul class="nav warning" id="my_nav">
    <li><a href="#" class="brand">NodeMCU</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Info</a></li>
    <li style="float:right;"><a href="#">Right</a></li>
    <li class="-icon"><a href="#" 
    onclick="document.getElementById('my_nav').classList.toggle('res');">≡</a>
    </li>
  </ul>

  <!--
   Navbar fix
   <ul class="nav fix" id="my_nav">
    ...
   </ul>
  -->

Sidebar

      
  <div id="sideNav" class="sidenav">
    <span href="javascript:void(0)" class="close" 
    onclick="document.getElementById('sideNav').classList.toggle('open');">×</span>
    <div class="in"></div>
    <a href="#grid">Grid</a>
    <a href="#nav">Navigation</a>
  </div>
  <div class="sideopen warning">
      <a onclick="document.getElementById('sideNav').classList.toggle('open');">≡</a>
  </div>

Forms and buttons

Имя (SSID):

  <div class="group">
    <div class="search">
      <input id="wifi_id" value="Web server" required="" type="text" name="wifi_id">
      <label for="wifi_id">Имя (SSID):</label>
      <input id="search" type="submit" value="search" onclick="search()">
      <ul id="list" class="hide">
        <li>1 list</li>
        <li>2 list</li>
        <li>3 list</li>
      </ul>
    </div>
  </div>
  <script>
   function search() {
     if (document.getElementById('list').classList.t("hide")) {
       document.getElementById('search').value = 'close';
     } else {
       document.getElementById('search').value = 'search';
     }
     document.getElementById('list').classList.toggle("hide");
   }
  </script>

ON OFFlabel text :

1 2 3 label text :

label text :

checkbox


  <div class="group purple">
    <input checked type="radio" name="flash" value="on" id="on">
    <label for="on">ON</label>
    <input type="radio" name="flash" value="off" id="off">
    <label for="off">OFF</label>
    <span>label text :</span>
  </div>
  <script>
  function check_rad(val) {
    var inp = document.getElementsByName(val);
    for (var i = 0; i < inp.length; i++) {
      if (inp[i].type == "radio" && inp[i].checked) {
      return inp[i].value;
      }
    }
  }  
  var radio_val = check_rad("flash") // radio_val = "on"  
  </script>
  
  
  
  <div class="group success">
    <select id="wifi_mode" name="wifi_mode" onchange="check_s()">
      <option  value="OFF">OFF</option>
      <option  selected value="ST">Wireless client</option>
      <option  value="AP">Access point</option>
    </select>
    <span>label text :</span>
  </div>    
  <script>    
    function check_s() {
      alert(document.getElementById("wifi_mode").value);
    } 
  </script>
   
   
   
  <div class="s12 m4 group">
    <input type="checkbox" class="checkbox" id="checkbox1" onchange="checkbox(this)" />
    <label for="checkbox1">checkbox</label>
    <span>label text :</span>
  </div>  
  <script>    
    function checkbox(obj) {
      alert(obj.checked ? "on" : "off");
    }
  </script>

Number

Text

Password

  <div class="group">
    <input type="number" name="number" id="num" required=" " min="0" max="255" value="">
    <label for="num">Number</label>
  </div>

  <div class="group">
    <input id="input_text" type="text" name="text" required=" " value="">
    <label for="text">Text</label>
  </div>

  <div class="group">
    <input type="password" name="password" required=" " value="">
    <label for="password">Password</label>
  </div>

  <script>
    var val_name = document.getElementsByName("number")[0].value
    var val_id = document.getElementById("input_text").value
  </script>

Выбрать цвет :

  <div class="group">
    <input type="color" id="rbg" name="rbg" value="#ff0000">
    <label for="rbg">Выбрать цвет :</label>
  </div>

  <button>button</button>
  <button class="grey" id="btn_one">click_me</button>
  <button class="success">button</button>
  <button class="warning round">button</button>
  <button class="info round small">button </button>
  <button class="purple small">small</button>
  <button class="primary large">large</button>

  <script>
    btn = document.getElementById("btn_one");
    btn.onclick = function() {
      btn.innerHTML = "click"
    };
  </script>

Alerts

Простое статическое сообщение.

  <div class="alert purple hover">
    Простое статическое сообщение.
  </div>

× Danger! Ошибка не хватает памяти.

× Info!Неправильный логин или пароль.


  <div class="alert info">
    <span class="close" onclick="this.parentElement.style.display='none';">×</span>
    <strong>Info!</strong>Неправильный логин или пароль.
  </div>

List

List 0
List 10.2.3
List 20.2.3
List 30.2.3

 <ul class="l-g">
   <li class="lg-i">List 0</li>
   <li class="lg-i">List 1<span>0.2.3</span></li>
   <li class="lg-i">List 2<span class="warning">0.2.3</span></li>
   <li class="lg-i">List 3<span class="danger">0.2.3</span></li>
   <li class="lg-i">List 4<span class="info">0.2.3</span></li>
 </ul>

Modal box


  <div class="group">
    <button id="btn_modal">Open Modal</button>
  </div>

  <div id="Modal" class="modal">
    <div class="m-cont">
      <span class="close" id="close_m">×</span>
      <div class="m-body">
        <p>Save settings?</p>
      </div>
      <div class="m-foo">
        <button class="success">Yes</button>
        <button class="danger">No</button>
      </div>
    </div>
  </div>

  <script>  
    var close_m = document.getElementById("close_m");
    var btn_modal = document.getElementById("btn_modal");

    btn_modal.onclick = function() {
      document.getElementById('Modal').classList.remove("hide");
    };
  
    close_m.onclick = function() {
      document.getElementById('Modal').classList.add("hide");
    };  
  </script>

Progress Bar

20%

50%

80%

  <div class="progbar">
    <div class="bar" style="width:20%">
      <div class="label">20%</div>
    </div>
  </div>

  <div class="progbar">
    <div class="bar danger" style="width:50%">
      <div class="label">50%</div>
    </div>
  </div>

  <div class="progbar">
    <div class="bar purple" style="width:80%">
      <div class="label">80%</div>
    </div>
  </div>

Range horizontal

Volume

Level

PWM


  <div class="group">
    <input type="range" min="0" max="15" value="15"/>
    <label>Volume</label>
  </div>

Range vertical

Bass

Treble

Front

Rear


  <div class="group ver">
    <input type="range" min="0" max="15" value="15"/>
    <label>Bass</label>
  </div>

Tables

№	ChipID	FlashID	FS Total (byte)	FS Used (byte)
1	b517900	1640ef00	3400046	47188
2	a325540	4585ff40	3400046	20456

  <table>
    <thead>
      <tr>
        <th>№</th>
        <th>ChipID</th>
        <th>FlashID</th>
        <th>FS Total (byte)</th>
        <th>FS Used (byte)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>b517900</td>
        <td>1640ef00</td>
        <td>3400046</td>
        <td>47188</td>
      </tr>
      <tr>
        <td>2</td>
        <td>a325540</td>
        <td>4585ff40</td>
        <td>3400046</td>
        <td>20456</td>
      </tr>
    </tbody>
  </table>

Loader

    
    <div id="loader" class="loader hide"></div>
    
    <button onclick="document.getElementById('loader').classList.remove('hide')">Start</button>