adding #7, change documentation
parent
54c28c85ca
commit
75f83aa49a
@ -0,0 +1,67 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en_EN">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
|
<title>
|
||||||
|
Plain UI 0.5 | Lightweight CSS UI Framework for Building Apps and Websites
|
||||||
|
</title>
|
||||||
|
<meta name="description" content="Lightweight UI 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">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="overflow-x-hidden">
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="bar">
|
||||||
|
<div class="bar__start">
|
||||||
|
<div class="m-top-4 m-bottom-4 h4">
|
||||||
|
Plain UI 0.5
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-12">
|
||||||
|
|
||||||
|
<h1 class="highlight m-bottom-5">
|
||||||
|
Helpers
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||||
|
<div class="panel__body">
|
||||||
|
<div class="content m-last-child-0">
|
||||||
|
<p>
|
||||||
|
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||||
|
<div class="panel__body">
|
||||||
|
<div class="content m-last-child-0">
|
||||||
|
<p>
|
||||||
|
@TODO Documentation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="site-footer m-top-5">
|
||||||
|
<div class="bar">
|
||||||
|
<div class="bar__main">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html
|
||||||
|
Before Width: | Height: | Size: 578 KiB After Width: | Height: | Size: 578 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
|||||||
|
(self["webpackChunk_tiny_components_plain_ui"] = self["webpackChunk_tiny_components_plain_ui"] || []).push([["spritemap"],{
|
||||||
|
|
||||||
|
/***/ "?c20d":
|
||||||
|
/*!******************************!*\
|
||||||
|
!*** spritemap-dummy-module ***!
|
||||||
|
\******************************/
|
||||||
|
/***/ (() => {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
}]);
|
||||||
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
@ -1,105 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en_EN">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
||||||
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
|
|
||||||
<meta name="description" content="Lightweight UI 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">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="overflow-x-hidden">
|
|
||||||
|
|
||||||
<header class="header">
|
|
||||||
<div class="bar">
|
|
||||||
<div class="bar__start">
|
|
||||||
<h1 class="m-top-4 m-bottom-4 h4">
|
|
||||||
Plain UI 0.5
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div class="bar__main justify-end">
|
|
||||||
<a class="button button--small m-bottom-0" href="#">
|
|
||||||
Github
|
|
||||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
|
||||||
<use xlink:href="symbol-defs.svg#icon-github"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
|
||||||
Gitea
|
|
||||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
|
||||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container m-top-6">
|
|
||||||
<div class="grid">
|
|
||||||
<div class="col-12">
|
|
||||||
<nav>
|
|
||||||
<div class="tabs">
|
|
||||||
<a href="index.html" class="tabs__item">
|
|
||||||
Basics
|
|
||||||
</a>
|
|
||||||
<a href="components.html" class="tabs__item">
|
|
||||||
Components
|
|
||||||
</a>
|
|
||||||
<a href="layout.html" class="tabs__item">
|
|
||||||
Layout
|
|
||||||
</a>
|
|
||||||
<a href="helpers.html" class="tabs__item tabs__item--selected">
|
|
||||||
Helpers
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="grid">
|
|
||||||
<div class="col-12">
|
|
||||||
<h1 class="highlight m-bottom-5">
|
|
||||||
Helpers
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
|
||||||
<div class="panel__body">
|
|
||||||
<div class="content m-last-child-0">
|
|
||||||
<p>
|
|
||||||
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
|
||||||
<div class="panel__body">
|
|
||||||
<div class="content m-last-child-0">
|
|
||||||
<p>
|
|
||||||
@TODO Documentation
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="site-footer m-top-5">
|
|
||||||
<div class="bar">
|
|
||||||
<div class="bar__main">
|
|
||||||
<a class="color-text-contrast m-right-4" href="/imprint.html">
|
|
||||||
Imprint
|
|
||||||
</a>
|
|
||||||
<a class="color-text-contrast" href="/private-policy.html">
|
|
||||||
Privacy Policy
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
|||||||
(self.webpackChunk_tiny_components_plain_ui=self.webpackChunk_tiny_components_plain_ui||[]).push([[355],{256:()=>{}}]);
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
// --------------------------------------------------
|
|
||||||
// reflex containers
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.#{$reflex-prefix}container,
|
|
||||||
.#{$reflex-prefix}container-full {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
padding-right: ($reflex-grid-spacing * 2);
|
|
||||||
padding-left: ($reflex-grid-spacing * 2);
|
|
||||||
|
|
||||||
.#{$reflex-prefix}grid {
|
|
||||||
margin-right: -$reflex-grid-spacing;
|
|
||||||
margin-left: -$reflex-grid-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$reflex-prefix}container {
|
|
||||||
@media (min-width: $reflex-xs) {
|
|
||||||
max-width: $reflex-xs;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-sm) {
|
|
||||||
max-width: $reflex-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-md) {
|
|
||||||
max-width: $reflex-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-lg) {
|
|
||||||
max-width: $reflex-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xlg) {
|
|
||||||
max-width: $reflex-xlg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex grid
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.#{$reflex-prefix}grid {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
display: block;
|
|
||||||
@include display-flex();
|
|
||||||
@include flex-wrap();
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
@include setup-whitespace();
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include reset-whitespace();
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle when lists are used as a grid
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex col defaults
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
[class*="#{$reflex-prefix}col-"] {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include reset-whitespace();
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: $reflex-grid-spacing;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include reset-whitespace();
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle grids nested in columns
|
|
||||||
.#{$reflex-prefix}grid {
|
|
||||||
@include flex(1, 1, auto);
|
|
||||||
margin: -$reflex-grid-spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $legacy-support == true {
|
|
||||||
display: inline-block;
|
|
||||||
*display: inline;
|
|
||||||
zoom: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex grid generation
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@include make-reflex-grid(col-);
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xs) {
|
|
||||||
@include make-reflex-grid(col-xs-);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-sm) {
|
|
||||||
@include make-reflex-grid(col-sm-);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-md) {
|
|
||||||
@include make-reflex-grid(col-md-);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-lg) {
|
|
||||||
@include make-reflex-grid(col-lg-);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xlg) {
|
|
||||||
@include make-reflex-grid(col-xlg-);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex col-auto
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.#{$reflex-prefix}col-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xs) {
|
|
||||||
.#{$reflex-prefix}col-xs-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-sm) {
|
|
||||||
.#{$reflex-prefix}col-sm-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-md) {
|
|
||||||
.#{$reflex-prefix}col-md-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-lg) {
|
|
||||||
.#{$reflex-prefix}col-lg-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xlg) {
|
|
||||||
.#{$reflex-prefix}col-xlg-auto {
|
|
||||||
@include setup-auto-cols();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex order helpers generation
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@include make-order-helpers();
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xs) {
|
|
||||||
@include loop-order-helpers($reflex-columns, '-xs');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-sm) {
|
|
||||||
@include loop-order-helpers($reflex-columns, '-sm');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-md) {
|
|
||||||
@include loop-order-helpers($reflex-columns, '-md');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-lg) {
|
|
||||||
@include loop-order-helpers($reflex-columns, '-lg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xlg) {
|
|
||||||
@include loop-order-helpers($reflex-columns, '-xlg');
|
|
||||||
}
|
|
||||||
|
|
||||||
// --------------------------------------------------
|
|
||||||
// reflex offset helpers generation
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@include make-offset-helpers();
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xs) {
|
|
||||||
@include loop-offset-helpers($reflex-columns - 1, '-xs');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-sm) {
|
|
||||||
@include loop-offset-helpers($reflex-columns - 1, '-sm');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-md) {
|
|
||||||
@include loop-offset-helpers($reflex-columns - 1, '-md');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-lg) {
|
|
||||||
@include loop-offset-helpers($reflex-columns - 1, '-lg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $reflex-xlg) {
|
|
||||||
@include loop-offset-helpers($reflex-columns - 1, '-xlg');
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
// --------------------------------------------------
|
|
||||||
// reflex variables
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Prefix
|
|
||||||
// -------------------------
|
|
||||||
// You can optionally namespace reflex classes to avoid clashing with other css frameworks
|
|
||||||
// e.g. setting $reflex-prefix as "reflex-" here would cause col-sm-6 to become reflex-col-sm-6
|
|
||||||
// Example: $reflex-prefix: reflex-;
|
|
||||||
// By default this is an empty string
|
|
||||||
$reflex-prefix: null !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Legacy support
|
|
||||||
// -------------------------
|
|
||||||
// Reflex adds a lot of css propertie to support older browsers that don't support flexbox layout.
|
|
||||||
// If you prefer to use this as a purely flexbox grid without legacy support then set this to false
|
|
||||||
$legacy-support: true !default;
|
|
||||||
|
|
||||||
// Responsive visibility helpers
|
|
||||||
// -------------------------
|
|
||||||
// Reflex has some generic visibility classes to hide elements at different breakpoints.
|
|
||||||
// If you want to disable these then set this to false
|
|
||||||
$visibility-helpers: true !default;
|
|
||||||
|
|
||||||
// Grid
|
|
||||||
// -------------------------
|
|
||||||
$reflex-columns: 12 !default; // number of columns
|
|
||||||
|
|
||||||
// Breakpoints
|
|
||||||
// -------------------------
|
|
||||||
$reflex-xs: 576px !default;
|
|
||||||
$reflex-sm: 768px !default;
|
|
||||||
$reflex-md: 992px !default;
|
|
||||||
$reflex-lg: 1200px !default;
|
|
||||||
$reflex-xlg: 1600px !default;
|
|
||||||
|
|
||||||
$reflex-xxs-max: ($reflex-xs - 1);
|
|
||||||
$reflex-xs-max: ($reflex-sm - 1);
|
|
||||||
$reflex-sm-max: ($reflex-md - 1);
|
|
||||||
$reflex-md-max: ($reflex-lg - 1);
|
|
||||||
$reflex-lg-max: ($reflex-xlg - 1);
|
|
||||||
|
|
||||||
$reflex-breakpoints: (
|
|
||||||
xxs: 0px,
|
|
||||||
xs: $reflex-xs,
|
|
||||||
sm: $reflex-sm,
|
|
||||||
md: $reflex-md,
|
|
||||||
lg: $reflex-lg,
|
|
||||||
xlg: $reflex-xlg
|
|
||||||
);
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
// -------------------------
|
|
||||||
$reflex-grid-spacing: 15px !default;
|
|
||||||
|
|
||||||
// Custom properties so others can reference the variables.
|
|
||||||
:root {
|
|
||||||
--reflex-columns: #{ $reflex-columns };
|
|
||||||
--reflex-grid-spacing: #{ $reflex-grid-spacing };
|
|
||||||
--reflex-xs: #{ $reflex-xs };
|
|
||||||
--reflex-sm: #{ $reflex-sm };
|
|
||||||
--reflex-md: #{ $reflex-md };
|
|
||||||
--reflex-lg: #{ $reflex-lg };
|
|
||||||
--reflex-xlg: #{ $reflex-xlg };
|
|
||||||
--reflex-xxs-max: #{ $reflex-xxs-max };
|
|
||||||
--reflex-xs-max: #{ $reflex-xs-max };
|
|
||||||
--reflex-sm-max: #{ $reflex-sm-max };
|
|
||||||
--reflex-md-max: #{ $reflex-md-max };
|
|
||||||
--reflex-lg-max: #{ $reflex-lg-max };
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue