Install
css in <head> tag
<link rel="stylesheet" href="https://developer.junkerapp.it/junker_webview_components/junker-components.css">
Colors
Color palette CSS variables. var(--variable);
Main Colors
--primary
.bg-primary
.fg-primary
--secondary
.bg-secondary
.fg-secondary
--gray
.bg-gray
.fg-gray
--white
.bg-white
.fg-white
--black
.bg-black
.fg-black
All Colors
--primary-50
--primary-100
--primary-200
--primary-300
--primary-400
--primary-500
--primary-600
--primary-700
--primary-800
--primary-900
--secondary-50
--secondary-100
--secondary-200
--secondary-300
--secondary-400
--secondary-500
--secondary-600
--secondary-700
--secondary-800
--secondary-900
--danger-100
--danger-200
--danger-300
--danger-400
--danger-500
--danger-600
--danger-700
--danger-800
--danger-900
--success-100
--success-200
--success-300
--success-400
--success-500
--success-600
--success-700
--success-800
--success-900
--gray-20
--gray-40
--gray-60
--gray-80
--gray-100
--gray-200
--gray-300
--gray-400
--gray-500
--gray-600
--gray-700
--gray-800
--gray-900
--black-alpha-10
--black-alpha-20
--black-alpha-300
--black-alpha-400
--black-alpha-500
--black-alpha-600
--black-alpha-700
--black-alpha-80
--black-alpha-90
--white-alpha-10
--white-alpha-20
--white-alpha-300
--white-alpha-400
--white-alpha-500
--white-alpha-600
--white-alpha-700
--white-alpha-80
--white-alpha-90
Typography
Typography classes
h1 or .h1
H1 / Bricolage Grotesque / Medium / 32 px
h2 or .h2
H2 / Bricolage Grotesque / Medium / 24 px
h3 or .h3
H3 / Bricolage Grotesque / Medium / 20 px
h4 or .h4
H4 / Bricolage Grotesque / Medium / 18 px
.b1
Body Big / DM Sans / Regular / 16 px
.b1-bold
Body Big / DM Sans / Medium / 16 px
.b2
Body Medium / DM Sans / Regular / 14 px (Main Font)
.b2-bold
Body Medium / DM Sans / Medium / 14 px
.b3
Body Small / DM Sans / Regular / 12 px
.b3-bold
Body Small / DM Sans / Medium / 12 px
Icons
Default icon example: (24x24 px black)
<i class="ji ji-ICON_NAME"></i>
Extra parameters (Size):
21x21 px
<i class="ji ji-ICON_NAME ji-21"></i>
28x28 px
<i class="ji ji-ICON_NAME ji-28"></i>
32x32 px
<i class="ji ji-ICON_NAME ji-32"></i>
Extra parameters (Color):
Primary
<i class="ji ji-ICON_NAME ji-primary"></i>
Secondary
<i class="ji ji-ICON_NAME ji-secondary"></i>
Black (default)
<i class="ji ji-ICON_NAME ji-black"></i>
White
<i class="ji ji-ICON_NAME ji-white"></i>
Danger
<i class="ji ji-ICON_NAME ji-danger"></i>
All Icons
location
audio
search
close
keyboard-arrow-up
keyboard-arrow-down
keyboard-arrow-left
keyboard-arrow-right
arrow_down
arrow_left
arrow_right
arrow_up
lang
mic
bell
water
add
barcode
heart_empty
heart
leaf
location
location_ok
photo
camera
symbols
txt
calendar
check_empty
check
simple_check
warning
home
map
map_search
user
shirt
waveform
filter
shout
note
add_note
delete
document
edit
expand
ext_link
feedback
image
info
more
qr
refresh
settings
visibility
visibility_no
Form
Inputs, textareas etc.
Input
<div class="input-field"> <label for="fname">Label:</label> <input type="text" id="fname" placeholder="Text here.."> </div>
Textarea
<div class="input-field"> <label for="t_area">Label:</label> <textarea id="t_area" placeholder="Text here.." rows="3"></textarea> </div>
Select
<div class="input-field"> <label for="select">Label:</label> <select id="select"> <option value="1">Select..</option> <option value="2">Placeholder</option> <option value="3">Placeholder</option> </select> </div>
Search
<div class="input-field"> <div class="input-with-icon"> <input type="search" id="search" placeholder="Search.." oninput="this.classList.toggle('search-has-value', this.value.length > 0)"> <i class="ji ji-close" onclick=" const input = this.closest('.input-with-icon').querySelector('input');input.value = ''; input.classList.remove('search-has-value'); input.focus();"></i> <i class="ji ji-search"></i> </div> </div>
Input with Icon
<div class="input-field"> <div class="input-with-icon"> <input type="text" id="input_icon" placeholder="Text.."> <i class="ji ji-location"></i> </div> </div>
<div class="switch-row"> <span class="switch-label">Notifiche</span> <label class="ios-switch"> <input type="checkbox"> <span class="slider"></span> </label> </div>
<label class="j_checkbox"> <input type="checkbox"> <span class="checkmark"></span> <span>Checkbox</span> </label>
<label class="j_radio"> <input type="radio" name="radio"> <span class="radio_checkmark"></span> <span>Radio Button</span> </label>
Loader
Loader Colors
<div class="loader"></div>
<div class="loader loader-primary"></div>
<div class="loader loader-secondary"></div>
<div class="loader loader-black"></div>
Loader Sizes
loader-12
loader-16
loader-21
no-class (24px)
loader-28
loader-32
loader-36
loader-40
Modal
Modal overlay
HTML
<button class="open-modal-button" onclick="toggleModal()">Open Modal</button> <div id="modal-overlay" class="modal-overlay" onclick="toggleModal(event)"> <div id="modal-content" class="modal-content"> <h3 class="modal-title"> <div class="bg-secondary"> <i class="ji ji-location"></i> </div> Modal Title </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <button onclick="toggleModal(true)">Close</button> </div>
JS
function toggleModal(e) { const overlay = document.getElementById('modal-overlay'); if (!e || e === true) { if (overlay.classList.contains('is-active')) { overlay.classList.remove('is-active'); } else { overlay.classList.add('is-active'); } return; } if (e.target === overlay) { overlay.classList.remove('is-active'); } }
Lists
List style
- Option 1
- Option 2
-
Option 3
- Option 4
- Option 5
-
Option 6
Subtitle
<ul class="list-style"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2 <i class="ji ji-21 ji-keyboard-arrow-right"></i></a></li> <li> <span> Option 3 <div class="switch-row"> <label class="ios-switch"> <input type="checkbox"> <span class="slider"></span> </label> </div> </span> </li> <li class="selected"><a href="#">Option 4</a></li> <li class="selected"><a href="#">Option 5 <i class="ji ji-21 ji-location"></i></a></li> <li><a href="#"> <span> <h4>Option 6</h4> <p class="b3">Subtitle</p> </span> </a> </li> <li> <span> <label class="j_radio"> <span>Option 7</span> <input type="radio" name="radio"> <span class="radio_checkmark"></span> </label> </span> </li> </ul>
Tabs
Multiple tabs navigation