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
Loading items

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Loading items
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1240 additions and 114 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-700"></span>
<span class="sg-label">Grey 500<br>#202020</span>
</li>
<li>
<span class="sg-swatch bg-grey-800"></span>
<span class="sg-label">Grey 600<br>#1f1f1f</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 @ ec89d56d
<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
View file @ aac6d1d3
<div class="container">
<div class="container container--default">
{{ 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/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 @ ec89d56d
<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 }}">
<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 {{ bodyClasses }}">{{ cta }}</div>
<div class="btn__icon {{ iconClasses }}">
......
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-800") }}
{{> 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-800") }}
{{> 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-800 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-800 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>
source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache deleted 100644 → 0
View file @ ec89d56d
<button class="btn btn--inline-icon btn--overlay {{ baseColor }}{{^ baseColor }}btn--grey-800{{/ baseColor }} {{ overlayColor }}{{^ overlayColor }}btn--overlay-red-100{{/ overlayColor }} {{ classes }}">
<div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache deleted 100644 → 0
View file @ ec89d56d
{{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
{{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache 0 → 100644
View file @ aac6d1d3
<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(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
{{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
{{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
</div>

Pirátský GitLab - Home of the CopyLeft