tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
0e01003acb
commit
b4be5041a8
9 changed files with 11319 additions and 128 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +57
    -43
      public/components.html
  2. +14
    -3
      public/index.html
  3. +11082
    -1
      public/plain-ui.css
  4. +13
    -1
      public/spritemap.js
  5. +1
    -1
      src/scss/_variables.scss
  6. +35
    -5
      src/scss/components/_button.scss
  7. +62
    -16
      src/scss/helpers/_sizing.scss
  8. +55
    -52
      src/scss/helpers/_spacing.scss
  9. +0
    -6
      webpack.mix.js

+ 57
- 43
public/components.html View File

@ -50,50 +50,61 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-6">
<div class="col-12">
<h2 class="highlight">
Components
</h2>
<h3>
Buttons
</h3>
<div class="content"> <div class="content">
<p>
Some Text
<p>
<code>&lt;button class=&quot;button&quot;&gt;
Default
&lt;/button&gt;
</code>
</div> </div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Components</h2>
<h3>Buttons</h3>
<div class="m-bottom-4">
<button class="button">
Default
</button>
<button class="button">
Icon
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--selected">
Selected
</button>
<button class="button" disabled>
Disabled
</button>
</div>
<div class="m-bottom-4">
<button class="button button--danger">
danger
</button>
<button class="button button--success">
success
</button>
<button class="button button--warning">
warning
</button>
<button class="button button--info">
info
</button>
</div>
<div class="m-bottom-4">
<button class="button button--outline">
outline
</button>
</div>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-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--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small"> <button class="button button--small">
Small Small
</button> </button>
@ -408,12 +419,15 @@
<h2> <h2>
Hero Hero
</h2> </h2>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<code>
</code>
</div> </div>
</div> </div>
</div> </div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">


+ 14
- 3
public/index.html View File

@ -66,7 +66,7 @@
<div class="content"> <div class="content">
<div class="panel panel--border-highlight border-color-danger m-bottom-4"> <div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body"> <div class="panel__body">
<div class="content marginless-last-child">
<div class="content m-bottom-last-child-0">
<p> <p>
On development, a few styles and names will be change until release On development, a few styles and names will be change until release
</p> </p>
@ -74,7 +74,7 @@
</div> </div>
</div> </div>
<p> <p>
<span class="bold">Plain UI</span> is a simple UI Framework.
<span class="bold">Plain UI</span> is a simple UI Framework.
</p> </p>
<p> <p>
@ -118,7 +118,18 @@
<a href="https://purgecss.com/" target="_blank">PurgeCSS</a> <a href="https://purgecss.com/" target="_blank">PurgeCSS</a>
</p> </p>
<code></code>
<code>mix
.setPublicPath('./public')
.sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
.purgeCss({
extend: {
enabled: true,
content: [
path.join(__dirname, 'public/*.html'),
]
}
})
</code>
</div> </div>
</div> </div>
</div> </div>


+ 11082
- 1
public/plain-ui.css
File diff suppressed because it is too large
View File


+ 13
- 1
public/spritemap.js View File

@ -1 +1,13 @@
(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

+ 1
- 1
src/scss/_variables.scss View File

@ -160,4 +160,4 @@ $plain-ui__padding-breakpoints: (
*/ */
$plain-ui__border-radius: 2px; $plain-ui__border-radius: 2px;
$plain-ui__border: 1px solid var(--primary);
$plain-ui__border: 1px solid var(--border);

+ 35
- 5
src/scss/components/_button.scss View File

@ -84,15 +84,39 @@
} }
} }
&--info {
border-color: var(--info);
&:hover {
background-color: var(--info);
}
&:focus, &:active {
outline: 2px solid var(--info);
}
}
&--warning {
border-color: var(--warning);
&:hover {
background-color: var(--warning);
}
&:focus, &:active {
outline: 2px solid var(--warning);
}
}
&--success { &--success {
border-color: var(--success); border-color: var(--success);
&:hover { &:hover {
background-color: var(--sucess);
background-color: var(--success);
} }
&:focus, &:active { &:focus, &:active {
outline: 2px solid var(--active);
outline: 2px solid var(--success);
} }
} }
@ -101,20 +125,26 @@
&:hover { &:hover {
color: var(--border); color: var(--border);
border-color: var(--border-contrast);
border-color: lighten($plain-ui__primary, 40%);
background-color: transparent; background-color: transparent;
} }
} }
&--danger.button--outline { &--danger.button--outline {
&:hover { &:hover {
border-color: var(--danger);
border-color: lighten($plain-ui__danger, 20%);
}
}
&--info.button--outline {
&:hover {
border-color: lighten($plain-ui__info, 20%);
} }
} }
&--success.button--outline { &--success.button--outline {
&:hover { &:hover {
border-color: var(--success);
border-color: lighten($plain-ui__success, 20%);
} }
} }
} }

+ 62
- 16
src/scss/helpers/_sizing.scss View File

