tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding

Browse Source
release/0.2
Björn 3 years ago
parent 0e01003acb
commit b4be5041a8
9 changed files with 11319 additions and 128 deletions
Show Stats Download Patch File Download Diff File

100
public/components.html
Unescape View File

@ -50,50 +50,61 @@
<div class="container">
<div class="grid">
<div class="col-6">
<div class="col-12">
<h2 class="highlight">
Components
</h2>
<h3>
Buttons
</h3>
<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 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">
Small
</button>
@ -408,12 +419,15 @@
<h2>
Hero
</h2>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<code>
</code>
</div>
</div>
</div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container">
<div class="grid">

17
public/index.html
Unescape View File

@ -66,7 +66,7 @@
<div class="content">
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content marginless-last-child">
<div class="content m-bottom-last-child-0">
<p>
On development, a few styles and names will be change until release
</p>
@ -74,7 +74,7 @@
</div>
</div>
<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>
@ -118,7 +118,18 @@
<a href="https://purgecss.com/" target="_blank">PurgeCSS</a>
</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>

11083
public/plain-ui.css
View File

File diff suppressed because one or more lines are too long

14
public/spritemap.js
Unescape 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 ***!
\******************************/
/***/ (() => {
/***/ })
}]);

2
src/scss/_variables.scss
Unescape View File

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

40
src/scss/components/_button.scss
Unescape 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 {
border-color: var(--success);
&:hover {
background-color: var(--sucess);
background-color: var(--success);
}
&:focus, &:active {
outline: 2px solid var(--active);
outline: 2px solid var(--success);
}
}
@ -101,20 +125,26 @@
&:hover {
color: var(--border);
border-color: var(--border-contrast);
border-color: lighten($plain-ui__primary, 40%);
background-color: transparent;
}
}
&--danger.button--outline {
&: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 {
&:hover {
border-color: var(--success);
border-color: lighten($plain-ui__success, 20%);
}
}
}

78
src/scss/helpers/_sizing.scss
Unescape 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; }
.h-0 { height: 0; }
@ -16,24 +55,31 @@ $plain-ui__helpers__height-steps: 50;
.w-100 { width: 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);
}

107
src/scss/helpers/_spacing.scss
Unescape View File

@ -1,3 +1,11 @@
/**
* Spacing
*
* creates margin and padding for each direction and for each breakpont
*
*
*/
$plain-ui__spacing-direction: (
'top',
'bottom',
@ -8,6 +16,46 @@ $plain-ui__spacing-direction: (
$plain-ui__spacing-gap: 0.25 !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;
}
.marginless-last-child {
.m-top-last-child-0 {
> *: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 {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@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 {
$value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
@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);
}
}

6
webpack.mix.js
Unescape View File

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