|
|
- <!doctype html>
- <html lang="en_EN">
-
- <head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
- <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">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <link rel="stylesheet" href="plain-ui.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
- </head>
- <body class="home">
-
- <header id="header" class="header">
- <div class="container">
- <div class="grid">
- <div class="col-12">
- <div class="text-center">
- <hgroup>
- <h1>Plain UI</h1>
- </hgroup>
- </div>
- </div>
- </div>
- </div>
- </header>
-
- <div class="container">
-
- <div class="grid">
- <div class="col-12">
- <h2>Buttons</h2>
- <button class="button">
- Default
- </button>
- <button class="button">
- Default
- <svg class="icon icon--success" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-check"></use>
- </svg>
- </button>
- <button class="button button--danger">
- Danger
- </button>
- <button class="button button--hover">
- Hover
- </button>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <button class="button" disabled>
- Disabled
- </button>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <button class="button button--small">
- Small
- </button>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <div class="bar">
- <div class="bar__start">
- <button class="button button--no-style">
- <svg class="icon fill-white marginless" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-close"></use>
- </svg>
- </button>
- </div>
- <div class="bar__main">
- Bar
- </div>
- </div>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <h2>Icon</h2>
- <svg class="icon" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-check"></use>
- </svg>
- <svg class="icon icon--danger" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-camera"></use>
- </svg>
- <svg class="icon icon--success" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-clock"></use>
- </svg>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <h2>Badge</h2>
- <span class="badge">
- Category
- </span>
- <span class="badge badge--round">
- 99+
- </span>
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
-
- <h2>Panel</h2>
-
- <div class="panel">
- <div class="panel__header">
- <button type="button">
- <svg class="icon icon--first" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-expand"></use>
- </svg>
- </button>
- <div class="panel__title">Test</div>
- <div class="panel__buttons">
- <button type="button">
- <svg class="icon" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-edit"></use>
- </svg>
- </button>
- <button type="button">
- <svg class="icon" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-close"></use>
- </svg>
- </button>
- </div>
- </div>
- <div class="panel__body">
- <div class="content">
- <p>
- Hallo
- </p>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <h2>Field</h2>
-
- <form>
- <div class="field-group">
- <label class="field-label">
- Name
- <input class="field-text" />
- </label>
- </div>
-
- <div class="field-group field-group--valid">
- <label class="field-label">
- <svg class="icon" aria-hidden="true">
- <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
- </svg>
- Surname
- <input class="field-text" />
- </label>
- </div>
-
- <div class="field-group field-group--error">
- <label class="field-label">
- <svg class="icon" aria-hidden="true">
- <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
- </svg>
- E-Mail
- <input class="field-text" />
- </label>
- <span class="field-error">
- String is not valid
- </span>
- </div>
-
- <div class="field-group">
- <label class="field-label">
- Towns
- <select class="field-choice">
- <option></option>
- <option value="lonytown">Lonytown</option>
- </select>
- </label>
- </div>
-
- <div class="field-group">
- <label class="field-label">
- <input class="field-choice" type="checkbox" value="true" />
- <svg class="icon field-choice__unchecked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle"></use>
- </svg>
- <svg class="icon field-choice__checked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
- </svg>
- Do it!
- </label>
- </div>
-
- <div class="field-group">
- <label class="field-label">
- <input class="field-choice" type="radio" name="radio" value="true" />
- <svg class="icon field-choice__unchecked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle"></use>
- </svg>
- <svg class="icon field-choice__checked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
- </svg>
- A
- </label>
- <label class="field-label">
- <input class="field-choice" type="radio" name="radio" value="true" />
- <svg class="icon field-choice__unchecked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle"></use>
- </svg>
- <svg class="icon field-choice__checked" aria-hidden="true">
- <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
- </svg>
- B
- </label>
- </div>
-
- </form>
-
- </div>
- </div>
-
- <div class="grid">
- <div class="col-12">
- <h2>Table</h2>
-
- <table class="table table--striped">
- <thead>
- <tr>
- <th>A</th>
- <th>B</th>
- <th>C</th>
- <th>D</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>2</td>
- <td>3</td>
- <td>4</td>
- </tr>
- <tr>
- <td>1</td>
- <td>2</td>
- <td>3</td>
- <td>4</td>
- </tr>
- <tr>
- <td>1</td>
- <td>2</td>
- <td>3</td>
- <td>4</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-
- <div class="container">
- <div class="grid">
- <div class="col-12">
- <h2 class="">Hero</h2>
- </div>
- </div>
- </div>
-
- <div class="hero">
- <img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
- </div>
-
- <div class="container">
- <div class="grid">
- <div class="col-12">
- <h2 class="">Media</h2>
- </div>
- <div class="col-12">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/150" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- </div>
- </div>
-
- <div class="container">
- <div class="grid">
- <div class="col-12">
- <h2>Layout</h2>
- </div>
-
- <div class="col-12">
- <h2>Slider</h3>
- </div>
- </div>
- </div>
-
- <div class="slider">
- <div class="slider__inner">
- <div class="slider__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/200" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="slider__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/200" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="slider__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/200" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="slider__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/200" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="slider__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/200" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- </div>
- </div>
- </div>
-
- <div class="container">
- <div class="grid">
- <div class="col-12">
- <h2>Masonry</h3>
- </div>
- <div class="col-12">
- <div class="masonry">
- <div class="masonry__item">
-
- </div>
- <div class="masonry__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/400/600" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="masonry__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/800/400" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="masonry__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/600/400" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="masonry__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/400/600" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- <div class="masonry__item">
- <figure class="figure">
- <img class="media" src="https://via.placeholder.com/800/400" />
- <figcaption class="figure__caption">
- food truck yr franzen pabst
- </figcaption>
- </figure>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </body>
- </html
|
