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> </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="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
@ -65,32 +53,48 @@
Layout Layout
</h2> </h2>
<h3 class="highlight"> <h3>
Grid Grid
</h3> </h3>
<p class="m-bottom-4"> <div class="panel panel--border-highlight border-color-info m-bottom-4">
The grid is a small modificated Version from the Reflex Grid <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> </p>
</div>
</div>
</div>
<h3 class="highlight"> <h3>
Masonry Masonry
</h3> </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"> <div class="masonry">
<figure class="masonry__item marginless"> <figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" /> <img class="media object-fit-cover h-100" src="/image.jpg" />
</figure> </figure>
<figure class="masonry__item marginless"> <figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" /> <img class="media object-fit-cover h-100" src="/image.jpg" />
</figure> </figure>
<figure class="masonry__item marginless"> <figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" /> <img class="media object-fit-cover h-100" src="/image.jpg" />
</figure> </figure>
<figure class="masonry__item marginless"> <figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" /> <img class="media object-fit-cover h-100" src="/image.jpg" />
</figure> </figure>
<figure class="masonry__item marginless"> <figure class="masonry__item">
<img class="media object-fit-cover h-100" src="/image.jpg" /> <img class="media object-fit-cover h-100" src="/image.jpg" />
</figure> </figure>
</div> </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__link-hover: $plain-ui__danger !default;
$plain-ui__colors: ( $plain-ui__colors: (
--body, '--body': $plain-ui__body,
--text, '--text': $plain-ui__text,
--text-contrast, '--text-contrast': $plain-ui__text-contrast,
--primary, '--primary': $plain-ui__primary,
--primary-contrast, '--primary-contrast': $plain-ui__primary-contrast,
--active, '--active': #{$plain-ui__active},
--active-contrast, '--active-contrast': $plain-ui__active-contrast,
--link, '--link': $plain-ui__link,
--link-hover, '--link-hover': $plain-ui__link-hover,
--danger, '--danger': $plain-ui__danger,
--danger-contrast, '--danger-contrast': $plain-ui__danger-contrast,
--info, '--info': $plain-ui__info,
--info-constrast, '--info-constrast': $plain-ui__info-contrast,
--success, '--success': $plain-ui__success,
--success-contrast, '--success-contrast': $plain-ui__success-contrast,
--warning, '--warning': $plain-ui__warning,
--warning-contrast, '--warning-contrast': $plain-ui__warning-contrast,
--background, '--background': $plain-ui__background,
--background-contrast, '--background-contrast': $plain-ui__background-contrast,
--border, '--border': $plain-ui__border,
--border-contrast '--border-contrast': $plain-ui__border-contrast
) !default; ) !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 * 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 { html {
font-size: 100%; font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers. 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, '--', ''); $class: str-replace($name, '--', '');
.color-#{$class} { .color-#{$class} {
@ -14,7 +14,7 @@
} }
} }
@each $name in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.fill-#{$class} { .fill-#{$class} {
@ -22,7 +22,7 @@
} }
} }
@each $name in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.border-color-#{$class} { .border-color-#{$class} {
@ -30,7 +30,7 @@
} }
} }
@each $name in $plain-ui__colors { @each $name, $color in $plain-ui__colors {
$class: str-replace($name, '--', ''); $class: str-replace($name, '--', '');
.background-color-#{$class} { .background-color-#{$class} {

Write Preview
Loading…
Cancel
Save