Skip to content

Commit

Permalink
preview Template for each container
Browse files Browse the repository at this point in the history
  • Loading branch information
izabela.horodenska committed Apr 19, 2024
1 parent 9a633d1 commit df0df4e
Show file tree
Hide file tree
Showing 15 changed files with 440 additions and 456 deletions.
133 changes: 64 additions & 69 deletions styleguide/js/banners.js
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,74 @@
import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js';

export const bannersTemplate = () => {
export const template = () => {
return html`
<div class="ls-library theme-content-element" id="banners">
<h1>Banner</h1>
<div class="theme-content-element-description">
<div class="ls-example">
<h5 class="ls-example__heading">Example</h5>
<div class="ls-example__body">
<div class="banner block" data-block-name="banner" data-block-status="loaded">
<!---->
<div id="banner">
<div class="content">
<header>
<h1><!--?lit$126102149$-->Hi, I’m Editorial by HTML5 UP!</h1>
<p><!--?lit$126102149$-->A FREE AND FULLY RESPONSIVE SITE TEMPLATE</p>
</header>
<div class="theme-content-element-description">
<div class="ls-example">
<h5 class="ls-example__heading">Example</h5>
<div class="ls-example__body">
<div class="banner block" data-block-name="banner" data-block-status="loaded">
<!---->
<div id="banner">
<div class="content">
<header>
<h1><!--?lit$126102149$-->Hi, I’m Editorial by HTML5 UP!</h1>
<p><!--?lit$126102149$-->A FREE AND FULLY RESPONSIVE SITE TEMPLATE</p>
</header>
<!--?lit$126102149$--><!---->
<p>
<!--?lit$126102149$-->Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam
facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet
egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. Pellentesque
sapien ac quam. Lorem ipsum dolor sit nullam.
</p>
<!----><!---->
<p>
<!--?lit$126102149$-->Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas.
Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.
</p>
<!---->
<ul class="actions">
<!--?lit$126102149$--><!---->
<p>
<!--?lit$126102149$-->Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam
facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper,
amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas.
Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.
</p>
<li>
<a class="button big" href="http://localhost:3000/#"><!--?lit$126102149$-->Learn more</a>
</li>
<!----><!---->
<p>
<!--?lit$126102149$-->Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas.
Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam.
</p>
<li>
<a class="button big" href="http://localhost:3000/generic"><!--?lit$126102149$-->Gehe zu Generic</a>
</li>
<!---->
<ul class="actions">
<!--?lit$126102149$--><!---->
<li>
<a class="button big" href="http://localhost:3000/#"><!--?lit$126102149$-->Learn more</a>
</li>
<!----><!---->
<li>
<a class="button big" href="http://localhost:3000/generic"
><!--?lit$126102149$-->Gehe zu Generic</a
>
</li>
<!---->
</ul>
</div>
<span class="image object"
><!--?lit$126102149$--><picture>
<source
type="image/webp"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&amp;format=webply&amp;optimize=medium
"
media="(min-width: 600px)"
/>
<source
type="image/webp"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&amp;format=webply&amp;optimize=medium
"
/>
<source
type="image/png"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&amp;format=png&amp;optimize=medium
"
media="(min-width: 600px)"
/>
<img
loading="eager"
alt=""
src="./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&amp;format=png&amp;optimize=medium"
width="736"
height="512"
/> </picture
></span>
</ul>
</div>
<span class="image object"
><!--?lit$126102149$--><picture>
<source
type="image/webp"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&amp;format=webply&amp;optimize=medium
"
media="(min-width: 600px)"
/>
<source
type="image/webp"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&amp;format=webply&amp;optimize=medium
"
/>
<source
type="image/png"
srcset="
./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&amp;format=png&amp;optimize=medium
"
media="(min-width: 600px)"
/>
<img
loading="eager"
alt=""
src="./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&amp;format=png&amp;optimize=medium"
width="736"
height="512"
/> </picture
></span>
</div>
</div>
</div>
Expand Down
83 changes: 39 additions & 44 deletions styleguide/js/buttons.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,54 @@
import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js';

export const buttonsTemplate = () => {
export const template = () => {
return html`
<div class="theme-content-category" id="buttons">
<div class="ls-library theme-content-element">
<h1>Buttons</h1>
<div class="theme-content-element-description">
<p>Button / Anchor element.</p>
<p>Default button size is <strong>l</strong>. Default button type is <strong>secondary</strong>.</p>
<p><strong>Button properties:</strong></p>
<ul>
<li><p>button-type: "primary" | "secondary"</p></li>
<li><p>button-size: "s" | "l"</p></li>
<li><p>button-class: string</p></li>
<li><p>attributes: hash | string</p></li>
<li><p>tag: "button" | "a"</p></li>
<li><p>label: string</p></li>
<div class="theme-content-element-description">
<p>Button / Anchor element.</p>
<p>Default button size is <strong>l</strong>. Default button type is <strong>secondary</strong>.</p>
<p><strong>Button properties:</strong></p>
<ul>
<li><p>button-type: "primary" | "secondary"</p></li>
<li><p>button-size: "s" | "l"</p></li>
<li><p>button-class: string</p></li>
<li><p>attributes: hash | string</p></li>
<li><p>tag: "button" | "a"</p></li>
<li><p>label: string</p></li>
</ul>
<div class="ls-example">
<h5 class="ls-example__heading">Example</h5>
<div class="ls-example__body">
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<div class="ls-example">
<h5 class="ls-example__heading">Example</h5>
<div class="ls-example__body">
<ul class="actions">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<div class="row">
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<div class="row">
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary fit">Default</a></li>
<li><a href="#" class="button fit">Default</a></li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary small fit">Small</a></li>
<li><a href="#" class="button small fit">Small</a></li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary fit">Default</a></li>
<li><a href="#" class="button fit">Default</a></li>
</ul>
</div>
<div class="col-6 col-12-small">
<ul class="actions">
<li><a href="#" class="button primary small fit">Small</a></li>
<li><a href="#" class="button small fit">Small</a></li>
</ul>
</div>
</div>
</div>
Expand Down
143 changes: 69 additions & 74 deletions styleguide/js/colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,81 +2,76 @@ import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js';

export const template = () => {
return html`
<div class="theme-content-category" id="colors">
<div class="ls-library theme-content-element">
<h1>Colors</h1>
<div class="theme-content-element-description">
<p><strong>Colors used in this project.</strong></p>
<div class="ls-example">
<div class="lsg-colors">
<h3>Primary</h3>
<div class="lsg-colors__colors">
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #394d45; "></div>
<p>living-green</p>
</div>
<div class="lsg-colors__color">
<div style="background: #637a77; /* --bm-primary-teal */"></div>
<p>teal</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #dcd8c0; /* --bm-primary-moss */"></div>
<p>moss</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #e7cfb9; /* --bm-primary-blush */"></div>
<p>blush</p>
</div>
</div>
<div class="theme-content-element-description">
<p><strong>Colors used in this project.</strong></p>
<div class="ls-example">
<div class="lsg-colors">
<h3>Primary</h3>
<div class="lsg-colors__colors">
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #394d45; "></div>
<p>living-green</p>
</div>
<div class="lsg-colors">
<h3>Neutral</h3>
<div class="lsg-colors__colors">
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #fff;"></div>
<p>neutral-0</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #f7f7f7;"></div>
<p>neutral-10</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #ebeced;"></div>
<p>neutral-20</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #cfcfcf;"></div>
<p>neutral-30</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #a5a5a5;"></div>
<p>neutral-40</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #727272;"></div>
<p>neutral-50</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #4f4f4f;"></div>
<p>neutral-60</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #232323;"></div>
<p>neutral-80</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #040404;"></div>
<p class="bm-lsg-colors__colors-name">neutral-90</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #000;"></div>
<p>neutral-100</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #040404;"></div>
<p>black</p>
</div>
</div>
<div class="lsg-colors__color">
<div style="background: #637a77; /* --bm-primary-teal */"></div>
<p>teal</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #dcd8c0; /* --bm-primary-moss */"></div>
<p>moss</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #e7cfb9; /* --bm-primary-blush */"></div>
<p>blush</p>
</div>
</div>
</div>
<div class="lsg-colors">
<h3>Neutral</h3>
<div class="lsg-colors__colors">
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #fff;"></div>
<p>neutral-0</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #f7f7f7;"></div>
<p>neutral-10</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #ebeced;"></div>
<p>neutral-20</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #cfcfcf;"></div>
<p>neutral-30</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #a5a5a5;"></div>
<p>neutral-40</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #727272;"></div>
<p>neutral-50</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #4f4f4f;"></div>
<p>neutral-60</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #232323;"></div>
<p>neutral-80</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #040404;"></div>
<p class="bm-lsg-colors__colors-name">neutral-90</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #000;"></div>
<p>neutral-100</p>
</div>
<div class="lsg-colors__color">
<div class="lsg-colors__color-tile" style="background: #040404;"></div>
<p>black</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit df0df4e

Please sign in to comment.