Commit 81252a01 authored by Guilherme Leal's avatar Guilherme Leal Committed by Claudio W
Browse files

documentation: #30 showing example and code

parent 9186b14c
......@@ -15,6 +15,13 @@ Colors in buttons are also related to communicating messages to the users about
Use the `btn` class for a default button, and combine it with other colors if a color different than `gnome-blue` is needed. The `btn` class should always be used on the buttons variants described on the next topics, except for the `links`.
<div class="container flex-grow">
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
<button class="btn orange mr-2 my-2">Orange</button>
<button class="btn yellow mr-2 my-2">Yellow</button>
<button class="btn green my-2">Green</button>
</div>
~~~html
<div class="container flex-grow">
<button class="btn mr-2 my-2">GNOME Blue</button>
......@@ -29,6 +36,13 @@ Use the `btn` class for a default button, and combine it with other colors if a
Outline buttons are used for secondary or tertiary actions. To use this variation, add `outline` class to the button and combine it with other colors.
<div class="container flex-grow">
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
<button class="btn outline-orange mr-2 my-2">Orange</button>
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
<button class="btn outline-green mr-2 my-2">Green</button>
</div>
~~~html
<div class="container flex-grow">
<button class="btn outline mr-2 my-2">GNOME Blue</button>
......@@ -43,6 +57,13 @@ Outline buttons are used for secondary or tertiary actions. To use this variatio
Usually, squared buttons give a more serious feeling to the website. It can be used by default on the website (even combined with other variants like outlined) or it can be used in specific spots, but it is not recommended to be used next to a rounded button - it may cause inconsistency. Use `squared` class to produce this variant.
<div class="container flex-grow">
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
<button class="btn outline-orange squared mr-2 my-2">Orange</button>
<button class="btn outline-yellow squared mr-2 my-2">Yellow</button>
<button class="btn outline-green squared mr-2 my-2">Green</button>
</div>
~~~html
<div class="container flex-grow">
<button class="btn squared mr-2 my-2">GNOME Blue</button>
......@@ -57,6 +78,21 @@ Usually, squared buttons give a more serious feeling to the website. It can be u
Larger buttons can be used to draw user attention, while smaller buttons can be used to fit inside smaller spaces. Add `small` or `large` classes to produce buttons in different sizes, but be careful not to create inconsistency by placing buttons with different sizes close to each other.
<div class="container flex-grow">
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
<button class="btn outline-orange small squared mr-2 my-2">Small</button>
<button class="btn outline-yellow small squared mr-2 my-2">Small</button>
<button class="btn outline-green small mr-2 my-2">Small</button>
</div>
<div class="container flex-grow">
<button class="btn large mr-2 my-2">Large</button>
<button class="btn red large mr-2 my-2">Large</button>
<button class="btn outline-orange large squared mr-2 my-2">Large</button>
<button class="btn outline-yellow large squared mr-2 my-2">Large</button>
<button class="btn outline-green large mr-2 my-2">Large</button>
</div>
~~~html
<div class="container flex-grow">
<button class="btn small mr-2 my-2">Small</button>
......@@ -79,6 +115,13 @@ Larger buttons can be used to draw user attention, while smaller buttons can be
When the user is forbidden to click some button, like when they need to fill a form before being able to click "Continue", it makes sense to show the user they can't click there. The disabled state can be added by using the `disabled` class.
<div class="container flex-grow">
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled squared mr-2 my-2">Disabled</button>
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
~~~html
<div class="container flex-grow">
<button class="btn disabled small mr-2 my-2">Disabled</button>
......@@ -93,6 +136,15 @@ When the user is forbidden to click some button, like when they need to fill a f
Buttons placed in columns instead of next to each other need to have the same width, otherwise, they'll look disharmonious. You may want to change the width to make the button look aligned with the text or form above it too. For spacing references, check the [spacing](#spacing) page on this documentation.
<div class="container flex-grow">
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
<button class="btn red mr-2 my-2 w-full">Red</button>
<button class="btn orange mr-2 my-2 w-full">Orange</button>
<button class="btn yellow mr-2 my-2 w-full">Yellow</button>
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
~~~html
<div class="container flex-grow">
<div class="flex-col w-64 mx-auto">
......@@ -108,6 +160,15 @@ Buttons placed in columns instead of next to each other need to have the same wi
link buttons behave like regular anchors but they have a special look - they are buttons with no background, borders, or shadows, but they respect buttons colors and have an underline hover effect. Use the `link` class combined with colors.
<div class="container flex-grow">
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
<button class="link red mr-2 my-2">Link</button>
<button class="link orange mr-2 my-2">Link</button>
<button class="link yellow mr-2 my-2">Link</button>
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
~~~html
<div class="container flex-grow">
<button class="link mr-2 my-2">Link</button>
......
......@@ -11,6 +11,10 @@ nav_order: 3
For single line inputs.
<div class="flex flex-col w-1/2">
<label for="first-name" >First Name</label>
<input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
</div>
~~~html
<div class="flex flex-col w-1/2">
<label for="first-name" >First Name</label>
......@@ -22,6 +26,10 @@ For single line inputs.
For multiline inputs.
<div class="flex flex-col">
<label for="message" >Biography</label>
<textarea id="message" class="mt-2"></textarea>
</div>
~~~html
<div class="flex flex-col">
<label for="message" >Biography</label>
......@@ -31,6 +39,10 @@ For multiline inputs.
## Date
<div class="flex flex-col w-1/2">
<label for="date">Birthday</label>
<input type="date" class="mt-2" id="date">
</div>
~~~html
<div class="flex flex-col w-1/2">
<label for="date">Birthday</label>
......@@ -40,6 +52,10 @@ For multiline inputs.
## Email
<div class="flex flex-col w-1/2">
<label for="email" >Email</label>
<input type="email" class="mt-2" id="email" placeholder="your@email.com">
</div>
~~~html
<div class="flex flex-col w-1/2">
<label for="email" >Email</label>
......@@ -49,6 +65,10 @@ For multiline inputs.
## Password
<div class="flex flex-col w-1/2">
<label for="password" >Password</label>
<input type="password" class="mt-2" id="password">
</div>
~~~html
<div class="flex flex-col w-1/2">
<label for="password" >Password</label>
......@@ -60,6 +80,10 @@ For multiline inputs.
When some input has invalid data or is not filled, apply the `danger` class.
<div class="flex flex-col w-1/2">
<label for="invalid">Invalid input</label>
<input type="email" class="mt-2 danger" id="invalid">
</div>
~~~html
<div class="flex flex-col w-1/2">
<label for="invalid">Invalid input</label>
......@@ -71,6 +95,14 @@ When some input has invalid data or is not filled, apply the `danger` class.
For predetermined options.
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2">
<select class="form-select cursor-pointer">
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
~~~html
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2">
......@@ -84,6 +116,20 @@ For predetermined options.
## Checkbox
<div class="flex flex-col">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox cursor-pointer" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</div>
~~~html
<div class="flex flex-col">
<div class="inline-flex items-center">
......@@ -103,6 +149,20 @@ For predetermined options.
## Radio button
<div class="flex flex-col">
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio cursor-pointer" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</div>
~~~html
<div class="flex flex-col">
<div class="inline-flex items-center">
......@@ -123,6 +183,13 @@ For predetermined options.
## Toggle/ switch
Refers to enabling or disabling options.
<div>
<div class="toggle">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
<label for="toggle" class="toggle-label"></label>
</div>
<label for="toggle">Toggle</label>
</div>
~~~html
<div>
<div class="toggle">
......
......@@ -7,6 +7,11 @@ nav_order: 2
# Typography
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
~~~html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
......
......@@ -7,6 +7,78 @@ permalink: /samples/buttons
has_children: true
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Buttons</h2>
<div class="container flex-grow">
<h3 class="py-2">Default</h3>
<button class="btn mr-2 my-2">GNOME Blue</button>
<button class="btn red mr-2 my-2">Red</button>
<button class="btn orange mr-2 my-2">Orange</button>
<button class="btn yellow mr-2 my-2">Yellow</button>
<button class="btn green my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Outline</h3>
<button class="btn outline mr-2 my-2">GNOME Blue</button>
<button class="btn outline-red mr-2 my-2">Red</button>
<button class="btn outline-orange mr-2 my-2">Orange</button>
<button class="btn outline-yellow mr-2 my-2">Yellow</button>
<button class="btn outline-green mr-2 my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Squared</h3>
<button class="btn squared mr-2 my-2">GNOME Blue</button>
<button class="btn red squared mr-2 my-2">Red</button>
<button class="btn outline-orange squared mr-2 my-2">Orange</button>
<button class="btn outline-yellow squared mr-2 my-2">Yellow</button>
<button class="btn outline-green squared mr-2 my-2">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Other sizes</h3>
<button class="btn small mr-2 my-2">Small</button>
<button class="btn red small mr-2 my-2">Small</button>
<button class="btn outline-orange small squared mr-2 my-2">Small</button>
<button class="btn outline-yellow small squared mr-2 my-2">Small</button>
<button class="btn outline-green small mr-2 my-2">Small</button>
</div>
<div class="container flex-grow">
<button class="btn large mr-2 my-2">Large</button>
<button class="btn red large mr-2 my-2">Large</button>
<button class="btn outline-orange large squared mr-2 my-2">Large</button>
<button class="btn outline-yellow large squared mr-2 my-2">Large</button>
<button class="btn outline-green large mr-2 my-2">Large</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Disabled</h3>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled small mr-2 my-2">Disabled</button>
<button class="btn disabled squared mr-2 my-2">Disabled</button>
<button class="btn disabled large squared mr-2 my-2">Disabled</button>
<button class="btn disabled large mr-2 my-2">Disabled</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Links & text</h3>
<button class="link mr-2 my-2">Link</button>
<button class="link gnome-blue mr-2 my-2">Link</button>
<button class="link red mr-2 my-2">Link</button>
<button class="link orange mr-2 my-2">Link</button>
<button class="link yellow mr-2 my-2">Link</button>
<button class="link green mr-2 my-2">Link</button>
<button class="link white mr-2 my-2">Link</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Customized width</h3>
<div class="flex-col w-64 mx-auto">
<button class="btn mr-2 my-2 w-full">GNOME Blue</button>
<button class="btn red mr-2 my-2 w-full">Red</button>
<button class="btn orange mr-2 my-2 w-full">Orange</button>
<button class="btn yellow mr-2 my-2 w-full">Yellow</button>
<button class="btn green my-2 w-full">Green</button>
</div>
</div>
</div>
</body>
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
......
This diff is collapsed.
......@@ -6,6 +6,33 @@ permalink: /samples/
has_children: true
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mx-auto">GNOME UI Samples</h2>
<ul class="flex-col w-64 mx-auto my-4">
<li>
<a href="./typography/index.html">
<button class="btn my-2 w-full">Typography</button>
</a>
</li>
<li>
<a href="./colors/index.html">
<button class="btn my-2 w-full">Colors</button>
</a>
</li>
<li>
<a href="./buttons/index.html">
<button class="btn my-2 w-full">Buttons</button>
</a>
</li>
<li>
<a href="./inputs/index.html">
<button class="btn my-2 w-full">Inputs</button>
</a>
</li>
</ul>
</div>
</body>
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
......
......@@ -7,6 +7,155 @@ permalink: /samples/inputs
has_children: true
---
<div class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Inputs</h2>
<form class="flex flex-col">
<h3>This is a form</h3>
<div class="flex items-center justify-between">
<div class="flex flex-col w-1/2 mr-4">
<label for="first-name" class="mt-6">First Name</label>
<input type="text" id="first-name" class="mt-2" placeholder="Write your first name here">
</div>
<div class="flex flex-col w-1/2 ml-4">
<label for="last-name" class="mt-6">Last Name</label>
<input type="text" class="mt-2" id="last-name" placeholder="Write your last name here">
</div>
</div>
<label for="email" class="mt-6">Email</label>
<input type="email" class="mt-2" id="email">
<label for="password" class="mt-6">Password</label>
<input type="password" class="mt-2" id="password">
<label for="date" class="mt-6">Birthday</label>
<input type="date" class="mt-2" id="date">
<label for="invalid" class="mt-6">Invalid input</label>
<input type="email" class="mt-2 danger" id="invalid">
<label for="message" class="mt-6">Biography</label>
<textarea id="message" class="mt-2"></textarea>
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2">
<select class="form-select">
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</label>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</label>
<label class="mt-6">
<div class="toggle">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
<label for="toggle" class="toggle-label"></label>
</div>
<label for="toggle">Toggle</label>
</label>
<label for="search" class="mt-8">Default search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" onfocus="addBlueToSearchIcon('search-icon')"
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-48" placeholder="Search for content">
<svg class="search-icon" id="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<label for="search" class="mt-8">Collapsed search</label>
<div id="search" class="search mr-6 mb-8">
<input type="search" id="collapsable-search" onfocus="addBlueToSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromSearchIcon('collapsable-search-icon')" class="w-48"
placeholder="Search for content">
<svg class="search-icon cursor-pointer" id="collapsable-search-icon"
onclick="toggleSearchInputDisplay('collapsable-search')" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
</form>
</div>
</div>
<script>
function toggleSearchInputDisplay(id) {
let collapsableSearch = document.getElementById(id);
console.log(collapsableSearch.style.display);
if (collapsableSearch.style.display === "block") {
hideSearchInput(id);
} else {
console.log("displaying");
collapsableSearch.style.display = "block";
collapsableSearch.focus();
addBlueToSearchIcon(id + "-icon");
}
}
function hideSearchInput(id) {
let collapsableSearch = document.getElementById(id);
removeBlueFromSearchIcon(id + "-icon");
if (!collapsableSearch.value) {
collapsableSearch.style.display = "none";
}
}
function toggleSearchIconColor(id) {
let searchIcon = document.getElementById(id);
if (searchIcon.classList.contains("text-gnome-blue-500")) {
removeBlueFromSearchIcon(id);
} else {
addBlueToSearchIcon(id);
}
}
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~html
<div class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
......
......@@ -7,6 +7,20 @@ permalink: /samples/typography
has_children: true
---
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Typography</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p class="text-2xl">Large text</p>
<p class="text-xl">Medium text</p>
<p class="text-base">Regular text</p>
<p class="text-sm">Small text</p>
</div>
</body>
~~~
~~~html
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment