UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Overview

Usage

In order to use the framework, you have to include both CSS and JavaScript into your page.

CSS should be in the header, JavaScript should be before closing body tag.

Latest version

Recent changed components
verticalnav
  | rudywaltz: fix(vertical-nav): restore status from original attribute
input
  | Tamás Bíró: doc(input): removed misplaced numberinput from input doc
slider
  | dkocsis: feat(slider): boundary, use margin instead of border
flexgrid
  | rudywaltz: doc(flexgrid): add xsmall example
header
  | dkocsis: fix(header): flex in IE 11
emptystate
  | dkocsis: fix(emptystate): text overflow in IE max-width
dialog
  | rudywaltz: feat(dialog): v1 version
fullheight
  | rudywaltz: feat(fullheight): no header modifier on body
tokeninput
  | rudywaltz: feat(tokeninput): add different color to conditional type
icons
  | Tamás Bíró: doc(icons): guideline table design
validator
  | Tamás Bíró: doc(validator): guidelines and examples
utility
  | Tamás Bíró: feat(utility): screenheight for integration iframes
buttongroup
  | dkocsis: feat(buttongroup): baseline for different height buttons
datetimepicker
  | Tamás Bíró: fix(datetimepicker): z-index
notice
  | rudywaltz: feat(notice): vce notice
inplaceeditor
  | Tamás Bíró: fix(inplaceeditor): disabled style
datepicker
  | Tamás Bíró: feat(datepicker): no-clear attribute
field
  | rudywaltz: feat(field): indented element
tab
  | dkocsis: feat(tab): badge
multiselect
  | rudywaltz: refactor(multiselect): select design
select
  | Tamás Bíró: feat(select): readonly attribute
daterange
  | Tamás Bíró: feat(daterangepicker): overlay attribute
spinner
  | rudywaltz: feat(spinner): table size
overlay
  | rudywaltz: fix(content-blocks): outsource mixins and variables
button
  | rudywaltz: fix(content-blocks): outsource mixins and variables
radio
  | Tamás Bíró: doc(components): fix duplications in menu
textarea
  | Tamás Bíró: doc(components): fix duplications in menu
mixins
  | gydavid: feat(enhance): init responsive view
numberinput
  | Tamás Bíró: refactor(numberinput): focus rules duplication
bubble
  | dkocsis: feat(slider): focus on line click, easier line click
tooltip
  | gydavid: fix(stylelint): deprecated rules, fix empty lines
compare
  | gydavid: fix(stylelint): deprecated rules, fix empty lines
buttonradio
  | gydavid: fix(stylelint): deprecated rules, fix empty lines
phone
  | gydavid: fix(stylelint): deprecated rules, fix empty lines
calendar
  | gydavid: fix(calendar): lint
timepicker
  | Tamás Bíró: doc(timepicker): props and events
accordion
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
funnelchart
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
card
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
progress
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
carousel
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
ring
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
separator
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
barchart
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
chart
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
snackbar
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
checkbox
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
steps
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
switch
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
label
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
table
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
legend
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
list
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
dropdown
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
emoji
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
toolbox
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
navigation
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
colorpicker
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
upload
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
box
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
fieldset
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
typo
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
colors
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
pagination
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
grid
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
alert
  | Tamás Bíró: doc(search): new tags and hidden components --skip-ci
media
  | rudywaltz: docs(styleguide): webcomponent doc helper
functions
  | rudywaltz: docs(styleguide): webcomponent doc helper
flex
  | Tamás Bíró: feat(flexgrid): new component
criteria
  | David Gyenes: refactor(icon): use new component
fixed
  | davidbarkoczi: refactor(styleguide): remove hbs