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