1312 lines
60 KiB
Text
1312 lines
60 KiB
Text
<% title "Crayons" %>
|
||
<style>
|
||
.container {
|
||
padding: 48px;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
box-sizing: border-box;
|
||
}
|
||
.container *,
|
||
.container *:before,
|
||
.container *:after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.container > *+* {
|
||
margin-top: 32px !important;
|
||
}
|
||
|
||
.container > pre {
|
||
padding: 24px;
|
||
width: 100%;
|
||
}
|
||
|
||
.container > .body {
|
||
width: 100%;
|
||
font-size: 16px;
|
||
line-height: 150%;
|
||
border-bottom: 1px solid lightgrey;
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
.container > .body h2 {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.container > .body p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.container > .body ul,
|
||
.container > .body ol {
|
||
margin: 0 0 0 24px;
|
||
padding: 0;
|
||
}
|
||
|
||
.container > .body > *+* {
|
||
margin-top: 16px !important;
|
||
}
|
||
|
||
.buttons-table td,
|
||
.buttons-table th {
|
||
padding: 10px;
|
||
}
|
||
</style>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Tooltips</h2>
|
||
<p>Tooltips should be short, simple and without any styling - just pure text. Its purpose is to provide some additional context or explanation.</p>
|
||
<p>Keep in mind they should be only ADDITIONAL information since tooltips are accessible on :hover which means you may not really see the tooltip content while on mobile.</p>
|
||
<p>Hover over the label below to see a tooltip.</p>
|
||
<p>All you have to do to set up this kind of a tooltip is add <code>crayons-tooltip</code> class name to an element as well as <code>data-tooltip</code> attribute which will contain the tooltip content.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p>You can <strong class="crayons-tooltip" data-tooltip="Tooltip message">hover here</strong> to see the tooltip</p>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<p>You can <strong class="crayons-tooltip" data-tooltip="Tooltip message">hover here</strong> to ...</p>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Main Typography</h2>
|
||
<p>Default font is set to 16px (fs-base). It should be standard in UI. Smaller and bigger font sizes should be used carefully with respect to good visual rythm between elements.</p>
|
||
<p>XS size should be used as little as possible in edge cases. Even though it’s readable we could consider it not meeting <%= community_name %>’s standards. So keep it for like “asterisk copy” etc.</p>
|
||
<p>By default you should be using Regular font weight.</p>
|
||
<p>Medium should be used to emphasize something but not make it as loud as Bold.</p>
|
||
<p>Heavy should be used only for bigger title.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="fs-xs">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-s">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-base">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-l">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-xl">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-2xl">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-3xl">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-4xl">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-5xl">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="fs-xs fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-s fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-base fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-l fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-2xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-3xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-4xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-5xl fw-medium">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="fs-xs fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-s fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-base fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-2xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-3xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-4xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-5xl fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="fs-xs fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-s fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-base fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-l fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-2xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-3xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-4xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
<p class="fs-5xl fw-heavy">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px;">
|
||
<span class="ff-monospace">Line height: 1.5 – .lh-base (default)</span>
|
||
<span class="ff-monospace">Line height: 1.25 – .lh-tight</span>
|
||
|
||
<h3 class="fs-2xl fw-bold">This is a bit longer text title to present line-height difference.</h3>
|
||
<h3 class="fs-2xl fw-bold lh-tight">This is a bit longer text title to present line-height difference.</h3>
|
||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.</p>
|
||
<p class="lh-tight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.</p>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<!-- font sizes -->
|
||
<p class="fs-xs">...</p> <!-- 12px -->
|
||
<p class="fs-s">...</p> <!-- 14px -->
|
||
<p class="fs-base">...</p> <!-- default: 16px -->
|
||
<p class="fs-l">...</p> <!-- 18px -->
|
||
<p class="fs-xl">...</p> <!-- 20px -->
|
||
<p class="fs-2xl">...</p> <!-- 24px -->
|
||
<p class="fs-3xl">...</p> <!-- 30px -->
|
||
<p class="fs-4xl">...</p> <!-- 36px -->
|
||
<p class="fs-5xl">...</p> <!-- 48px -->
|
||
|
||
<!-- font weights -->
|
||
<p class="... fw-normal">...</p> <!-- default: regular -->
|
||
<p class="... fw-medium">...</p>
|
||
<p class="... fw-bold">...</p>
|
||
<p class="... fw-heavy">...</p>
|
||
|
||
<!-- line heights -->
|
||
<p class="... lh-base"></p> <!-- default: 1.5 -->
|
||
<p class="... lh-tight"></p> <!-- tight: 1.25 -->
|
||
'.rstrip %></pre>
|
||
|
||
<div class="body">
|
||
<h2>Accent typography</h2>
|
||
<p>Its main purpose is to add a bit of flavor to <%= community_name %> brand but it should never be the main font.</p>
|
||
<p>Please, do not overuse Accent typography.</p>
|
||
<p>We strongly encourage to limit number of sizes and weights to what presetned below.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="ff-monospace fs-xs">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-s">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-base">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-l">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="ff-monospace fs-xs fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-s fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-base fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
<p class="ff-monospace fs-l fw-bold">Lorem ipsum dolor sit amet.</p>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<!-- font sizes -->
|
||
<p class="ff-monospace fs-xs">...</p> <!-- 12px -->
|
||
<p class="ff-monospace fs-s">...</p> <!-- 14px -->
|
||
<p class="ff-monospace fs-base">...</p> <!-- default: 16px -->
|
||
<p class="ff-monospace fs-l">...</p> <!-- 18px -->
|
||
|
||
<!-- font weights -->
|
||
<p class="... fw-normal">...</p> <!-- default: regular -->
|
||
<p class="... fw-bold">...</p>
|
||
|
||
<!-- line heights -->
|
||
<p class="... lh-base"></p> <!-- default: 1.5 -->
|
||
<p class="... lh-tight"></p> <!-- tight: 1.25 -->
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Cards</h2>
|
||
<p>Cards are basically content containers. There are two types of cards:</p>
|
||
<ul>
|
||
<li>Primary (default) - main content, like whole article or feed cards.</li>
|
||
<li>Secondary - secondary content, used for example for sidebar widgets.</li>
|
||
</ul>
|
||
<p>The visual difference between the two is basically in color: secodanry cards are a <strong>little</strong> less visible.</p>
|
||
</div>
|
||
|
||
<div class="p-6 bg-base-10">
|
||
<div class="crayons-card mb-4">
|
||
<div class="crayons-card__body">
|
||
Hello, I am a primary card.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<div class="crayons-card__body">
|
||
...And I am a secondary card.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-card">
|
||
<div class="crayons-card__body">
|
||
Hello, I am a primary card.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<div class="crayons-card__body">
|
||
...And I am a secondary card.
|
||
</div>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div class="body">
|
||
<p>If you need headers, cards do have them as well.</p>
|
||
</div>
|
||
|
||
<div class="p-6 bg-base-10">
|
||
<div class="crayons-card crayons-card--secondary mb-4">
|
||
<div class="crayons-card__header">
|
||
<h3 class="crayons-card__headline">Card title.</h3>
|
||
</div>
|
||
<div class="crayons-card__body">
|
||
I'm a card content.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<div class="crayons-card__header">
|
||
<h3 class="crayons-card__headline">Card title.</h3>
|
||
<div class="crayons-card__actions">
|
||
<a href="#" class="crayons-link--branded">Action</a>
|
||
</div>
|
||
</div>
|
||
<div class="crayons-card__body">
|
||
I'm a card content.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<div class="crayons-card__header">
|
||
<h3 class="crayons-card__headline">Card title.</h3>
|
||
</div>
|
||
<div class="crayons-card__body">...</div>
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<div class="crayons-card__header">
|
||
<h3 class="crayons-card__headline">Card title.</h3>
|
||
<div class="crayons-card__actions">
|
||
<a href="#" class="crayons-link--branded">Action</a>
|
||
</div>
|
||
</div>
|
||
<div class="crayons-card__body">...</div>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Form elements</h2>
|
||
</div>
|
||
<div>
|
||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..."><br><br>
|
||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled><br><br>
|
||
<input type="text" class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textfield...">
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<input type="text" class="crayons-textfield" placeholder="This is placeholder...">
|
||
<input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
|
||
<input type="text" class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textfield...">
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<textarea class="crayons-textfield" placeholder="This is placeholder..."></textarea><br><br>
|
||
<textarea class="crayons-textfield" placeholder="This is placeholder..." disabled>Disabled textarea</textarea><br><br>
|
||
<textarea class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textarea..."></textarea>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<textarea class="crayons-textfield" placeholder="This is placeholder..."></textarea>
|
||
<textarea class="crayons-textfield" placeholder="This is placeholder..." disabled>Disabled textarea</textarea>
|
||
<textarea class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textarea..."></textarea>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<select class="crayons-select">
|
||
<option>Option 1</option>
|
||
<option>Option 2</option>
|
||
<option>Option 3</option>
|
||
<option>Option 4</option>
|
||
<option>Option 5</option>
|
||
</select><br><br>
|
||
|
||
<select class="crayons-select" disabled>
|
||
<option>Option 1 disabled</option>
|
||
<option>Option 2</option>
|
||
<option>Option 3</option>
|
||
</select>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<select class="crayons-select">
|
||
<option>Option 1</option>
|
||
...
|
||
</select>
|
||
|
||
<select class="crayons-select" disabled>
|
||
<option>Option 1 disbled</option>
|
||
...
|
||
</select>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<input type="checkbox" class="crayons-checkbox">
|
||
<input type="checkbox" class="crayons-checkbox" checked>
|
||
<input type="checkbox" class="crayons-checkbox" disabled>
|
||
<input type="checkbox" class="crayons-checkbox" checked disabled>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<input type="checkbox" class="crayons-checkbox">
|
||
<input type="checkbox" class="crayons-checkbox" checked>
|
||
<input type="checkbox" class="crayons-checkbox" disabled>
|
||
<input type="checkbox" class="crayons-checkbox" checked disabled>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<input type="radio" name="n1" class="crayons-radio">
|
||
<input type="radio" name="n1" class="crayons-radio" checked>
|
||
<input type="radio" name="n2" class="crayons-radio" disabled>
|
||
<input type="radio" name="n2" class="crayons-radio" checked disabled>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<input type="radio" name="n1" class="crayons-radio">
|
||
<input type="radio" name="n1" class="crayons-radio" checked>
|
||
<input type="radio" name="n2" class="crayons-radio" disabled>
|
||
<input type="radio" name="n2" class="crayons-radio" checked disabled>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Field Component</h2>
|
||
<p>Because of accessibility most (ideally all) fields should have label above.</p>
|
||
<p>Fields can also have optional description - between Label and Field itself.</p>
|
||
<p>Fields can also have additional optional description, for example characters count.</p>
|
||
</div>
|
||
|
||
<div class="crayons-field">
|
||
<label for="t1" class="crayons-field__label">
|
||
Textfield Label <span class="crayons-field__required crayons-tooltip" data-tooltip="* - required">*</span>
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
<input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">
|
||
<p class="crayons-field__description">Another description just in case...</p>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-field">
|
||
<label for="t1" class="crayons-field__label">
|
||
Textfield Label
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
<input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">
|
||
<p class="crayons-field__description">Another description just in case...</p>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div class="body">
|
||
<h2>Fields with Checkboxes & Radios</h2>
|
||
<p>Labels for checkboxes and radios should be placed next to the form element.</p>
|
||
<p>Using additional description is optional.</p>
|
||
<p>It is possible to group checkboxes or radios into logical sections. Section may require having it’s own label (title).</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c2" class="crayons-checkbox">
|
||
<label for="c2" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c2" class="crayons-checkbox">
|
||
<label for="c2" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is...</p>
|
||
</label>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<div class="crayons-fields">
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||
<label for="c3" class="crayons-field__label">
|
||
Avocado
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c4" class="crayons-checkbox">
|
||
<label for="c4" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c5" class="crayons-checkbox">
|
||
<label for="c5" class="crayons-field__label">
|
||
Peanut
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-fields">
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||
<label for="c3" class="crayons-field__label">
|
||
Avocado
|
||
<p class="crayons-field__description">This is...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
...
|
||
</div>
|
||
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c6" class="crayons-checkbox">
|
||
<label for="c6" class="crayons-field__label">Avocado</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c7" class="crayons-checkbox">
|
||
<label for="c7" class="crayons-field__label">Raspberry</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c8" class="crayons-checkbox">
|
||
<label for="c8" class="crayons-field__label">Peanut</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
<input type="checkbox" id="c3" class="crayons-checkbox">
|
||
<label for="c3" class="crayons-field__label">Avocado</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--checkbox">
|
||
...
|
||
</div>
|
||
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name1" id="r2" class="crayons-radio">
|
||
<label for="r2" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name1" id="r2" class="crayons-radio">
|
||
<label for="r2" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is...</p>
|
||
</label>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<div class="crayons-fields">
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name2" id="r3" class="crayons-radio">
|
||
<label for="r3" class="crayons-field__label">
|
||
Avocado
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name2" id="r4" class="crayons-radio">
|
||
<label for="r4" class="crayons-field__label">
|
||
Raspberry
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name2" id="r5" class="crayons-radio">
|
||
<label for="r5" class="crayons-field__label">
|
||
Peanut
|
||
<p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-fields">
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name2" id="r3" class="crayons-radio">
|
||
<label for="r3" class="crayons-field__label">
|
||
Avocado
|
||
<p class="crayons-field__description">This is...</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
...
|
||
</div>
|
||
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name3" id="r6" class="crayons-radio">
|
||
<label for="r6" class="crayons-field__label">Avocado</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name3" id="r7" class="crayons-radio">
|
||
<label for="r7" class="crayons-field__label">Raspberry</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name3" id="r8" class="crayons-radio">
|
||
<label for="r8" class="crayons-field__label">Peanut</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field crayons-field--radio">
|
||
<input type="radio" name="name3" id="r6" class="crayons-radio">
|
||
<label for="r6" class="crayons-field__label">Avocado</label>
|
||
</div>
|
||
|
||
<div class="crayons-field crayons-field--radio">
|
||
...
|
||
</div>
|
||
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Buttons</h2>
|
||
<p>Use Danger style only for destructive actions like removing something. Do not use it for, for example “unfollow” action.</p>
|
||
<p>If you have to use several buttons together, keep in mind you should always have ONE Primary button. Rest of them should be Secondary and/or Outlined and/or Text buttons.</p>
|
||
<p>It is ok to use ONLY Secondary or outlined button without being accompanied by Primary one.</p>
|
||
<p>For Stacking buttons (vertically or horizontally) please use 8px spacing unit for default size buttons (no matter if stacking horizontally or vertically).</p>
|
||
</div>
|
||
<h3>Styles: </h3>
|
||
<div class="buttons-table overflow-x-auto">
|
||
<table class="w-max">
|
||
<thead>
|
||
<tr>
|
||
<th>Style</th>
|
||
<th>Default</th>
|
||
<th>--icon-left</th>
|
||
<th>--icon-right</th>
|
||
<th>--icon</th>
|
||
<th>--icon-rounded</th>
|
||
<th>[disabled]</th>
|
||
<th>--inverted</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn</td>
|
||
<td><button class="crayons-btn">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--secondary</td>
|
||
<td><button class="crayons-btn crayons-btn--secondary">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--secondary crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--secondary" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--secondary crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--outlined</td>
|
||
<td><button class="crayons-btn crayons-btn--outlined">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--outlined crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--outlined" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--outlined crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost-dimmed</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-dimmed" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost-brand</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-brand" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-brand crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost-success</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-success" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost-warning</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-warning" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-warning crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--ghost-danger</td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--ghost-danger" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-danger crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">.crayons-btn--danger</td>
|
||
<td><button class="crayons-btn crayons-btn--danger">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--danger crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--danger" disabled>Button label</button></td>
|
||
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--danger crayons-btn--inverted">Button label</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<a href="#" class="crayons-btn">Button label</a>
|
||
<a href="#" class="... crayons-btn--secondary">Secondary Button label</a>
|
||
<a href="#" class="... crayons-btn--outlined">Outlined Button label</a>
|
||
<a href="#" class="... crayons-btn--ghost">Ghost Button label</a>
|
||
<a href="#" class="... crayons-btn--ghost-brand">Ghost Brand Button label</a>
|
||
<a href="#" class="... crayons-btn--ghost-success">Ghost Success Button label</a>
|
||
<a href="#" class="... crayons-btn--ghost-warning">Ghost Warning Button label</a>
|
||
<a href="#" class="... crayons-btn--ghost-danger">Ghost Danger Button label</a>
|
||
<a href="#" class="... crayons-btn--danger">Danger Button label</a>
|
||
<a href="#" class="... crayons-btn--icon"><svg class="crayons-icon" ...>...</svg></a>
|
||
<a href="#" class="... crayons-btn--icon-rounded"><svg class="crayons-icon" ...>...</svg></a>
|
||
<a href="#" class="... crayons-btn--icon-left"><svg class="crayons-icon" ...>...</svg>Button label</a>
|
||
<a href="#" class="... crayons-btn--icon-right">Button label<svg class="crayons-icon" ...>...</svg></a>
|
||
<a href="#" class="crayons-btn[--...] crayons-btn--inverted">Inverted style button</a>
|
||
'.rstrip %></pre>
|
||
|
||
<div class="body">
|
||
<h2>Sizes</h2>
|
||
<p>Buttons come with bunch of sizes.</p>
|
||
</div>
|
||
<div class="buttons-table overflow-x-auto">
|
||
<table class="w-max">
|
||
<thead>
|
||
<tr>
|
||
<th>Style</th>
|
||
<th>--s</th>
|
||
<th>Default</th>
|
||
<th>--l</th>
|
||
<th>--xl</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="fs-s">Normal</td>
|
||
<td><button class="crayons-btn crayons-btn--s">Button label</button></td>
|
||
<td><button class="crayons-btn">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--l">Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--xl">Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">Icon left</td>
|
||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--s"><%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--l"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-left crayons-btn--xl"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">Icon right</td>
|
||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--s">Button label<%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--l">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon-right crayons-btn--xl">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="fs-s">Only icon</td>
|
||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--s"><%= inline_svg_tag("small-bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--l"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
<td><button class="crayons-btn crayons-btn--icon crayons-btn--xl"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<a href="#" class="... crayons-btn--s">Small</a>
|
||
<a href="#" class="crayons-btn">Default size</a>
|
||
<a href="#" class="... crayons-btn--l">Large</a>
|
||
<a href="#" class="... crayons-btn--xl">Extra Large</a>
|
||
'.rstrip %></pre>
|
||
|
||
<div class="body">
|
||
<h2>Buttons Group</h2>
|
||
<p>It is possible to combine two or more buttons into a visual group.</p>
|
||
<p>Use your best judgment for when it should be used. If you think every time you have more than one button you should create this kind of group, then no it's wrong.</p>
|
||
<p>Think of it as <em>an extension</em> to the button itself: this component lets you <strong>visually</strong> create an <em>actionable area</em> for cases when you need something more than just a classic button.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="crayons-btn-group mb-4">
|
||
<a href="#" class="crayons-btn">Action 1</a>
|
||
<a href="#" class="crayons-btn">Action 2</a>
|
||
<a href="#" class="crayons-btn crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||
</div>
|
||
|
||
<div class="crayons-btn-group mb-4">
|
||
<a href="#" class="crayons-btn crayons-btn--secondary">Action 1</a>
|
||
<a href="#" class="crayons-btn crayons-btn--secondary">Action 2</a>
|
||
<a href="#" class="crayons-btn crayons-btn--secondary crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||
</div>
|
||
|
||
<div class="crayons-btn-group mb-4">
|
||
<a href="#" class="crayons-btn crayons-btn--outlined">Action 1</a>
|
||
<a href="#" class="crayons-btn crayons-btn--outlined">Action 2</a>
|
||
<a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--icon"><%= inline_svg_tag("cog.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Preferences") %></a>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-btn-group">
|
||
<a href="#" class="crayons-btn">Action 1</a>
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Dropdowns</h2>
|
||
<p>Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...</p>
|
||
<p>Dropdowns should not be bigger than 320px (unless it's smallest breakpoint, then dropdowns become full width).</p>
|
||
<p>Dropdown default padding is set to 16px.</p>
|
||
<p>By default dropdowns are hidden with <code>display: none;</code> so keep that in mind if you ever use dropdowns and can't see them :D.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="crayons-dropdown inline-block static">
|
||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-dropdown">
|
||
Hey, ...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Modals</h2>
|
||
<p>Modals should be positioned centered in relation to entire viewport. So relation to its trigger doesn’t really matter.<p>
|
||
<p>Use your best judgements when choosing the right size.</p>
|
||
</div>
|
||
|
||
<div style="height: 500px;" class="relative">
|
||
<div class="crayons-modal crayons-modal--s absolute">
|
||
<div class="crayons-modal__box">
|
||
<header class="crayons-modal__box__header">
|
||
<h2>Modal title</h2>
|
||
<button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
<div class="crayons-modal__box__body">
|
||
Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||
</div>
|
||
</div>
|
||
<div class="crayons-modal__overlay"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-modal crayons-modal--s absolute">
|
||
<div class="crayons-modal__box">
|
||
<header class="crayons-modal__box__header">
|
||
<h2>Modal title</h2>
|
||
<button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
<div class="crayons-modal__box__body">
|
||
Hey, Im a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||
</div>
|
||
</div>
|
||
<div class="crayons-modal__overlay"></div>
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Notices</h2>
|
||
<p>Use Notices to focus user on specific piece of content, for example (but not limited to):</p>
|
||
<ul>
|
||
<li>alerts after form submission, </li>
|
||
<li>box with tip like “Did you know..?”</li>
|
||
<li>etc...</li>
|
||
</ul>
|
||
<p>This should be simple message. And this is exactly what this Figma component let you do.</p>
|
||
<p>By default, this component has 16px padding.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="crayons-notice">This is Default Notice content.</div><br>
|
||
<div class="crayons-notice crayons-notice--danger">This is Danger Notice content.</div><br>
|
||
<div class="crayons-notice crayons-notice--warning">This is Warning Notice content.</div><br>
|
||
<div class="crayons-notice crayons-notice--success">This is Success Notice content.</div><br>
|
||
<div class="crayons-notice crayons-notice--info">This is Info Notice content.</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<!-- Default -->
|
||
<div class="crayons-notice">This...</div>
|
||
|
||
<!-- Styles: danger, warning, success, info -->
|
||
<div class="... crayons-notice--danger">This...</div>
|
||
<div class="... crayons-notice--warning">This...</div>
|
||
<div class="... crayons-notice--success">This...</div>
|
||
<div class="... crayons-notice--info">This...</div>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Indicators</h2>
|
||
<p>Indicators are meant to be used to inform user about, for example, unread notifications. They supposed to steal user's attention and make him notice or click specific element.</p>
|
||
<p>We should keep in mind to never show too many indicators at the same time. Use your best judgment.</p>
|
||
<p>There're two types of indicators:</p>
|
||
<ul>
|
||
<li>Rectangle with label (text or number)</li>
|
||
<li>Bullet - just a circle without any text on it.</li>
|
||
</ul>
|
||
<p>And there're 3 styles to pick from:</p>
|
||
<ul>
|
||
<li>Default (dimmed grey) - nothing really crucial, basic information about something.</li>
|
||
<li>Accent - something we want user to be aware of but it's also not crucial information</li>
|
||
<li>Critical (red) - something super important, don't overuse it!!</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="crayons-indicator">Label</span>
|
||
<span class="crayons-indicator crayons-indicator--outlined">Outlined</span>
|
||
<span class="crayons-indicator">1</span>
|
||
<span class="crayons-indicator crayons-indicator--bullet"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<span class="crayons-indicator crayons-indicator--accent">Label</span>
|
||
<span class="crayons-indicator crayons-indicator--accent crayons-indicator--outlined">Outlined</span>
|
||
<span class="crayons-indicator crayons-indicator--accent">1</span>
|
||
<span class="crayons-indicator crayons-indicator--accent crayons-indicator--bullet"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<span class="crayons-indicator crayons-indicator--critical">Label</span>
|
||
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--outlined">Outlined</span>
|
||
<span class="crayons-indicator crayons-indicator--critical">1</span>
|
||
<span class="crayons-indicator crayons-indicator--critical crayons-indicator--bullet"></span>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<span class="crayons-indicator">Label</span>
|
||
<span class="crayons-indicator">1</span>
|
||
<span class="crayons-indicator crayons-indicator--bullet"></span>
|
||
|
||
<!-- styles: accent, critical -->
|
||
<span class="... crayons-indicator--accent">...</span>
|
||
<span class="... crayons-indicator--critical">...</span>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Avatars & Logos</h2>
|
||
<p>An image representing a user is called an avatar.</p>
|
||
<p>An image representing a company or organization is called a logo.</p>
|
||
<p>To make a distinction between these two different entities we should keep them visually different. For Avatars, we gonna use circle shape. And for Logos we gonna use square shape. This will help recognize what is what in a heartbeat.</p>
|
||
<p>Each of these will be available in 5 different sizes (use your best judgment in picking right size):</p>
|
||
<ul>
|
||
<li>Default: 24px</li>
|
||
<li>L(arge): 32px</li>
|
||
<li>XL(arge): 48px</li>
|
||
<li>2XL(arge): 64px</li>
|
||
<li>3XL(arge): 128px</li>
|
||
</ul>
|
||
<p>Remember to use descriptive alt="" values!</p>
|
||
</div>
|
||
<div>
|
||
<span class="crayons-avatar"><img src="<%= SiteConfig.mascot_image_url %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||
<span class="crayons-avatar crayons-avatar--l"><img src="<%= SiteConfig.mascot_image_url %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||
<span class="crayons-avatar crayons-avatar--xl"><img src="<%= SiteConfig.mascot_image_url %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||
<span class="crayons-avatar crayons-avatar--2xl"><img src="<%= SiteConfig.mascot_image_url %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||
<span class="crayons-avatar crayons-avatar--3xl"><img src="<%= SiteConfig.mascot_image_url %>" class="crayons-avatar__image" alt="Ben" /></span>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<span class="crayons-avatar"><img src="..." class="crayons-avatar__image" alt="..." /></span>
|
||
|
||
<!-- sizes: l, xl, 2xl, 3xl -->
|
||
<span class="... crayons-avatar--l">...</span>
|
||
<span class="... crayons-avatar--xl">...</span>
|
||
<span class="... crayons-avatar--2xl">...</span>
|
||
<span class="... crayons-avatar--3xl">...</span>
|
||
'.rstrip %></pre>
|
||
|
||
<div>
|
||
<span class="crayons-logo"><img src="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||
<span class="crayons-logo crayons-logo--l"><img src="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||
<span class="crayons-logo crayons-logo--xl"><img src="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||
<span class="crayons-logo crayons-logo--2xl"><img src="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||
<span class="crayons-logo crayons-logo--3xl"><img src="<%= optimized_image_url(SiteConfig.logo_png, width: 192, fetch_format: "png") %>" class="crayons-logo__image" alt="Acme Inc." /></span>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<span class="crayons-logo"><img src="..." class="crayons-logo__image" alt="..." /></span>
|
||
|
||
<!-- sizes: l, xl, 2xl, 3xl -->
|
||
<span class="... crayons-logo--l">...</span>
|
||
<span class="... crayons-logo--xl">...</span>
|
||
<span class="... crayons-logo--2xl">...</span>
|
||
<span class="... crayons-logo--3xl">...</span>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Navigation: Link</h2>
|
||
<p>Crayons comes with bunch of navigation compontents - each being a variation of <code>.crayons-link</code> which itself is a simple text link.</p>
|
||
<p>By defualt <code>.crayons-link</code> has similar color to contnet. But we have a variation to make it stand out if needed.</p>
|
||
|
||
</div>
|
||
|
||
<div class="p-6">
|
||
<a href="#" class="crayons-link">Hello, I am default link.</a><br><br>
|
||
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<a href="#" class="crayons-link">Hello, I am default link.</a>
|
||
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Navigation: Link: Block</h2>
|
||
<p>This component is extension for classic <code>.crayons-link</code> and it comes with more visual hover and current states.</p>
|
||
<p>It can be used for example for nav, where links are rather short and stacked one under another. Think of main navigation or contextual navigation in dropdowns.</p>
|
||
<p>It's responsive: for resolutions smaller than <code>$breakpoint-s</code> it has extra padding to make it easier to tap.</p>
|
||
<p>It can contain extras, like icon or indicator. Or actually anything else - everything will be in the same line since this component has <code>display: flex</code> applied by default.</p>
|
||
<p>These links cna also be indented for scenarios like below (see last link "More...").</p>
|
||
</div>
|
||
|
||
<div class="p-6 bg-base-10">
|
||
<a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
|
||
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📻</span>Podcasts</a>
|
||
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">🏷</span>Tags</a>
|
||
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
|
||
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">👍</span>Code of Conduct</a>
|
||
<a href="#" class="crayons-link crayons-link--block crayons-link--block--indented">More...</a>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
|
||
<a href="#" class="... crayons-link--block">...</a>
|
||
<a href="#" class="... crayons-link--block">... <span class="crayons-indicator">3</span></a>
|
||
<a href="#" class="... crayons-link--block crayons-link--block--indented">More...</a>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Navigation: Link: Contentful</h2>
|
||
<p>This component is extension for classic <code>.crayons-link</code> and is meant to be used where we have to display more contnet inside.</p>
|
||
<p><code>.crayons-link--contentful</code> can be used in sidebar widgets where we list posts or listings. It can have secondary contnet.</p>
|
||
<p>Contenful Links will be automatically divided by a line.</p>
|
||
</div>
|
||
|
||
<div class="p-6 bg-base-0">
|
||
<a href="#" class="crayons-link crayons-link--contentful">
|
||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
|
||
<span class="crayons-link__secondary">
|
||
<span class="crayons-indicator crayons-indicator--accent">NEW</span>
|
||
Category name
|
||
</span>
|
||
</a>
|
||
|
||
<a href="#" class="crayons-link crayons-link--contentful">
|
||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
|
||
<span class="crayons-link__secondary">
|
||
Category name
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<a href="#" class="crayons-link crayons-link--contentful">
|
||
<div>Lorem ...</div>
|
||
<span class="crayons-link__secondary">Category ...</span>
|
||
</a>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Tabs</h2>
|
||
<p>...</p>
|
||
</div>
|
||
|
||
<div>
|
||
<nav class="crayons-tabs mb-9">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--pills mb-9">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--muted mb-9">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--pills crayons-tabs--muted mb-9">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--scrollable mb-9">
|
||
<a href="#" class="crayons-tabs__item">Feed</a>
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--stacked crayons-tabs--pills mb-9">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--wrapped crayons-tabs--pills mb-9">
|
||
<a href="#" class="crayons-tabs__item">Feed</a>
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
<a href="#" class="crayons-tabs__item">Latest</a>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<nav class="crayons-tabs">
|
||
<a href="#" class="crayons-tabs__item">Week</a>
|
||
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
|
||
<a href="#" class="crayons-tabs__item">Year</a>
|
||
<a href="#" class="crayons-tabs__item">Infinity</a>
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--pills">
|
||
...
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--muted">
|
||
...
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--pills crayons-tabs--pills">
|
||
...
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--scrollable">
|
||
...
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--stacked">
|
||
...
|
||
</nav>
|
||
|
||
<nav class="crayons-tabs crayons-tabs--wrapped">
|
||
...
|
||
</nav>
|
||
'.rstrip %></pre>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="body">
|
||
<h2>Snackbars</h2>
|
||
<p>Snackbars inform users of a process that an app has performed. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.</p>
|
||
<p>A Snackbar can contain a single action. Because they disappear automatically, the action shouldn’t be “Dismiss” or “Cancel.”</p>
|
||
<p>A Snackbar should disappear after at least 5 secs. Countdown will be paused when user mouse over the snackbar.</p>
|
||
<p>Snackbars can be stacked on top of each other if there's more of them. New ones show up at the bottom of snackbar. We can display maximum 3 snackbars at a time.</p>
|
||
<p>Keep in mind that Snackbar default styling has <code>display: none;</code> applied. To show it you have to overwrite it by applying <code>flex</code> (and not <code>block</code>!) utility class.</p>
|
||
</div>
|
||
|
||
<div class="relative p-10 bg-base-10">
|
||
<div class="crayons-snackbar absolute">
|
||
<div class="crayons-snackbar__item flex">
|
||
<div class="crayons-snackbar__body">
|
||
<p>You have just downvoted this article.</p>
|
||
</div>
|
||
<div class="crayons-snackbar__actions">
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="crayons-snackbar__item flex">
|
||
<div class="crayons-snackbar__body">
|
||
<p>And now upvoted...</p>
|
||
</div>
|
||
<div class="crayons-snackbar__actions">
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="crayons-snackbar__item flex">
|
||
<div class="crayons-snackbar__body">
|
||
<p>And downvoted again...</p>
|
||
</div>
|
||
<div class="crayons-snackbar__actions">
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Undo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative p-10 bg-base-10">
|
||
<div class="crayons-snackbar absolute">
|
||
<div class="crayons-snackbar__item flex">
|
||
<div class="crayons-snackbar__body">
|
||
<p>You have just downvoted this article.</p>
|
||
</div>
|
||
<div class="crayons-snackbar__actions">
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 1</button>
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success crayons-btn--inverted">Action 2</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><%= '
|
||
<div class="crayons-snackbar">
|
||
<div class="crayons-snackbar__item">
|
||
<div class="crayons-snackbar__body">
|
||
<p>You have just downvoted this article.</p>
|
||
</div>
|
||
<div class="crayons-snackbar__actions">
|
||
<button type="button" class="crayons-btn crayons-btn--ghost-success">Undo</button>
|
||
</div>
|
||
</div>
|
||
<div class="crayons-snackbar__item">
|
||
...
|
||
</div>
|
||
...
|
||
</div>
|
||
'.rstrip %></pre>
|
||
</div>
|