tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
4 Branches
3.5 MiB
Tree: 8082d0ace8
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '8082d0ace8'
${ noResults }
plain-ui/dist/index.html

149 lines
5.3 KiB
Raw Normal View History

adding
3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!doctype html>
  2. <html lang="en_EN">
  3. 

  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.     <title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
  8.     <meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
  9.     <meta name="viewport" content="width=device-width,initial-scale=1">
  10.     <link rel="stylesheet" href="plain-ui.css">
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
  12. </head>
  13. <body class="home">
  14.     <header id="header" class="header">
  15.         <div class="container">
  16.             <div class="grid">
  17.                 <div class="col-12">
  18.                     <div class="text-center">
  19.                         <hgroup>
  20.                             <a href="/">
  21.                                 <h1 class="h2 margin-top-4 margin-bottom-0">Plain UI</h1>
  22.                         </a></hgroup>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </header>
  28.     <div class="container">
  29. 

  30.         <div class="grid">
  31.             <div class="col-12">
  32.                 <h2>Buttons</h2>
  33.                 <button class="button">
  34.                     Default
  35.                 </button>
  36.                 <button class="button">
  37.                     Default
  38.                     <svg class="icon" aria-hidden="true">
  39.                         <use xlink:href="symbol-defs.svg#icon-check"></use>
  40.                     </svg>
  41.                 </button>
  42.                 <button class="button button--success">
  43.                     Success
  44.                 </button>
  45.                 <button class="button button--danger">
  46.                     Danger
  47.                 </button>
  48.             </div>
  49.         </div>
  50. 

  51.         <div class="grid">
  52.             <div class="col-12">
  53.                 <h2>Icon</h2>
  54.                 <svg class="icon" aria-hidden="true">
  55.                     <use xlink:href="symbol-defs.svg#icon-check"></use>
  56.                 </svg>
  57.                 <svg class="icon icon--circle" aria-hidden="true">
  58.                     <use xlink:href="symbol-defs.svg#icon-check"></use>
  59.                 </svg>
  60.             </div>
  61.         </div>
  62. 

  63.         <div class="grid">
  64.             <div class="col-12">
  65.                 <h2>Badge</h2>
  66.                 <span class="badge">
  67.                     Category
  68.                 </span>
  69.             </div>
  70.         </div>
  71. 

  72.         <div class="grid">
  73.             <div class="col-12">
  74. 

  75.                 <h2>Panel</h2>
  76. 

  77.                 <div class="panel">
  78.                     <div class="panel__header">
  79.                         <button type="button">
  80.                             <svg class="icon icon--first" aria-hidden="true">
  81.                                 <use xlink:href="symbol-defs.svg#icon-expand"></use>
  82.                             </svg>
  83.                         </button>
  84.                         <div class="panel__title">Test</div>
  85.                         <div class="panel__buttons">
  86.                             <button type="button">
  87.                                 <svg class="icon" aria-hidden="true">
  88.                                     <use xlink:href="symbol-defs.svg#icon-edit"></use>
  89.                                 </svg>
  90.                             </button>
  91.                             <button type="button">
  92.                                 <svg class="icon" aria-hidden="true">
  93.                                     <use xlink:href="symbol-defs.svg#icon-close"></use>
  94.                                 </svg>
  95.                             </button>
  96.                         </div>
  97.                     </div>
  98.                     <div class="panel__body">
  99.                         <div class="content">
  100.                             <p>
  101.                                 Hallo
  102.                             </p>
  103.                         </div>
  104.                     </div>
  105.                 </div>
  106. 

  107.             </div>
  108.         </div>
  109. 

  110.         <div class="grid">
  111.             <div class="col-12">
  112.                 <h2>Form</h2>
  113. 

  114.                 <form>
  115.                     <div class="group">
  116.                         <label class="label">
  117.                             Name
  118.                             <input class="text" />
  119.                         </label>
  120.                     </div>
  121. 

  122.                     <div class="group group--valid">
  123.                         <label class="label">
  124.                             <svg class="icon" aria-hidden="true">
  125.                                 <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
  126.                             </svg>
  127.                             Surname
  128.                             <input class="text" />
  129.                         </label>
  130.                     </div>
  131. 

  132.                     <div class="group group--error">
  133.                         <label class="label">
  134.                             <svg class="icon" aria-hidden="true">
  135.                                 <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
  136.                             </svg>
  137.                             E-Mail
  138.                             <input class="text" />
  139.                         </label>
  140.                         <span class="error">
  141.                             String is not valid
  142.                         </span>
  143.                     </div>
  144.                 </form>
  145. 

  146.             </div>
  147.         </div>
  148.     </div>
  149. </body>
  150. </html>