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 1270 additions and 17 deletions
source/_annotations/annotations.js 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_data/data.json 100755 → 100644
View file @ aac6d1d3
......@@ -4,27 +4,27 @@
"title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
"img": {
"avatar": {
"src": "http://placeimg.com/100/100/people",
"src": "https://picsum.photos/100",
"alt": "Avatar"
},
"square": {
"src": "http://placeimg.com/300/300/nature",
"src": "https://picsum.photos/300",
"alt": "Square"
},
"rectangle": {
"src": "http://placeimg.com/400/300/tech",
"src": "https://picsum.photos/400/300",
"alt": "Rectangle"
},
"landscape-4x3": {
"src": "http://placeimg.com/400/300/tech",
"src": "https://picsum.photos/400/300",
"alt": "4x3 Image"
},
"landscape-16x9": {
"src": "http://placeimg.com/640/360/tech",
"src": "https://picsum.photos/640/360",
"alt": "16x9 Image"
},
"landscape-16x9-fullhd": {
"src": "https://loremflickr.com/1920/1080",
"src": "https://picsum.photos/1920/1080",
"alt": "16x9 Image Full HD"
}
},
......@@ -32,6 +32,9 @@
"short": "Lorizzle pimpin' dolizzle sit amet I",
"medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
},
"list": {
"item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
},
"excerpt": {
"short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
"medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
......@@ -49,10 +52,11 @@
"last": "Koolen",
"lasti": "K",
"occupation": "Software company manager and open-source software expert",
"email": "example@example.com",
"email": "someone.from.the.party@pirati.cz",
"claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
"party": "Pirátská strana",
"age": "30",
"city": "Valašské Meziříčí",
"position": "1"
},
"organization": {
......@@ -93,6 +97,11 @@
"short": "20"
},
"seconds": "31",
"form": {
"label": "Název políčka",
"placeholder": "Placeholder"
},
"calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
"greyColors": [
{"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
{"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
......@@ -113,11 +122,27 @@
{"cls": "white", "name": "White", "hex": "#ffffff"}
]
},
{
"name": "Olive",
"variants": [
{"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
]
},
{
"name": "Green",
"variants": [
{"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
{"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
{"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
]
},
{
"name": "Yellow",
"variants": [
{"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
{"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
{"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
{"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
]
},
{
......@@ -155,6 +180,18 @@
{"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
{"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
]
},
{
"name": "Red",
"variants": [
{"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
]
},
{
"name": "Pirati",
"variants": [
{"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
]
}
]
}
source/_data/listitems.json 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_meta/_00-head.mustache 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_meta/_01-foot.mustache 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
source/_patterns/.gitkeep 100755 → 100644
View file @ aac6d1d3
File mode changed from 100755 to 100644
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-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
......@@ -7,10 +7,27 @@
{{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }}
{{> atoms-basic-button(classes: "btn--green-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 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") }}
......@@ -20,9 +37,26 @@
{{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }}
{{> atoms-icon-button(classes: "btn--green-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/04-button-with-hover-effect.mustache
View file @ aac6d1d3
......@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white 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-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") }}
......@@ -20,7 +21,8 @@
{{> atoms-icon-button(classes: "btn--white 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-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") }}
......
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
View file @ aac6d1d3
......@@ -7,7 +7,8 @@
{{> 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-200", classes: "btn--hoveractive btn--to-green-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") }}
......@@ -21,7 +22,8 @@
{{> 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-200", classes: "btn--hoveractive btn--to-green-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") }}
......
source/_patterns/00-atoms/03-buttons/loading-button.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(classes: "text-sm btn--loading" )}}
{{> atoms-basic-button(classes: "text-base btn--loading" )}}
{{> atoms-basic-button(classes: "text-lg btn--loading" )}}
</div>
</div>
source/_patterns/00-atoms/04-animations/ping.mustache 0 → 100644
View file @ aac6d1d3
<span class="inline-flex h-4 w-4 mr-4 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
<span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
</span>
source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache 0 → 100644
View file @ aac6d1d3
<ul class="unordered-list unordered-list--dense">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
source/_patterns/00-atoms/lists/linked-unordered-list.mustache → source/_patterns/00-atoms/04-lists/linked-unordered-list.mustache
View file @ aac6d1d3
<ul class="unordered-list unordered-list--linked {{ classes }}">
<li>
<a href="#" class="font-bold">{{ cta }}</a>
<a href="#" class="font-bold content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#">{{ cta }}</a>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#">{{ cta }}</a>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#">{{ cta }}</a>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
</ul>
source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.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">
<ul class="unordered-list leading-tight">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-snug">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-normal">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-relaxed">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
</div>

Pirátský GitLab - Home of the CopyLeft