@ -7,7 +7,46 @@
* *
*/ */
$plain-ui__helpers__height-steps: 50;
$plain-ui__sizing_steps: 50 !default;
/**
* mixin: sizing
*
*/
@mixin sizing($class, $style, $i, $value)
{
.#{$class}-#{$i} {
#{$style}: $value;
}
}
/**
* mixin: sizing for each breakpoint
*
*
*/
@mixin sizing_breakpoints($class, $style, $i, $value)
{
@include plain-ui__media-xs() {
@include sizing($class, $style, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include sizing($class, $style, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include sizing($class, $style, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include sizing($class, $style, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include sizing($class, $style, 'xlg-' + $i, $value);
}
}
.w-0 { width: 0; } .w-0 { width: 0; }
.h-0 { height: 0; } .h-0 { height: 0; }
@ -16,24 +55,31 @@ $plain-ui__helpers__height-steps: 50;
.w-100 { width: 100%; } .w-100 { width: 100%; }
.h-100 { height: 100%; } .h-100 { height: 100%; }
@for $i from 1 through $reflex-columns {
.w-col-#{$i} {
width: percentage(($i / $reflex-columns));
}
@for $i from 1 through $reflex-columns
{
$value: percentage(($i / $reflex-columns));
.h-col-#{$i} {
height: percentage(($i / $reflex-columns));
}
@include sizing('w-col', 'width', $i, $value);
@include sizing_breakpoints('w-col', 'width', $i, $value);
$value: percentage(($i / $reflex-columns));
@include sizing('h-col', 'height', $i, $value);
@include sizing_breakpoints('h-col', 'height', $i, $value);
} }
@for $i from 1 through $plain-ui__helpers__height-steps {
.w-#{$i} {
width: #{($i * 0.5)}rem;
}
@for $i from 1 through $plain-ui__sizing_steps
{
$value: #{($i * 0.5)}rem;
@include sizing('w', 'width', $i, $value);
@include sizing_breakpoints('w', 'width', $i, $value);
} }
@for $i from 1 through $plain-ui__helpers__height-steps {
.h-#{$i} {
height: #{($i * 0.5)}rem;
}
@for $i from 1 through $plain-ui__sizing_steps
{
$value: #{($i * 0.5)}rem;
@include sizing('h', 'height', $i, $value);
@include sizing_breakpoints('h', 'height', $i, $value);
} }

+ 55
- 52
src/scss/helpers/_spacing.scss View File

@ -1,3 +1,11 @@
/**
* Spacing
*
* creates margin and padding for each direction and for each breakpont
*
*
*/
$plain-ui__spacing-direction: ( $plain-ui__spacing-direction: (
'top', 'top',
'bottom', 'bottom',
@ -8,6 +16,46 @@ $plain-ui__spacing-direction: (
$plain-ui__spacing-gap: 0.25 !default; $plain-ui__spacing-gap: 0.25 !default;
$plain-ui__spacing-steps: 10 !default; $plain-ui__spacing-steps: 10 !default;
/**
* mixin: spacing for single padding or margin
*
*
*/
@mixin spacing($class, $style, $direction, $name, $value)
{
.#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value;
}
}
/**
* mixin: spacing for each breakpoint
*
*
*/
@mixin spacing_breakpoints($class, $style, $direction, $i, $value)
{
@include plain-ui__media-xs() {
@include spacing($class, $style, $direction, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include spacing($class, $style, $direction, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include spacing($class, $style, $direction, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include spacing($class, $style, $direction, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include spacing($class, $style, $direction, 'xlg-' + $i, $value);
}
}
/** /**
* *
* *
@ -22,22 +70,15 @@ $plain-ui__spacing-steps: 10 !default;
padding: 0; padding: 0;
} }
.marginless-last-child {
.m-top-last-child-0 {
> *:last-child { > *:last-child {
margin-bottom: 0;
margin-top: 0;
} }
} }
/**
* spacing for single padding or margin
*
*
*/
@mixin spacing($class, $style, $direction, $name, $value)
{
.#{$class}-#{$direction}-#{$name} {
#{$style}-#{$direction}: $value;
.m-bottom-last-child-0 {
> *:last-child {
margin-bottom: 0;
} }
} }
@ -49,26 +90,7 @@ $plain-ui__spacing-steps: 10 !default;
@for $i from 2 through $plain-ui__spacing-steps { @for $i from 2 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value); @include spacing('m', 'margin', $direction, $i, $value);
@include plain-ui__media-xs() {
@include spacing('m', 'margin', $direction, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include spacing('m', 'margin', $direction, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include spacing('m', 'margin', $direction, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include spacing('m', 'margin', $direction, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include spacing('m', 'margin', $direction, 'xlg-' + $i, $value);
}
@include spacing_breakpoints('m', 'margin', $direction, $i, $value);
} }
} }
@ -80,25 +102,6 @@ $plain-ui__spacing-steps: 10 !default;
@for $i from 0 through $plain-ui__spacing-steps { @for $i from 0 through $plain-ui__spacing-steps {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value); @include spacing('p', 'padding', $direction, $i, $value);
@include plain-ui__media-xs() {
@include spacing('p', 'padding', $direction, 'xs-' + $i, $value);
}
@include plain-ui__media-sm() {
@include spacing('p', 'padding', $direction, 'sm-' + $i, $value);
}
@include plain-ui__media-md() {
@include spacing('p', 'padding', $direction, 'md-' + $i, $value);
}
@include plain-ui__media-lg() {
@include spacing('p', 'padding', $direction, 'lg-' + $i, $value);
}
@include plain-ui__media-xlg() {
@include spacing('p', 'padding', $direction, 'xlg-' + $i, $value);
}
@include spacing_breakpoints('p', 'padding', $direction, $i, $value);
} }
} }

+ 0
- 6
webpack.mix.js View File

@ -44,14 +44,8 @@ mix
.sass('src/scss/plain-ui.scss', 'public/plain-ui.css') .sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
.purgeCss({ .purgeCss({
extend: { extend: {
enabled: true,
content: [ content: [
path.join(__dirname, 'public/*.html'), path.join(__dirname, 'public/*.html'),
] ]
} }
})
.options({
terser: {
extractComments: false,
}
}) })

Write Preview
Loading…
Cancel
Save