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

adding layout documentation

Browse Source
release/0.2
Björn 3 years ago
parent 5a3a2eb138
commit adb9e97c98
5 changed files with 58 additions and 72 deletions
Show Stats Download Patch File Download Diff File

46
public/layout.html
Unescape View File

@ -46,18 +46,6 @@
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-6">
<div class="content">
<p>
Some Text
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
@ -65,32 +53,48 @@
Layout
</h2>
<h3 class="highlight">
<h3>
Grid
</h3>
<p class="m-bottom-4">
The grid is a small modificated Version from the Reflex Grid
<div class="panel panel--border-highlight border-color-info m-bottom-4">
<div class="panel__body">
<div class="content m-bottom-last-child-0">
<p>
Plain UI uses the <a href="https://reflexgrid.com/" target="_blank" rel=“noopener“>Reflex Grid</a>,
there will be a full integration of this Grid for better Support.
</p>
</div>
</div>
</div>
<h3 class="highlight">
<h3>
Masonry
</h3>
<div class="content">
<code>&lt;div class=&quot;masonry&quot;&gt;
&lt;figure class=&quot;masonry__item&quot;&gt;
&lt;img class=&quot;media object-fit-cover h-100&quot; src=&quot;/image.jpg&quot; /&gt;
&lt;/figure&gt;
&lt;/div&gt;
</code>
</div>
<div class="masonry">
<figure class="masonry__item marginless">
<figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>

2
public/plain-ui.css
View File

File diff suppressed because one or more lines are too long

66
src/scss/_variables.scss
Unescape View File

@ -87,53 +87,29 @@ $plain-ui__link: $plain-ui__text !default;
$plain-ui__link-hover: $plain-ui__danger !default;
$plain-ui__colors: (
--body,
--text,
--text-contrast,
--primary,
--primary-contrast,
--active,
--active-contrast,
--link,
--link-hover,
--danger,
--danger-contrast,
--info,
--info-constrast,
--success,
--success-contrast,
--warning,
--warning-contrast,
--background,
--background-contrast,
--border,
--border-contrast
'--body': $plain-ui__body,
'--text': $plain-ui__text,
'--text-contrast': $plain-ui__text-contrast,
'--primary': $plain-ui__primary,
'--primary-contrast': $plain-ui__primary-contrast,
'--active': #{$plain-ui__active},
'--active-contrast': $plain-ui__active-contrast,
'--link': $plain-ui__link,
'--link-hover': $plain-ui__link-hover,
'--danger': $plain-ui__danger,
'--danger-contrast': $plain-ui__danger-contrast,
'--info': $plain-ui__info,
'--info-constrast': $plain-ui__info-contrast,
'--success': $plain-ui__success,
'--success-contrast': $plain-ui__success-contrast,
'--warning': $plain-ui__warning,
'--warning-contrast': $plain-ui__warning-contrast,
'--background': $plain-ui__background,
'--background-contrast': $plain-ui__background-contrast,
'--border': $plain-ui__border,
'--border-contrast': $plain-ui__border-contrast
) !default;
:root {
--body: #{$plain-ui__body};
--text: #{$plain-ui__text};
--text-contrast: #{$plain-ui__text-contrast};
--primary: #{$plain-ui__primary};
--primary-contrast: #{$plain-ui__primary-contrast};
--active: #{$plain-ui__active};
--active-contrast: #{$plain-ui__active-contrast};
--link: #{$plain-ui__link};
--link-hover: #{$plain-ui__link-hover};
--danger: #{$plain-ui__danger};
--danger-contrast: #{$plain-ui__danger-contrast};
--info: #{$plain-ui__info};
--info-constrast: #{$plain-ui__danger-contrast};
--success: #{$plain-ui__success};
--success-contrast: #{$plain-ui__success-contrast};
--warning: #{$plain-ui__warning};
--warning-contrast: #{$plain-ui__warning-contrast};
--background: #{$plain-ui__background};
--background-contrast: #{$plain-ui__background-contrast};
--border: #{$plain-ui__border};
--border-contrast: #{$plain-ui__border-contrast};
}
/**
* margin
*

6
src/scss/core/_normalize.scss
Unescape View File

@ -9,6 +9,12 @@
*
*/
:root {
@each $var, $color in $plain-ui__colors {
#{$var}: $color;
}
}
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.

8
src/scss/helpers/_colors.scss
Unescape View File

@ -6,7 +6,7 @@
*
*/
@each $name in $plain-ui__colors {
@each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', '');
.color-#{$class} {
@ -14,7 +14,7 @@
}
}
@each $name in $plain-ui__colors {
@each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', '');
.fill-#{$class} {
@ -22,7 +22,7 @@
}
}
@each $name in $plain-ui__colors {
@each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', '');
.border-color-#{$class} {
@ -30,7 +30,7 @@
}
}
@each $name in $plain-ui__colors {
@each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', '');
.background-color-#{$class} {

Write Preview
Loading…
Cancel
Save