Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1221 additions and 109 deletions
source/_patterns/00-atoms/00-global/00-brand-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-black"></span>
<span class="sg-label">Black<br>#00000;</span>
</li>
<li>
<span class="sg-swatch bg-white"></span>
<span class="sg-label">White<br>#ffffff</span>
</li>
<li>
<span class="sg-swatch bg-green-100"></span>
<span class="sg-label">Green 100<br>#29bc51</span>
</li>
<li>
<span class="sg-swatch bg-green-200"></span>
<span class="sg-label">Green 200<br>#26b34b</span>
</li>
<li>
<span class="sg-swatch bg-green-300"></span>
<span class="sg-label">Green 300<br>#22a244</span>
</li>
</ul>
{{# brandColors }}
<h2 class="head-alt-sm mb-4 mt-8">{{ name }}</h2>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{# variants }}
{{> molecules-color-swatch }}
{{/ variants }}
</div>
{{/ brandColors }}
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-grey-50"></span>
<span class="sg-label">Grey 50<br>#f7f7f7</span>
</li>
<li>
<span class="sg-swatch bg-grey-100"></span>
<span class="sg-label">Grey 100<br>#f3f3f3</span>
</li>
<li>
<span class="sg-swatch bg-grey-150"></span>
<span class="sg-label">Grey 150<br>#00000012</span>
</li>
<li>
<span class="sg-swatch bg-grey-200"></span>
<span class="sg-label">Grey 200<br>#adadad</span>
</li>
<li>
<span class="sg-swatch bg-grey-300"></span>
<span class="sg-label">Grey 300<br>#4c4c4c</span>
</li>
<li>
<span class="sg-swatch bg-grey-400"></span>
<span class="sg-label">Grey 400<br>#343434</span>
</li>
<li>
<span class="sg-swatch bg-grey-500"></span>
<span class="sg-label">Grey 500<br>#202020</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{# greyColors }}
{{> molecules-color-swatch }}
{{/ greyColors }}
</div>
source/_patterns/00-atoms/00-global/02-utility-colors.mustache deleted 100644 → 0
View file @ ee1850b8
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-red-100"></span>
<span class="sg-label">Red 100<br>#d6151b</span>
</li>
</ul>
source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-brands-facebook"></span>
<span class="sg-label">Facebook blue<br>#067ceb</span>
</li>
<li>
<span class="sg-swatch bg-brands-twitter"></span>
<span class="sg-label">Twitter blue<br>#00c9ff</span>
</li>
<li>
<span class="sg-swatch bg-brands-gmail"></span>
<span class="sg-label">Gmail red<br>#ec230e</span>
</li>
<li>
<span class="sg-swatch bg-brands-linkedin"></span>
<span class="sg-label">LinkedIn blue<br>#0066a9</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-brands-facebook"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Facebook</p>
<p>#067ceb</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-twitter"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Twitter</p>
<p>#00c9ff</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-gmail"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Gmail</p>
<p>#ec230e</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-linkedin"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">LinkedIn</p>
<p>#0066a9</p>
</div>
</div>
</div>
source/_patterns/00-atoms/00-global/04-fonts.mustache
View file @ aac6d1d3
<div class="space-y-6">
<div class="space-y-12">
<div>
<p class="font-body">Primary font: "Roboto", "Helvetica", "Arial", sans-serif;</p>
<p class="font-body"><em>Primary font italic: "Roboto", "Helvetica", "Arial", sans-serif;</em></p>
......
source/_patterns/00-atoms/00-global/05-standard-container.mustache 0 → 100644
View file @ aac6d1d3
<div class="container container--default">
{{ excerpt.long }}
</div>
source/_patterns/00-atoms/00-global/05-wide-container.mustache 0 → 100644
View file @ aac6d1d3
<div class="container container--wide">
{{ excerpt.long }}
</div>
source/_patterns/00-atoms/01-text/font-sizes.mustache
View file @ aac6d1d3
<p class="text-9xl">9xl size</p>
<p class="text-8xl">8xl size</p>
<p class="text-7xl">7xl size</p>
<p class="text-6xl">6xl size</p>
<p class="text-5xl">5xl size</p>
......
source/_patterns/00-atoms/01-text/headings.mustache
View file @ aac6d1d3
<div class="space-y-6">
<div class="space-y-12">
<div>
<h1 class="head-alt-xl">{{ headline.short }}</h1>
<h1 class="head-alt-lg">{{ headline.short }}</h1>
......@@ -26,9 +26,11 @@
<div>
<h1 class="head-allcaps-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-3xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-4xs">{{ headline.short }}</h1>
</div>
<div>
<h1 class="head-allcaps-heavy-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-heavy-3xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-heavy-4xs">{{ headline.short }}</h1>
</div>
</div>
source/_patterns/00-atoms/01-text/paragraph.mustache
View file @ aac6d1d3
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies, eros sit amet blandit laoreet, ipsum nisl pellentesque nunc, in tristique nulla leo vel ante. Donec vitae interdum nisl. Vestibulum tellus augue, pulvinar id cursus auctor, tincidunt et sem. Curabitur gravida dapibus ipsum. Phasellus sit amet tortor tincidunt, ultrices dolor ut, dapibus elit. Morbi fermentum pellentesque sodales. Ut ac convallis lorem, sit amet iaculis ante. Donec sed sapien neque. Aenean arcu orci, congue ut lacinia sit amet, tristique id velit. Donec tincidunt augue vel elit interdum pellentesque. Maecenas id mi ante. Curabitur ante massa, malesuada ac libero id, posuere mollis sapien. Nulla eleifend tincidunt erat fermentum dignissim. Suspendisse accumsan iaculis fringilla. Phasellus non purus quam. Vestibulum et suscipit ipsum, sed porta neque. Integer vitae dignissim elit, et ultrices eros. Morbi molestie lorem non tincidunt tincidunt. Quisque lobortis, ante nec tristique sagittis, tellus purus posuere libero, eget accumsan diam felis vel diam. Praesent mattis consectetur dapibus. Nullam aliquam sagittis ipsum et accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacinia rhoncus ultrices. Pellentesque rhoncus tellus eu purus bibendum, ac cursus massa aliquam. Donec consectetur sodales ligula nec vulputate. Pellentesque nec sapien sit amet urna ullamcorper ullamcorper at eget odio. Donec sed tristique urna. Pellentesque dictum risus quam, et consequat nulla viverra id. Vestibulum viverra ultricies orci non placerat. Etiam porta tellus quis justo faucibus scelerisque. Duis sit amet arcu ac turpis aliquet condimentum eu vel erat. Donec dui velit, varius sit amet tristique quis, convallis in orci. Vestibulum justo mauris, sagittis vitae justo et, blandit placerat libero. Mauris vel sagittis tortor. Morbi mollis mi sed ipsum tristique dignissim. Curabitur placerat augue eget lectus congue suscipit.</p>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies, eros sit amet blandit laoreet, ipsum nisl pellentesque nunc, in tristique nulla leo vel ante. Donec vitae interdum nisl. Vestibulum tellus augue, pulvinar id cursus auctor, tincidunt et sem. Curabitur gravida dapibus ipsum. Phasellus sit amet tortor tincidunt, ultrices dolor ut, dapibus elit. Morbi fermentum pellentesque sodales. Ut ac convallis lorem, sit amet iaculis ante. Donec sed sapien neque. Aenean arcu orci, congue ut lacinia sit amet, tristique id velit. Donec tincidunt augue vel elit interdum pellentesque. Maecenas id mi ante. Curabitur ante massa, malesuada ac libero id, posuere mollis sapien. Nulla eleifend tincidunt erat fermentum dignissim. Suspendisse accumsan iaculis fringilla. Phasellus non purus quam. Vestibulum et suscipit ipsum, sed porta neque. Integer vitae dignissim elit, et ultrices eros. Morbi molestie lorem non tincidunt tincidunt. Quisque lobortis, ante nec tristique sagittis, tellus purus posuere libero, eget accumsan diam felis vel diam. Praesent mattis consectetur dapibus. Nullam aliquam sagittis ipsum et accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lacinia rhoncus ultrices. Pellentesque rhoncus tellus eu purus bibendum, ac cursus massa aliquam. Donec consectetur sodales ligula nec vulputate. Pellentesque nec sapien sit amet urna ullamcorper ullamcorper at eget odio. Donec sed tristique urna. Pellentesque dictum risus quam, et consequat nulla viverra id. Vestibulum viverra ultricies orci non placerat. Etiam porta tellus quis justo faucibus scelerisque. Duis sit amet arcu ac turpis aliquet condimentum eu vel erat. Donec dui velit, varius sit amet tristique quis, convallis in orci. Vestibulum justo mauris, sagittis vitae justo et, blandit placerat libero. Mauris vel sagittis tortor. Morbi mollis mi sed ipsum tristique dignissim. Curabitur placerat augue eget lectus congue suscipit.</p>
<p class="para">{{ excerpt.long }}</p>
<p class="para">{{ excerpt.long }}</p>
source/_patterns/00-atoms/01-text/text-shadow.mustache 0 → 100644
View file @ aac6d1d3
<div>
<h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
</div>
source/_patterns/00-atoms/02-contact-lines/basic-contact-line.mustache deleted 100644 → 0
View file @ ee1850b8
<a href="mailto:example@example.com" class="contact-line {{ classes }}">
<i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
</a>
source/_patterns/00-atoms/02-icons/.gitkeep 0 → 100644
View file @ aac6d1d3
source/_patterns/00-atoms/02-icons/icons.mustache 0 → 100644
View file @ aac6d1d3
This diff is collapsed.
source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
View file @ aac6d1d3
<button class="btn {{ classes }}">
<div class="btn__body">{{ cta }}</div>
<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
View file @ aac6d1d3
<button class="btn btn--icon {{ classes }}">
<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body-wrap">
<div class="btn__body">{{ cta }}</div>
<div class="btn__icon">
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
<div class="btn__icon {{ iconClasses }}">
<i class="{{ icon }}"></i>
</div>
</div>
......
source/_patterns/00-atoms/03-buttons/01-inline-icon-button.mustache 0 → 100644
View file @ aac6d1d3
<button class="btn btn--inline-icon {{ classes }}">
<div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
View file @ aac6d1d3
<div class="space-y-2">
<div>
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black") }}
{{> atoms-basic-button(classes: "btn--grey-450") }}
{{> atoms-basic-button(classes: "btn--grey-700") }}
{{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }}
{{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--white btn--fading") }}
{{> atoms-basic-button(classes: "btn--green-100") }}
{{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }}
{{> atoms-basic-button(classes: "btn--green-400") }}
{{> atoms-basic-button(classes: "btn--green-300") }}
{{> atoms-basic-button(classes: "btn--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }}
{{> atoms-basic-button(classes: "btn--red-600") }}
</div>
<div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-basic-button(classes: "btn--white", disabled: true) }}
{{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black") }}
{{> atoms-icon-button(classes: "btn--grey-450") }}
{{> atoms-icon-button(classes: "btn--grey-700") }}
{{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }}
{{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--white btn--fading") }}
{{> atoms-icon-button(classes: "btn--green-100") }}
{{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }}
{{> atoms-icon-button(classes: "btn--green-400") }}
{{> atoms-icon-button(classes: "btn--green-300") }}
{{> atoms-icon-button(classes: "btn--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }}
{{> atoms-icon-button(classes: "btn--red-600") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-icon-button(classes: "btn--white", disabled: true) }}
{{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
</div>
</div>
source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache
View file @ aac6d1d3
<div class="space-y-1">
<div>
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "text-sm" )}}
{{> atoms-basic-button(classes: "text-base" )}}
{{> atoms-basic-button(classes: "text-lg" )}}
</div>
<div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "text-sm btn--condensed" )}}
{{> atoms-basic-button(classes: "text-base btn--condensed" )}}
{{> atoms-basic-button(classes: "text-lg btn--condensed" )}}
......
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
View file @ aac6d1d3
<div class="space-y-2">
<div>
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-450 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
<div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-450 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
</div>

Pirátský GitLab - Home of the CopyLeft